feat: standardized formatting conventions across pages

frontend/src/Config/Identity.elm

@@ -3,6 +3,7 @@ module Config.Identity exposing (..)
 
 type alias PageInput =
     { pageHome : String
+    , pageRoot : String
     , pageContact : String
     , pageDebate : String
     , pageDodgers : String
@@ -17,7 +18,8 @@ type alias PageInput =
 
 pageNames : PageInput
 pageNames =
-    { pageHome = "home"
+    { pageRoot = "home"
+    , pageHome = "upRootHealth"
     , pagePlatforms = "platforms"
     , pageServices = "services"
     , pageDodgers = "cuckList"
@@ -35,6 +37,11 @@ createPageName pageName =
     pageNames.pageHome ++ " :: " ++ pageName
 
 
+rootName : String
+rootName =
+    createPageName pageNames.pageRoot
+
+
 homeName : String
 homeName =
     createPageName pageNames.pageHome

frontend/src/Cuckery/Helpers.elm

@@ -16,9 +16,188 @@ import Shared
 import View exposing (View)
 
 
+cuckMaker : Cuck -> Element msg
+cuckMaker cuck =
+    row
+        [ spacing 20
+        , width fill
+        , E.height fill
+        , alignTop
+        , alignRight
+        ]
+        [ imageMaker cuck
+        , column
+            [ E.width <| px 650 ]
+            [ cuckTitle cuck
+            , 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
+                ]
+                [ column
+                    [ paddingEach
+                        { top = 0
+                        , bottom = 0
+                        , left = 15
+                        , right = 15
+                        }
+                    , spacing 8
+                    ]
+                    [ socialMaker cuck
+                    , dodgeTitle cuck
+                    , dodgeMaker cuck
+                    ]
+                ]
+            ]
+        ]
+
+
+imageMaker : Cuck -> Element msg
+imageMaker cuck =
+    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
+                ]
+                { src = "cucks/" ++ cuck.cuckImage ++ "/" ++ cuck.cuckImage ++ ".png"
+                , description = cuck.cuckName
+                }
+            ]
+        ]
+
+
+cuckTitle : Cuck -> Element msg
+cuckTitle cuck =
+    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 cuck.cuckName ]
+
+
+dodgeMaker : Cuck -> Element msg
+dodgeMaker cuck =
+    column [ spacing 15, width fill ] <|
+        List.map2 (\x y -> makeDodge x y)
+            cuck.cuckDodges
+            (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
+        (paragraphBoldFormat
+            ++ [ F.size 18
+               , spacing 8
+               ]
+        )
+        [ text "Social:"
+        , paragraphLinkFormat
+            { url = cuck.cuckSocial
+            , label = transitionHighlightedLinkHover <| text (formatCuckSocial cuck.cuckSocial)
+            }
+        ]
+
+
 makeDodge : Dodge -> Int -> Element msg
 makeDodge dodgeEntry index =
-    let
+    column
+        (paragraphAlignLeft
+            ++ [ spacing 8
+               , width fill
+               ]
+        )
+        [ row
+            [ width fill
+            , paddingEach
+                { top = 0
+                , right = 0
+                , bottom = 0
+                , left = 35
+                }
+            ]
+            [ column
+                (paragraphFormat
+                    ++ [ F.size 18
+                       , alignTop
+                       , alignRight
+                       , F.alignRight
+                       ]
+                )
+                [ text (String.fromInt index ++ ". ") ]
+            , column
+                [ spacing 8
+                , width fill
+                ]
+                [ circumstanceMaker dodgeEntry
+                , column
+                    [ spacing 8
+                    , width fill
+                    , paddingEach
+                        { top = 0
+                        , right = 0
+                        , bottom = 0
+                        , left = 35
+                        }
+                    ]
+                    [ propositionMaker dodgeEntry
+                    , reductioMaker dodgeEntry
+                    , attitudeMaker dodgeEntry
+                    , reasonMaker dodgeEntry
+                    ]
+                ]
+            ]
+        ]
+
+
+dodgeWidth =
+    width <| px 93
+
+
 formatProposition : String -> String
 formatProposition proposition =
     if proposition == "N/A" then
@@ -27,8 +206,126 @@ makeDodge dodgeEntry index =
     else
         "\"" ++ proposition ++ "\""
 
-        maybeFallacyField : Element msg
+
-        maybeFallacyField =
+dodgeCounter : Int -> Element msg
+dodgeCounter index =
+    column
+        (paragraphFormat
+            ++ [ F.size 18
+               ]
+        )
+        [ text (String.fromInt index ++ ". ") ]
+
+
+circumstanceMaker : Dodge -> Element msg
+circumstanceMaker dodgeEntry =
+    column
+        [ width fill
+        ]
+        [ paragraphLinkFormat
+            { url = dodgeEntry.dodgeLink
+            , label =
+                row [ F.size 18 ]
+                    [ transitionHighlightedLinkHover <|
+                        text
+                            (case dodgeEntry.dodgeDescription of
+                                NoReply ->
+                                    "Debate invitation extended with no response"
+
+                                RanAway ->
+                                    "Engaged in written debate and ran away when cornered"
+
+                                GhostedMe ->
+                                    "Debate invitation accepted with no follow-up"
+
+                                OutrightNo ->
+                                    "Debate invitation declined"
+
+                                InTooDeep ->
+                                    "Debate invitation accepted and subsequently retracted"
+
+                                KillScreen ->
+                                    "All further debate invitations preemptively declined"
+
+                                VagueGesture ->
+                                    "Chose to gesture vaguely instead of engaging"
+                            )
+                    , text "." |> el [ F.color colourTheme.nonHighlightedText ]
+                    , row [ alignTop, alignLeft ]
+                        (List.indexedMap
+                            (\index2 link ->
+                                newTabLink
+                                    [ paddingEach
+                                        { top = 0
+                                        , right = 15
+                                        , bottom = 0
+                                        , left = 5
+                                        }
+                                    , F.size 13
+                                    ]
+                                    { url = link
+                                    , label =
+                                        row []
+                                            [ transitionHighlightedLinkHover <| (text (String.fromInt (index2 + 1)) |> el [ F.size 13 ])
+                                            , text ", " |> el [ F.color colourTheme.nonHighlightedText ]
+                                            ]
+                                    }
+                            )
+                            dodgeEntry.dodgeReceipts
+                        )
+                    ]
+            }
+        ]
+
+
+propositionMaker : Dodge -> Element msg
+propositionMaker dodgeEntry =
+    row paragraphBoldFormat
+        [ column [ alignTop, dodgeWidth ]
+            [ text "Proposition:"
+            ]
+        , column
+            [ E.width fill
+            , alignLeft
+            ]
+            [ paragraph [ F.regular ] [ text (formatProposition dodgeEntry.dodgeProposition) ]
+            ]
+        ]
+
+
+attitudeMaker : Dodge -> Element msg
+attitudeMaker dodgeEntry =
+    row (paragraphBoldFormat ++ [ width fill ])
+        [ column [ alignTop, dodgeWidth ]
+            [ text "Attitude:"
+            ]
+        , column [ E.width fill, alignLeft ]
+            [ case dodgeEntry.dodgeNicksDoxasticState of
+                Nothing ->
+                    paragraph [ F.regular ] [ text "I don't form a doxastic state." ]
+
+                Just Belief ->
+                    paragraph [ F.regular ]
+                        [ text "I lean more toward "
+                        , el [ F.bold ] (text "TRUE")
+                        , text " than false."
+                        ]
+
+                Just Disbelief ->
+                    paragraph [ F.regular ]
+                        [ text "I lean more toward "
+                        , text "FALSE" |> el [ F.bold ]
+                        , text " than true."
+                        ]
+
+                Just Agnostic ->
+                    el [ F.regular ] (text "I don't form beliefs about this proposition.")
+            ]
+        ]
+
+
+reductioMaker : Dodge -> Element msg
+reductioMaker dodgeEntry =
     case dodgeEntry.dodgeFallacy of
         Nothing ->
             none
@@ -72,134 +369,14 @@ makeDodge dodgeEntry index =
                 MotteAndBailey ->
                     displayFallacy "Motte and Bailey"
 
-        displayFallacy : String -> Element msg
+
-        displayFallacy fallacyText =
+reasonMaker : Dodge -> Element msg
-            row paragraphBoldFormat
+reasonMaker dodgeEntry =
-                [ column [ alignTop, width (px 165) ]
+    row (paragraphBoldFormat ++ [ width fill ])
-                    [ text "Fallacy:"
+        [ column [ alignTop, dodgeWidth ]
-                        |> el
+            [ text "Reason:"
-                            [ paddingEach
-                                { top = 0
-                                , right = 0
-                                , bottom = 0
-                                , left = 70
-                                }
-                            ]
             ]
         , column [ E.width fill, alignLeft ]
-                    [ paragraph [ F.regular ]
-                        [ text fallacyText ]
-                    ]
-                ]
-    in
-    column
-        (paragraphAlignLeft
-            ++ [ spacing 3
-               , width fill
-               ]
-        )
-        [ row
-            (paragraphFormat
-                ++ [ F.size 18
-                   , paddingEach
-                        { top = 0
-                        , bottom = 0
-                        , left = 15
-                        , right = 15
-                        }
-                   , E.width fill
-                   ]
-            )
-            [ text "    "
-            , text (String.fromInt index ++ ". ")
-            , paragraphLinkFormat
-                { url = dodgeEntry.dodgeLink
-                , label =
-                    row [ F.size 18 ]
-                        [ transitionHighlightedLinkHover <|
-                            text
-                                (case dodgeEntry.dodgeDescription of
-                                    NoReply ->
-                                        "Debate invitation extended with no response"
-
-                                    RanAway ->
-                                        "Engaged in written debate and ran away when cornered"
-
-                                    GhostedMe ->
-                                        "Debate invitation accepted with no follow-up"
-
-                                    OutrightNo ->
-                                        "Debate invitation declined"
-
-                                    InTooDeep ->
-                                        "Debate invitation accepted and subsequently retracted"
-
-                                    KillScreen ->
-                                        "All further debate invitations preemptively declined"
-
-                                    VagueGesture ->
-                                        "Chose to gesture vaguely instead of engaging"
-                                )
-                        , text "." |> el [ F.color colourTheme.nonHighlightedText ]
-                        , row [ alignTop, alignLeft ]
-                            (List.indexedMap
-                                (\index2 link ->
-                                    newTabLink
-                                        [ paddingEach { top = 0, right = 15, bottom = 0, left = 5 }, F.size 13 ]
-                                        { url = link
-                                        , label =
-                                            row []
-                                                [ transitionHighlightedLinkHover <| (text (String.fromInt (index2 + 1)) |> el [ F.size 13 ])
-                                                , text ", " |> el [ F.color colourTheme.nonHighlightedText ]
-                                                ]
-                                        }
-                                )
-                                dodgeEntry.dodgeReceipts
-                            )
-                        ]
-                }
-            ]
-        , row paragraphBoldFormat
-            [ column [ alignTop, width <| px 165 ]
-                [ text "Proposition:" |> el [ paddingEach { top = 0, right = 15, bottom = 0, left = 70 } ]
-                ]
-            , column [ E.width fill, alignLeft, paddingEach { top = 0, right = 15, bottom = 0, left = 0 } ]
-                [ paragraph [ F.regular ] [ text (formatProposition dodgeEntry.dodgeProposition) ]
-                ]
-            ]
-        , maybeFallacyField
-        , row (paragraphBoldFormat ++ [ width fill ])
-            [ column [ alignTop, width <| px 165 ]
-                [ text "Attitude:" |> el [ paddingEach { top = 0, right = 15, bottom = 0, left = 70 } ]
-                ]
-            , column [ E.width fill, alignLeft, paddingEach { top = 0, right = 15, bottom = 0, left = 0 } ]
-                [ case dodgeEntry.dodgeNicksDoxasticState of
-                    Nothing ->
-                        paragraph [ F.regular ] [ text "I don't form a doxastic state." ]
-
-                    Just Belief ->
-                        paragraph [ F.regular ]
-                            [ text "I lean more toward "
-                            , el [ F.bold ] (text "TRUE")
-                            , text " than false."
-                            ]
-
-                    Just Disbelief ->
-                        paragraph [ F.regular ]
-                            [ text "I lean more toward "
-                            , text "FALSE" |> el [ F.bold ]
-                            , text " than true."
-                            ]
-
-                    Just Agnostic ->
-                        el [ F.regular ] (text "I don't form beliefs about this proposition.")
-                ]
-            ]
-        , row (paragraphBoldFormat ++ [ width fill ])
-            [ column [ alignTop, width <| px 165 ]
-                [ text "Reason:" |> el [ paddingEach { top = 0, right = 0, bottom = 0, left = 70 } ]
-                ]
-            , column [ E.width fill, alignLeft, paddingEach { top = 0, right = 15, bottom = 0, left = 0 } ]
             [ paragraph [ F.regular ]
                 [ text <|
                     case dodgeEntry.dodgeNicksDoxasticReason of
@@ -214,107 +391,16 @@ makeDodge dodgeEntry index =
                 ]
             ]
         ]
-        ]
 
 
-cuckMaker : Cuck -> Element msg
+displayFallacy : String -> Element msg
-cuckMaker cuck =
+displayFallacy fallacyText =
-    row
+    row paragraphBoldFormat
-        [ spacing 20
+        [ column [ alignTop, dodgeWidth ]
-        , width fill
+            [ text "Fallacy:"
-        , E.height fill
-        , alignTop
-        , alignRight
-        ]
-        [ column
-            [ E.width <| px 115
-            , E.height <| px 115
-            , alignTop
-            , alignRight
-            ]
-            [ column
-                [ D.rounded 100
-                , D.width 5
-                , D.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
-                    }
-                ]
-            ]
-        , column
-            [ E.width <| px 600 ]
-            [ 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 }
-
-                       --    , B.gradient
-                       --         { angle = 1.5708
-                       --         , steps =
-                       --             [ colourTheme.highlightTextHover
-                       --             , colourTheme.highlightTextHover
-                       --             , colourTheme.transparent
-                       --             , colourTheme.transparent
-                       --             ]
-                       --         }
-                       ]
-                )
-                [ text cuck.cuckName ]
-            , 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
-
-                -- , B.gradient
-                --     { angle = 1.5708
-                --     , steps =
-                --         [ colourTheme.cardBackground
-                --         , colourTheme.cardBackground
-                --         , colourTheme.transparent
-                --         , colourTheme.transparent
-                --         ]
-                --     }
-                ]
-                [ row
-                    (paragraphBoldFormat
-                        ++ [ F.size 18
-                           , paddingEach { top = 0, bottom = 0, left = 15, right = 15 }
-                           , spacing 5
-                           ]
-                    )
-                    [ text "Social:"
-                    , paragraphLinkFormat
-                        { url = cuck.cuckSocial
-                        , label = transitionHighlightedLinkHover <| text (formatCuckSocial cuck.cuckSocial)
-                        }
-                    ]
-                , row
-                    (paragraphBoldFormat
-                        ++ [ F.size 18
-                           , paddingEach { top = 0, bottom = 0, left = 15, right = 15 }
-                           ]
-                    )
-                    [ text "Dodges:" ]
-                , column [ spacing 8, width fill ] <|
-                    List.map2 (\x y -> makeDodge x y)
-                        cuck.cuckDodges
-                        (List.range 1 (List.length cuck.cuckDodges))
             ]
+        , column [ E.width fill, alignLeft ]
+            [ paragraph [ F.regular ]
+                [ text fallacyText ]
             ]
         ]

frontend/src/Debate/Helpers.elm

@@ -27,37 +27,13 @@ argumentMaker argument =
         , E.alignTop
         , E.alignRight
         ]
-        [ column
+        [ imageMaker argument
-            [ E.width <| px 115
-            , E.height <| px 115
-            , E.alignTop
-            , E.alignRight
-            ]
-            [ column
-                [ D.rounded 100
-                , D.width 5
-                , D.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
-                    }
-                ]
-            ]
         , column
-            [ E.width <| px 600
+            [ E.width <| px 650
             , alignTop
             ]
             [ column
                 [ B.color colourTheme.cardBackground
-                , htmlAttribute <| style "transition" "all .7s ease-in-out"
                 , rounded 26
                 ]
                 [ titleMaker argument
@@ -74,13 +50,42 @@ argumentMaker argument =
         ]
 
 
+imageMaker : Argument -> Element msg
+imageMaker argument =
+    column
+        [ E.width <| px 115
+        , 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
 titleMaker argument =
-    paragraph
+    row
-        (paragraphBoldFormat
+        (nonHighlightedTitleFormat
             ++ [ F.size 20
                , B.color colourTheme.highlightTextHover
-               , paddingEach { top = 6, bottom = 3, left = 30, right = 30 }
+               , paddingEach { top = 6, bottom = 3, left = 25, right = 15 }
                , alignBottom
                , E.width fill
                , D.roundEach { topLeft = 26, topRight = 26, bottomRight = 0, bottomLeft = 0 }
@@ -331,10 +336,9 @@ proofTreeMaker argument =
             [ newTabLink
                 (paragraphBoldFormat
                     ++ [ F.size 18
-                       , F.color colourTheme.backgroundColour
+                       , F.color colourTheme.nonHighlightedText
-                       , B.color colourTheme.highlightText
+                       , B.color colourTheme.highlightTextHover
                        , paddingEach { top = 6, bottom = 2, left = 12, right = 12 }
-                       , D.width 1
                        , D.rounded 10
                        , E.width <| px 105
                        , F.center

frontend/src/Interviews/Helpers.elm

@@ -17,75 +17,6 @@ import Shared
 import View exposing (View)
 
 
-makeSubject : Subjects -> Element msg
-makeSubject subjects =
-    column [ E.width fill, alignLeft ]
-        [ paragraph [ F.regular ]
-            [ text ("‣ " ++ subjects.subject) ]
-        ]
-
-
-makeAppearance : Appearance -> Int -> Element msg
-makeAppearance appearanceEntry index =
-    column
-        (paragraphAlignLeft
-            ++ [ spacing 3
-               , width fill
-               ]
-        )
-        [ row
-            (paragraphFormat
-                ++ [ F.size 18
-                   , paddingEach
-                        { top = 0
-                        , bottom = 0
-                        , left = 15
-                        , right = 15
-                        }
-                   , E.width fill
-                   ]
-            )
-            [ text "    "
-            , text (String.fromInt index ++ ". ")
-            , paragraphLinkFormat
-                { url = appearanceEntry.appearanceLink
-                , label =
-                    row
-                        [ F.size 18
-                        ]
-                        [ text ("#" ++ appearanceEntry.appearanceEpisode ++ ": " ++ appearanceEntry.appearanceTitle)
-                            |> el
-                                [ F.color colourTheme.highlightText
-                                , mouseOver [ F.color colourTheme.highlightTextHover ]
-                                , transitionStyle
-                                ]
-                        ]
-                }
-            ]
-        , row paragraphBoldFormat
-            [ column [ alignTop, width <| px 125 ]
-                [ text "Subjects:"
-                    |> el
-                        [ paddingEach
-                            { top = 0
-                            , right = 0
-                            , bottom = 0
-                            , left = 55
-                            }
-                        ]
-                ]
-            , column
-                [ spacing 8
-                , width fill
-                ]
-              <|
-                List.map2 (\x y -> makeSubject x)
-                    appearanceEntry.appearanceSubjects
-                    (List.range 1 (List.length appearanceEntry.appearanceSubjects))
-            ]
-        ]
-
-
 interviewMaker : Interview -> Element msg
 interviewMaker interview =
     row
@@ -95,7 +26,52 @@ interviewMaker interview =
         , alignTop
         , alignRight
         ]
+        [ 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
+                        ]
+                        [ socialMaker interview
+                        , appearanceTitle interview
+                        , appearanceMaker interview
+                        ]
+                    ]
+                ]
+            ]
+        ]
+
+
+imageMaker : Interview -> Element msg
+imageMaker interview =
+    column
         [ E.width <| px 115
         , E.height <| px 115
         , alignTop
@@ -105,6 +81,7 @@ interviewMaker interview =
             [ D.rounded 100
             , D.width 5
             , D.color colourTheme.cardBackground
+            , B.color colourTheme.cardBackground
             ]
             [ E.image
                 [ alignRight
@@ -119,9 +96,11 @@ interviewMaker interview =
                 }
             ]
         ]
-        , column
+
-            [ E.width <| px 600 ]
+
-            [ row
+nameMaker : Interview -> Element msg
+nameMaker interview =
+    row
         (nonHighlightedTitleFormat
             ++ [ F.size 20
                , paddingEach
@@ -139,56 +118,16 @@ interviewMaker interview =
                     , bottomRight = 0
                     , bottomLeft = 0
                     }
-
-                       --    , B.gradient
-                       --         { angle = 1.5708
-                       --         , steps =
-                       --             [ colourTheme.highlightTextHover
-                       --             , colourTheme.highlightTextHover
-                       --             , colourTheme.transparent
-                       --             , colourTheme.transparent
-                       --             ]
-                       --         }
                ]
         )
         [ text interview.interviewName ]
-            , column
-                [ E.height fill
-                , E.width fill
 
-                , B.color colourTheme.cardBackground
+
-                , paddingEach
+socialMaker : Interview -> Element msg
-                    { top = 10
+socialMaker interview =
-                    , bottom = 10
+    row
-                    , left = 10
-                    , right = 10
-                    }
-                , D.roundEach
-                    { topLeft = 0
-                    , topRight = 0
-                    , bottomRight = 26
-                    , bottomLeft = 26
-                    }
-                , spacing 3
-                -- , B.gradient
-                --     { angle = 1.5708
-                --     , steps =
-                --         [ colourTheme.cardBackground
-                --         , colourTheme.cardBackground
-                --         , colourTheme.transparent
-                --         , colourTheme.transparent
-                --         ]
-                --     }
-                ]
-                [ row
         (paragraphBoldFormat
             ++ [ F.size 18
-                           , paddingEach
-                                { top = 0
-                                , bottom = 0
-                                , left = 15
-                                , right = 15
-                                }
                , spacing 5
                ]
         )
@@ -198,22 +137,119 @@ interviewMaker interview =
             , label = transitionHighlightedLinkHover <| text (formatInterviewSocial interview.interviewSocial)
             }
         ]
-                , row
+
+
+appearanceTitle : Interview -> Element msg
+appearanceTitle interview =
+    row
         (paragraphBoldFormat
             ++ [ F.size 18
-                           , paddingEach
-                                { top = 0
-                                , bottom = 0
-                                , left = 15
-                                , right = 15
-                                }
                ]
         )
         [ text "Appearances:" ]
-                , column [ spacing 8, width fill ] <|
+
+
+appearanceMaker : Interview -> Element msg
+appearanceMaker interview =
+    column [ spacing 15, width fill ] <|
         List.map2 (\x y -> makeAppearance x y)
             interview.interviewAppearances
             (List.range 1 (List.length interview.interviewAppearances))
+
+
+makeAppearance : Appearance -> Int -> Element msg
+makeAppearance appearanceEntry index =
+    column
+        (paragraphAlignLeft
+            ++ [ spacing 8
+               , width fill
+               ]
+        )
+        [ appearanceEpisode appearanceEntry index
+        , subjectMaker appearanceEntry index
+        , subjectList appearanceEntry
+        ]
+
+
+appearanceEpisode : Appearance -> Int -> Element msg
+appearanceEpisode appearanceEntry index =
+    row
+        (paragraphFormat
+            ++ [ F.size 18
+               , E.width fill
+               , paddingEach
+                    { top = 0
+                    , bottom = 0
+                    , left = 35
+                    , right = 0
+                    }
+               ]
+        )
+        [ text (String.fromInt index ++ ". ")
+        , paragraphLinkFormat
+            { url = appearanceEntry.appearanceLink
+            , label =
+                row
+                    [ F.size 18
+                    ]
+                    [ text ("#" ++ appearanceEntry.appearanceEpisode ++ ": " ++ appearanceEntry.appearanceTitle)
+                        |> el
+                            [ F.color colourTheme.highlightText
+                            , mouseOver [ F.color colourTheme.highlightTextHover ]
+                            , transitionStyle
                             ]
                     ]
+            }
+        ]
+
+
+subjectMaker : Appearance -> Int -> Element msg
+subjectMaker appearanceEntry index =
+    row paragraphBoldFormat
+        [ column
+            [ alignTop
+            , paddingEach
+                { top = 0
+                , right = 0
+                , bottom = 0
+                , left = 55
+                }
+            ]
+            [ text "Subjects:"
+            ]
+        ]
+
+
+subjectList : Appearance -> Element msg
+subjectList appearanceEntry =
+    column
+        [ spacing 8
+        , width fill
+        , paddingEach
+            { top = 0
+            , right = 0
+            , bottom = 0
+            , left = 75
+            }
+        ]
+    <|
+        List.map2 (\x y -> makeSubject x)
+            appearanceEntry.appearanceSubjects
+            (List.range 1 (List.length appearanceEntry.appearanceSubjects))
+
+
+makeSubject : Subjects -> Element msg
+makeSubject subjects =
+    column
+        [ E.width fill
+        , alignLeft
+        , paddingEach
+            { top = 0
+            , right = 0
+            , bottom = 0
+            , left = 8
+            }
+        ]
+        [ paragraph [ F.regular ]
+            [ text ("‣ " ++ subjects.subject) ]
         ]

frontend/src/Layouts/Navbar.elm

@@ -152,7 +152,7 @@ view { toContentMsg, model, content } =
                             ]
                           <|
                             List.map buttonMaker
-                                [ pageNames.pageHome
+                                [ pageNames.pageRoot
                                 , pageNames.pageServices
                                 , pageNames.pageHyperBlog
                                 , pageNames.pageDebate

frontend/src/Services/Helpers.elm

@@ -4,6 +4,7 @@ import Config.Colour exposing (..)
 import Config.Format 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)
@@ -18,24 +19,176 @@ import View exposing (View)
 
 serviceMaker : Service -> Element msg
 serviceMaker service =
-    row [ spacing 20 ]
+    row
-        [ column [ alignTop, alignRight, width <| px 100 ]
+        [ spacing 20
-            [ image
+        , E.width fill
-                [ width <| px 100, alignTop, alignRight ]
+        , E.height fill
-                { src = "services/" ++ service.logoImage ++ ".png"
+        , E.alignTop
-                , description = service.logoDescription
+        , E.alignRight
+        ]
+        [ imageMaker service
+        , column
+            [ E.width <| px 650 ]
+            [ titleMaker service
+            , 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
+                        }
+                    , spacing 8
+                    ]
+                    [ rateMaker service
+                    , descriptionMaker service
+                    , offeringMaker service
+                    ]
+                ]
+            ]
+        ]
+
+
+imageMaker : Service -> Element msg
+imageMaker service =
+    column
+        [ E.width <| px 115
+        , 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
                 }
             ]
-        , column [ width <| px 500, spacing 3 ]
+        ]
-            [ row [ spacing 10 ]
+
-                [ newTabLink highlightedTitleFormat
+
-                    { url = service.servicesLink
+titleMaker : Service -> Element msg
-                    , label =
+titleMaker service =
-                        transitionHighlightedLinkHover <|
+    row
-                            text service.servicesTitle
+        (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
                     }
-                , paragraph [ F.color colourTheme.nonHighlightedText ] [ text service.servicesRate ]
                ]
-            , paragraph paragraphFormat [ text service.servicesDescription ]
+        )
+        [ text service.serviceName
+        ]
+
+
+serviceWidth =
+    width <| px 80
+
+
+rateMaker : Service -> Element msg
+rateMaker service =
+    row
+        (paragraphBoldFormat
+            ++ [ F.size 18
+               , E.width fill
+               ]
+        )
+        [ column
+            [ alignTop
+            , serviceWidth
+            ]
+            [ text "Rate:"
+            ]
+        , column
+            [ E.width fill
+            , alignLeft
+            ]
+            [ paragraph [ F.regular ]
+                [ el [ F.color colourTheme.highlightText ] <|
+                    text service.serviceRate
                 ]
             ]
+        ]
+
+
+descriptionMaker : Service -> Element msg
+descriptionMaker service =
+    row paragraphBoldFormat
+        [ column
+            [ alignTop
+            , width <| px 80
+            ]
+            [ text "Offerings:"
+            ]
+        ]
+
+
+offeringMaker : Service -> Element msg
+offeringMaker service =
+    column
+        [ spacing 8
+        , width fill
+        , paddingEach
+            { top = 0
+            , right = 0
+            , bottom = 0
+            , left = 35
+            }
+        ]
+    <|
+        List.map2 (\x y -> makeDescription x)
+            service.serviceDescription
+            (List.range 1 (List.length service.serviceDescription))
+
+
+makeDescription : Description -> Element msg
+makeDescription description =
+    column
+        (paragraphAlignLeft
+            ++ [ spacing 8
+               , width fill
+               ]
+        )
+        [ paragraph [ F.regular ]
+            [ text ("‣ " ++ description.point) ]
+        ]

frontend/src/Services/ServiceList/Coaching/DebateAnalysis.elm

@@ -5,10 +5,11 @@ import Services.Types exposing (..)
 
 servicesDebateAnalysis : Service
 servicesDebateAnalysis =
-    { logoImage = "analysis"
+    { serviceImage = "analysis"
-    , logoDescription = "analysis logo"
+    , serviceLink = "https://the-nutrivore.social/"
-    , servicesLink = "https://the-nutrivore.social/"
+    , serviceName = "Debate Analysis"
-    , servicesTitle = "DEBATE ANALYSIS"
+    , serviceRate = "$80/hr"
-    , servicesRate = "$80/hr"
+    , serviceDescription =
-    , servicesDescription = "Participate in focused one-hour sessions wherein your own recorded debates are analyzed for constructive feedback and advice to help you improve as a debater. You may also participate in mock debates, staged debates, and other exercises to help you get more comfortable with debate and verbal confrontation."
+        [ { point = "Participate in focused one-hour sessions wherein your own recorded debates are analyzed for constructive feedback and advice to help you improve as a debater. You may also participate in mock debates, staged debates, and other exercises to help you get more comfortable with debate and verbal confrontation." }
+        ]
     }

frontend/src/Services/ServiceList/Coaching/DebateTutoring.elm

@@ -5,10 +5,11 @@ import Services.Types exposing (..)
 
 servicesDebateTutoring : Service
 servicesDebateTutoring =
-    { logoImage = "debate"
+    { serviceImage = "debate"
-    , logoDescription = "debate logo"
+    , serviceLink = "https://the-nutrivore.social/"
-    , servicesLink = "https://the-nutrivore.social/"
+    , serviceName = "Debate Coaching"
-    , servicesTitle = "DEBATE COACHING"
+    , serviceRate = "$60/hr"
-    , servicesRate = "$60/hr"
+    , serviceDescription =
-    , servicesDescription = "Participate in a structured course consisting of five one-hour modules, covering critical thinking, debate strategy, propositional logic, and more. Throughout the course you will receive both personalized and generalizable advice on how to improve your debate performance and critical thinking skills."
+        [ { point = "Participate in a structured course consisting of five one-hour modules, covering critical thinking, debate strategy, propositional logic, and more. Throughout the course you will receive both personalized and generalizable advice on how to improve your debate performance and critical thinking skills." }
+        ]
     }

frontend/src/Services/ServiceList/Coaching/NutritionScience.elm

@@ -5,10 +5,11 @@ import Services.Types exposing (..)
 
 servicesNutritionScience : Service
 servicesNutritionScience =
-    { logoImage = "nutrition"
+    { serviceImage = "nutrition"
-    , logoDescription = "nutrition logo"
+    , serviceLink = "https://the-nutrivore.social/"
-    , servicesLink = "https://the-nutrivore.social/"
+    , serviceName = "Nutrition Science"
-    , servicesTitle = "NUTRITION SCIENCE"
+    , serviceRate = "$50/hr"
-    , servicesRate = "$50/hr"
+    , serviceDescription =
-    , servicesDescription = "Participate in a one-hour Q&A session specifically to inquire about nutrition science. Ask questions about research design, methodology, epistemology, and study interpretation. Also, by participating you will also gain access to nutrition science interpretation cheat-sheets that will streamline and simplify the research appraisal process."
+        [ { point = "Participate in a one-hour Q&A session specifically to inquire about nutrition science. Ask questions about research design, methodology, epistemology, and study interpretation. Also, by participating you will also gain access to nutrition science interpretation cheat-sheets that will streamline and simplify the research appraisal process." }
+        ]
     }

frontend/src/Services/ServiceList/Creative/ElmBuilds.elm

@@ -6,10 +6,11 @@ import Services.Types exposing (..)
 
 servicesElmBuilds : Service
 servicesElmBuilds =
-    { logoImage = "elm"
+    { serviceImage = "elm"
-    , logoDescription = "elm logo"
+    , serviceLink = ""
-    , servicesLink = ""
+    , serviceName = "Custom Elm Sites"
-    , servicesTitle = "CUSTOM ELM SITES"
+    , serviceRate = "$20/hr"
-    , servicesRate = "$20/hr"
+    , serviceDescription =
-    , servicesDescription = "The site you're looking at right now was designed and written by me in Elm, using Elm-Land and Elm-UI. Elm is a purely functional programming language that compiles to JavaScript. It can also handle HTML and CSS in a purely functional paradigm, resulting in highly reproducible sites that require minimal maintenance."
+        [ { point = "The site you're looking at right now was designed and written by me in Elm, using Elm-Land and Elm-UI. Elm is a purely functional programming language that compiles to JavaScript. It can also handle HTML and CSS in a purely functional paradigm, resulting in highly reproducible sites that require minimal maintenance." }
+        ]
     }

frontend/src/Services/ServiceList/Creative/NixBuilds.elm

@@ -5,10 +5,11 @@ import Services.Types exposing (..)
 
 servicesNixBuilds : Service
 servicesNixBuilds =
-    { logoImage = "nixos"
+    { serviceImage = "nixos"
-    , logoDescription = "nixos logo"
+    , serviceLink = "https://the-nutrivore.social/"
-    , servicesLink = "https://the-nutrivore.social/"
+    , serviceName = "Custom Nix Configs"
-    , servicesTitle = "CUSTOM NIX CONFIGS"
+    , serviceRate = "$40/hr"
-    , servicesRate = "$40/hr"
+    , serviceDescription =
-    , servicesDescription = "NixOS has gained popularity in my community, with many switching from Windows, macOS, and other Linux distros. As a result, I often get requests for help with NixOS and the Nix programming language. To streamline the process and make things easier for both of us, I'm offering custom NixOS configurations for clients."
+        [ { point = "NixOS has gained popularity in my community, with many switching from Windows, macOS, and other Linux distros. As a result, I often get requests for help with NixOS and the Nix programming language. To streamline the process and make things easier for both of us, I'm offering custom NixOS configurations for clients." }
+        ]
     }

frontend/src/Services/Types.elm

@@ -2,10 +2,14 @@ module Services.Types exposing (..)
 
 
 type alias Service =
-    { logoImage : String
+    { serviceImage : String
-    , logoDescription : String
+    , serviceLink : String
-    , servicesLink : String
+    , serviceName : String
-    , servicesTitle : String
+    , serviceRate : String
-    , servicesRate : String
+    , serviceDescription : List Description
-    , servicesDescription : String
+    }
+
+
+type alias Description =
+    { point : String
     }