feat: stuff is fucked but I'm too tired to continue tonight

frontend/src/Config/Helpers/Articles/Article.elm

@@ -2,22 +2,7 @@ module Config.Helpers.Articles.Article exposing (..)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Types exposing (References)
-import Config.Helpers.CardFormat
+import Config.Helpers.CardFormat exposing (cardMaker)
-    exposing
-        ( cardContentSpacing
-        , cardFormatter
-        , cardMaker
-        , cardSubTitleMaker
-        , cardTitleMaker
-        , desktopCardMaker
-        , desktopImageBoxSize
-        , desktopImageSize
-        , fieldSpacer
-        , mobileCardMaker
-        , mobileImageBoxSize
-        , mobileImageSize
-        , topLevelBox
-        )
 import Config.Helpers.Format exposing (..)
 import Config.Helpers.Headers.Header exposing (headerMaker)
 import Config.Helpers.Headers.Types exposing (Header)
@@ -59,31 +44,22 @@ import Shared exposing (..)
 import View exposing (View)
 
 
-articleMaker : BlogArticle -> Element msg
+articleMaker : Device -> BlogArticle -> Element msg
-articleMaker article =
+articleMaker device article =
-    column
+    cardMaker device article.articleName (contentList article) { description = "", src = "String" } article.articleLink
-        topLevelBox
-        [ cardMaker
-            [ cardTitleMaker (String.toUpper article.articleName)
-            , cardFormatter
-                [ cardContentSpacing
-                    [ column
-                        fieldSpacer
-                        [ cardSubTitleMaker
-                            [ articleImage article.articleImage
-                            , renderDeviceMarkdown article.articleBody
-                            , case article.hasReferences of
-                                True ->
-                                    articleReferences article
 
-                                False ->
+
-                                    none
+contentList : BlogArticle -> List (Element msg)
-                            ]
+contentList article =
-                        ]
+    [ articleImage article.articleImage
-                    ]
+    , renderDeviceMarkdown article.articleBody
-                ]
+    , case article.hasReferences of
-            ]
+        True ->
-        ]
+            articleReferences article
+
+        False ->
+            none
+    ]
 
 
 articleReferences : BlogArticle -> Element msg

frontend/src/Config/Helpers/CardFormat.elm

@@ -7,7 +7,8 @@ import Config.Data.Identity
 import Config.Helpers.Converters exposing (formatName)
 import Config.Helpers.Format
     exposing
-        ( paragraphFontSize
+        ( headerFontSizeMedium
+        , paragraphFontSize
         , paragraphSpacing
         )
 import Config.Style.Colour exposing (colourTheme)
@@ -29,303 +30,211 @@ import Element.Border as D
 import Element.Font as F
 import Html.Attributes as H
 import Route.Path as Path exposing (..)
+import Shared
 
 
-topLevelBox : List (Attribute msg)
+cardMaker : Device -> String -> List (Element msg) -> { description : String, src : String } -> String -> Element msg
-topLevelBox =
+cardMaker device title content image url =
-    [ E.width fill
+    el
-    , E.height fill
+        [ width (fill |> minimum 100)
-    , E.alignTop
+        , width (fill |> maximum 875)
-    , E.alignRight
-    , padding 10
-    ]
-
-
-cardMaker : List (Element msg) -> Element msg
-cardMaker =
-    column
-        [ E.width fill
-        , D.width 5
-        , D.color colourTheme.backgroundDarkGrey
-        , D.rounded 32
-        , glowDeepDarkGrey
-        ]
-
-
-cardFormatter : List (Element msg) -> Element msg
-cardFormatter =
-    column
-        [ E.height fill
-        , E.width fill
-        , centerX
-        , B.color colourTheme.backgroundDarkGrey
         , padding 10
-        , D.roundEach
-            { topLeft = 0
-            , topRight = 0
-            , bottomRight = 26
-            , bottomLeft = 26
-            }
-        , spacing 8
-        ]
-
-
-cardSubTitleMaker : List (Element msg) -> Element msg
-cardSubTitleMaker =
-    paragraph
-        [ F.color colourTheme.textLightGrey
-        , paragraphSpacing
-        , paragraphFontSize
-        , F.size 18
         , centerX
-        , F.center
         ]
-
+    <|
-
+        if
-cardContentSpacing : List (Element msg) -> Element msg
+            url
-cardContentSpacing =
+                == Path.toString Path.Home_
-    column
+                || url
-        [ paddingEach
+                == Path.toString Path.Contact
-            { top = 0
+                || url
-            , bottom = 0
+                == Path.toString Path.Debate
-            , left = 15
+                || url
-            , right = 15
+                == Path.toString Path.Debate_Arguments
-            }
+                || url
-        , spacing 8
+                == Path.toString Path.Debate_Cucklist
-        , width fill
+                || url
-        ]
+                == Path.toString Path.Debate_Gibberish
-
+                || url
-
+                == Path.toString Path.Donate
-imageTransitionStyle : List (Attribute msg)
+                || url
-imageTransitionStyle =
+                == Path.toString Path.Blog
-    [ D.rounded 100
+                || url
-    , D.width 5
+                == Path.toString Path.Blog_Seedoils
-    , glowDeepDarkGrey
+                || url
-    , D.color colourTheme.backgroundDarkGrey
+                == Path.toString Path.Blog_Huntergatherers
-    , B.color colourTheme.backgroundDarkGrey
+                || url
-    , mouseOver
+                == Path.toString Path.Blog_Sapiendiet
-        [ D.color colourTheme.textDarkOrange
+                || url
-        , B.color colourTheme.textDarkOrange
+                == Path.toString Path.Blog_Nagragoodrich
-        , glowDeepDarkOrange
+                || url
-        ]
+                == Path.toString Path.Blog_Quacksmashing
-    , transitionStyleMedium
+                || url
-    ]
+                == Path.toString Path.Blog_Bigfatsurprise
-
+                || url
-
+                == Path.toString Path.Blog_Everettvegans
-desktopCardMaker :
+                || url
-    List (Attribute msg)
+                == Path.toString Path.Blog_Meatapologetics
-    -> List (Attribute msg)
+                || url
-    ->
+                == Path.toString Path.Blog_Plantbasedmeta
-        { src : String
+                || url
-        , description : String
+                == Path.toString Path.Blog_Shenanigans
-        }
+                || url
-    -> String
+                == Path.toString Path.Blog_Sweetdeception
-    -> Element msg
+                || url
-desktopCardMaker size1 size2 image urlLink =
+                == Path.toString Path.Interviews
-    cardImageMaker size1 size2 image urlLink
+                || url
-
+                == Path.toString Path.Nutridex
-
+                || url
-mobileCardMaker :
+                == Path.toString Path.Services
-    List (Attribute msg)
+                || url
-    -> List (Attribute msg)
+                == Path.toString Path.Services_Analysis
-    ->
+                || url
-        { src : String
+                == Path.toString Path.Services_Coaching
-        , description : String
+                || url
-        }
+                == Path.toString Path.Services_Elm
-    -> String
+                || url
-    -> Element msg
+                == Path.toString Path.Services_Nix
-mobileCardMaker size1 size2 image urlLink =
+                || url
-    cardImageMaker size1 size2 image urlLink
+                == Path.toString Path.Services_Nutrition
-
+        then
-
+            el
-cardImageMaker : List (Attribute msg) -> List (Attribute msg) -> { src : String, description : String } -> String -> Element msg
+                [ E.width fill
-cardImageMaker size1 size2 image urlLink =
+                , D.width 5
-    column
+                , D.color colourTheme.backgroundDarkGrey
-        size1
+                , D.rounded 32
-        [ el
+                , glowDeepDarkGrey
-            imageTransitionStyle
+                , mouseOver
-            (if
+                    [ D.color colourTheme.textDarkOrange
-                urlLink
+                    , B.color colourTheme.textDarkOrange
-                    == Path.toString Path.Home_
+                    , glowDeepDarkOrange
-                    || urlLink
-                    == Path.toString Path.Contact
-                    || urlLink
-                    == Path.toString Path.Debate
-                    || urlLink
-                    == Path.toString Path.Debate_Arguments
-                    || urlLink
-                    == Path.toString Path.Debate_Cucklist
-                    || urlLink
-                    == Path.toString Path.Debate_Gibberish
-                    || urlLink
-                    == Path.toString Path.Donate
-                    || urlLink
-                    == Path.toString Path.Blog
-                    || urlLink
-                    == Path.toString Path.Blog_Seedoils
-                    || urlLink
-                    == Path.toString Path.Blog_Huntergatherers
-                    || urlLink
-                    == Path.toString Path.Blog_Sapiendiet
-                    || urlLink
-                    == Path.toString Path.Blog_Nagragoodrich
-                    || urlLink
-                    == Path.toString Path.Blog_Quacksmashing
-                    || urlLink
-                    == Path.toString Path.Blog_Bigfatsurprise
-                    || urlLink
-                    == Path.toString Path.Blog_Everettvegans
-                    || urlLink
-                    == Path.toString Path.Blog_Meatapologetics
-                    || urlLink
-                    == Path.toString Path.Blog_Plantbasedmeta
-                    || urlLink
-                    == Path.toString Path.Blog_Shenanigans
-                    || urlLink
-                    == Path.toString Path.Blog_Sweetdeception
-                    || urlLink
-                    == Path.toString Path.Interviews
-                    || urlLink
-                    == Path.toString Path.Nutridex
-                    || urlLink
-                    == Path.toString Path.Services
-                    || urlLink
-                    == Path.toString Path.Services_Analysis
-                    || urlLink
-                    == Path.toString Path.Services_Coaching
-                    || urlLink
-                    == Path.toString Path.Services_Elm
-                    || urlLink
-                    == Path.toString Path.Services_Nix
-                    || urlLink
-                    == Path.toString Path.Services_Nutrition
-             then
-                link []
-                    { url = urlLink
-                    , label =
-                        E.image
-                            size2
-                            image
-                    }
-
-             else
-                newTabLink []
-                    { url = urlLink
-                    , label =
-                        E.image
-                            size2
-                            image
-                    }
-            )
-        ]
-
-
-desktopImageSize : List (Attribute msg)
-desktopImageSize =
-    [ alignRight
-    , alignTop
-    , D.rounded 100
-    , clip
-    , E.width <| px 90
-    , E.height <| px 90
-    ]
-
-
-mobileImageSize : List (Attribute msg)
-mobileImageSize =
-    [ D.rounded 100
-    , clip
-    , E.width <| px 45
-    , E.height <| px 45
-    ]
-
-
-desktopImageBoxSize : List (Attribute msg)
-desktopImageBoxSize =
-    [ E.width <| px 115
-    , E.height <| px 115
-    , alignTop
-    , alignRight
-    ]
-
-
-mobileImageBoxSize : List (Attribute msg)
-mobileImageBoxSize =
-    [ alignTop
-    , centerX
-    , alignLeft
-    , paddingEach
-        { top = 0
-        , bottom = 10
-        , left = 0
-        , right = 0
-        }
-    ]
-
-
-cardTitleMaker : String -> Element msg
-cardTitleMaker title =
-    paragraph
-        [ F.size 20
-        , F.bold
-        , F.color colourTheme.textLightGrey
-        , B.color colourTheme.textDarkOrange
-        , paddingEach
-            { top = 6
-            , bottom = 3
-            , left = 0
-            , right = 0
-            }
-        , alignBottom
-        , width fill
-        , centerX
-        , F.center
-        , D.roundEach
-            { topLeft = 26
-            , topRight = 26
-            , bottomRight = 0
-            , bottomLeft = 0
-            }
-        ]
-        [ text title ]
-
-
-fieldSpacer : List (Attribute msg)
-fieldSpacer =
-    [ spacing 8
-    , width fill
-    ]
-
-
-underConstructionMaker : String -> Element msg
-underConstructionMaker name =
-    row
-        topLevelBox
-        [ cardMaker
-            [ cardTitleMaker name
-            , cardFormatter
-                [ cardContentSpacing
-                    [ column
-                        fieldSpacer
-                        [ cardSubTitleMaker
-                            [ column []
-                                [ row
-                                    [ spacing 10
-                                    ]
-                                    [ column [ width <| px 35 ] [ html construction ]
-                                    , column
-                                        [ width fill
-                                        , F.color colourTheme.textLightOrange
-                                        , F.bold
-                                        , alignBottom
-                                        ]
-                                        [ text "under construction"
-                                        ]
-                                    ]
-                                ]
-                            ]
-                        ]
                     ]
+                , transitionStyleSlow
                 ]
-            ]
+            <|
+                link [ width fill ]
+                    { url = url
+                    , label = cardStructure device title content image
+                    }
+
+        else
+            el
+                [ E.width fill
+                , D.width 5
+                , D.color colourTheme.backgroundDarkGrey
+                , D.rounded 32
+                , glowDeepDarkGrey
+                , mouseOver
+                    [ D.color colourTheme.textDarkOrange
+                    , B.color colourTheme.textDarkOrange
+                    , glowDeepDarkOrange
+                    ]
+                , transitionStyleSlow
+                ]
+            <|
+                newTabLink []
+                    { url = url
+                    , label = cardStructure device title content image
+                    }
+
+
+cardStructure : Device -> String -> List (Element msg) -> { description : String, src : String } -> Element msg
+cardStructure device title content image =
+    column
+        [ width fill
+        ]
+        [ el
+            [ headerFontSizeMedium
+            , F.bold
+            , F.color colourTheme.textLightGrey
+            , B.color colourTheme.textDarkOrange
+            , paddingEach
+                { top = 6
+                , bottom = 3
+                , left = 20
+                , right = 20
+                }
+            , width fill
+            , F.center
+            , D.roundEach
+                { topLeft = 26
+                , topRight = 26
+                , bottomRight = 0
+                , bottomLeft = 0
+                }
+            ]
+          <|
+            paragraph [] [ text title ]
+        , el
+            [ E.height fill
+            , E.width fill
+            , centerX
+            , B.color colourTheme.backgroundDarkGrey
+            , padding 10
+            , D.roundEach
+                { topLeft = 0
+                , topRight = 0
+                , bottomRight = 26
+                , bottomLeft = 26
+                }
+            , spacing 8
+            ]
+          <|
+            el
+                [ paddingEach
+                    { top = 0
+                    , bottom = 0
+                    , left = 15
+                    , right = 15
+                    }
+                , spacing 8
+                , width fill
+                ]
+            <|
+                row
+                    [ width fill ]
+                    [ column
+                        [ spacing 8
+                        , width fill
+                        ]
+                        content
+                    , el
+                        [ alignRight
+                        , alignTop
+                        , paddingXY 20 20
+                        ]
+                      <|
+                        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 ) ->
+                                                [ E.width <| px 45
+                                                , E.height <| px 45
+                                                ]
+
+                                            ( Tablet, Portrait ) ->
+                                                [ E.width <| px 45
+                                                , E.height <| px 45
+                                                ]
+
+                                            _ ->
+                                                [ E.width <| px 90
+                                                , E.height <| px 90
+                                                ]
+                                       )
+                                )
+                                image
+                    ]
         ]

frontend/src/Config/Helpers/Headers/Header.elm

@@ -2,29 +2,23 @@ module Config.Helpers.Headers.Header exposing (headerMaker)
 
 import Config.Helpers.CardFormat exposing (..)
 import Config.Helpers.Headers.Types exposing (Header)
+import Config.Pages.Contact.Types exposing (Contact)
 import Element as E
     exposing
-        ( Element
+        ( Device
+        , Element
         , column
         , row
         , text
         )
+import Shared exposing (..)
 
 
-headerMaker : Header -> Element msg
+headerMaker : Device -> Header -> Element msg
-headerMaker header =
+headerMaker device header =
-    row
+    cardMaker device header.headerTitle (contentList header) { description = "", src = "" } ""
-        topLevelBox
+
-        [ cardMaker
+
-            [ cardTitleMaker header.headerTitle
+contentList : Header -> List (Element msg)
-            , cardFormatter
+contentList header =
-                [ cardContentSpacing
+    [ text header.headerBody ]
-                    [ column
-                        fieldSpacer
-                        [ cardSubTitleMaker
-                            [ text header.headerBody ]
-                        ]
-                    ]
-                ]
-            ]
-        ]

frontend/src/Config/Helpers/Response.elm

@@ -3,6 +3,7 @@ module Config.Helpers.Response exposing (..)
 import Config.Style.Colour exposing (colourTheme)
 import Element as E exposing (..)
 import Element.Background as B exposing (color)
+import Html.Attributes exposing (style)
 
 
 topLevelContainer : Element msg -> Element msg
@@ -11,7 +12,6 @@ topLevelContainer =
         [ width fill
         , height fill
         , B.color colourTheme.backgroundLightGrey
-        , scrollbarY
         ]
 
 
@@ -34,7 +34,7 @@ pageListFormat =
     [ spacing 30
     , centerX
     , padding 30
-    , width (fill |> minimum 100)
+    , width fill
-    , width (fill |> maximum 875)
+    , height fill
     , scrollbarY
     ]

frontend/src/Config/Pages/Products/Records/NutriDex.elm

@@ -1,13 +1,14 @@
 module Config.Pages.Products.Records.NutriDex exposing (..)
 
+import Config.Pages.Products.Types exposing (..)
 import Element exposing (..)
 import Element.Font as F exposing (..)
-import Config.Pages.Products.Types exposing (..)
 
 
 productNutriDex : NutriDex
 productNutriDex =
     { nutriDexTitle = "The NutriDex"
+    , hasImage = False
     , nutriDexFeatures =
         [ { feature = "The essential nutrient yields of over 700 foods are ranked and adjusted for bioavailability, nutrient absorption capacity, and metabolic conversion inefficiencies!"
           , featureTitle = "Nutrient Density Scoring: "

frontend/src/Config/Pages/Products/Types.elm

@@ -5,6 +5,7 @@ import Config.Helpers.Articles.Types exposing (References)
 
 type alias NutriDex =
     { nutriDexTitle : String
+    , hasImage : Bool
     , nutriDexFeatures : List Features
     , nutriDexReference : List References
     }

frontend/src/Config/Style/Transitions.elm

@@ -38,6 +38,10 @@ specialNavbarTransition =
     htmlAttribute <| style "transition" "opacity .4s"
 
 
+
+-- This special transition is needed to avoid weird animation sequencing rather in Chrome-based browsers.
+
+
 hoverFontLightOrange : Attribute msg
 hoverFontLightOrange =
     mouseOver [ F.color colourTheme.textLightOrange ]

frontend/src/Layouts/Navbar.elm

@@ -380,6 +380,17 @@ sidebarLogo input =
 
 items : NavbarInput contentMsg -> Element contentMsg
 items input =
+    let
+        navbarUnfucker : List (Attr () msg)
+        navbarUnfucker =
+            [ transparent True
+            , htmlAttribute (style "position" "absolute")
+            , htmlAttribute (style "z-index" "-10")
+            , htmlAttribute (style "opacity" "0")
+            , htmlAttribute (style "pointer-events" "none")
+            , htmlAttribute (style "visibility" "hidden")
+            ]
+    in
     column
         [ scrollbarY
         , height fill
@@ -388,15 +399,37 @@ items input =
     <|
         List.map
             (\x ->
-                makeItem input
+                el
-                    { icon = x.icon
+                    ([ width fill
-                    , isCurrent = x.isCurrent
+                     , transitionStyleMedium
-                    , isNewTabLink = x.isNewTabLink
+                     ]
-                    , isSubscriberOnly = x.isSubscriberOnly
+                        ++ (if input.model.isNavbarExpanded then
-                    , name = x.name
+                                case input.sharedModel.device.class of
-                    , sharedModel = input.sharedModel
+                                    _ ->
-                    , url = x.url
+                                        [ transparent False ]
-                    }
+
+                            else
+                                case input.sharedModel.device.class of
+                                    Phone ->
+                                        navbarUnfucker
+
+                                    Tablet ->
+                                        navbarUnfucker
+
+                                    _ ->
+                                        [ transparent False ]
+                           )
+                    )
+                <|
+                    makeItem input
+                        { icon = x.icon
+                        , isCurrent = x.isCurrent
+                        , isNewTabLink = x.isNewTabLink
+                        , isSubscriberOnly = x.isSubscriberOnly
+                        , name = x.name
+                        , sharedModel = input.sharedModel
+                        , url = x.url
+                        }
             )
             [ { icon = home
               , isCurrent = input.route.path == Path.Home_
@@ -464,6 +497,25 @@ items input =
             ]
 
 
+makeItemLogic : NavbarInput contentMsg -> RowInput contentMsg -> Element contentMsg
+makeItemLogic input route =
+    if input.model.isNavbarExpanded then
+        case input.sharedModel.device.class of
+            _ ->
+                makeItem input route
+
+    else
+        case input.sharedModel.device.class of
+            Phone ->
+                el [] none
+
+            Tablet ->
+                el [] none
+
+            _ ->
+                makeItem input route
+
+
 makeItem : NavbarInput contentMsg -> RowInput contentMsg -> Element contentMsg
 makeItem input route =
     (if route.isNewTabLink then
@@ -555,15 +607,15 @@ makeItem input route =
                                 []
                        )
                 )
-                [ itemIcon route
+                [ itemIcon input route
                 , itemText input route
                 ]
         , url = route.url
         }
 
 
-itemIcon : RowInput contentMsg -> Element contentMsg
+itemIcon : NavbarInput contentMsg -> RowInput contentMsg -> Element contentMsg
-itemIcon route =
+itemIcon input route =
     el
         ([ height <| px 50
          , width <| px 20
@@ -645,6 +697,7 @@ footerItems input =
               , isNewTabLink = True
               , url = "https://x.com/upRootNutrition"
               }
+
             -- , { icon = mastodon
             --   , isNewTabLink = True
             --   , url = "https://social.uprootnutrition.com/@nick"

frontend/src/Pages/Blog.elm

@@ -2,22 +2,7 @@ module Pages.Blog exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (extractFirstWords)
-import Config.Helpers.CardFormat
+import Config.Helpers.CardFormat exposing (cardMaker)
-    exposing
-        ( cardContentSpacing
-        , cardFormatter
-        , cardMaker
-        , cardTitleMaker
-        , desktopCardMaker
-        , desktopImageBoxSize
-        , desktopImageSize
-        , fieldSpacer
-        , mobileCardMaker
-        , mobileImageBoxSize
-        , mobileImageSize
-        , topLevelBox
-        , underConstructionMaker
-        )
 import Config.Helpers.Converters
     exposing
         ( formatName
@@ -155,17 +140,10 @@ blogList device =
         )
     <|
         List.concat
-            [ List.map headerMaker
+            [ List.map (headerMaker device) [ blogHeader ] -- Pass the device to
-                [ blogHeader ]
             , (case ( device.class, device.orientation ) of
-                ( Phone, Portrait ) ->
-                    List.map mobileBlogMaker
-
-                ( Tablet, Portrait ) ->
-                    List.map mobileBlogMaker
-
                 _ ->
-                    List.map desktopBlogMaker
+                    List.map (blogMaker device)
               )
                 [ articleShenanigans
                 , articleSweetDeception
@@ -189,50 +167,18 @@ blogHeader =
             "Blog"
     in
     { headerTitle = String.toUpper name
-    , headerBody = "This page features blog articles written by me, along with contributions from guest authors, covering topics primarily related to nutrition science, health science, and debate."
+    , headerBody = "This page features blog articles written by me, along with contributions from guest authors, covering topics primarily related to nutrition science, health science, and article."
     }
 
 
-desktopBlogMaker : BlogArticle -> Element msg
+blogMaker : Device -> BlogArticle -> Element msg
-desktopBlogMaker article =
+blogMaker device article =
-    row
+    cardMaker device article.articleName (contentList article) (articleImage article) article.articleLink
-        topLevelBox
-        [ desktopCardMaker desktopImageBoxSize desktopImageSize (articleImage article) article.articleLink
-        , cardMaker
-            [ cardTitleMaker article.articleName
-            , cardFormatter
-                [ cardContentSpacing
-                    [ column
-                        fieldSpacer
-                        [ articleMaker article ]
-                    ]
-                ]
-            ]
-        ]
 
 
-mobileBlogMaker : BlogArticle -> Element msg
+contentList : BlogArticle -> List (Element msg)
-mobileBlogMaker article =
+contentList article =
-    row
+    [ articleMaker article ]
-        topLevelBox
-        [ column [] []
-        , cardMaker
-            [ cardTitleMaker article.articleName
-            , cardFormatter
-                [ cardContentSpacing
-                    [ column
-                        fieldSpacer
-                        [ row [ width fill, spacing 10 ]
-                            [ mobileCardMaker mobileImageBoxSize mobileImageSize (articleImage article) article.articleLink
-                            , column
-                                [ width fill ]
-                                [ articleMaker article ]
-                            ]
-                        ]
-                    ]
-                ]
-            ]
-        ]
 
 
 articleImage :

frontend/src/Pages/Blog/Bigfatsurprise.elm

@@ -2,22 +2,6 @@ module Pages.Blog.Bigfatsurprise exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (articleMaker)
-import Config.Helpers.CardFormat
-    exposing
-        ( cardContentSpacing
-        , cardFormatter
-        , cardMaker
-        , cardSubTitleMaker
-        , cardTitleMaker
-        , desktopCardMaker
-        , desktopImageBoxSize
-        , desktopImageSize
-        , fieldSpacer
-        , mobileCardMaker
-        , mobileImageBoxSize
-        , mobileImageSize
-        , topLevelBox
-        )
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response
     exposing
@@ -122,7 +106,7 @@ articleList device =
         List.concat
             [ (case ( device.class, device.orientation ) of
                 _ ->
-                    List.map articleMaker
+                    List.map (articleMaker device)
               )
                 [ articleBigFatSurprise ]
             ]

frontend/src/Pages/Blog/Everettvegans.elm

@@ -2,22 +2,6 @@ module Pages.Blog.Everettvegans exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (articleMaker)
-import Config.Helpers.CardFormat
-    exposing
-        ( cardContentSpacing
-        , cardFormatter
-        , cardMaker
-        , cardSubTitleMaker
-        , cardTitleMaker
-        , desktopCardMaker
-        , desktopImageBoxSize
-        , desktopImageSize
-        , fieldSpacer
-        , mobileCardMaker
-        , mobileImageBoxSize
-        , mobileImageSize
-        , topLevelBox
-        )
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response
     exposing
@@ -122,7 +106,7 @@ articleList device =
         List.concat
             [ (case ( device.class, device.orientation ) of
                 _ ->
-                    List.map articleMaker
+                    List.map (articleMaker device)
               )
                 [ articleEverettVegans ]
             ]

frontend/src/Pages/Blog/Huntergatherers.elm

@@ -2,22 +2,7 @@ module Pages.Blog.Huntergatherers exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (articleMaker)
-import Config.Helpers.CardFormat
+
-    exposing
-        ( cardContentSpacing
-        , cardFormatter
-        , cardMaker
-        , cardSubTitleMaker
-        , cardTitleMaker
-        , desktopCardMaker
-        , desktopImageBoxSize
-        , desktopImageSize
-        , fieldSpacer
-        , mobileCardMaker
-        , mobileImageBoxSize
-        , mobileImageSize
-        , topLevelBox
-        )
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response
     exposing
@@ -122,7 +107,7 @@ articleList device =
         List.concat
             [ (case ( device.class, device.orientation ) of
                 _ ->
-                    List.map articleMaker
+                    List.map (articleMaker device)
               )
                 [ articleHunterGatherers ]
             ]

frontend/src/Pages/Blog/Meatapologetics.elm

@@ -2,22 +2,6 @@ module Pages.Blog.Meatapologetics exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (articleMaker)
-import Config.Helpers.CardFormat
-    exposing
-        ( cardContentSpacing
-        , cardFormatter
-        , cardMaker
-        , cardSubTitleMaker
-        , cardTitleMaker
-        , desktopCardMaker
-        , desktopImageBoxSize
-        , desktopImageSize
-        , fieldSpacer
-        , mobileCardMaker
-        , mobileImageBoxSize
-        , mobileImageSize
-        , topLevelBox
-        )
 import Config.Helpers.Headers.Header exposing (headerMaker)
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response
@@ -123,7 +107,7 @@ articleList device =
         List.concat
             [ (case ( device.class, device.orientation ) of
                 _ ->
-                    List.map articleMaker
+                    List.map (articleMaker device)
               )
                 [ articleMeatApologetics ]
             ]

frontend/src/Pages/Blog/Nagragoodrich.elm

@@ -2,22 +2,6 @@ module Pages.Blog.Nagragoodrich exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (articleMaker)
-import Config.Helpers.CardFormat
-    exposing
-        ( cardContentSpacing
-        , cardFormatter
-        , cardMaker
-        , cardSubTitleMaker
-        , cardTitleMaker
-        , desktopCardMaker
-        , desktopImageBoxSize
-        , desktopImageSize
-        , fieldSpacer
-        , mobileCardMaker
-        , mobileImageBoxSize
-        , mobileImageSize
-        , topLevelBox
-        )
 import Config.Helpers.Headers.Header exposing (headerMaker)
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response
@@ -123,7 +107,7 @@ articleList device =
         List.concat
             [ (case ( device.class, device.orientation ) of
                 _ ->
-                    List.map articleMaker
+                    List.map (articleMaker device)
               )
                 [ articleNagraGoodrich ]
             ]

frontend/src/Pages/Blog/Plantbasedmeta.elm

@@ -2,22 +2,6 @@ module Pages.Blog.Plantbasedmeta exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (articleMaker)
-import Config.Helpers.CardFormat
-    exposing
-        ( cardContentSpacing
-        , cardFormatter
-        , cardMaker
-        , cardSubTitleMaker
-        , cardTitleMaker
-        , desktopCardMaker
-        , desktopImageBoxSize
-        , desktopImageSize
-        , fieldSpacer
-        , mobileCardMaker
-        , mobileImageBoxSize
-        , mobileImageSize
-        , topLevelBox
-        )
 import Config.Helpers.Headers.Header exposing (headerMaker)
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response
@@ -123,7 +107,7 @@ articleList device =
         List.concat
             [ (case ( device.class, device.orientation ) of
                 _ ->
-                    List.map articleMaker
+                    List.map (articleMaker device)
               )
                 [ articlePlantBasedMeta ]
             ]

frontend/src/Pages/Blog/Quacksmashing.elm

@@ -2,22 +2,7 @@ module Pages.Blog.Quacksmashing exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (articleMaker)
-import Config.Helpers.CardFormat
+
-    exposing
-        ( cardContentSpacing
-        , cardFormatter
-        , cardMaker
-        , cardSubTitleMaker
-        , cardTitleMaker
-        , desktopCardMaker
-        , desktopImageBoxSize
-        , desktopImageSize
-        , fieldSpacer
-        , mobileCardMaker
-        , mobileImageBoxSize
-        , mobileImageSize
-        , topLevelBox
-        )
 import Config.Helpers.Headers.Header exposing (headerMaker)
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response
@@ -123,7 +108,7 @@ articleList device =
         List.concat
             [ (case ( device.class, device.orientation ) of
                 _ ->
-                    List.map articleMaker
+                    List.map (articleMaker device)
               )
                 [ articleQuackSmashing ]
             ]

frontend/src/Pages/Blog/Sapiendiet.elm

@@ -2,22 +2,7 @@ module Pages.Blog.Sapiendiet exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (articleMaker)
-import Config.Helpers.CardFormat
+
-    exposing
-        ( cardContentSpacing
-        , cardFormatter
-        , cardMaker
-        , cardSubTitleMaker
-        , cardTitleMaker
-        , desktopCardMaker
-        , desktopImageBoxSize
-        , desktopImageSize
-        , fieldSpacer
-        , mobileCardMaker
-        , mobileImageBoxSize
-        , mobileImageSize
-        , topLevelBox
-        )
 import Config.Helpers.Headers.Header exposing (headerMaker)
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response
@@ -123,7 +108,7 @@ articleList device =
         List.concat
             [ (case ( device.class, device.orientation ) of
                 _ ->
-                    List.map articleMaker
+                    List.map (articleMaker device)
               )
                 [ articleSapienDiet ]
             ]

frontend/src/Pages/Blog/Seedoils.elm

@@ -2,22 +2,7 @@ module Pages.Blog.Seedoils exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (articleMaker)
-import Config.Helpers.CardFormat
+
-    exposing
-        ( cardContentSpacing
-        , cardFormatter
-        , cardMaker
-        , cardSubTitleMaker
-        , cardTitleMaker
-        , desktopCardMaker
-        , desktopImageBoxSize
-        , desktopImageSize
-        , fieldSpacer
-        , mobileCardMaker
-        , mobileImageBoxSize
-        , mobileImageSize
-        , topLevelBox
-        )
 import Config.Helpers.Headers.Header exposing (headerMaker)
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response
@@ -123,7 +108,7 @@ articleList device =
         List.concat
             [ (case ( device.class, device.orientation ) of
                 _ ->
-                    List.map articleMaker
+                    List.map (articleMaker device)
               )
                 [ articleSeedOils ]
             ]

frontend/src/Pages/Blog/Shenanigans.elm

@@ -2,22 +2,7 @@ module Pages.Blog.Shenanigans exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (articleMaker)
-import Config.Helpers.CardFormat
+
-    exposing
-        ( cardContentSpacing
-        , cardFormatter
-        , cardMaker
-        , cardSubTitleMaker
-        , cardTitleMaker
-        , desktopCardMaker
-        , desktopImageBoxSize
-        , desktopImageSize
-        , fieldSpacer
-        , mobileCardMaker
-        , mobileImageBoxSize
-        , mobileImageSize
-        , topLevelBox
-        )
 import Config.Helpers.Headers.Header exposing (headerMaker)
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response
@@ -123,7 +108,7 @@ articleList device =
         List.concat
             [ (case ( device.class, device.orientation ) of
                 _ ->
-                    List.map articleMaker
+                    List.map (articleMaker device)
               )
                 [ articleShenanigans ]
             ]

frontend/src/Pages/Blog/Sweetdeception.elm

@@ -2,22 +2,6 @@ module Pages.Blog.Sweetdeception exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (articleMaker)
-import Config.Helpers.CardFormat
-    exposing
-        ( cardContentSpacing
-        , cardFormatter
-        , cardMaker
-        , cardSubTitleMaker
-        , cardTitleMaker
-        , desktopCardMaker
-        , desktopImageBoxSize
-        , desktopImageSize
-        , fieldSpacer
-        , mobileCardMaker
-        , mobileImageBoxSize
-        , mobileImageSize
-        , topLevelBox
-        )
 import Config.Helpers.Headers.Header exposing (headerMaker)
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response
@@ -123,7 +107,7 @@ articleList device =
         List.concat
             [ (case ( device.class, device.orientation ) of
                 _ ->
-                    List.map articleMaker
+                    List.map (articleMaker device)
               )
                 [ articleSweetDeception ]
             ]

frontend/src/Pages/Contact.elm

@@ -1,22 +1,7 @@
 module Pages.Contact exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
-import Config.Helpers.CardFormat
+import Config.Helpers.CardFormat exposing (cardMaker)
-    exposing
-        ( cardContentSpacing
-        , cardFormatter
-        , cardMaker
-        , cardSubTitleMaker
-        , cardTitleMaker
-        , desktopCardMaker
-        , desktopImageBoxSize
-        , desktopImageSize
-        , fieldSpacer
-        , mobileCardMaker
-        , mobileImageBoxSize
-        , mobileImageSize
-        , topLevelBox
-        )
 import Config.Helpers.Format exposing (..)
 import Config.Helpers.Headers.Header exposing (headerMaker)
 import Config.Helpers.Headers.Types exposing (Header)
@@ -131,42 +116,29 @@ contactContainer device =
 
 contactList : Device -> Element msg
 contactList device =
-    column pageList <|
+    column
+        (case ( device.class, device.orientation ) of
+            _ ->
+                pageList
+        )
+    <|
         List.concat
-            (case ( device.class, device.orientation ) of
+            [ (case ( device.class, device.orientation ) of
                 _ ->
-                    [ [ instructionMaker ] ]
+                    List.map (contactMaker device)
-            )
+              )
-
+                []
-
-contactHeader : Header
-contactHeader =
-    let
-        name =
-            "Contact"
-    in
-    { headerTitle = String.toUpper name
-    , headerBody = "fasdklfjasdlk;fjasdl;fjasdfl;kasjdfl;askdja;lsdkjas;ldfj"
-    }
-
-
-instructionMaker : Element msg
-instructionMaker =
-    row
-        topLevelBox
-        [ cardMaker
-            [ cardTitleMaker (String.toUpper pageNames.pageContact)
-            , cardFormatter
-                [ cardContentSpacing
-                    [ column
-                        fieldSpacer
-                        [ cardSubTitleMaker
-                            [ instructionBody ]
-                        ]
-                    ]
-                ]
             ]
-        ]
+
+
+contactMaker : Device -> Contact -> Element msg
+contactMaker device contact =
+    cardMaker device contact.contactName (contentList contact) { description = "", src = "" } contact.contactLink
+
+
+contentList : Contact -> List (Element msg)
+contentList contact =
+    [ instructionBody ]
 
 
 instructionBody : Element msg

frontend/src/Pages/Debate.elm

@@ -11,21 +11,7 @@ import Config.Data.Identity
     exposing
         ( pageNames
         )
-import Config.Helpers.CardFormat
+import Config.Helpers.CardFormat exposing (cardMaker)
-    exposing
-        ( cardContentSpacing
-        , cardFormatter
-        , cardMaker
-        , cardTitleMaker
-        , desktopCardMaker
-        , desktopImageBoxSize
-        , desktopImageSize
-        , fieldSpacer
-        , mobileCardMaker
-        , mobileImageBoxSize
-        , mobileImageSize
-        , topLevelBox
-        )
 import Config.Helpers.Converters exposing (formatName)
 import Config.Helpers.Format
     exposing
@@ -155,17 +141,11 @@ debateList device =
         )
     <|
         List.concat
-            [ List.map headerMaker
+            [ List.map (headerMaker device)
                 [ debateHeader ]
             , (case ( device.class, device.orientation ) of
-                ( Phone, Portrait ) ->
-                    List.map mobileDebateMaker
-
-                ( Tablet, Portrait ) ->
-                    List.map mobileDebateMaker
-
                 _ ->
-                    List.map desktopDebateMaker
+                    List.map (debateMaker device)
               )
                 [ debateArguments
                 , debateCuckList
@@ -185,46 +165,14 @@ debateHeader =
     }
 
 
-desktopDebateMaker : Debate -> Element msg
+debateMaker : Device -> Debate -> Element msg
-desktopDebateMaker debate =
+debateMaker device debate =
-    row
+    cardMaker device debate.debateTitle (contentList debate) (debateImage debate) debate.debateLink
-        topLevelBox
-        [ desktopCardMaker desktopImageBoxSize desktopImageSize (debateImage debate) debate.debateLink
-        , cardMaker
-            [ cardTitleMaker debate.debateTitle
-            , cardFormatter
-                [ cardContentSpacing
-                    [ column
-                        fieldSpacer
-                        [ descriptionMaker debate ]
-                    ]
-                ]
-            ]
-        ]
 
 
-mobileDebateMaker : Debate -> Element msg
+contentList : Debate -> List (Element msg)
-mobileDebateMaker debate =
+contentList debate =
-    row
+    [ descriptionMaker debate ]
-        topLevelBox
-        [ column [] []
-        , cardMaker
-            [ cardTitleMaker debate.debateTitle
-            , cardFormatter
-                [ cardContentSpacing
-                    [ column
-                        fieldSpacer
-                        [ row [ width fill, spacing 10 ]
-                            [ mobileCardMaker mobileImageBoxSize mobileImageSize (debateImage debate) debate.debateLink
-                            , column
-                                [ width fill ]
-                                [ descriptionMaker debate ]
-                            ]
-                        ]
-                    ]
-                ]
-            ]
-        ]
 
 
 debateImage :

frontend/src/Pages/Debate/Arguments.elm

@@ -1,21 +1,7 @@
 module Pages.Debate.Arguments exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
-import Config.Helpers.CardFormat
+import Config.Helpers.CardFormat exposing (cardMaker)
-    exposing
-        ( cardContentSpacing
-        , cardFormatter
-        , cardMaker
-        , cardTitleMaker
-        , desktopCardMaker
-        , desktopImageBoxSize
-        , desktopImageSize
-        , fieldSpacer
-        , mobileCardMaker
-        , mobileImageBoxSize
-        , mobileImageSize
-        , topLevelBox
-        )
 import Config.Helpers.Converters exposing (toTitleCase)
 import Config.Helpers.Format
     exposing
@@ -150,17 +136,11 @@ debateList device =
         )
     <|
         List.concat
-            [ List.map headerMaker
+            [ List.map (headerMaker  device)
                 [ argumentHeader ]
             , (case ( device.class, device.orientation ) of
-                ( Phone, Portrait ) ->
-                    List.map argumentMakerMobile
-
-                ( Tablet, Portrait ) ->
-                    List.map argumentMakerMobile
-
                 _ ->
-                    List.map argumentMaker
+                    List.map (argumentMaker device)
               )
                 argumentList
             ]
@@ -177,60 +157,18 @@ argumentHeader =
     }
 
 
-argumentMaker : Argument -> Element msg
+argumentMaker : Device -> Argument -> Element msg
-argumentMaker argument =
+argumentMaker device argument =
-    row
+    cardMaker device argument.argumentTitle (contentList argument) (argumentImage argument) argument.proofLink
-        topLevelBox
-        [ desktopCardMaker desktopImageBoxSize desktopImageSize (argumentImage argument) (argumentLink argument)
-        , cardMaker
-            [ cardTitleMaker argument.argumentTitle
-            , cardFormatter
-                [ cardContentSpacing
-                    [ column
-                        fieldSpacer
-                        [ -- propositionMakerDesktop argument
-                          -- , reductioMakerDesktop argument
-                          -- ,
-                          summaryMakerDesktop argument
-                        , strengthBar argument
-                        , tableMaker argument
-                        , desktopFormalizationMaker argument
-                        ]
-                    ]
-                ]
-            ]
-        ]
 
 
-argumentMakerMobile : Argument -> Element msg
+contentList : Argument -> List (Element msg)
-argumentMakerMobile argument =
+contentList argument =
-    row
+    [ summaryMakerDesktop argument
-        topLevelBox
+    , strengthBar argument
-        [ column [] []
+    , tableMaker argument
-        , cardMaker
+    , desktopFormalizationMaker argument
-            [ cardTitleMaker argument.argumentTitle
+    ]
-            , cardFormatter
-                [ cardContentSpacing
-                    [ column
-                        fieldSpacer
-                        [ row [ spacing 10, E.width fill ]
-                            [ mobileCardMaker mobileImageBoxSize mobileImageSize (argumentImage argument) (argumentLink argument)
-
-                            -- , column [ E.width fill ]
-                            --     [ propositionMakerMobile argument
-                            --     ]
-                            ]
-
-                        -- , reductioMakerMobile argument
-                        , summaryMakerMobile argument
-                        , strengthBar argument
-                        , tableMaker argument
-                        , mobileFormalizationMaker argument
-                        ]
-                    ]
-                ]
-            ]
-        ]
 
 
 argumentImage : Argument -> { src : String, description : String }
@@ -240,11 +178,6 @@ argumentImage argument =
     }
 
 
-argumentLink : Argument -> String
-argumentLink argument =
-    argument.proofLink
-
-
 infoSpacing =
     E.width <| px 100
 

frontend/src/Pages/Debate/Cucklist.elm

@@ -1,21 +1,7 @@
 module Pages.Debate.Cucklist exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
-import Config.Helpers.CardFormat
+import Config.Helpers.CardFormat exposing (cardMaker)
-    exposing
-        ( cardContentSpacing
-        , cardFormatter
-        , cardMaker
-        , cardTitleMaker
-        , desktopCardMaker
-        , desktopImageBoxSize
-        , desktopImageSize
-        , fieldSpacer
-        , mobileCardMaker
-        , mobileImageBoxSize
-        , mobileImageSize
-        , topLevelBox
-        )
 import Config.Helpers.Converters exposing (formatSocial)
 import Config.Helpers.Format
     exposing
@@ -143,17 +129,11 @@ cucksList device =
         )
     <|
         List.concat
-            [ List.map headerMaker
+            [ List.map (headerMaker  device)
                 [ cuckListHeader ]
             , (case ( device.class, device.orientation ) of
-                ( Phone, Portrait ) ->
-                    List.map mobileCuckMaker
-
-                ( Tablet, Portrait ) ->
-                    List.map mobileCuckMaker
-
                 _ ->
-                    List.map desktopCuckMaker
+                    List.map (cuckMaker device)
               )
                 cuckList
             ]
@@ -170,56 +150,17 @@ cuckListHeader =
     }
 
 
-desktopCuckMaker : Cuck -> Element msg
+cuckMaker : Device -> Cuck -> Element msg
-desktopCuckMaker cuck =
+cuckMaker device cuck =
-    row
+    cardMaker device cuck.cuckName (contentList cuck) (cuckImage cuck) cuck.cuckSocial
-        topLevelBox
-        [ desktopCardMaker desktopImageBoxSize desktopImageSize (cuckImage cuck) (cuckSocial cuck)
-        , cardMaker
-            [ cardTitleMaker (cuckTitle cuck)
-            , cardFormatter
-                [ cardContentSpacing
-                    [ column
-                        fieldSpacer
-                        [ socialMaker cuck
-                        , dodgeTitle cuck
-                        , dodgeMaker cuck
-                        ]
-                    ]
-                ]
-            ]
-        ]
 
 
-mobileCuckMaker : Cuck -> Element msg
+contentList : Cuck -> List (Element msg)
-mobileCuckMaker cuck =
+contentList cuck =
-    column
+    [ socialMaker cuck
-        topLevelBox
+    , dodgeTitle cuck
-        [ column [] []
+    , dodgeMaker cuck
-        , cardMaker
+    ]
-            [ cardTitleMaker (cuckTitle cuck)
-            , cardFormatter
-                [ cardContentSpacing
-                    [ column
-                        fieldSpacer
-                        [ column
-                            [ alignTop
-                            , centerX
-                            , alignLeft
-                            , spacing 3
-                            ]
-                            [ row [ spacing 10 ]
-                                [ mobileCardMaker mobileImageBoxSize mobileImageSize (cuckImage cuck) (cuckSocial cuck)
-                                , socialMaker cuck
-                                ]
-                            , dodgeTitle cuck
-                            , dodgeMaker cuck
-                            ]
-                        ]
-                    ]
-                ]
-            ]
-        ]
 
 
 cuckImage :
@@ -234,16 +175,6 @@ cuckImage cuck =
     }
 
 
-cuckTitle : Cuck -> String
-cuckTitle cuck =
-    cuck.cuckName
-
-
-cuckSocial : Cuck -> String
-cuckSocial cuck =
-    cuck.cuckSocial
-
-
 dodgeMaker : Cuck -> Element msg
 dodgeMaker cuck =
     column
@@ -418,6 +349,7 @@ circumstance cuck dodge =
                     text "Chose to gesture vaguely instead of engaging"
         , el [ F.color colourTheme.textLightGrey ] <|
             text "."
+
         -- , receipts cuck dodge
         ]
 

frontend/src/Pages/Debate/Gibberish.elm

@@ -1,21 +1,7 @@
 module Pages.Debate.Gibberish exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
-import Config.Helpers.CardFormat
+import Config.Helpers.CardFormat exposing (cardMaker)
-    exposing
-        ( cardContentSpacing
-        , cardFormatter
-        , cardMaker
-        , cardTitleMaker
-        , desktopCardMaker
-        , desktopImageBoxSize
-        , desktopImageSize
-        , fieldSpacer
-        , mobileCardMaker
-        , mobileImageBoxSize
-        , mobileImageSize
-        , topLevelBox
-        )
 import Config.Helpers.Converters exposing (toTitleCase)
 import Config.Helpers.Format
     exposing
@@ -148,17 +134,11 @@ gibberishList device =
         )
     <|
         List.concat
-            [ List.map headerMaker
+            [ List.map (headerMaker device)
                 [ gibberishHeader ]
             , (case ( device.class, device.orientation ) of
-                ( Phone, Portrait ) ->
-                    List.map mobileGibberishMaker
-
-                ( Tablet, Portrait ) ->
-                    List.map mobileGibberishMaker
-
                 _ ->
-                    List.map desktopGibberishMaker
+                    List.map (gibberishMaker device)
               )
                 [ epistemologyGibberish
                 , theologyGibberish
@@ -182,47 +162,34 @@ gibberishHeader =
     }
 
 
-desktopGibberishMaker : Gibberish -> Element msg
+gibberishMaker : Device -> Gibberish -> Element msg
-desktopGibberishMaker gibberish =
+gibberishMaker device gibberish =
-    row
+    cardMaker device gibberish.gibberishTitle (contentList gibberish) (gibberishImage gibberish) gibberish.gibberishLink
-        topLevelBox
-        [ desktopCardMaker desktopImageBoxSize desktopImageSize (gibberishImage gibberish) gibberish.gibberishLink
-        , cardMaker
-            [ cardTitleMaker (gibberishTitle gibberish)
-            , cardFormatter
-                [ column [ spacing 20, padding 10 ]
-                    [ descriptionMaker gibberish
-                    , gibberishMakerBody gibberish
-                    ]
-                ]
-            ]
-        ]
 
 
-mobileGibberishMaker : Gibberish -> Element msg
+contentList : Gibberish -> List (Element msg)
-mobileGibberishMaker gibberish =
+contentList gibberish =
-    row
+    [ descriptionMaker gibberish
-        topLevelBox
+    , gibberishMakerBody gibberish
-        [ cardMaker
+    ]
-            [ cardTitleMaker (gibberishTitle gibberish)
-            , cardFormatter
-                [ row [ spacing 20, padding 10 ]
-                    [ column [] [ mobileCardMaker mobileImageBoxSize mobileImageSize (gibberishImage gibberish) gibberish.gibberishLink ]
-                    , column [ width fill ]
-                        [ descriptionMaker gibberish
-                        ]
-                    ]
-                , domainList gibberish
-                ]
-            ]
-        ]
 
 
 gibberishMakerBody : Gibberish -> Element msg
 gibberishMakerBody gibberish =
-    cardContentSpacing
+    column
+        [ paddingEach
+            { top = 0
+            , bottom = 0
+            , left = 15
+            , right = 15
+            }
+        , spacing 8
+        , width fill
+        ]
         [ column
-            fieldSpacer
+            [ spacing 8
+            , width fill
+            ]
             [ paragraph
                 [ F.color colourTheme.textLightGrey
                 , paragraphSpacing

frontend/src/Pages/Donate.elm

@@ -1,21 +1,7 @@
 module Pages.Donate exposing (Model, Msg, page)
 
 import Config.Data.Identity as I exposing (..)
-import Config.Helpers.CardFormat
+import Config.Helpers.CardFormat exposing (cardMaker)
-    exposing
-        ( cardContentSpacing
-        , cardFormatter
-        , cardMaker
-        , cardTitleMaker
-        , desktopCardMaker
-        , desktopImageBoxSize
-        , desktopImageSize
-        , fieldSpacer
-        , mobileCardMaker
-        , mobileImageBoxSize
-        , mobileImageSize
-        , topLevelBox
-        )
 import Config.Helpers.Format
     exposing
         ( headerFontSizeSmall
@@ -145,17 +131,11 @@ donateList device =
         )
     <|
         List.concat
-            [ List.map headerMaker
+            [ List.map (headerMaker device)
                 [ donateHeader ]
             , (case ( device.class, device.orientation ) of
-                ( Phone, Portrait ) ->
-                    List.map (\donate -> donateMakerMobile donate device)
-
-                ( Tablet, Portrait ) ->
-                    List.map (\donate -> donateMakerMobile donate device)
-
                 _ ->
-                    List.map (\donate -> donateMaker donate device)
+                    List.map (\donate -> donateMaker device donate)
               )
                 [ donateLiberaPay
                 , donateStripe
@@ -179,63 +159,21 @@ donateHeader =
     }
 
 
-donateMaker : Donate -> Device -> Element msg
+donateMaker : Device -> Donate -> Element msg
-donateMaker donate device =
+donateMaker device donate =
-    row
+    cardMaker device donate.donateName (contentList device donate) (donateImage donate) donate.donateLink
-        topLevelBox
-        [ desktopCardMaker desktopImageBoxSize desktopImageSize (donateImage donate) donate.donateLink
-        , cardMaker
-            [ cardTitleMaker donate.donateName
-            , cardFormatter
-                [ cardContentSpacing
-                    [ column
-                        fieldSpacer
-                        [ feeMaker donate
-                        , preferenceMaker donate
-                        , tableMaker donate device
-                        , proTitleMaker donate
-                        , proMaker donate
-                        , conTitleMaker donate
-                        , conMaker donate
-                        ]
-                    ]
-                ]
-            ]
-        ]
 
 
-donateMakerMobile : Donate -> Device -> Element msg
+contentList : Device -> Donate -> List (Element msg)
-donateMakerMobile donate device =
+contentList device donate =
-    row
+    [ feeMaker donate
-        topLevelBox
+    , preferenceMaker donate
-        [ column [] []
+    , tableMaker donate device
-        , cardMaker
+    , proTitleMaker donate
-            [ cardTitleMaker donate.donateName
+    , proMaker donate
-            , cardFormatter
+    , conTitleMaker donate
-                [ cardContentSpacing
+    , conMaker donate
-                    [ column
+    ]
-                        fieldSpacer
-                        [ row [ width fill, spacing 10 ]
-                            [ mobileCardMaker mobileImageBoxSize
-                                mobileImageSize
-                                (donateImage donate)
-                                donate.donateLink
-                            , column
-                                [ width fill ]
-                                [ feeMaker donate
-                                , preferenceMaker donate
-                                ]
-                            ]
-                        , tableMaker donate device
-                        , proTitleMaker donate
-                        , proMaker donate
-                        , conTitleMaker donate
-                        , conMaker donate
-                        ]
-                    ]
-                ]
-            ]
-        ]
 
 
 donateImage :

frontend/src/Pages/Home_.elm

@@ -120,39 +120,56 @@ homeList device =
     column pageListCenter
         [ case device.class of
             Desktop ->
-                desktopHomePage
+                homePage device upRootLarge
 
             BigDesktop ->
-                desktopHomePage
+                homePage device upRootLarge
 
             Tablet ->
                 case device.orientation of
-                    Portrait ->
+                    _ ->
-                        mobileLargeHomePage
+                        homePage device upRootMedium
-
-                    Landscape ->
-                        mobileLargeHomePage
 
             Phone ->
                 case device.orientation of
-                    Portrait ->
+                    _ ->
-                        mobileSmallHomePage
+                        homePage device upRootSmall
-
-                    Landscape ->
-                        mobileSmallHomePage
         ]
 
 
-homePage : Html msg -> Element msg
+homePage : Device -> Html msg -> Element msg
-homePage image =
+homePage device image =
     column
         [ centerX
         , centerY
         , E.spacing 20
+        , E.width (E.fill |> minimum 100)
+        , E.width (E.fill |> maximum 875)
         ]
-        [ el [ centerX, E.width E.fill, E.height <| px 100 ] <|
+        [ el
+            [ centerX
+            , E.width <|
+                px <|
+                    case device.class of
+                        Desktop ->
+                            675
+
+                        BigDesktop ->
+                            675
+
+                        Tablet ->
+                            case device.orientation of
+                                _ ->
+                                    300
+
+                        Phone ->
+                            case device.orientation of
+                                _ ->
+                                    150
+            ]
+          <|
             html image
-        , column
+        , el
             [ paddingEach
                 { top = 15
                 , bottom = 15
@@ -165,40 +182,12 @@ homePage image =
             , E.width E.fill
             , E.spacing 8
             ]
-            [ paragraph
+          <|
-                ([ F.color colourTheme.textLightGrey
+            paragraph
-                 , paragraphSpacing
+                [ F.color colourTheme.textLightGrey
-                 , paragraphFontSize
+                , paragraphSpacing
-                 ]
+                , paragraphFontSize
-                    ++ [ centerX ]
+                , centerX
-                )
+                ]
                 [ text "upRootNutrition is an open source project, created by Nick Hiebert, designed to elevate the quality of nutrition science communication in online discourse. By applying more rigorous systems of reasoning, such as formal logic and semantic analysis, upRootNutrition aims to cut through the misinformation and sophistry that are endemic on social media." ]
-            ]
         ]
-
-
-desktopHomePageImage : Html msg
-desktopHomePageImage =
-    upRootLarge
-
-
-mobileLargeHomePageImage : Html msg
-mobileLargeHomePageImage =
-    upRootMedium
-
-
-mobileSmallHomePageImage : Html msg
-mobileSmallHomePageImage =
-    upRootSmall
-
-
-desktopHomePage =
-    homePage desktopHomePageImage
-
-
-mobileLargeHomePage =
-    homePage mobileLargeHomePageImage
-
-
-mobileSmallHomePage =
-    homePage mobileSmallHomePageImage

frontend/src/Pages/Interviews.elm

@@ -1,25 +1,12 @@
 module Pages.Interviews exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
-import Config.Helpers.CardFormat
+import Config.Helpers.CardFormat exposing (cardMaker)
-    exposing
-        ( cardContentSpacing
-        , cardFormatter
-        , cardMaker
-        , cardTitleMaker
-        , desktopCardMaker
-        , desktopImageBoxSize
-        , desktopImageSize
-        , fieldSpacer
-        , mobileCardMaker
-        , mobileImageBoxSize
-        , mobileImageSize
-        , topLevelBox
-        )
 import Config.Helpers.Converters exposing (formatSocial)
 import Config.Helpers.Format
     exposing
-        ( paragraphFontSize
+        ( headerFontSizeSmall
+        , paragraphFontSize
         , paragraphSpacing
         )
 import Config.Helpers.Headers.Header exposing (..)
@@ -151,17 +138,11 @@ interviewList device =
         )
     <|
         List.concat
-            [ List.map headerMaker
+            [ List.map (headerMaker device)
                 [ interviewHeader ]
             , (case ( device.class, device.orientation ) of
-                ( Phone, Portrait ) ->
-                    List.map interviewMakerMobile
-
-                ( Tablet, Portrait ) ->
-                    List.map interviewMakerMobile
-
                 _ ->
-                    List.map interviewMaker
+                    List.map (interviewMaker device)
               )
                 [ sigmaNutritionRadio
                 , markBellsPowerProject
@@ -187,48 +168,16 @@ interviewHeader =
     }
 
 
-interviewMaker : Interview -> Element msg
+interviewMaker : Device -> Interview -> Element msg
-interviewMaker interview =
+interviewMaker device interview =
-    row
+    cardMaker device interview.interviewName (contentList interview) (interviewImage interview) interview.interviewSocial
-        topLevelBox
-        [ desktopCardMaker desktopImageBoxSize desktopImageSize (interviewImage interview) interview.interviewSocial
-        , cardMaker
-            [ cardTitleMaker interview.interviewName
-            , cardFormatter
-                [ cardContentSpacing
-                    [ column
-                        fieldSpacer
-                        [ appearanceTitle interview
-                        , appearanceMaker interview
-                        ]
-                    ]
-                ]
-            ]
-        ]
 
 
-interviewMakerMobile : Interview -> Element msg
+contentList : Interview -> List (Element msg)
-interviewMakerMobile interview =
+contentList interview =
-    row
+    [ appearanceTitle interview
-        topLevelBox
+    , appearanceMaker interview
-        [ column [] []
+    ]
-        , cardMaker
-            [ cardTitleMaker interview.interviewName
-            , cardFormatter
-                [ cardContentSpacing
-                    [ column
-                        fieldSpacer
-                        [ row [ spacing 10 ]
-                            [ mobileCardMaker mobileImageBoxSize mobileImageSize (interviewImage interview) interview.interviewSocial
-                            , socialMaker interview
-                            ]
-                        , appearanceTitle interview
-                        , appearanceMaker interview
-                        ]
-                    ]
-                ]
-            ]
-        ]
 
 
 interviewImage : Interview -> { src : String, description : String }
@@ -243,10 +192,8 @@ socialMaker interview =
     paragraph
         [ F.color colourTheme.textLightGrey
         , paragraphSpacing
-        , paragraphFontSize
         , F.bold
-        , F.size 18
+        , headerFontSizeSmall
-        , spacing 5
         ]
         [ text "Social: "
         , newTabLink
@@ -270,9 +217,8 @@ appearanceTitle interview =
     paragraph
         [ F.color colourTheme.textLightGrey
         , paragraphSpacing
-        , paragraphFontSize
+        , headerFontSizeSmall
         , F.bold
-        , F.size 18
         ]
         [ text "Appearances: " ]
 
@@ -287,39 +233,25 @@ appearanceMaker interview =
 
 makeAppearance : Appearance -> Int -> Element msg
 makeAppearance appearanceEntry index =
-    column
+    el
-        [ F.color colourTheme.textLightGrey
+        [ alignLeft
-        , paragraphSpacing
-        , paragraphFontSize
-        , alignLeft
-        , spacing 8
         , width fill
         ]
-        [ row
+    <|
-            ([ F.color colourTheme.textLightGrey
+        row
-             , paragraphSpacing
+            [ E.width fill
-             , paragraphFontSize
+            , spacing 5
-             ]
+            ]
-                ++ [ F.size 18
+            [ el
-                   , E.width fill
-                   , paddingEach
-                        { top = 0
-                        , bottom = 0
-                        , left = 35
-                        , right = 0
-                        }
-                   ]
-            )
-            [ column
                 [ F.color colourTheme.textLightGrey
                 , paragraphSpacing
-                , paragraphFontSize
+                , headerFontSizeSmall
-                , F.size 18
+                , F.bold
                 , alignTop
-                , alignRight
                 , F.alignRight
                 ]
-                [ text (String.fromInt index ++ ". ") ]
+              <|
+                text (String.fromInt index ++ ". ")
             , column
                 [ spacing 8
                 , width fill
@@ -331,7 +263,6 @@ makeAppearance appearanceEntry index =
                 , subjectList appearanceEntry
                 ]
             ]
-        ]
 
 
 episodeMaker : Appearance -> Element msg
@@ -359,6 +290,7 @@ experienceMaker appearanceEntry =
     row
         [ width fill
         , height fill
+        , spacing 5
         ]
         [ column
             [ E.alignTop
@@ -367,23 +299,15 @@ experienceMaker appearanceEntry =
             [ paragraph
                 [ F.color colourTheme.textLightGrey
                 , paragraphSpacing
-                , paragraphFontSize
+                , headerFontSizeSmall
                 , F.bold
-                , F.size 18
-                , E.width fill
                 ]
                 [ el
                     [ tooltip
                         "This represents how pleasant it was to interact with the host(s)."
                     ]
                     (el
-                        [ paddingEach
+                        []
-                            { top = 0
-                            , right = 10
-                            , bottom = 0
-                            , left = 0
-                            }
-                        ]
                      <|
                         text "Pleasantness:"
                     )
@@ -439,29 +363,26 @@ dateMaker appearanceEntry =
     row
         [ F.color colourTheme.textLightGrey
         , paragraphSpacing
-        , paragraphFontSize
+        , headerFontSizeSmall
         , F.bold
         ]
-        [ column
+        [ el
             [ alignTop
             ]
-            [ text "Published:"
+          <|
-            ]
+            text
-        , column
+                "Published:"
+        , el
             [ alignTop
             , width fill
             ]
-            [ paragraph
+          <|
+            paragraph
                 [ F.regular
-                , paddingEach
+                , paragraphFontSize
-                    { top = 0
+                ]
-                    , right = 0
+                [ text appearanceEntry.appearanceYear
-                    , bottom = 0
-                    , left = 3
-                    }
                 ]
-                [ text appearanceEntry.appearanceYear ]
-            ]
         ]
 
 
@@ -470,7 +391,7 @@ subjectMaker appearanceEntry =
     paragraph
         [ F.color colourTheme.textLightGrey
         , paragraphSpacing
-        , paragraphFontSize
+        , headerFontSizeSmall
         , F.bold
         ]
         [ column
@@ -490,7 +411,7 @@ subjectList appearanceEntry =
             { top = 0
             , right = 0
             , bottom = 0
-            , left = 25
+            , left = 10
             }
         ]
     <|
@@ -504,17 +425,10 @@ makeSubject subjects =
     el
         [ E.width fill
         , alignLeft
-        , paddingEach
-            { top = 0
-            , right = 0
-            , bottom = 0
-            , left = 8
-            }
         ]
     <|
-        el
+        paragraph
             [ F.regular
             , paragraphFontSize
             ]
-        <|
+            [ text ("• " ++ subjects.subject) ]
-            text ("‣ " ++ subjects.subject)

frontend/src/Pages/NotFound_.elm

@@ -1,21 +1,7 @@
 module Pages.NotFound_ exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
-import Config.Helpers.CardFormat
+import Config.Helpers.CardFormat exposing (cardMaker)
-    exposing
-        ( cardContentSpacing
-        , cardFormatter
-        , cardMaker
-        , cardTitleMaker
-        , desktopCardMaker
-        , desktopImageBoxSize
-        , desktopImageSize
-        , fieldSpacer
-        , mobileCardMaker
-        , mobileImageBoxSize
-        , mobileImageSize
-        , topLevelBox
-        )
 import Config.Helpers.Headers.Header exposing (headerMaker)
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response

frontend/src/Pages/Nutridex.elm

@@ -3,22 +3,7 @@ module Pages.Nutridex exposing (Model, Msg, page)
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (makeReference)
 import Config.Helpers.Articles.Types exposing (References)
-import Config.Helpers.CardFormat
+import Config.Helpers.CardFormat exposing (cardMaker)
-    exposing
-        ( cardContentSpacing
-        , cardFormatter
-        , cardMaker
-        , cardSubTitleMaker
-        , cardTitleMaker
-        , desktopCardMaker
-        , desktopImageBoxSize
-        , desktopImageSize
-        , fieldSpacer
-        , mobileCardMaker
-        , mobileImageBoxSize
-        , mobileImageSize
-        , topLevelBox
-        )
 import Config.Helpers.Format
     exposing
         ( divider
@@ -151,46 +136,31 @@ nutriDexList device =
     <|
         List.concat
             [ (case ( device.class, device.orientation ) of
-                ( Phone, Portrait ) ->
-                    List.map (\nutridex -> nutriDexMaker nutridex device)
-
-                ( Tablet, Portrait ) ->
-                    List.map (\nutridex -> nutriDexMaker nutridex device)
-
                 _ ->
-                    List.map (\nutridex -> nutriDexMaker nutridex device)
+                    List.map (\nutridex -> nutriDexMaker device nutridex)
               )
                 [ productNutriDex ]
             ]
 
 
-nutriDexMaker : NutriDex -> Device -> Element msg
+nutriDexMaker : Device -> NutriDex -> Element msg
-nutriDexMaker nutridex device =
+nutriDexMaker device nutridex =
-    row
+    cardMaker device nutridex.nutriDexTitle (contentList device nutridex) { description = "", src = "" } ""
-        topLevelBox
+
-        [ cardMaker
+
-            [ cardTitleMaker (String.toUpper nutridex.nutriDexTitle)
+contentList : Device -> NutriDex -> List (Element msg)
-            , cardFormatter
+contentList device nutridex =
-                [ cardContentSpacing
+    [ featureList nutridex device
-                    [ column
+    , nutriDexBodyMaker device
-                        fieldSpacer
+    , nutriDexAdjustments device
-                        [ cardSubTitleMaker
+    , column [ spacing 10 ]
-                            [ featureList nutridex device
+        [ nutriDexVitamins
-                            , nutriDexBodyMaker device
+        , nutriDexFattyAcids
-                            , nutriDexAdjustments device
+        , nutriDexMinerals
-                            , column [ spacing 10 ]
+        , nutriDexAminoAcids
-                                [ nutriDexVitamins
-                                , nutriDexFattyAcids
-                                , nutriDexMinerals
-                                , nutriDexAminoAcids
-                                ]
-                            , nutriDexReferences nutridex device
-                            ]
-                        ]
-                    ]
-                ]
-            ]
         ]
+    , nutriDexReferences nutridex device
+    ]
 
 
 makeFeature : Features -> Element msg
@@ -303,6 +273,7 @@ featureList nutridex device =
                         , D.rounded 30
                         , F.size 25
                         , F.bold
+                        , transitionStyleMedium
                         , hoverPageButtonDeepDarkOrange
                         , paddingEach
                             { top = 10
@@ -456,16 +427,12 @@ nutriDexBodyMaker device =
 
 referenceFormat : List (Attr () msg)
 referenceFormat =
-    [ F.color colourTheme.textLightGrey
+    [ paragraphFontSize
-    , paragraphSpacing
+    , F.color colourTheme.textLightOrange
-    , paragraphFontSize
+    , alignTop
+    , hoverFontDarkOrange
+    , transitionStyleMedium
     ]
-        ++ [ F.color colourTheme.textLightOrange
-           , F.size 12
-           , alignTop
-           , hoverFontDarkOrange
-           , transitionStyleFast
-           ]
 
 
 nutriDexAdjustments : Device -> Element msg

frontend/src/Pages/Services.elm

@@ -2,24 +2,11 @@ module Pages.Services exposing (Model, Msg, page)
 
 import Browser
 import Config.Data.Identity exposing (pageNames)
-import Config.Helpers.CardFormat
+import Config.Helpers.CardFormat exposing (cardMaker)
-    exposing
-        ( cardContentSpacing
-        , cardFormatter
-        , cardMaker
-        , cardTitleMaker
-        , desktopCardMaker
-        , desktopImageBoxSize
-        , desktopImageSize
-        , fieldSpacer
-        , mobileCardMaker
-        , mobileImageBoxSize
-        , mobileImageSize
-        , topLevelBox
-        )
 import Config.Helpers.Format
     exposing
-        ( headerFontSizeSmall
+        ( headerFontSizeMedium
+        , headerFontSizeSmall
         , paragraphFontSize
         , paragraphSpacing
         )
@@ -38,6 +25,8 @@ import Config.Pages.Services.Records.NixBuilds exposing (..)
 import Config.Pages.Services.Records.NutritionScience exposing (..)
 import Config.Pages.Services.Types exposing (..)
 import Config.Style.Colour as T exposing (..)
+import Config.Style.Glow exposing (glowDeepDarkGrey, glowDeepDarkOrange)
+import Config.Style.Transitions exposing (transitionStyleMedium)
 import Effect exposing (Effect)
 import Element as E exposing (..)
 import Element.Background as B
@@ -135,17 +124,11 @@ servicesList device =
         )
     <|
         List.concat
-            [ List.map headerMaker
+            [ List.map (headerMaker device)
                 [ servicesHeader ]
             , (case ( device.class, device.orientation ) of
-                ( Phone, Portrait ) ->
-                    List.map serviceMakerMobile
-
-                ( Tablet, Portrait ) ->
-                    List.map serviceMakerMobile
-
                 _ ->
-                    List.map serviceMaker
+                    List.map (serviceMaker device)
               )
                 [ servicesDebateAnalysis
                 , servicesDebateCoaching
@@ -167,46 +150,17 @@ servicesHeader =
     }
 
 
-serviceMaker : Service msg -> Element msg
+serviceMaker : Device -> Service msg -> Element msg
-serviceMaker service =
+serviceMaker device service =
-    row
+    cardMaker device service.serviceName (contentList service) (serviceImage service) service.serviceLink
-        topLevelBox
-        [ desktopCardMaker desktopImageBoxSize desktopImageSize (serviceImage service) service.serviceLink
-        , cardMaker
-            [ cardTitleMaker service.serviceName
-            , cardFormatter
-                [ cardContentSpacing
-                    [ column
-                        fieldSpacer
-                        [ rateMaker service
-                        , descriptionMaker service
-                        , offeringMaker service
-                        ]
-                    ]
-                ]
-            ]
-        ]
 
 
-serviceMakerMobile : Service msg -> Element msg
+contentList : Service msg -> List (Element msg)
-serviceMakerMobile service =
+contentList service =
-    row
+    [ rateMaker service
-        topLevelBox
+    , descriptionMaker service
-        [ column [] []
+    , offeringMaker service
-        , cardMaker
+    ]
-            [ cardTitleMaker service.serviceName
-            , cardFormatter
-                [ cardContentSpacing
-                    [ column
-                        fieldSpacer
-                        [ row [ spacing 10 ] [ mobileCardMaker mobileImageBoxSize mobileImageSize (serviceImage service) service.serviceLink, rateMaker service ]
-                        , descriptionMaker service
-                        , offeringMaker service
-                        ]
-                    ]
-                ]
-            ]
-        ]
 
 
 serviceImage : Service msg -> { src : String, description : String }

frontend/src/Pages/Services/Analysis.elm

@@ -109,34 +109,25 @@ analysisList device =
         List.concat
             (case ( device.class, device.orientation ) of
                 _ ->
-                    [ [ serviceMaker ] ]
+                    [ [ headerMaker device ] ]
             )
 
 
-serviceMaker : Element msg
+headerMaker : Device -> Element msg
-serviceMaker =
+headerMaker device =
-    row
+    cardMaker device "" contentList { description = "", src = "" } ""
-        topLevelBox
+
-        [ cardMaker
+
-            [ cardTitleMaker (String.toUpper servicesDebateAnalysis.serviceName)
+contentList : List (Element msg)
-            , cardFormatter
+contentList =
-                [ cardContentSpacing
+    [ column
-                    [ column
+        bodyFormat
-                        fieldSpacer
+        [ chunkMaker servicesDebateAnalysis.serviceArticle.articleParagraph.paragraph1
-                        [ cardSubTitleMaker
+        , chunkMaker
-                            [ column
+            servicesDebateAnalysis.serviceArticle.articleParagraph.paragraph2
-                                bodyFormat
+        , titleMaker servicesDebateAnalysis.serviceArticle.articleTitles.title1
-                                [ chunkMaker servicesDebateAnalysis.serviceArticle.articleParagraph.paragraph1
+        , numberMaker servicesDebateAnalysis.serviceArticle.articleListEntries.list1
-                                , chunkMaker
+        , titleMaker servicesDebateAnalysis.serviceArticle.articleTitles.title2
-                                    servicesDebateAnalysis.serviceArticle.articleParagraph.paragraph2
+        , bulletPointMaker servicesDebateAnalysis.serviceArticle.articleListEntries.list2
-                                , titleMaker servicesDebateAnalysis.serviceArticle.articleTitles.title1
-                                , numberMaker servicesDebateAnalysis.serviceArticle.articleListEntries.list1
-                                , titleMaker servicesDebateAnalysis.serviceArticle.articleTitles.title2
-                                , bulletPointMaker servicesDebateAnalysis.serviceArticle.articleListEntries.list2
-                                ]
-                            ]
-                        ]
-                    ]
-                ]
-            ]
         ]
+    ]

frontend/src/Pages/Services/Coaching.elm

@@ -114,40 +114,31 @@ coachingList device =
         List.concat
             (case ( device.class, device.orientation ) of
                 _ ->
-                    [ [ serviceMaker ] ]
+                    [ [ headerMaker device ] ]
             )
 
 
-serviceMaker : Element msg
+headerMaker : Device -> Element msg
-serviceMaker =
+headerMaker device =
-    row
+    cardMaker device "" contentList { description = "", src = "" } ""
-        topLevelBox
-        [ cardMaker
-            [ cardTitleMaker (String.toUpper servicesDebateCoaching.serviceName)
-            , cardFormatter
-                [ cardContentSpacing
-                    [ column
-                        fieldSpacer
-                        [ cardSubTitleMaker
-                            [ column
-                                bodyFormat
-                                [ chunkMaker servicesDebateCoaching.serviceArticle.articleParagraph.paragraph1
-                                , chunkMaker servicesDebateCoaching.serviceArticle.articleParagraph.paragraph2
-                                , titleMaker servicesDebateCoaching.serviceArticle.articleTitles.title1
-                                , numberMaker servicesDebateCoaching.serviceArticle.articleListEntries.list1
-                                , titleMaker servicesDebateCoaching.serviceArticle.articleTitles.title2
 
-                                -- modules
+
-                                , highlightedBlockMaker servicesDebateCoaching.serviceArticle.articleTitles.title3 servicesDebateCoaching.serviceArticle.articleListEntries.list3
+contentList : List (Element msg)
-                                , highlightedBlockMaker servicesDebateCoaching.serviceArticle.articleTitles.title4 servicesDebateCoaching.serviceArticle.articleListEntries.list4
+contentList =
-                                , highlightedBlockMaker servicesDebateCoaching.serviceArticle.articleTitles.title5 servicesDebateCoaching.serviceArticle.articleListEntries.list5
+    [ column
-                                , highlightedBlockMaker servicesDebateCoaching.serviceArticle.articleTitles.title6 servicesDebateCoaching.serviceArticle.articleListEntries.list6
+        bodyFormat
-                                , highlightedBlockMaker servicesDebateCoaching.serviceArticle.articleTitles.title7 servicesDebateCoaching.serviceArticle.articleListEntries.list7
+        [ chunkMaker servicesDebateCoaching.serviceArticle.articleParagraph.paragraph1
-                                , highlightedBlockMaker servicesDebateCoaching.serviceArticle.articleTitles.title8 servicesDebateCoaching.serviceArticle.articleListEntries.list8
+        , chunkMaker servicesDebateCoaching.serviceArticle.articleParagraph.paragraph2
-                                ]
+        , titleMaker servicesDebateCoaching.serviceArticle.articleTitles.title1
-                            ]
+        , numberMaker servicesDebateCoaching.serviceArticle.articleListEntries.list1
-                        ]
+        , titleMaker servicesDebateCoaching.serviceArticle.articleTitles.title2
-                    ]
+
-                ]
+        -- modules
-            ]
+        , highlightedBlockMaker servicesDebateCoaching.serviceArticle.articleTitles.title3 servicesDebateCoaching.serviceArticle.articleListEntries.list3
+        , highlightedBlockMaker servicesDebateCoaching.serviceArticle.articleTitles.title4 servicesDebateCoaching.serviceArticle.articleListEntries.list4
+        , highlightedBlockMaker servicesDebateCoaching.serviceArticle.articleTitles.title5 servicesDebateCoaching.serviceArticle.articleListEntries.list5
+        , highlightedBlockMaker servicesDebateCoaching.serviceArticle.articleTitles.title6 servicesDebateCoaching.serviceArticle.articleListEntries.list6
+        , highlightedBlockMaker servicesDebateCoaching.serviceArticle.articleTitles.title7 servicesDebateCoaching.serviceArticle.articleListEntries.list7
+        , highlightedBlockMaker servicesDebateCoaching.serviceArticle.articleTitles.title8 servicesDebateCoaching.serviceArticle.articleListEntries.list8
         ]
+    ]

frontend/src/Pages/Services/Elm.elm

@@ -114,39 +114,30 @@ elmBuildsList device =
         List.concat
             (case ( device.class, device.orientation ) of
                 _ ->
-                    [ [ serviceMaker ] ]
+                    [ [ headerMaker device ] ]
             )
 
 
-serviceMaker : Element msg
+headerMaker : Device -> Element msg
-serviceMaker =
+headerMaker device =
-    row
+    cardMaker device "" contentList { description = "", src = "" } ""
-        topLevelBox
+
-        [ cardMaker
+
-            [ cardTitleMaker (String.toUpper servicesElmBuilds.serviceName)
+contentList : List (Element msg)
-            , cardFormatter
+contentList =
-                [ cardContentSpacing
+    [ column
-                    [ column
+        bodyFormat
-                        fieldSpacer
+        [ chunkMaker servicesElmBuilds.serviceArticle.articleParagraph.paragraph1
-                        [ cardSubTitleMaker
+        , chunkMaker servicesElmBuilds.serviceArticle.articleParagraph.paragraph2
-                            [ column
+        , chunkMaker servicesElmBuilds.serviceArticle.articleParagraph.paragraph3
-                                bodyFormat
+        , titleMaker servicesElmBuilds.serviceArticle.articleTitles.title1
-                                [ chunkMaker servicesElmBuilds.serviceArticle.articleParagraph.paragraph1
+        , numberMaker servicesElmBuilds.serviceArticle.articleListEntries.list1
-                                , chunkMaker servicesElmBuilds.serviceArticle.articleParagraph.paragraph2
+        , titleMaker servicesElmBuilds.serviceArticle.articleTitles.title2
-                                , chunkMaker servicesElmBuilds.serviceArticle.articleParagraph.paragraph3
+        , bulletPointMaker servicesElmBuilds.serviceArticle.articleListEntries.list2
-                                , titleMaker servicesElmBuilds.serviceArticle.articleTitles.title1
+        , titleMaker servicesElmBuilds.serviceArticle.articleTitles.title3
-                                , numberMaker servicesElmBuilds.serviceArticle.articleListEntries.list1
+        , elmCodeRenderer
-                                , titleMaker servicesElmBuilds.serviceArticle.articleTitles.title2
-                                , bulletPointMaker servicesElmBuilds.serviceArticle.articleListEntries.list2
-                                , titleMaker servicesElmBuilds.serviceArticle.articleTitles.title3
-                                , elmCodeRenderer
-                                ]
-                            ]
-                        ]
-                    ]
-                ]
-            ]
         ]
+    ]
 
 
 elmCodeRenderer : Element msg

frontend/src/Pages/Services/Nix.elm

@@ -114,39 +114,30 @@ elmBuildsList device =
         List.concat
             (case ( device.class, device.orientation ) of
                 _ ->
-                    [ [ serviceMaker ] ]
+                    [ [ headerMaker device ] ]
             )
 
 
-serviceMaker : Element msg
+headerMaker : Device -> Element msg
-serviceMaker =
+headerMaker device =
-    row
+    cardMaker device "" contentList { description = "", src = "" } ""
-        topLevelBox
+
-        [ cardMaker
+
-            [ cardTitleMaker (String.toUpper servicesNixBuilds.serviceName)
+contentList : List (Element msg)
-            , cardFormatter
+contentList =
-                [ cardContentSpacing
+    [ column
-                    [ column
+        bodyFormat
-                        fieldSpacer
+        [ chunkMaker servicesNixBuilds.serviceArticle.articleParagraph.paragraph1
-                        [ cardSubTitleMaker
+        , chunkMaker servicesNixBuilds.serviceArticle.articleParagraph.paragraph2
-                            [ column
+        , chunkMaker servicesNixBuilds.serviceArticle.articleParagraph.paragraph3
-                                bodyFormat
+        , titleMaker servicesNixBuilds.serviceArticle.articleTitles.title1
-                                [ chunkMaker servicesNixBuilds.serviceArticle.articleParagraph.paragraph1
+        , numberMaker servicesNixBuilds.serviceArticle.articleListEntries.list1
-                                , chunkMaker servicesNixBuilds.serviceArticle.articleParagraph.paragraph2
+        , titleMaker servicesNixBuilds.serviceArticle.articleTitles.title2
-                                , chunkMaker servicesNixBuilds.serviceArticle.articleParagraph.paragraph3
+        , bulletPointMaker servicesNixBuilds.serviceArticle.articleListEntries.list2
-                                , titleMaker servicesNixBuilds.serviceArticle.articleTitles.title1
+        , titleMaker servicesNixBuilds.serviceArticle.articleTitles.title3
-                                , numberMaker servicesNixBuilds.serviceArticle.articleListEntries.list1
+        , nixCodeRenderer
-                                , titleMaker servicesNixBuilds.serviceArticle.articleTitles.title2
-                                , bulletPointMaker servicesNixBuilds.serviceArticle.articleListEntries.list2
-                                , titleMaker servicesNixBuilds.serviceArticle.articleTitles.title3
-                                , nixCodeRenderer
-                                ]
-                            ]
-                        ]
-                    ]
-                ]
-            ]
         ]
+    ]
 
 
 renderCodeLine : SyntaxColors -> List (Element msg) -> Element msg

frontend/src/Pages/Services/Nutrition.elm

@@ -114,33 +114,24 @@ nutritionList device =
         List.concat
             (case ( device.class, device.orientation ) of
                 _ ->
-                    [ [ serviceMaker ] ]
+                    [ [ headerMaker device ] ]
             )
 
 
-serviceMaker : Element msg
+headerMaker : Device -> Element msg
-serviceMaker =
+headerMaker device =
-    row
+    cardMaker device "" contentList { description = "", src = "" } ""
-        topLevelBox
+
-        [ cardMaker
+
-            [ cardTitleMaker (String.toUpper servicesNutritionScience.serviceName)
+contentList : List (Element msg)
-            , cardFormatter
+contentList =
-                [ cardContentSpacing
+    [ column
-                    [ column
+        bodyFormat
-                        fieldSpacer
+        [ chunkMaker servicesNutritionScience.serviceArticle.articleParagraph.paragraph1
-                        [ cardSubTitleMaker
+        , chunkMaker servicesNutritionScience.serviceArticle.articleParagraph.paragraph2
-                            [ column
+        , titleMaker servicesNutritionScience.serviceArticle.articleTitles.title1
-                                bodyFormat
+        , numberMaker servicesNutritionScience.serviceArticle.articleListEntries.list1
-                                [ chunkMaker servicesNutritionScience.serviceArticle.articleParagraph.paragraph1
+        , titleMaker servicesNutritionScience.serviceArticle.articleTitles.title2
-                                , chunkMaker servicesNutritionScience.serviceArticle.articleParagraph.paragraph2
+        , bulletPointMaker servicesNutritionScience.serviceArticle.articleListEntries.list2
-                                , titleMaker servicesNutritionScience.serviceArticle.articleTitles.title1
-                                , numberMaker servicesNutritionScience.serviceArticle.articleListEntries.list1
-                                , titleMaker servicesNutritionScience.serviceArticle.articleTitles.title2
-                                , bulletPointMaker servicesNutritionScience.serviceArticle.articleListEntries.list2
-                                ]
-                            ]
-                        ]
-                    ]
-                ]
-            ]
         ]
+    ]

frontend/static/styles.css

@@ -1,8 +1,32 @@
 * {
-	scrollbar-width: none;
+  scrollbar-width: thin;
-  }
+  scrollbar-color: rgb(120, 60, 0) rgb(20, 20, 20);
+}
 
-  *::-webkit-scrollbar {
+*::-webkit-scrollbar {
-	display: none;
+  width: 10px;
-  }
+  height: 10px;
+  display: block;
+}
 
+*::-webkit-scrollbar-track {
+  background: rgb(30, 30, 30);
+  border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: rgb(120, 60, 0);
+  border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: rgb(120, 60, 0);
+}
+
+*::-webkit-scrollbar-corner {
+  background: rgb(30, 30, 30);
+}
+
+*::-webkit-scrollbar {
+  display: none;
+}