feat: standardized formatting conventions across pages

frontend/src/Config/CardFormat.elm

@@ -0,0 +1,133 @@
+module Config.CardFormat exposing (..)
+
+import Config.Colour exposing (..)
+import Config.Format exposing (..)
+import Cuckery.Types exposing (..)
+import Effect exposing (Effect)
+import Element as E exposing (..)
+import Element.Background as B exposing (..)
+import Element.Border as D
+import Element.Font as F
+import Html.Attributes as H exposing (style)
+import Layouts
+import Page exposing (Page)
+import Route exposing (Route)
+import Shared
+import View exposing (View)
+
+
+topLevelBox =
+    [ spacing 20
+    , E.width fill
+    , E.height fill
+    , E.alignTop
+    , E.alignRight
+    ]
+
+
+cardMaker : List (Element msg) -> Element msg
+cardMaker =
+    column
+        [ E.width <| px 650
+        , D.width 5
+        , D.color colourTheme.cardBackground
+        , D.roundEach
+            { topLeft = 32
+            , topRight = 32
+            , bottomRight = 32
+            , bottomLeft = 32
+            }
+        ]
+
+
+cardFormatter : List (Element msg) -> Element msg
+cardFormatter =
+    column
+        [ E.height fill
+        , E.width fill
+        , B.color colourTheme.cardBackground
+        , paddingEach
+            { top = 10
+            , bottom = 10
+            , left = 10
+            , right = 10
+            }
+        , D.roundEach
+            { topLeft = 0
+            , topRight = 0
+            , bottomRight = 26
+            , bottomLeft = 26
+            }
+        , spacing 8
+        ]
+
+
+cardContentSpacing : List (Element msg) -> Element msg
+cardContentSpacing =
+    column
+        [ paddingEach
+            { top = 0
+            , bottom = 0
+            , left = 15
+            , right = 15
+            }
+        , spacing 8
+        , width fill
+        ]
+
+
+cardImageMaker : { src : String, description : String } -> Element msg
+cardImageMaker image =
+    column
+        [ E.width <| px 115
+        , E.height <| px 115
+        , alignTop
+        , alignRight
+        ]
+        [ column
+            [ D.rounded 100
+            , D.width 5
+            , D.color colourTheme.cardBackground
+            , B.color colourTheme.cardBackground
+            ]
+            [ E.image
+                [ alignRight
+                , alignTop
+                , D.rounded 100
+                , clip
+                , E.width <| px 90
+                , E.height <| px 90
+                ]
+                image
+            ]
+        ]
+
+
+cardTitleMaker : String -> Element msg
+cardTitleMaker title =
+    row
+        (nonHighlightedTitleFormat
+            ++ [ F.size 20
+               , B.color colourTheme.highlightTextHover
+               , paddingEach
+                    { top = 6
+                    , bottom = 3
+                    , left = 25
+                    , right = 15
+                    }
+               , alignBottom
+               , width fill
+               , D.roundEach
+                    { topLeft = 26
+                    , topRight = 26
+                    , bottomRight = 0
+                    , bottomLeft = 0
+                    }
+               ]
+        )
+        [ text title ]
+
+
+fieldSpacer : Attribute msg
+fieldSpacer =
+    spacing 8

frontend/src/Config/Format.elm

@@ -186,6 +186,7 @@ tooltip usher tooltip_ =
             [ E.width fill
             , height fill
             , transparent True
+            , htmlAttribute <| style "transition" "all 0.1s ease-in-out"
             , mouseOver [ transparent False ]
             , (usher << map never) <|
                 el [ htmlAttribute (style "pointerEvents" "none") ]

frontend/src/Config/StrengthBar.elm

@@ -0,0 +1,38 @@
+module Config.StrengthBar exposing (..)
+
+import Config.Colour exposing (..)
+import Config.Format exposing (..)
+import Cuckery.Types exposing (..)
+import Effect exposing (Effect)
+import Element as E exposing (..)
+import Element.Background as B exposing (..)
+import Element.Border as D
+import Element.Font as F
+import Html.Attributes as H exposing (style)
+import Layouts
+import Page exposing (Page)
+import Route exposing (Route)
+import Shared
+import View exposing (View)
+
+
+barMaker : (Int -> String) -> Int -> Element msg
+barMaker getTooltip num =
+    el
+        ([ E.height <| px 12
+         , E.width fill
+         , D.rounded 10
+         , D.color colourTheme.nonHighlightedDarkText
+         , D.width 2
+         , B.gradient
+            { angle = 90
+            , steps =
+                List.concat
+                    [ List.repeat num colourTheme.barGreen
+                    , List.repeat (10 - num) colourTheme.barRed
+                    ]
+            }
+         ]
+            ++ [ tooltip below (myTooltip (getTooltip num)) ]
+        )
+        none

frontend/src/Cuckery/Helpers.elm

@@ -1,5 +1,6 @@
 module Cuckery.Helpers exposing (..)
 
+import Config.CardFormat exposing (..)
 import Config.Colour exposing (..)
 import Config.Format exposing (..)
 import Cuckery.Types exposing (..)
@@ -19,94 +20,35 @@ import View exposing (View)
 cuckMaker : Cuck -> Element msg
 cuckMaker cuck =
     row
-        [ spacing 20
+        topLevelBox
-        , width fill
+        [ cardImageMaker (cuckImage cuck)
-        , E.height fill
+        , cardMaker
-        , alignTop
+            [ cardTitleMaker (cuckTitle cuck)
-        , alignRight
+            , cardFormatter
-        ]
+                [ cardContentSpacing
-        [ imageMaker cuck
+                    [ column
-        , column
+                        [ fieldSpacer
-            [ E.width <| px 650 ]
+                        ]
-            [ cuckTitle cuck
+                        [ socialMaker cuck
-            , column
+                        , dodgeTitle cuck
-                [ E.height fill
+                        , dodgeMaker cuck
-                , E.width fill
+                        ]
-                , B.color colourTheme.cardBackground
-                , paddingEach
-                    { top = 10
-                    , bottom = 10
-                    , left = 10
-                    , right = 10
-                    }
-                , D.roundEach
-                    { topLeft = 0
-                    , topRight = 0
-                    , bottomRight = 26
-                    , bottomLeft = 26
-                    }
-                , spacing 8
-                ]
-                [ column
-                    [ paddingEach
-                        { top = 0
-                        , bottom = 0
-                        , left = 15
-                        , right = 15
-                        }
-                    , spacing 8
-                    ]
-                    [ socialMaker cuck
-                    , dodgeTitle cuck
-                    , dodgeMaker cuck
                     ]
                 ]
             ]
         ]
 
 
-imageMaker : Cuck -> Element msg
+cuckImage : Cuck -> { src : String, description : String }
-imageMaker cuck =
+cuckImage cuck =
-    column
+    { src = "cucks/" ++ cuck.cuckImage ++ "/" ++ cuck.cuckImage ++ ".png"
-        [ E.width <| px 115
+    , description = cuck.cuckName
-        , E.height <| px 115
+    }
-        , alignTop
-        , alignRight
-        ]
-        [ column
-            [ D.rounded 100
-            , D.width 5
-            , D.color colourTheme.cardBackground
-            , B.color colourTheme.cardBackground
-            ]
-            [ E.image
-                [ alignRight
-                , alignTop
-                , D.rounded 100
-                , clip
-                , E.width <| px 90
-                , E.height <| px 90
-                ]
-                { src = "cucks/" ++ cuck.cuckImage ++ "/" ++ cuck.cuckImage ++ ".png"
-                , description = cuck.cuckName
-                }
-            ]
-        ]
 
 
-cuckTitle : Cuck -> Element msg
+cuckTitle : Cuck -> String
 cuckTitle cuck =
-    row
+    cuck.cuckName
-        (nonHighlightedTitleFormat
-            ++ [ F.size 20
-               , B.color colourTheme.highlightTextHover
-               , paddingEach { top = 6, bottom = 3, left = 25, right = 15 }
-               , alignBottom
-               , width fill
-               , D.roundEach { topLeft = 26, topRight = 26, bottomRight = 0, bottomLeft = 0 }
-               ]
-        )
-        [ text cuck.cuckName ]
 
 
 dodgeMaker : Cuck -> Element msg
@@ -117,16 +59,6 @@ dodgeMaker cuck =
             (List.range 1 (List.length cuck.cuckDodges))
 
 
-dodgeTitle : Cuck -> Element msg
-dodgeTitle cuck =
-    row
-        (paragraphBoldFormat
-            ++ [ F.size 18
-               ]
-        )
-        [ text "Dodges:" ]
-
-
 socialMaker : Cuck -> Element msg
 socialMaker cuck =
     row
@@ -143,6 +75,16 @@ socialMaker cuck =
         ]
 
 
+dodgeTitle : Cuck -> Element msg
+dodgeTitle cuck =
+    row
+        (paragraphBoldFormat
+            ++ [ F.size 18
+               ]
+        )
+        [ text "Dodges:" ]
+
+
 makeDodge : Dodge -> Int -> Element msg
 makeDodge dodgeEntry index =
     column

frontend/src/Debate/Helpers.elm

@@ -1,7 +1,9 @@
 module Debate.Helpers exposing (..)
 
+import Config.CardFormat exposing (..)
 import Config.Colour as T exposing (..)
 import Config.Format as O exposing (..)
+import Config.StrengthBar exposing (..)
 import Debate.Types exposing (..)
 import Effect exposing (Effect)
 import Element as E exposing (..)
@@ -11,6 +13,7 @@ import Element.Events as V exposing (..)
 import Element.Font as F exposing (..)
 import Html exposing (div, hr)
 import Html.Attributes as H exposing (style, title, wrap)
+import Json.Decode exposing (field)
 import Layouts
 import Page exposing (Page)
 import Route exposing (Route)
@@ -21,78 +24,38 @@ import View exposing (View)
 argumentMaker : Argument -> Element msg
 argumentMaker argument =
     row
-        [ spacing 20
+        topLevelBox
-        , E.width fill
+        [ cardImageMaker (argumentImage argument)
-        , E.height fill
+        , cardMaker
-        , E.alignTop
+            [ cardTitleMaker (argumentTitle argument)
-        , E.alignRight
+            , cardFormatter
-        ]
+                [ cardContentSpacing
-        [ imageMaker argument
+                    [ column
-        , column
+                        [ fieldSpacer
-            [ E.width <| px 650
+                        ]
-            , alignTop
+                        [ propositionMaker argument
-            ]
+                        , reductioMaker argument
-            [ column
+                        , summaryMaker argument
-                [ B.color colourTheme.cardBackground
+                        , strengthMaker argument
-                , rounded 26
+                        , tableMaker argument
-                ]
+                        , proofTreeMaker argument
-                [ titleMaker argument
+                        ]
-                , column [ paddingEach { top = 10, right = 30, bottom = 10, left = 30 }, spacing 10 ]
-                    [ propositionMaker argument
-                    , reductioMaker argument
-                    , summaryMaker argument
-                    , strengthMaker argument
-                    , tableMaker argument
-                    , proofTreeMaker argument
                     ]
                 ]
             ]
         ]
 
 
-imageMaker : Argument -> Element msg
+argumentImage : Argument -> { src : String, description : String }
-imageMaker argument =
+argumentImage argument =
-    column
+    { src = "arguments/" ++ argument.argumentImage ++ ".png"
-        [ E.width <| px 115
+    , description = argument.argumentTitle
-        , E.height <| px 115
+    }
-        , E.alignTop
-        , E.alignRight
-        ]
-        [ column
-            [ D.rounded 100
-            , D.width 5
-            , D.color colourTheme.cardBackground
-            , B.color colourTheme.cardBackground
-            ]
-            [ E.image
-                [ E.alignRight
-                , alignTop
-                , D.rounded 100
-                , clip
-                , E.width <| px 90
-                , E.height <| px 90
-                ]
-                { src = "arguments/" ++ argument.argumentImage ++ ".png"
-                , description = argument.argumentTitle
-                }
-            ]
-        ]
 
 
-titleMaker : Argument -> Element msg
+argumentTitle : Argument -> String
-titleMaker argument =
+argumentTitle argument =
-    row
+    argument.argumentTitle
-        (nonHighlightedTitleFormat
-            ++ [ F.size 20
-               , B.color colourTheme.highlightTextHover
-               , paddingEach { top = 6, bottom = 3, left = 25, right = 15 }
-               , alignBottom
-               , E.width fill
-               , D.roundEach { topLeft = 26, topRight = 26, bottomRight = 0, bottomLeft = 0 }
-               ]
-        )
-        [ text argument.argumentTitle
-        ]
 
 
 propositionMaker : Argument -> Element msg
@@ -147,66 +110,6 @@ summaryMaker argument =
 
 strengthMaker : Argument -> Element msg
 strengthMaker argument =
-    let
-        barMaker : Int -> Element msg
-        barMaker num =
-            el
-                [ E.height <| px 12
-                , E.width fill
-                , D.rounded 10
-                , D.color colourTheme.nonHighlightedDarkText
-                , D.width 2
-                , B.gradient
-                    { angle = 90
-                    , steps =
-                        List.concat
-                            [ List.repeat num colourTheme.barGreen
-                            , List.repeat (10 - num) colourTheme.barRed
-                            ]
-                    }
-                , tooltip below (myTooltip (getConfidenceTooltip num))
-                ]
-                none
-
-        getConfidenceTooltip : Int -> String
-        getConfidenceTooltip num =
-            case num of
-                0 ->
-                    "Extremely low. Speculative reasoning."
-
-                1 ->
-                    "Very low. Extremely weak reasoning."
-
-                2 ->
-                    "Low. Weak reasoning."
-
-                3 ->
-                    "Kinda low. Somewhat weak reasoning."
-
-                4 ->
-                    "Below average. More weak than strong."
-
-                5 ->
-                    "Moderate. OK reasoning."
-
-                6 ->
-                    "Above average. More strong than weak."
-
-                7 ->
-                    "Kinda high. Somewhat strong reasoning."
-
-                8 ->
-                    "High. Robust reasoning."
-
-                9 ->
-                    "Very high. Extremely robust reasoning."
-
-                10 ->
-                    "Extremely high. Air tight reasoning."
-
-                _ ->
-                    "Confidence level out of expected range."
-    in
     row [ E.width fill ]
         [ column
             [ E.alignTop, E.alignLeft ]
@@ -215,10 +118,50 @@ strengthMaker argument =
             ]
         , column
             [ E.width fill, E.alignLeft, centerY ]
-            [ barMaker argument.argumentCertainty ]
+            [ barMaker getConfidenceTooltip argument.argumentCertainty ]
         ]
 
 
+getConfidenceTooltip : Int -> String
+getConfidenceTooltip num =
+    case num of
+        0 ->
+            "Extremely low. Speculative reasoning."
+
+        1 ->
+            "Very low. Extremely weak reasoning."
+
+        2 ->
+            "Low. Weak reasoning."
+
+        3 ->
+            "Kinda low. Somewhat weak reasoning."
+
+        4 ->
+            "Below average. More weak than strong."
+
+        5 ->
+            "Moderate. OK reasoning."
+
+        6 ->
+            "Above average. More strong than weak."
+
+        7 ->
+            "Kinda high. Somewhat strong reasoning."
+
+        8 ->
+            "High. Robust reasoning."
+
+        9 ->
+            "Very high. Extremely robust reasoning."
+
+        10 ->
+            "Extremely high. Air tight reasoning."
+
+        _ ->
+            "Confidence level out of expected range."
+
+
 tableMaker : Argument -> Element msg
 tableMaker argument =
     let

frontend/src/Interviews/Episodes/FitAndFurious.elm

@@ -18,6 +18,7 @@ fitAndFurious =
           , appearanceEpisode = "51"
           , appearanceLink = "https://www.youtube.com/watch?v=7I1IJSZIGm0"
           , appearanceExperience = 7
+          , appearanceYear = "January 14th, 2022"
           , appearanceSubjects =
                 [ { subject = "The story behind the Nutri-Dex." }
                 , { subject = "Seed oil consumption and health." }

frontend/src/Interviews/Episodes/FoolproofMastery.elm

@@ -18,6 +18,7 @@ foolproofMastery =
           , appearanceEpisode = "14"
           , appearanceLink = "https://www.youtube.com/watch?v=3w0wvckA1Hw"
           , appearanceExperience = 10
+          , appearanceYear = "February 6th, 2023"
           , appearanceSubjects =
                 [ { subject = "Vegetable oils & health outcomes." }
                 , { subject = "Lipid peroxidation." }
@@ -30,6 +31,7 @@ foolproofMastery =
           , appearanceEpisode = "15"
           , appearanceLink = "https://www.youtube.com/watch?v=9k7COJgwCo4"
           , appearanceExperience = 10
+          , appearanceYear = "February 13th, 2023"
           , appearanceSubjects =
                 [ { subject = "Meat eating in Hong Kong." }
                 , { subject = "Different eating patterns." }

frontend/src/Interviews/Episodes/KetogeeksPodcast.elm

@@ -18,6 +18,7 @@ ketoGeeksPodcast =
           , appearanceEpisode = "78"
           , appearanceLink = "https://ketogeek.libsyn.com/in-defense-of-seed-oils-and-polyunsaturated-fats-nick-hiebert"
           , appearanceExperience = 10
+          , appearanceYear = "March 18th, 2022"
           , appearanceSubjects =
                 [ { subject = "How did you start getting into the seed oil debate?" }
                 , { subject = "What are some common claims made against seed oils?" }

frontend/src/Interviews/Episodes/LegendaryLifePodcast.elm

@@ -17,7 +17,8 @@ legendaryLifePodcast =
         [ { appearanceTitle = "Common Food And Nutrition Myths Debunked"
           , appearanceEpisode = "391"
           , appearanceLink = "https://www.legendarylifepodcast.com/391-5-common-food-and-nutrition-myths-debunked-with-nick-hiebert/c"
-          , appearanceExperience = 10
+          , appearanceExperience = 9
+          , appearanceYear = "March 9th, 2020"
           , appearanceSubjects =
                 [ { subject = "The importance of identifying quality evidence." }
                 , { subject = "Salt doesn’t cost high blood pressure?" }

frontend/src/Interviews/Episodes/MarkBellsPowerProject.elm

@@ -17,7 +17,8 @@ markBellsPowerProject =
         [ { appearanceTitle = "Seed Oils Aren’t as Bad as You May Think"
           , appearanceEpisode = "670"
           , appearanceLink = "https://www.youtube.com/watch?v=omzCi2CGoxo"
-          , appearanceExperience = 1
+          , appearanceExperience = 4
+          , appearanceYear = "Feburary 1st, 2022"
           , appearanceSubjects =
                 [ { subject = "Quick background on seed oils." }
                 , { subject = "How does red meat increase disease risk?" }

frontend/src/Interviews/Episodes/MuscleMemoirsPodcast.elm

@@ -18,6 +18,7 @@ muscleMemoirsPodcast =
           , appearanceEpisode = "11"
           , appearanceLink = "https://www.youtube.com/watch?v=SF1BBOA5FAQ"
           , appearanceExperience = 10
+          , appearanceYear = "March 8th, 2020"
           , appearanceSubjects =
                 [ { subject = "The story behind the Nutri-Dex." }
                 , { subject = "Misconceptions about nutrient density." }
@@ -31,6 +32,7 @@ muscleMemoirsPodcast =
           , appearanceEpisode = "82"
           , appearanceLink = "https://www.youtube.com/watch?v=WfApzH4Dj3M"
           , appearanceExperience = 10
+          , appearanceYear = "May 21st, 2021"
           , appearanceSubjects =
                 [ { subject = "Mechanistic arguments against seed oils." }
                 , { subject = "Linoleic acid consumption and heart disease." }

frontend/src/Interviews/Episodes/SigmaNutritionRadio.elm

@@ -17,7 +17,8 @@ sigmaNutritionRadio =
         [ { appearanceTitle = "Micronutrients, Anti-nutrients, and Non-essential Nutrients"
           , appearanceEpisode = "360"
           , appearanceLink = "https://sigmanutrition.com/episode360/"
-          , appearanceExperience = 1
+          , appearanceExperience = 10
+          , appearanceYear = "November 12th, 2020"
           , appearanceSubjects =
                 [ { subject = "How best to measure nutrient density." }
                 , { subject = "The downsides of maximizing nutrient density." }

frontend/src/Interviews/Episodes/StrenuousLifePodcast.elm

@@ -0,0 +1,30 @@
+module Interviews.Episodes.StrenuousLifePodcast exposing (..)
+
+import Interviews.Types exposing (..)
+
+
+strenuousLifePodcast : Interview
+strenuousLifePodcast =
+    let
+        name : String
+        name =
+            "Strenuous Life Podcast"
+    in
+    { interviewName = name
+    , interviewImage = formatInterviewName name
+    , interviewSocial = "https://www.threads.net/@stephan_kesting"
+    , interviewAppearances =
+        [ { appearanceTitle = "Contrarian Thinking About Nutrition"
+          , appearanceEpisode = "244"
+          , appearanceLink = "https://www.grapplearts.com/contrarian-thinking-about-nutrition-with-nick-hiebert-strenuous-life-podcast-ep-244/"
+          , appearanceExperience = 9
+          , appearanceYear = "December 2nd, 2019"
+          , appearanceSubjects =
+                [ { subject = "The nutrient density of different foods." }
+                , { subject = "The ten all time greatest, most nutrient dense foods." }
+                , { subject = "The ketogenic diet." }
+                , { subject = "Fats vs carbs vs proteins." }
+                ]
+          }
+        ]
+    }

frontend/src/Interviews/Helpers.elm

@@ -1,7 +1,9 @@
 module Interviews.Helpers exposing (..)
 
+import Config.CardFormat exposing (..)
 import Config.Colour exposing (..)
 import Config.Format exposing (..)
+import Config.StrengthBar exposing (..)
 import Cuckery.Types exposing (..)
 import Effect exposing (Effect)
 import Element as E exposing (..)
@@ -20,44 +22,15 @@ import View exposing (View)
 interviewMaker : Interview -> Element msg
 interviewMaker interview =
     row
-        [ spacing 20
+        topLevelBox
-        , width fill
+        [ cardImageMaker (interviewImage interview)
-        , E.height fill
+        , cardMaker
-        , alignTop
+            [ cardTitleMaker (interviewTitle interview)
-        , alignRight
+            , cardFormatter
-        ]
+                [ cardContentSpacing
-        [ imageMaker interview
-        , column
-            [ E.width <| px 650 ]
-            [ nameMaker interview
-            , column
-                [ E.height fill
-                , E.width fill
-                , B.color colourTheme.cardBackground
-                , paddingEach
-                    { top = 10
-                    , bottom = 10
-                    , left = 10
-                    , right = 10
-                    }
-                , D.roundEach
-                    { topLeft = 0
-                    , topRight = 0
-                    , bottomRight = 26
-                    , bottomLeft = 26
-                    }
-                , spacing 3
-                ]
-                [ column
-                    [ paddingEach
-                        { top = 0
-                        , bottom = 0
-                        , left = 15
-                        , right = 15
-                        }
-                    ]
                     [ column
-                        [ spacing 8
+                        [ fieldSpacer
+                        , width fill
                         ]
                         [ socialMaker interview
                         , appearanceTitle interview
@@ -69,58 +42,16 @@ interviewMaker interview =
         ]
 
 
-imageMaker : Interview -> Element msg
+interviewImage : Interview -> { src : String, description : String }
-imageMaker interview =
+interviewImage interview =
-    column
+    { src = "interviews/" ++ interview.interviewImage ++ ".png"
-        [ E.width <| px 115
+    , description = interview.interviewImage
-        , E.height <| px 115
+    }
-        , alignTop
-        , alignRight
-        ]
-        [ column
-            [ D.rounded 100
-            , D.width 5
-            , D.color colourTheme.cardBackground
-            , B.color colourTheme.cardBackground
-            ]
-            [ E.image
-                [ alignRight
-                , alignTop
-                , D.rounded 100
-                , clip
-                , E.width <| px 90
-                , E.height <| px 90
-                ]
-                { src = "interviews/" ++ interview.interviewImage ++ ".png"
-                , description = interview.interviewImage
-                }
-            ]
-        ]
 
 
-nameMaker : Interview -> Element msg
+interviewTitle : Interview -> String
-nameMaker interview =
+interviewTitle interview =
-    row
+    interview.interviewName
-        (nonHighlightedTitleFormat
-            ++ [ F.size 20
-               , paddingEach
-                    { top = 6
-                    , bottom = 3
-                    , left = 25
-                    , right = 15
-                    }
-               , alignBottom
-               , width fill
-               , B.color colourTheme.highlightTextHover
-               , D.roundEach
-                    { topLeft = 26
-                    , topRight = 26
-                    , bottomRight = 0
-                    , bottomLeft = 0
-                    }
-               ]
-        )
-        [ text interview.interviewName ]
 
 
 socialMaker : Interview -> Element msg
@@ -166,7 +97,9 @@ makeAppearance appearanceEntry index =
                ]
         )
         [ appearanceEpisode appearanceEntry index
-        , subjectMaker appearanceEntry index
+        , experienceMaker appearanceEntry
+        , dateMaker appearanceEntry
+        , subjectMaker appearanceEntry
         , subjectList appearanceEntry
         ]
 
@@ -203,8 +136,103 @@ appearanceEpisode appearanceEntry index =
         ]
 
 
-subjectMaker : Appearance -> Int -> Element msg
+experienceMaker : Appearance -> Element msg
-subjectMaker appearanceEntry index =
+experienceMaker appearanceEntry =
+    row
+        [ width fill
+        , height fill
+        , paddingEach
+            { top = 0
+            , bottom = 0
+            , left = 55
+            , right = 0
+            }
+        ]
+        [ column
+            [ E.alignTop, E.alignLeft ]
+            [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 112 ])
+                [ el [ tooltip below (myTooltip "This represents how pleasant it was to interact with the host(s).") ] (text "Pleasantness:") ]
+            ]
+        , column
+            [ E.width fill, E.alignLeft, centerY, height fill ]
+            [ barMaker getExperienceTooltip appearanceEntry.appearanceExperience ]
+        ]
+
+
+getExperienceTooltip : Int -> String
+getExperienceTooltip num =
+    case num of
+        0 ->
+            "Nightmare. Deliberately malicious."
+
+        1 ->
+            "Toxic. Utter fucking twat(s)."
+
+        2 ->
+            "Hostile. Consistently disruptive."
+
+        3 ->
+            "Belligerent. Consistently disrespectful."
+
+        4 ->
+            "Uncivil. Frequently dismissive."
+
+        5 ->
+            "Neutral. Unremarkable social interaction."
+
+        6 ->
+            "Civil. Slightly considerate."
+
+        7 ->
+            "Pleasant. Genuinely respectful."
+
+        8 ->
+            "Very kind. Consistently supportive."
+
+        9 ->
+            "Compassionate. Went out of their way."
+
+        10 ->
+            "Absolute angel. Perfectly empathetic."
+
+        _ ->
+            "Behavior level out of expected range."
+
+
+dateMaker : Appearance -> Element msg
+dateMaker appearanceEntry =
+    row paragraphBoldFormat
+        [ column
+            [ alignTop
+            , paddingEach
+                { top = 0
+                , right = 0
+                , bottom = 0
+                , left = 55
+                }
+            ]
+            [ text "Published:"
+            ]
+        , column
+            [ alignTop
+            , width fill
+            ]
+            [ paragraph
+                [ F.regular
+                , paddingEach
+                    { top = 0
+                    , right = 0
+                    , bottom = 0
+                    , left = 3
+                    }
+                ]
+                [ text appearanceEntry.appearanceYear ]
+            ]
+        ]
+
+
+subjectMaker : Appearance -> Element msg
+subjectMaker appearanceEntry =
     row paragraphBoldFormat
         [ column
             [ alignTop

frontend/src/Interviews/Types.elm

@@ -13,6 +13,7 @@ type alias Appearance =
     { appearanceEpisode : String
     , appearanceLink : String
     , appearanceTitle : String
+    , appearanceYear : String
     , appearanceExperience : Int
     , appearanceSubjects : List Subjects
     }
@@ -42,3 +43,4 @@ formatInterviewSocial : String -> FormattedInterviewSocial
 formatInterviewSocial name =
     name
         |> String.replace "https://x.com/" "@"
+        |> String.replace "https://www.threads.net/@" "@"

frontend/src/Layouts/Navbar.elm

@@ -164,53 +164,7 @@ view { toContentMsg, model, content } =
                                 ]
                         ]
                     ]
-                , row
+                , footerIcons
-                    [ alignBottom
-                    , E.width fill
-                    , E.height <| px 100
-                    ]
-                    [ row
-                        [ centerX
-                        , centerY
-                        , E.width fill
-                        , E.height fill
-                        , spacing 10
-                        , paddingEach { top = 40, bottom = 10, left = 20, right = 20 }
-                        ]
-                        [ E.image
-                            [ E.width <| px 30
-                            , alignBottom
-                            , centerX
-                            ]
-                            { src = "navbar/gitlab-light.png"
-                            , description = ""
-                            }
-                        , E.image
-                            [ E.width <| px 30
-                            , alignBottom
-                            , centerX
-                            ]
-                            { src = "navbar/twitter-light.png"
-                            , description = ""
-                            }
-                        , E.image
-                            [ E.width <| px 30
-                            , alignBottom
-                            , centerX
-                            ]
-                            { src = "navbar/mastodon-light.png"
-                            , description = ""
-                            }
-                        , E.image
-                            [ E.width <| px 33
-                            , alignBottom
-                            , centerX
-                            ]
-                            { src = "navbar/discord-light.png"
-                            , description = ""
-                            }
-                        ]
-                    ]
                 ]
             , el
                 [ E.width fill
@@ -231,6 +185,49 @@ localhostUrl =
     "http://localhost:1234/"
 
 
+footerIcons : Element msg
+footerIcons =
+    row
+        [ alignBottom
+        , E.width fill
+        , E.height <| px 100
+        ]
+        [ row
+            [ centerX
+            , centerY
+            , E.width fill
+            , E.height fill
+            , spacing 20
+            , paddingEach { top = 40, bottom = 20, left = 20, right = 20 }
+            ]
+          <|
+            List.map
+                footerImageMaker
+                iconList
+        ]
+
+
+footerImageMaker : String -> Element msg
+footerImageMaker name =
+    E.image
+        [ E.width <| px 20
+        , alignBottom
+        , centerX
+        ]
+        { src = "navbar/" ++ name ++ "-light.png"
+        , description = ""
+        }
+
+
+iconList : List String
+iconList =
+    [ "gitlab"
+    , "twitter"
+    , "mastodon"
+    , "discord"
+    ]
+
+
 buttonMaker : String -> Element msg
 buttonMaker name =
     row

frontend/src/Pages/Interviews.elm

@@ -16,6 +16,7 @@ import Interviews.Episodes.LegendaryLifePodcast exposing (legendaryLifePodcast)
 import Interviews.Episodes.MarkBellsPowerProject exposing (markBellsPowerProject)
 import Interviews.Episodes.MuscleMemoirsPodcast exposing (muscleMemoirsPodcast)
 import Interviews.Episodes.SigmaNutritionRadio exposing (sigmaNutritionRadio)
+import Interviews.Episodes.StrenuousLifePodcast exposing (strenuousLifePodcast)
 import Interviews.Helpers exposing (..)
 import Layouts
 import Page exposing (Page)
@@ -111,4 +112,5 @@ interviewList =
             , legendaryLifePodcast
             , muscleMemoirsPodcast
             , fitAndFurious
+            , strenuousLifePodcast
             ]

frontend/src/Services/Helpers.elm

@@ -1,5 +1,6 @@
 module Services.Helpers exposing (..)
 
+import Config.CardFormat exposing (..)
 import Config.Colour exposing (..)
 import Config.Format exposing (..)
 import Effect exposing (Effect)
@@ -8,6 +9,7 @@ import Element.Background as B exposing (..)
 import Element.Border as D
 import Element.Font as F
 import Html.Attributes as H exposing (style)
+import Interviews.Helpers exposing (interviewImage)
 import Layouts
 import Page exposing (Page)
 import Route exposing (Route)
@@ -20,109 +22,39 @@ import View exposing (View)
 serviceMaker : Service -> Element msg
 serviceMaker service =
     row
-        [ spacing 20
+        topLevelBox
-        , E.width fill
+        [ cardImageMaker (serviceImage service)
-        , E.height fill
+        , cardMaker
-        , E.alignTop
+            [ cardTitleMaker (serviceTitle service)
-        , E.alignRight
+            , cardFormatter
-        ]
+                [ cardContentSpacing
-        [ imageMaker service
+                    [ column
-        , column
+                        [ fieldSpacer
-            [ E.width <| px 650 ]
+                        ]
-            [ titleMaker service
+                        [ rateMaker service
-            , column
+                        , descriptionMaker service
-                [ E.height fill
+                        , offeringMaker service
-                , E.width fill
+                        ]
-                , B.color colourTheme.cardBackground
-                , paddingEach
-                    { top = 10
-                    , bottom = 10
-                    , left = 10
-                    , right = 10
-                    }
-                , D.roundEach
-                    { topLeft = 0
-                    , topRight = 0
-                    , bottomRight = 26
-                    , bottomLeft = 26
-                    }
-                , spacing 3
-                ]
-                [ column
-                    [ paddingEach
-                        { top = 0
-                        , bottom = 0
-                        , left = 15
-                        , right = 15
-                        }
-                    , spacing 8
-                    ]
-                    [ rateMaker service
-                    , descriptionMaker service
-                    , offeringMaker service
                     ]
                 ]
             ]
         ]
 
 
-imageMaker : Service -> Element msg
+serviceImage : Service -> { src : String, description : String }
-imageMaker service =
+serviceImage service =
-    column
+    { src = "services/" ++ service.serviceImage ++ ".png"
-        [ E.width <| px 115
+    , description = service.serviceName
-        , E.height <| px 115
+    }
-        , E.alignTop
-        , E.alignRight
-        ]
-        [ column
-            [ D.rounded 100
-            , D.width 5
-            , D.color colourTheme.cardBackground
-            , B.color colourTheme.cardBackground
-            ]
-            [ E.image
-                [ E.alignRight
-                , alignTop
-                , D.rounded 100
-                , clip
-                , E.width <| px 90
-                , E.height <| px 90
-                ]
-                { src = "services/" ++ service.serviceImage ++ ".png"
-                , description = service.serviceName
-                }
-            ]
-        ]
 
 
-titleMaker : Service -> Element msg
+serviceTitle : Service -> String
-titleMaker service =
+serviceTitle service =
-    row
+    service.serviceName
-        (nonHighlightedTitleFormat
-            ++ [ F.size 20
-               , B.color colourTheme.highlightTextHover
-               , paddingEach
-                    { top = 6
-                    , bottom = 3
-                    , left = 25
-                    , right = 15
-                    }
-               , alignBottom
-               , E.width fill
-               , D.roundEach
-                    { topLeft = 26
-                    , topRight = 26
-                    , bottomRight = 0
-                    , bottomLeft = 0
-                    }
-               ]
-        )
-        [ text service.serviceName
-        ]
 
 
 serviceWidth =
-    width <| px 80
+    width <| px 45
 
 
 rateMaker : Service -> Element msg