feat: added new images

frontend/src/Config/Helpers/Cards/Helpers.elm

@@ -264,56 +264,6 @@ cardMaker device cardable contents =
                             )
                 }
 
-        cardImageMaker : String -> Element msg
-        cardImageMaker image =
-            let
-                mobileImageSize =
-                    [ E.width <| px 45
-                    , E.height <| px 45
-                    ]
-            in
-            el
-                [ alignRight
-                , alignTop
-                , paddingEach
-                    { top = 20
-                    , bottom = 0
-                    , left = 30
-                    , right = 0
-                    }
-                ]
-            <|
-                el
-                    [ D.rounded 100
-                    , D.width 5
-                    , glowDeepDarkGrey
-                    , D.color colourTheme.backgroundDarkGrey
-                    , B.color colourTheme.backgroundDarkGrey
-                    ]
-                <|
-                    E.image
-                        ([ alignRight
-                         , alignTop
-                         , D.rounded 100
-                         , clip
-                         ]
-                            ++ (case ( device.class, device.orientation ) of
-                                    ( Phone, Portrait ) ->
-                                        mobileImageSize
-
-                                    ( Tablet, Portrait ) ->
-                                        mobileImageSize
-
-                                    _ ->
-                                        [ E.width <| px 90
-                                        , E.height <| px 90
-                                        ]
-                               )
-                        )
-                        { src = image
-                        , description = ""
-                        }
-
         cardInner : String -> Maybe String -> List (Element msg) -> Element msg
         cardInner title maybeUrl elements =
             column
@@ -392,15 +342,6 @@ cardMaker device cardable contents =
                         Nothing
                     )
                     [ cardContentMaker content
-                    , case ( device.class, device.orientation ) of
-                        ( Phone, Portrait ) ->
-                            none
-
-                        ( Tablet, Portrait ) ->
-                            none
-
-                        _ ->
-                            cardImageMaker image
                     ]
                 )
                 url
@@ -422,15 +363,6 @@ cardMaker device cardable contents =
                 cardInner title
                     Nothing
                     [ cardContentMaker content
-                    , case ( device.class, device.orientation ) of
-                        ( Phone, Portrait ) ->
-                            none
-
-                        ( Tablet, Portrait ) ->
-                            none
-
-                        _ ->
-                            cardImageMaker image
                     ]
 
         cardWithNoImage : String -> List (Element msg) -> Element msg

frontend/src/Config/Style/Images.elm

@@ -37,5 +37,8 @@ imageSizer size =
         "Medium" ->
             45
 
-        _ ->
+        "Smallish" ->
             35
+
+        _ ->
+            28

frontend/src/Pages/Debate/Cucklist.elm

@@ -152,7 +152,7 @@ contentList device cuck =
                 [ alignRight
                 , alignTop
                 , paddingEach
-                    { top = 0
+                    { top = 3
                     , right = 10
                     , bottom = 0
                     , left = 0
@@ -164,13 +164,13 @@ contentList device cuck =
     [ row [ width fill ]
         [ case ( device.class, device.orientation ) of
             ( Phone, Portrait ) ->
-                image "Small"
+                image "Smallish"
 
             ( Tablet, Portrait ) ->
-                image "Small"
+                image "Smallish"
 
             _ ->
-                image "Fatty"
+                image "Medium"
         , column
             [ width fill
             , spacing 3

frontend/src/Pages/Interviews.elm

@@ -13,6 +13,7 @@ import Config.Helpers.Format
 import Config.Helpers.Headers.Helpers exposing (..)
 import Config.Helpers.Headers.Records exposing (interviewHeader)
 import Config.Helpers.Headers.Types as R exposing (..)
+import Config.Helpers.ImageFolders as M exposing (..)
 import Config.Helpers.Response
     exposing
         ( pageList
@@ -36,6 +37,7 @@ import Config.Pages.Interviews.Records.SigmaNutritionRadio exposing (sigmaNutrit
 import Config.Pages.Interviews.Records.StrenuousLifePodcast exposing (strenuousLifePodcast)
 import Config.Pages.Interviews.Types exposing (..)
 import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Images exposing (imageSquareMaker)
 import Config.Style.Transitions
     exposing
         ( hoverFontDarkOrange
@@ -143,7 +145,7 @@ interviewList device =
             [ [ headerMaker (R.Interviews interviewHeader) ]
             , List.map
                 (\interview ->
-                    cardMaker device (C.Interview interview) (contentList interview)
+                    cardMaker device (C.Interview interview) (contentList device interview)
                 )
                 [ sigmaNutritionRadio
                 , markBellsPowerProject
@@ -158,10 +160,67 @@ interviewList device =
             ]
 
 
-contentList : Interview -> List (Element msg)
+contentList : Device -> Interview -> List (Element msg)
-contentList interview =
+contentList device interview =
-    [ appearanceTitle interview
+    let
-    , appearanceMaker interview
+        image : String -> Element msg
+        image size =
+            el
+                [ alignLeft
+                , alignTop
+                , paddingEach
+                    { top = 0
+                    , right = 8
+                    , bottom = 0
+                    , left = 0
+                    }
+                ]
+            <|
+                imageSquareMaker device (imagePathMaker M.Interviews interview.interviewImage) True size
+    in
+    [ row
+        [ paddingEach
+            { top = 3
+            , right = 0
+            , bottom = 0
+            , left = 0
+            }
+        ]
+        [ case ( device.class, device.orientation ) of
+            ( Phone, Portrait ) ->
+                image "Smallish"
+
+            ( Tablet, Portrait ) ->
+                image "Smallish"
+
+            _ ->
+                image "Medium"
+        , column
+            [ width fill
+            ]
+            [ socialMaker interview
+            , appearanceTitle interview
+            ]
+        ]
+    , el
+        [ paddingEach
+            { top = 0
+            , right = 0
+            , bottom = 0
+            , left =
+                case ( device.class, device.orientation ) of
+                    ( Phone, Portrait ) ->
+                        5
+
+                    ( Tablet, Portrait ) ->
+                        5
+
+                    _ ->
+                        55
+            }
+        ]
+      <|
+        appearanceMaker interview
     ]
 
 
@@ -173,8 +232,7 @@ socialMaker interview =
         , F.bold
         , headerFontSizeSmall
         ]
-        [ text "Social: "
+        [ newTabLink
-        , newTabLink
             [ paragraphFontSize
             , F.color colourTheme.textLightOrange
             ]
@@ -203,7 +261,7 @@ appearanceTitle interview =
 
 appearanceMaker : Interview -> Element msg
 appearanceMaker interview =
-    column [ spacing 15, width fill ] <|
+    column [ spacing 10, width fill ] <|
         List.map2 (\x y -> makeAppearance x y)
             interview.interviewAppearances
             (List.range 1 (List.length interview.interviewAppearances))
@@ -218,12 +276,12 @@ makeAppearance appearanceEntry index =
     <|
         row
             [ E.width fill
-            , spacing 5
+            , spacing 3
             ]
             [ el
                 [ F.color colourTheme.textLightGrey
                 , paragraphSpacing
-                , headerFontSizeSmall
+                , paragraphFontSize
                 , F.bold
                 , alignTop
                 , F.alignRight
@@ -231,8 +289,8 @@ makeAppearance appearanceEntry index =
               <|
                 text (String.fromInt index ++ ". ")
             , column
-                [ spacing 8
+                [ width fill
-                , width fill
+                , spacing 3
                 ]
                 [ episodeMaker appearanceEntry
                 , experienceMaker appearanceEntry
@@ -383,7 +441,7 @@ subjectMaker appearanceEntry =
 subjectList : Appearance -> Element msg
 subjectList appearanceEntry =
     column
-        [ spacing 8
+        [ spacing 5
         , width fill
         , paddingEach
             { top = 0