feat: added new images

frontend/src/Config/Helpers/ServiceFormat.elm

@@ -36,16 +36,14 @@ bodyFormat =
 
 chunkMaker : List (Element msg) -> Element msg
 chunkMaker elements =
-    row [ alignLeft, spacing 10 ]
+    paragraph
-        [ paragraph
+        [ F.color colourTheme.textLightGrey
-            [ F.color colourTheme.textLightGrey
+        , paragraphSpacing
-            , paragraphSpacing
+        , paragraphFontSize
-            , paragraphFontSize
+        , F.alignLeft
-            , F.alignLeft
+        , width fill
-            , width fill
-            ]
-            elements
         ]
+        elements
 
 
 titleMaker : String -> Element msg

frontend/src/Config/Style/Images.elm

@@ -0,0 +1,41 @@
+module Config.Style.Images exposing (..)
+
+import Config.Helpers.ImageFolders exposing (..)
+import Config.Style.Colour exposing (colourTheme)
+import Element as E exposing (..)
+import Element.Background as B exposing (color)
+import Element.Border as D
+    exposing
+        ( color
+        , rounded
+        , width
+        )
+
+
+imageSquareMaker : Device -> String -> Bool -> String -> Element msg
+imageSquareMaker device imagePath isLeft size =
+    E.image
+        [ D.rounded 10
+        , clip
+        , E.width <| px (imageSizer size)
+        , E.height <| px (imageSizer size)
+        ]
+        { src = imagePath
+        , description = ""
+        }
+
+
+imageSizer : String -> Int
+imageSizer size =
+    case size of
+        "Fatty" ->
+            80
+
+        "Big" ->
+            65
+
+        "Medium" ->
+            45
+
+        _ ->
+            35

frontend/src/Pages/Blog.elm

@@ -18,6 +18,7 @@ import Config.Helpers.Format
 import Config.Helpers.Headers.Helpers exposing (..)
 import Config.Helpers.Headers.Records exposing (blogHeader)
 import Config.Helpers.Headers.Types as R exposing (..)
+import Config.Helpers.ImageFolders as M exposing (..)
 import Config.Helpers.Markdown
     exposing
         ( renderDeviceMarkdown
@@ -43,6 +44,7 @@ import Config.Pages.Blog.Records.SweetDeception exposing (articleSweetDeception)
 import Config.Pages.Blog.Types exposing (..)
 import Config.Style.Colour as T exposing (..)
 import Config.Style.Icons.Icons exposing (construction)
+import Config.Style.Images exposing (imageSquareMaker)
 import Effect exposing (Effect)
 import Element as E exposing (..)
 import Element.Background as B
@@ -145,7 +147,7 @@ blogList device =
             [ [ headerMaker (R.BlogPage blogHeader) ]
             , List.map
                 (\article ->
-                    cardMaker device (C.BlogCard article) (contentList article)
+                    cardMaker device (C.BlogCard article) (contentList device article)
                 )
                 [ articleShenanigans
                 , articleSweetDeception
@@ -162,9 +164,9 @@ blogList device =
             ]
 
 
-contentList : BlogArticle -> List (Element msg)
+contentList : Device -> BlogArticle -> List (Element msg)
-contentList article =
+contentList device article =
-    [ articleMaker article ]
+    [ articleMaker device article ]
 
 
 articleImage :
@@ -179,36 +181,62 @@ articleImage article =
     }
 
 
-articleMaker : BlogArticle -> Element msg
+articleMaker : Device -> BlogArticle -> Element msg
-articleMaker article =
+articleMaker device article =
+    let
+        image : String -> Element msg
+        image size =
+            el
+                [ alignLeft
+                , alignTop
+                , paddingEach
+                    { top = 0
+                    , right = 10
+                    , bottom = 0
+                    , left = 0
+                    }
+                ]
+            <|
+                imageSquareMaker device (imagePathMaker M.BlogCard article.articleImage) True size
+    in
     column
         [ E.width fill
         , centerX
-        , spacing 8
         ]
-        [ column
+        [ row
             [ width fill
             ]
-            (articleRows article
+            [ case ( device.class, device.orientation ) of
-                ++ [ row []
+                ( Phone, Portrait ) ->
-                        [ paragraph
+                    none
-                            [ F.color colourTheme.textLightGrey
+
-                            , paragraphSpacing
+                ( Tablet, Portrait ) ->
-                            , paragraphFontSize
+                    none
-                            , spacing 3
+
-                            , F.regular
+                _ ->
-                            , F.alignLeft
+                    image "Big"
-                            , paddingEach
+            , column
-                                { top = 8
+                [ width fill
-                                , bottom = 0
+                , alignTop
-                                , left = 0
+                ]
-                                , right = 0
+                (articleRows article)
-                                }
+            ]
-                            ]
+        , el [] <|
-                            [ renderDeviceMarkdownNoToc (extractFirstWords article.articleBody) ]
+            paragraph
-                        ]
+                [ F.color colourTheme.textLightGrey
-                   ]
+                , paragraphSpacing
-            )
+                , paragraphFontSize
+                , spacing 3
+                , F.regular
+                , F.alignLeft
+                , paddingEach
+                    { top = 8
+                    , bottom = 0
+                    , left = 0
+                    , right = 0
+                    }
+                ]
+                [ renderDeviceMarkdownNoToc (extractFirstWords article.articleBody) ]
         ]
 
 

frontend/src/Pages/Debate.elm

@@ -23,6 +23,7 @@ import Config.Helpers.Format
 import Config.Helpers.Headers.Helpers exposing (..)
 import Config.Helpers.Headers.Records exposing (debateHeader)
 import Config.Helpers.Headers.Types as R exposing (..)
+import Config.Helpers.ImageFolders as M exposing (..)
 import Config.Helpers.Response
     exposing
         ( pageList
@@ -40,6 +41,7 @@ import Config.Style.Glow
         ( glowDeepDarkGrey
         , glowDeepDarkOrange
         )
+import Config.Style.Images exposing (imageSquareMaker)
 import Config.Style.Transitions
     exposing
         ( transitionStyleSlow
@@ -148,7 +150,7 @@ debateList device =
             [ [ headerMaker (R.Debate debateHeader) ]
             , List.map
                 (\debate ->
-                    cardMaker device (C.Debate debate) (contentList debate)
+                    cardMaker device (C.Debate debate) (contentList device debate)
                 )
                 [ debateArguments
                 , debateCuckList
@@ -157,50 +159,68 @@ debateList device =
             ]
 
 
-contentList : Debate -> List (Element msg)
+contentList : Device -> Debate -> List (Element msg)
-contentList debate =
+contentList device debate =
-    [ descriptionMaker debate ]
+    [ descriptionMaker device debate ]
 
 
-descriptionMaker : Debate -> Element msg
+descriptionMaker : Device -> Debate -> Element msg
-descriptionMaker debate =
+descriptionMaker device debate =
-    column [ alignTop ]
+    let
-        [ column
+        image : String -> Element msg
-            [ spacing 3
+        image size =
-            , alignTop
+            el
-            ]
+                [ alignLeft
-            [ row [ spacing 5 ]
+                , paddingEach
-                [ paragraph
+                    { top = 0
-                    [ F.color colourTheme.textLightOrange
+                    , right = 10
-                    , paragraphSpacing
+                    , bottom = 0
-                    , F.bold
+                    , left = 0
-                    , headerFontSizeSmall
+                    }
-                    , E.width fill
-                    ]
-                    [ if debate.debateTitle == "Arguments" then
-                        text "Inferences: "
-
-                      else if debate.debateTitle == "Cucklist" then
-                        text "Cucks: "
-
-                      else if debate.debateTitle == "Gibberish" then
-                        text "Gibberations: "
-
-                      else
-                        text ""
-                    ]
-                , text (String.fromInt debate.debateCount)
-                    |> el
-                        [ F.color colourTheme.textLightGrey
-                        , F.regular
-                        , paragraphFontSize
-                        ]
                 ]
-            , el [ width fill ] <|
+            <|
-                chunkMaker
+                imageSquareMaker device (imagePathMaker M.Debate debate.debateImage) True size
-                    [ text debate.debateDescription
+    in
-                    ]
+    chunkMaker
+        [ image "Fatty"
+        , el [] <|
+            inferenceMaker debate
+        , el [ width fill, height (px 0) ] none
+        , el
+            [ F.color colourTheme.textLightGrey ]
+            (text debate.debateDescription)
+        ]
+
+
+inferenceMaker : Debate -> Element msg
+inferenceMaker debate =
+    row [ spacing 5 ]
+        [ el
+            [ F.color colourTheme.textLightOrange
+            , paragraphSpacing
+            , F.bold
+            , headerFontSizeSmall
             ]
+          <|
+            if debate.debateTitle == "Arguments" then
+                text "Inferences: "
+
+            else if debate.debateTitle == "Cucklist" then
+                text "Cucks: "
+
+            else if debate.debateTitle == "Gibberish" then
+                text "Gibberations: "
+
+            else
+                text ""
+        , el
+            [ F.color colourTheme.textLightGrey
+            , F.regular
+            , paragraphFontSize
+            ]
+          <|
+            text
+                (String.fromInt debate.debateCount)
         ]
 
 

frontend/src/Pages/Debate/Arguments.elm

@@ -37,6 +37,7 @@ import Config.Style.Glow
         ( glowDeepDarkGrey
         , glowDeepDarkOrange
         )
+import Config.Style.Images exposing (imageSquareMaker)
 import Config.Style.Transitions exposing (transitionStyleSlow)
 import Effect exposing (Effect)
 import Element as E exposing (..)
@@ -151,6 +152,22 @@ debateList device =
 
 contentList : Device -> Argument -> List (Element msg)
 contentList device argument =
+    let
+        image : String -> Element msg
+        image size =
+            el
+                [ alignLeft
+                , alignTop
+                , paddingEach
+                    { top = 0
+                    , right = 0
+                    , bottom = 0
+                    , left = 10
+                    }
+                ]
+            <|
+                imageSquareMaker device (imagePathMaker M.Argument argument.argumentImage) False size
+    in
     [ row
         [ width fill
         , paddingEach
@@ -169,7 +186,10 @@ contentList device argument =
             , left = 0
             }
         ]
-        [ column [ width fill, spacing 8 ]
+        [ column
+            [ width fill
+            , spacing 8
+            ]
             [ summaryMakerDesktop device argument
             , strengthBar device argument
             ]
@@ -181,7 +201,7 @@ contentList device argument =
                 none
 
             _ ->
-                argumentImageMaker argument
+                image "Fatty"
         ]
     , tableMaker device argument
     , desktopFormalizationMaker argument
@@ -189,40 +209,6 @@ contentList device argument =
     ]
 
 
-argumentImageMaker : Argument -> Element msg
-argumentImageMaker argument =
-    el
-        [ alignRight
-        , alignTop
-        , centerY
-        , paddingEach
-            { top = 0
-            , right = 0
-            , bottom = 0
-            , left = 20
-            }
-        ]
-    <|
-        el
-            [ D.rounded 10
-            , D.width 3
-            , D.color colourTheme.backgroundLightGrey
-            , B.color colourTheme.backgroundLightGrey
-            ]
-        <|
-            E.image
-                [ alignRight
-                , alignTop
-                , D.rounded 10
-                , clip
-                , E.width <| px 65
-                , E.height <| px 65
-                ]
-                { src = imagePathMaker M.Argument argument.argumentImage
-                , description = ""
-                }
-
-
 proofTreeButton : String -> Element msg
 proofTreeButton url =
     newTabLink

frontend/src/Pages/Debate/Cucklist.elm

@@ -14,6 +14,7 @@ import Config.Helpers.Format
 import Config.Helpers.Headers.Helpers exposing (..)
 import Config.Helpers.Headers.Records exposing (cuckListHeader)
 import Config.Helpers.Headers.Types as R exposing (..)
+import Config.Helpers.ImageFolders as M exposing (..)
 import Config.Helpers.Response
     exposing
         ( pageList
@@ -28,6 +29,7 @@ import Config.Pages.Debate.Cuckery.List
         )
 import Config.Pages.Debate.Cuckery.Types exposing (..)
 import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Images exposing (imageSquareMaker)
 import Config.Style.Transitions
     exposing
         ( hoverFontDarkOrange
@@ -143,28 +145,55 @@ cucksList device =
 
 contentList : Device -> Cuck -> List (Element msg)
 contentList device cuck =
-    [ column
+    let
-        [ width fill
+        image : String -> Element msg
-        , spacing 3
+        image size =
-        , paddingEach
+            el
-            { top =
+                [ alignRight
-                case ( device.class, device.orientation ) of
+                , alignTop
-                    ( Phone, Portrait ) ->
+                , paddingEach
-                        3
+                    { top = 0
+                    , right = 10
+                    , bottom = 0
+                    , left = 0
+                    }
+                ]
+            <|
+                imageSquareMaker device (imagePathMaker M.Cuck cuck.cuckImage) True size
+    in
+    [ row [ width fill ]
+        [ case ( device.class, device.orientation ) of
+            ( Phone, Portrait ) ->
+                image "Small"
 
-                    ( Tablet, Portrait ) ->
+            ( Tablet, Portrait ) ->
-                        3
+                image "Small"
 
-                    _ ->
+            _ ->
-                        0
+                image "Fatty"
-            , right = 0
+        , column
-            , bottom = 0
+            [ width fill
-            , left = 0
+            , spacing 3
-            }
+            , paddingEach
-        ]
+                { top =
-        [ socialMaker cuck
+                    case ( device.class, device.orientation ) of
-        , dodgeTitle cuck
+                        ( Phone, Portrait ) ->
-        , dodgeMaker device cuck
+                            3
+
+                        ( Tablet, Portrait ) ->
+                            3
+
+                        _ ->
+                            0
+                , right = 0
+                , bottom = 0
+                , left = 0
+                }
+            ]
+            [ socialMaker cuck
+            , dodgeTitle cuck
+            , dodgeMaker device cuck
+            ]
         ]
     ]
 
@@ -230,12 +259,20 @@ makeDodge device cuck dodge index =
         ]
         [ row
             [ width fill
-            , paddingEach
+            , case ( device.class, device.orientation ) of
-                { top = 0
+                ( Phone, Portrait ) ->
-                , right = 0
+                    moveLeft 40
-                , bottom = 0
+
-                , left = 10
+                ( Tablet, Portrait ) ->
-                }
+                    moveLeft 40
+
+                _ ->
+                    paddingEach
+                        { top = 0
+                        , right = 0
+                        , bottom = 0
+                        , left = 10
+                        }
             ]
             [ column
                 [ F.color colourTheme.textLightGrey

frontend/src/Pages/Debate/Gibberish.elm

@@ -13,11 +13,13 @@ import Config.Helpers.Format
 import Config.Helpers.Headers.Helpers exposing (..)
 import Config.Helpers.Headers.Records exposing (gibberishHeader)
 import Config.Helpers.Headers.Types as R exposing (..)
+import Config.Helpers.ImageFolders as M exposing (..)
 import Config.Helpers.Response
     exposing
         ( pageList
         , topLevelContainer
         )
+import Config.Helpers.ServiceFormat exposing (chunkMaker)
 import Config.Helpers.StrengthBar
     exposing
         ( barMaker
@@ -36,6 +38,7 @@ import Config.Pages.Debate.Gibberish.Records.PhilOfMind exposing (philOfMindGibb
 import Config.Pages.Debate.Gibberish.Records.Theology exposing (theologyGibberish)
 import Config.Pages.Debate.Gibberish.Types exposing (..)
 import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Images exposing (imageSquareMaker)
 import Effect exposing (Effect)
 import Element as E exposing (..)
 import Element.Background as B
@@ -140,7 +143,7 @@ gibberishList device =
             [ [ headerMaker (R.Gibberish gibberishHeader) ]
             , List.map
                 (\gibberish ->
-                    cardMaker device (C.Gibberish gibberish) (contentList gibberish)
+                    cardMaker device (C.Gibberish gibberish) (contentList device gibberish)
                 )
                 [ epistemologyGibberish
                 , theologyGibberish
@@ -153,9 +156,32 @@ gibberishList device =
             ]
 
 
-contentList : Gibberish -> List (Element msg)
+contentList : Device -> Gibberish -> List (Element msg)
-contentList gibberish =
+contentList device gibberish =
-    [ descriptionMaker gibberish
+    let
+        image : String -> Element msg
+        image size =
+            el
+                [ alignLeft
+                , paddingEach
+                    { top = 0
+                    , right = 10
+                    , bottom = 0
+                    , left = 0
+                    }
+                ]
+            <|
+                imageSquareMaker device (imagePathMaker M.Gibberish gibberish.gibberishImage) True size
+    in
+    [ paragraph
+        [ F.color colourTheme.textLightGrey
+        , paragraphSpacing
+        , paragraphFontSize
+        , width fill
+        ]
+        [ image "Big"
+        , text gibberish.gibberishDescription
+        ]
     , gibberishMakerBody gibberish
     ]
 

frontend/src/Pages/Donate.elm

@@ -12,6 +12,7 @@ import Config.Helpers.Format
 import Config.Helpers.Headers.Helpers exposing (..)
 import Config.Helpers.Headers.Records exposing (donateHeader)
 import Config.Helpers.Headers.Types as R exposing (..)
+import Config.Helpers.ImageFolders as M exposing (..)
 import Config.Helpers.Response
     exposing
         ( pageList
@@ -34,6 +35,7 @@ import Config.Pages.Donate.Records.Stripe exposing (donateStripe)
 import Config.Pages.Donate.Records.YouTube exposing (donateYouTube)
 import Config.Pages.Donate.Types exposing (..)
 import Config.Style.Colour as T exposing (..)
+import Config.Style.Images exposing (imageSquareMaker)
 import Effect exposing (Effect)
 import Element as E exposing (..)
 import Element.Background as B
@@ -151,8 +153,29 @@ donateList device =
 
 contentList : Device -> Donate -> List (Element msg)
 contentList device donate =
-    [ feeMaker donate
+    let
-    , preferenceMaker donate
+        image : String -> Element msg
+        image size =
+            el
+                [ alignLeft
+                , alignTop
+                , paddingEach
+                    { top = 0
+                    , right = 10
+                    , bottom = 0
+                    , left = 0
+                    }
+                ]
+            <|
+                imageSquareMaker device (imagePathMaker M.Donate donate.donateImage) True size
+    in
+    [ row [ width fill ]
+        [ image "Small"
+        , column [ width fill ]
+            [ feeMaker donate
+            , preferenceMaker donate
+            ]
+        ]
     , tableMaker donate device
     , proTitleMaker donate
     , proMaker donate

frontend/src/Pages/Services.elm

@@ -14,6 +14,7 @@ import Config.Helpers.Format
 import Config.Helpers.Headers.Helpers exposing (..)
 import Config.Helpers.Headers.Records exposing (servicesHeader)
 import Config.Helpers.Headers.Types as R exposing (..)
+import Config.Helpers.ImageFolders as M exposing (..)
 import Config.Helpers.Response
     exposing
         ( pageList
@@ -28,6 +29,7 @@ import Config.Pages.Services.Records.NutritionScience exposing (..)
 import Config.Pages.Services.Types exposing (..)
 import Config.Style.Colour as T exposing (..)
 import Config.Style.Glow exposing (glowDeepDarkGrey, glowDeepDarkOrange)
+import Config.Style.Images exposing (imageSquareMaker)
 import Config.Style.Transitions exposing (transitionStyleMedium)
 import Effect exposing (Effect)
 import Element as E exposing (..)
@@ -130,7 +132,7 @@ servicesList device =
               ]
             , List.map
                 (\service ->
-                    cardMaker device (C.Service service) (contentList service)
+                    cardMaker device (C.Service service) (contentList device service)
                 )
                 [ servicesDebateAnalysis
                 , servicesDebateCoaching
@@ -141,10 +143,30 @@ servicesList device =
             ]
 
 
-contentList : Service msg -> List (Element msg)
+contentList : Device -> Service msg -> List (Element msg)
-contentList service =
+contentList device service =
-    [ rateMaker service
+    let
-    , descriptionMaker service
+        image : String -> Element msg
+        image size =
+            el
+                [ alignLeft
+                , paddingEach
+                    { top = 0
+                    , right = 10
+                    , bottom = 0
+                    , left = 0
+                    }
+                ]
+            <|
+                imageSquareMaker device (imagePathMaker M.ServicePage service.serviceImage) True size
+    in
+    [ row []
+        [ image "Small"
+        , column [ alignBottom ]
+            [ rateMaker service
+            , descriptionMaker service
+            ]
+        ]
     , offeringMaker service
     ]
 
@@ -205,12 +227,6 @@ offeringMaker service =
     column
         [ spacing 8
         , width fill
-        , paddingEach
-            { top = 0
-            , right = 0
-            , bottom = 0
-            , left = 35
-            }
         ]
     <|
         List.map2 (\x y -> makeDescription x)