feat: so very close

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

@@ -26,7 +26,7 @@ import Element.Font as F
 
 detailSpacing : Attribute msg
 detailSpacing =
-    spacing 3
+    spacing 5
 
 
 detailFormat : (List (Attribute msg) -> List (Element msg) -> Element msg) -> List (Element msg) -> Element msg
@@ -123,24 +123,29 @@ detailBodyMaker colour item =
 
 listMaker : (a -> Element msg) -> List a -> Element msg
 listMaker makeItem itemInfo =
-    column
+    detailFormat column <|
-        [ spacing 5
-        , width fill
-        ]
-    <|
         List.map2 (\x y -> makeItem x)
             itemInfo
             (List.range 1 (List.length itemInfo))
 
 
-listItem : String -> Attribute msg -> Element msg
+listMaker2 : (a -> Int -> Element msg) -> List a -> Element msg
-listItem item colour =
+listMaker2 makeItem itemInfo =
+    detailFormat column <|
+        List.map2
+            (\x y -> makeItem x y)
+            itemInfo
+            (List.range 1 (List.length itemInfo))
+
+
+listItem : ThemeColor -> String -> Element msg
+listItem colour item =
     el
         [ paragraphFontSize
         , F.bold
         , alignLeft
         , width fill
-        , colour
+        , F.color (getThemeColor colour)
         ]
     <|
         paragraph [ F.regular ]

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

@@ -15,6 +15,7 @@ import Config.Helpers.Format
         )
 import Config.Helpers.ImageFolders as M exposing (..)
 import Config.Helpers.Response exposing (contentContainer)
+import Config.Helpers.ServiceFormat exposing (divider)
 import Config.Pages.Debate.Arguments.Records.Template exposing (argument)
 import Config.Style.Colour.Helpers exposing (colourTheme)
 import Config.Style.Glow
@@ -36,7 +37,6 @@ import Element.Font as F
 import Html.Attributes as H
 import Route.Path as Path exposing (..)
 import Shared
-import Config.Helpers.ServiceFormat exposing (divider)
 
 
 cardMaker : Device -> Cardable msg -> List (Element msg) -> Element msg
@@ -84,7 +84,7 @@ cardMaker device cardable contents =
         cardTitleMaker : String -> Maybe String -> Element msg
         cardTitleMaker title maybeUrl =
             el
-                ([ headerFontSizeMedium
+                ([ headerFontSizeBig
                  , F.bold
                  , F.color colourTheme.textLightGrey
                  , width fill

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

@@ -34,7 +34,7 @@ import Route.Path as Path exposing (..)
 import Shared exposing (..)
 
 
-headerMaker : Headerable -> Element msg
+headerMaker : Headerable msg -> Element msg
 headerMaker headerable =
     let
         headerTitleMaker : String -> Element msg
@@ -48,7 +48,7 @@ headerMaker headerable =
             <|
                 paragraph [] [ text title ]
 
-        headerHelper : String -> String -> Element msg
+        headerHelper : String -> List (Element msg) -> Element msg
         headerHelper title body =
             el
                 [ width (fill |> minimum 100)
@@ -92,7 +92,7 @@ headerMaker headerable =
                                 , F.center
                                 ]
                             <|
-                                [ text body ]
+                                body
                     ]
     in
     case headerable of

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

@@ -1,113 +1,114 @@
 module Config.Helpers.Headers.Records exposing (..)
 
 import Config.Helpers.Headers.Types exposing (..)
+import Element as E exposing (text)
 
 
-argumentHeader : Header
+argumentHeader : Header msg
 argumentHeader =
     let
         name =
             "Arguments"
     in
     { headerTitle = String.toUpper name
-    , headerBody = "This page features arguments that I hold to be sound. I'm open to hearing all challenges, as I am ready to engage with and defend any argument listed."
+    , headerBody = [ text "This page features arguments that I hold to be sound. I'm open to hearing all challenges, as I am ready to engage with and defend any argument listed." ]
     }
 
 
-blogHeader : Header
+blogHeader : Header msg
 blogHeader =
     let
         name =
             "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 article."
+    , headerBody = [ text "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." ]
     }
 
 
-cuckListHeader : Header
+cuckListHeader : Header msg
 cuckListHeader =
     let
         name =
             "Cucklist"
     in
     { headerTitle = String.toUpper name
-    , headerBody = "This page features a list of morons who wrote cheques with their mouths that their asses couldn't cash. Each person included in this list has dodged debating me."
+    , headerBody = [ text "This page features a list of morons who wrote cheques with their mouths that their asses couldn't cash. Each person included in this list has dodged debating me." ]
     }
 
 
-debateHeader : Header
+debateHeader : Header msg
 debateHeader =
     let
         name =
             "Debate"
     in
     { headerTitle = String.toUpper name
-    , headerBody = "Here you will find links to various pages relevant to debate, such as formal arguments, a list of debate-dodging cucks, and an inventory of nonsensical terminology."
+    , headerBody = [ text "Here you will find links to various pages relevant to debate, such as formal arguments, a list of debate-dodging cucks, and an inventory of nonsensical terminology." ]
     }
 
 
-donateHeader : Header
+donateHeader : Header msg
 donateHeader =
     let
         name =
             "Donate"
     in
     { headerTitle = String.toUpper name
-    , headerBody = "My site, research, and content all cost time and money to run. If you find my contributions valuable, please consider supporting my work on any of the platforms listed below!"
+    , headerBody = [ text "My site, research, and content all cost time and money to run. If you find my contributions valuable, please consider supporting my work on any of the platforms listed below!" ]
     }
 
 
-gibberishHeader : Header
+gibberishHeader : Header msg
 gibberishHeader =
     let
         name =
             "Gibberish"
     in
     { headerTitle = String.toUpper name
-    , headerBody = "This page is specifically for terms and ostensible concepts that I think are either nonsensical or so practically useless that its intelligiblity is irrelevant."
+    , headerBody = [ text "This page is specifically for terms and ostensible concepts that I think are either nonsensical or so practically useless that its intelligiblity is irrelevant." ]
     }
 
 
-servicesHeader : Header
+servicesHeader : Header msg
 servicesHeader =
     let
         name =
             "Services"
     in
     { headerTitle = String.toUpper name
-    , headerBody = "Bundle any of the services below to receive a $10 discount per hour. For example, two Debate Analysis sessions would cost $140 total, instead of $80/hr. All prices are in CAD."
+    , headerBody = [ text "Bundle any of the services below to receive a $10 discount per hour. For example, two Debate Analysis sessions would cost $140 total, instead of $80/hr. All prices are in CAD." ]
     }
 
 
-interviewHeader : Header
+interviewHeader : Header msg
 interviewHeader =
     let
         name =
             "Interviews"
     in
     { headerTitle = String.toUpper name
-    , headerBody = "This page showcases various podcasts and shows I've been on. If you’d like to have me as a guest on your podcast, feel free to reach out—I’d love to share my perspectives with your audience!"
+    , headerBody = [ text "This page showcases various podcasts and shows I've been on. If you’d like to have me as a guest on your podcast, feel free to reach out!" ]
     }
 
 
-nutriDexHeader : Header
+nutriDexHeader : Header msg
 nutriDexHeader =
     let
         name =
             "The NutriDex"
     in
     { headerTitle = String.toUpper name
-    , headerBody = ""
+    , headerBody = [ text "" ]
     }
 
 
-contactHeader : Header
+contactHeader : Header msg
 contactHeader =
     let
         name =
             "Contact"
     in
     { headerTitle = String.toUpper name
-    , headerBody = ""
+    , headerBody = [ text "" ]
     }

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

@@ -1,20 +1,22 @@
 module Config.Helpers.Headers.Types exposing (..)
 
-
+import Element exposing (Element)
-type Headerable
-    = Arguments Header
-    | BlogPage Header
-    | CuckList Header
-    | Debate Header
-    | Donate Header
-    | Gibberish Header
-    | Services Header
-    | Interviews Header
-    | NutriDex Header
-    | Contact Header
 
 
-type alias Header =
+type Headerable msg
+    = Arguments (Header msg)
+    | BlogPage (Header msg)
+    | CuckList (Header msg)
+    | Debate (Header msg)
+    | Donate (Header msg)
+    | Gibberish (Header msg)
+    | Services (Header msg)
+    | Interviews (Header msg)
+    | NutriDex (Header msg)
+    | Contact (Header msg)
+
+
+type alias Header msg =
     { headerTitle : String
-    , headerBody : String
+    , headerBody : List (Element msg)
     }

frontend/src/Config/Helpers/ServiceFormat.elm

@@ -1,6 +1,7 @@
 module Config.Helpers.ServiceFormat exposing (..)
 
 import Config.Data.Identity exposing (pageNames)
+import Config.Helpers.Cards.Inner.Helpers exposing (detailSpacing)
 import Config.Helpers.Format
     exposing
         ( headerFontSizeBig
@@ -38,7 +39,7 @@ chunkMaker : List (Element msg) -> Element msg
 chunkMaker elements =
     paragraph
         [ F.color colourTheme.textLightGrey
-        , paragraphSpacing
+        , detailSpacing
         , paragraphFontSize
         , F.alignLeft
         , width fill

frontend/src/Config/Pages/Blog/Records/NagraGoodrich.elm

@@ -11,8 +11,6 @@ articleNagraGoodrich =
     , articleAuthor = "Nick Hiebert"
     , isNewTabLink = False
     , hasReferences = False
-   
-    
     , hasTableOfContents = True
     , articleImage = "nagragoodrich"
     , articlePublished = "May 12, 2022"

frontend/src/Config/Style/Colour/Helpers.elm

@@ -46,124 +46,6 @@ syntaxTheme =
     }
 
 
-
--- Color attribute functions for main theme
-
-
-textLightGrey : E.Attr decorative msg
-textLightGrey =
-    F.color colourTheme.textLightGrey
-
-
-textDarkGrey : E.Attr decorative msg
-textDarkGrey =
-    F.color colourTheme.textDarkGrey
-
-
-textLightOrange : E.Attr decorative msg
-textLightOrange =
-    F.color colourTheme.textLightOrange
-
-
-textDarkOrange : E.Attr decorative msg
-textDarkOrange =
-    F.color colourTheme.textDarkOrange
-
-
-textDeepDarkOrange : E.Attr decorative msg
-textDeepDarkOrange =
-    F.color colourTheme.textDeepDarkOrange
-
-
-backgroundLightGrey : E.Attr decorative msg
-backgroundLightGrey =
-    F.color colourTheme.backgroundLightGrey
-
-
-backgroundDarkGrey : E.Attr decorative msg
-backgroundDarkGrey =
-    F.color colourTheme.backgroundDarkGrey
-
-
-backgroundDeepDarkGrey : E.Attr decorative msg
-backgroundDeepDarkGrey =
-    F.color colourTheme.backgroundDeepDarkGrey
-
-
-backgroundSpreadsheet : E.Attr decorative msg
-backgroundSpreadsheet =
-    F.color colourTheme.backgroundSpreadsheet
-
-
-backgroundSpreadsheetDark : E.Attr decorative msg
-backgroundSpreadsheetDark =
-    F.color colourTheme.backgroundSpreadsheetDark
-
-
-shadow : E.Attr decorative msg
-shadow =
-    F.color colourTheme.shadow
-
-
-barGreen : E.Attr decorative msg
-barGreen =
-    F.color colourTheme.barGreen
-
-
-barRed : E.Attr decorative msg
-barRed =
-    F.color colourTheme.barRed
-
-
-debugColour : E.Attr decorative msg
-debugColour =
-    F.color colourTheme.debugColour
-
-
-transparent : E.Attr decorative msg
-transparent =
-    F.color colourTheme.transparent
-
-
-
--- Color attribute functions for syntax theme
-
-
-syntaxPunctuation : E.Attr decorative msg
-syntaxPunctuation =
-    F.color syntaxTheme.punctuation
-
-
-syntaxKey : E.Attr decorative msg
-syntaxKey =
-    F.color syntaxTheme.key
-
-
-syntaxString : E.Attr decorative msg
-syntaxString =
-    F.color syntaxTheme.string
-
-
-syntaxKeyword : E.Attr decorative msg
-syntaxKeyword =
-    F.color syntaxTheme.keyword
-
-
-syntaxOperator : E.Attr decorative msg
-syntaxOperator =
-    F.color syntaxTheme.operator
-
-
-syntaxBackground : E.Attr decorative msg
-syntaxBackground =
-    F.color syntaxTheme.background
-
-
-syntaxText : E.Attr decorative msg
-syntaxText =
-    F.color syntaxTheme.text
-
-
 type ThemeColor
     = TextLightGrey
     | TextDarkGrey

frontend/src/Config/Style/Images.elm

@@ -1,7 +1,7 @@
 module Config.Style.Images exposing (..)
 
 import Config.Helpers.ImageFolders exposing (..)
-import Config.Style.Colour.Helpers exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (ThemeColor(..), colourTheme, getThemeColor)
 import Element as E exposing (..)
 import Element.Background as B exposing (color)
 import Element.Border as D
@@ -15,9 +15,15 @@ import Element.Border as D
 imageSquareMaker : Device -> String -> Bool -> String -> Element msg
 imageSquareMaker device imagePath isLeft size =
     E.image
-        [ D.rounded 10
+        [ D.rounded (roundingScaler size)
         , clip
         , E.width <| imageSizer size
+        , E.height <| imageSizer size
+        , if imagePath == imagePathMaker Donate "cardano" then
+            B.color (rgb255 4 20 108)
+
+          else
+            B.color (getThemeColor BackgroundLightGrey)
         ]
         { src = imagePath
         , description = ""
@@ -27,20 +33,43 @@ imageSquareMaker device imagePath isLeft size =
 imageSizer : String -> Length
 imageSizer size =
     case size of
-        "Fatty" ->
-            px 80
-
-        "Big" ->
-            px 60
-
-        "Medium" ->
-            px 45
-
         "Fill" ->
             fill
 
-        "Test" ->
+        "Fatty" ->
-            px 145
+            px 128
+
+        "Big" ->
+            px 65
+
+        "Small" ->
+            px 28
 
         _ ->
-            px 28
+            px 20
+
+
+roundingScaler : String -> Int
+roundingScaler size =
+    case size of
+        "Fill" ->
+            32
+
+        "Fatty" ->
+            32
+
+        -- 128px
+        "Big" ->
+            10
+
+        -- 65px
+        "Small" ->
+            10
+
+        -- 28px
+        _ ->
+            10
+
+
+
+-- 20px default

frontend/src/Pages/Blog.elm

@@ -195,7 +195,6 @@ articleMaker device article =
             el
                 [ alignLeft
                 , alignTop
-                , width fill
                 , paddingEach
                     { top = 0
                     , right = 10
@@ -204,20 +203,22 @@ articleMaker device article =
                     }
                 ]
             <|
-                imageSquareMaker device (imagePathMaker M.BlogArticle article.articleImage) True size
+                imageSquareMaker device (imagePathMaker M.BlogCard article.articleImage) True size
     in
     detailFormat column
-        [ case ( device.class, device.orientation ) of
+        [ detailFormat row
-            ( Phone, Portrait ) ->
+            [ case ( device.class, device.orientation ) of
-                none
+                ( Phone, Portrait ) ->
+                    none
 
-            ( Tablet, Portrait ) ->
+                ( Tablet, Portrait ) ->
-                none
+                    none
 
-            _ ->
+                _ ->
-                image "Fill"
+                    image "Fatty"
-        , detailFormat column
+            , detailFormat column
-            (articleRows article)
+                (articleRows article ++ [])
+            ]
         , el [] <|
             detailBodyMaker TextLightGrey (renderDeviceMarkdownNoToc (extractFirstWords article.articleBody))
         ]
@@ -253,14 +254,11 @@ articleRows article =
                 (wordCount article.articleBody)
             )
         )
-    ]
+    , infoRow "Sources"
-        ++ (if referenceCount >= 2 then
+        (if referenceCount >= 2 then
-                [ infoRow "Sources"
+            text (String.fromInt referenceCount)
-                    (text
-                        (String.fromInt referenceCount)
-                    )
-                ]
 
-            else
+         else
-                []
+            text "N/A"
-           )
+        )
+    ]

frontend/src/Pages/Contact.elm

@@ -1,6 +1,7 @@
 module Pages.Contact exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
+import Config.Helpers.Cards.Inner.Helpers exposing (numberedListItem)
 import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
 import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Format exposing (..)
@@ -21,7 +22,7 @@ import Config.Helpers.ServiceFormat
 import Config.Helpers.ToolTip exposing (..)
 import Config.Helpers.Viewport exposing (resetViewport)
 import Config.Pages.Contact.Types exposing (..)
-import Config.Style.Colour.Helpers exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (ThemeColor(..), colourTheme)
 import Config.Style.Transitions
     exposing
         ( hoverFontDarkOrange
@@ -137,19 +138,19 @@ contactList device =
                     [ none ]
             , List.map
                 (\contact ->
-                    cardMaker device (C.Contact contact) (contentList contact)
+                    cardMaker device (C.Contact contact) (contentList device contact)
                 )
                 [ contactTitle ]
             ]
 
 
-contentList : Contact -> List (Element msg)
+contentList : Device -> Contact -> List (Element msg)
-contentList contact =
+contentList device contact =
-    [ instructionBody ]
+    [ instructionBody device ]
 
 
-instructionBody : Element msg
+instructionBody : Device -> Element msg
-instructionBody =
+instructionBody device =
     column
         [ spacing 10
         , paddingEach
@@ -181,7 +182,7 @@ instructionBody =
                             [ width <| px 15
                             , alignTop
                             ]
-                            [ el [ alignRight ] <| text (String.fromInt (index + 1) ++ ". ") ]
+                            [ numberedListItem TextLightGrey (index + 1) ]
                         , column
                             [ spacing 10
                             , width fill
@@ -196,7 +197,7 @@ instructionBody =
                             ]
                         ]
                 )
-                termsAndConditions
+                (termsAndConditions device)
         , column [ centerX, width fill ]
             [ divider
             , titleMaker (String.toUpper "Additional Clarifications")
@@ -246,8 +247,21 @@ rounding =
     D.rounded 10
 
 
-termsAndConditions : List (List (Element msg))
+termsAndConditions : Device -> List (List (Element msg))
-termsAndConditions =
+termsAndConditions device =
+    let
+        backGroundCase : Attr decorative msg
+        backGroundCase =
+            case ( device.class, device.orientation ) of
+                ( Phone, Portrait ) ->
+                    B.color colourTheme.backgroundDarkGrey
+
+                ( Tablet, Portrait ) ->
+                    B.color colourTheme.backgroundDarkGrey
+
+                _ ->
+                    B.color colourTheme.backgroundLightGrey
+    in
     [ [ row []
             [ paragraph [ alignLeft ]
                 [ text "You will register an account with "
@@ -306,7 +320,7 @@ termsAndConditions =
                         , left = 20
                         , right = 20
                         }
-                    , B.color colourTheme.backgroundLightGrey
+                    , backGroundCase
                     , rounding
                     , width fill
                     , spacing 8
@@ -352,7 +366,7 @@ termsAndConditions =
                     , left = 20
                     , right = 20
                     }
-                , B.color colourTheme.backgroundLightGrey
+                , backGroundCase
                 , rounding
                 , width fill
                 , spacing 8

frontend/src/Pages/Debate.elm

@@ -11,6 +11,7 @@ import Config.Data.Identity
     exposing
         ( pageNames
         )
+import Config.Helpers.Cards.Inner.Helpers exposing (detailBodyLink, detailBodyMaker, detailFormat, detailSpacing, detailTitleMaker)
 import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
 import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Converters exposing (formatName)
@@ -35,7 +36,7 @@ import Config.Pages.Debate.Arguments.List exposing (argumentList)
 import Config.Pages.Debate.Cuckery.List exposing (cuckList)
 import Config.Pages.Debate.Gibberish.List exposing (gibberishList)
 import Config.Pages.Debate.Types exposing (..)
-import Config.Style.Colour.Helpers as T exposing (colourTheme)
+import Config.Style.Colour.Helpers as T exposing (ThemeColor(..), colourTheme)
 import Config.Style.Glow
     exposing
         ( glowDeepDarkGrey
@@ -181,46 +182,45 @@ descriptionMaker device debate =
             <|
                 imageSquareMaker device (imagePathMaker M.Debate debate.debateImage) True size
     in
-    chunkMaker
+    detailFormat row
-        [ image "Fatty"
+        [ case ( device.class, device.orientation ) of
-        , el [] <|
+            ( Phone, Portrait ) ->
-            inferenceMaker debate
+                none
-        , el [ width fill, height (px 0) ] none
+
-        , el
+            ( Tablet, Portrait ) ->
-            [ F.color colourTheme.textLightGrey ]
+                none
-            (text debate.debateDescription)
+
+            _ ->
+                image "Fatty"
+        , detailFormat column
+            [ inferenceMaker debate
+            , detailBodyMaker TextLightGrey
+                (text debate.debateDescription)
+            ]
         ]
 
 
 inferenceMaker : Debate -> Element msg
 inferenceMaker debate =
-    row [ spacing 5 ]
+    detailFormat row
-        [ el
+        [ detailTitleMaker TextLightOrange
-            [ F.color colourTheme.textLightOrange
+            (case debate.debateTitle of
-            , paragraphSpacing
+                "Arguments" ->
-            , F.bold
+                    "Inferences:"
-            , headerFontSizeSmall
-            ]
-          <|
-            if debate.debateTitle == "Arguments" then
-                text "Inferences: "
 
-            else if debate.debateTitle == "Cucklist" then
+                "Cucklist" ->
-                text "Cucks: "
+                    "Cucks:"
 
-            else if debate.debateTitle == "Gibberish" then
+                "Gibberish" ->
-                text "Gibberations: "
+                    "Gibberations:"
 
-            else
+                _ ->
-                text ""
+                    ""
-        , el
+            )
-            [ F.color colourTheme.textLightGrey
+        , detailBodyMaker TextLightGrey
-            , F.regular
+            (text
-            , paragraphFontSize
-            ]
-          <|
-            text
                 (String.fromInt debate.debateCount)
+            )
         ]
 
 

frontend/src/Pages/Debate/Arguments.elm

@@ -44,8 +44,6 @@ import Config.Style.Colour.Helpers
     exposing
         ( ThemeColor(..)
         , colourTheme
-        , textLightGrey
-        , textLightOrange
         )
 import Config.Style.Glow
     exposing
@@ -211,7 +209,7 @@ contentList device argument =
                         none
 
                     _ ->
-                        image "Fatty"
+                        image "Big"
                 , el ([ height fill ] ++ bodyFormat TextLightGrey) <| text argument.propositionSummary
                 ]
             , detailFormat row

frontend/src/Pages/Debate/Cucklist.elm

@@ -29,7 +29,11 @@ import Config.Pages.Debate.Cuckery.List
         , cuckListNumber
         )
 import Config.Pages.Debate.Cuckery.Types exposing (..)
-import Config.Style.Colour.Helpers exposing (ThemeColor(..), colourTheme, textLightGrey)
+import Config.Style.Colour.Helpers
+    exposing
+        ( ThemeColor(..)
+        , colourTheme
+        )
 import Config.Style.Images exposing (imageSquareMaker)
 import Config.Style.Transitions
     exposing
@@ -165,13 +169,13 @@ contentList device cuck =
     [ detailFormat row
         [ case ( device.class, device.orientation ) of
             ( Phone, Portrait ) ->
-                image "Smallish"
+                none
 
             ( Tablet, Portrait ) ->
-                image "Smallish"
+                none
 
             _ ->
-                image "Test"
+                image "Fatty"
         , detailFormat column
             [ socialMaker cuck
             , dodgeTitle cuck

frontend/src/Pages/Debate/Gibberish.elm

@@ -179,7 +179,15 @@ contentList device gibberish =
         , paragraphFontSize
         , width fill
         ]
-        [ image "Big"
+        [ case ( device.class, device.orientation ) of
+            ( Phone, Portrait ) ->
+                none
+
+            ( Tablet, Portrait ) ->
+                none
+
+            _ ->
+                image "Big"
         , text gibberish.gibberishDescription
         ]
     , gibberishMakerBody gibberish

frontend/src/Pages/Donate.elm

@@ -1,6 +1,7 @@
 module Pages.Donate exposing (Model, Msg, page)
 
 import Config.Data.Identity as I exposing (..)
+import Config.Helpers.Cards.Inner.Helpers exposing (detailBodyMaker, detailFormat, detailFormatEl, detailTitleMaker, listItem, listMaker)
 import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
 import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Format
@@ -169,194 +170,55 @@ contentList device donate =
             <|
                 imageSquareMaker device (imagePathMaker M.Donate donate.donateImage) True size
     in
-    [ row [ width fill ]
+    [ detailFormat row
-        [ image "Small"
+        [ image "Fatty"
-        , column [ width fill ]
+        , detailFormat column
             [ feeMaker donate
             , preferenceMaker donate
+            , tableMaker donate device
             ]
         ]
-    , tableMaker donate device
+    , proConMaker donate
-    , proTitleMaker donate
-    , proMaker donate
-    , conTitleMaker donate
-    , conMaker donate
     ]
 
 
-donateWidth =
-    width <| px 45
-
-
 feeMaker : Donate -> Element msg
 feeMaker donate =
-    row
+    detailFormat row
-        [ F.color colourTheme.textLightOrange
+        [ detailTitleMaker TextLightOrange "Fees:"
-        , paragraphSpacing
+        , detailBodyMaker TextLightGrey (text donate.donateFees)
-        , F.bold
-        , headerFontSizeSmall
-        , E.width fill
-        , spacing 5
-        ]
-        [ column
-            [ alignTop
-            ]
-            [ text "Fees:"
-            ]
-        , el
-            [ E.width fill
-            , alignLeft
-            ]
-          <|
-            el
-                [ F.regular
-                , paragraphFontSize
-                , F.color colourTheme.textLightGrey
-                ]
-            <|
-                text donate.donateFees
         ]
 
 
-proTitleMaker : Donate -> Element msg
+proConMaker : Donate -> Element msg
-proTitleMaker donate =
+proConMaker donate =
-    row
+    detailFormat column
-        [ F.color colourTheme.textLightOrange
+        [ detailTitleMaker TextLightOrange "Pros:"
-        , paragraphSpacing
+        , listMaker makePro donate.donatePros
-        , headerFontSizeSmall
+        , detailTitleMaker TextLightOrange "Cons:"
-        , F.bold
+        , listMaker makeCon donate.donateCons
         ]
-        [ el
-            [ alignTop
-            , width <| px 80
-            ]
-          <|
-            text "Pros:"
-        ]
-
-
-conTitleMaker : Donate -> Element msg
-conTitleMaker donate =
-    row
-        [ F.color colourTheme.textLightOrange
-        , paragraphSpacing
-        , headerFontSizeSmall
-        , F.bold
-        ]
-        [ el
-            [ alignTop
-            , width <| px 80
-            ]
-          <|
-            text "Cons:"
-        ]
-
-
-proMaker : Donate -> Element msg
-proMaker donate =
-    column
-        [ spacing 8
-        , width fill
-        , paddingEach
-            { top = 0
-            , right = 0
-            , bottom = 0
-            , left = 35
-            }
-        ]
-    <|
-        List.map2 (\x y -> makePro x)
-            donate.donatePros
-            (List.range 1 (List.length donate.donatePros))
 
 
 makePro : Pros -> Element msg
 makePro pro =
-    column
+    listItem TextLightGrey pro.pro
-        [ F.color colourTheme.textLightGrey
-        , paragraphSpacing
-        , paragraphFontSize
-        , F.bold
-        , alignLeft
-        , spacing 8
-        , width fill
-        ]
-        [ paragraph [ F.regular ]
-            [ text ("• " ++ pro.pro) ]
-        ]
-
-
-conMaker : Donate -> Element msg
-conMaker donate =
-    column
-        [ spacing 8
-        , width fill
-        , paddingEach
-            { top = 0
-            , right = 0
-            , bottom = 0
-            , left = 35
-            }
-        ]
-    <|
-        List.map2 (\x y -> makeCon x)
-            donate.donateCons
-            (List.range 1 (List.length donate.donateCons))
 
 
 makeCon : Cons -> Element msg
 makeCon con =
-    column
+    listItem TextLightGrey con.con
-        [ F.color colourTheme.textLightGrey
-        , paragraphSpacing
-        , paragraphFontSize
-        , F.bold
-        , alignLeft
-        , spacing 8
-        , width fill
-        ]
-        [ paragraph [ F.regular ] <|
-            [ text ("• " ++ con.con)
-            ]
-        ]
 
 
 preferenceMaker : Donate -> Element msg
 preferenceMaker donate =
-    row
+    detailFormat row
-        [ width fill
+        [ el
-        , height fill
+            [ tooltip
-        ]
+                "This represents how strongly I prefer a given platform relative to other platforms."
-        [ column
-            [ E.alignTop
-            , E.alignLeft
-            ]
-            [ paragraph
-                [ F.color colourTheme.textLightGrey
-                , paragraphSpacing
-                , F.bold
-                , headerFontSizeSmall
-                , alignLeft
-                , E.width fill
-                ]
-                [ el
-                    [ tooltip
-                        "This represents how strongly I prefer a given platform relative to other platforms."
-                    ]
-                    (el
-                        [ paddingEach
-                            { top = 0
-                            , right = 10
-                            , bottom = 0
-                            , left = 0
-                            }
-                        , F.color colourTheme.textLightOrange
-                        ]
-                     <|
-                        text "Preference:"
-                    )
-                ]
             ]
+          <|
+            detailTitleMaker TextLightOrange "Preference:"
         , barPadding
             [ barMaker getPreferenceTooltip donate.donatePreference ]
         ]
@@ -404,48 +266,44 @@ getPreferenceTooltip num =
 
 tableMaker : Donate -> Device -> Element msg
 tableMaker donate device =
-    column
+    el
-        [ centerX
+        [ E.alignLeft
         , E.width fill
+        , centerX
         ]
-        [ el
+    <|
-            [ E.alignLeft
+        E.table
-            , E.width fill
+            ([ spacing 0
-            ]
+             , D.rounded 10
-          <|
+             , D.width 2
-            E.table
+             , D.color colourTheme.textDarkGrey
-                ([ spacing 0
+             , clip
-                 , D.rounded 10
+             ]
-                 , D.width 2
+                ++ (case ( device.class, device.orientation ) of
-                 , D.color colourTheme.textDarkGrey
+                        ( Phone, Portrait ) ->
-                 , clip
+                            [ B.color colourTheme.backgroundSpreadsheet ]
-                 ]
-                    ++ (case ( device.class, device.orientation ) of
-                            ( Phone, Portrait ) ->
-                                [ B.color colourTheme.backgroundSpreadsheet ]
 
-                            ( Tablet, Portrait ) ->
+                        ( Tablet, Portrait ) ->
-                                [ B.color colourTheme.backgroundSpreadsheet ]
+                            [ B.color colourTheme.backgroundSpreadsheet ]
 
-                            _ ->
+                        _ ->
-                                []
+                            []
-                       )
+                   )
-                )
+            )
-                { data = donate.donateFeatures
+            { data = donate.donateFeatures
-                , columns =
+            , columns =
-                    List.map createColumn
+                List.map createColumn
-                        (case ( device.class, device.orientation ) of
+                    (case ( device.class, device.orientation ) of
-                            ( Phone, Portrait ) ->
+                        ( Phone, Portrait ) ->
-                                mobileLabels
+                            mobileLabels
 
-                            ( Tablet, Portrait ) ->
+                        ( Tablet, Portrait ) ->
-                                mobileLabels
+                            mobileLabels
 
-                            _ ->
+                        _ ->
-                                desktopLabels
+                            desktopLabels
-                        )
+                    )
-                }
+            }
-        ]
 
 
 desktopLabels : List { label : String, getter : { a | free : b, subscriptions : b, userFriendly : b, anonymous : b, rewardTiers : b } -> b }
@@ -497,7 +355,7 @@ createColumn { label, getter } =
                 , right = 0
                 }
             , D.color colourTheme.textDarkGrey
-            , padding 8
+            , padding 5
             , E.width fill
             , F.center
             ]
@@ -516,10 +374,13 @@ createColumn { label, getter } =
                     , right = 0
                     }
                 , D.color colourTheme.textDarkGrey
-                , padding 8
+                , padding 5
                 , E.height fill
                 ]
-                [ row [ centerX ]
+                [ row
+                    [ centerX
+                    , centerY
+                    ]
                     [ paragraph []
                         [ E.image
                             [ E.width <| px 30

frontend/src/Pages/Interviews.elm

@@ -184,13 +184,13 @@ contentList device interview =
         imageMaker =
             case ( device.class, device.orientation ) of
                 ( Phone, Portrait ) ->
-                    image "Smallish"
+                    none
 
                 ( Tablet, Portrait ) ->
-                    image "Smallish"
+                    none
 
                 _ ->
-                    image "Test"
+                    image "Fatty"
     in
     [ row
         [ paddingEach
@@ -214,10 +214,8 @@ contentList device interview =
 
 appearanceMaker : Interview -> Element msg
 appearanceMaker interview =
-    column [ spacing 10, width fill ] <|
+    detailFormat column
-        List.map2 (\x y -> makeAppearance x y)
+        [ listMaker2 makeAppearance interview.interviewAppearances ]
-            interview.interviewAppearances
-            (List.range 1 (List.length interview.interviewAppearances))
 
 
 makeAppearance : Appearance -> Int -> Element msg
@@ -229,7 +227,6 @@ makeAppearance appearanceEntry index =
             , experienceMaker appearanceEntry
             , dateMaker appearanceEntry
             , subjectMaker appearanceEntry
-            , subjectList appearanceEntry
             ]
         ]
 
@@ -245,37 +242,39 @@ episodeMaker appearanceEntry =
 
 experienceMaker : Appearance -> Element msg
 experienceMaker appearanceEntry =
-    row
+    detailFormat row
-        [ width fill
+        [ el
-        , height fill
+            [ tooltip
-        , spacing 5
+                "This represents my confidence in the soundness of the argument."
-        ]
-        [ column
-            [ E.alignTop
-            , E.alignLeft
-            ]
-            [ paragraph
-                [ F.color colourTheme.textLightGrey
-                , paragraphSpacing
-                , headerFontSizeSmall
-                , F.bold
-                ]
-                [ el
-                    [ tooltip
-                        "This represents how pleasant it was to interact with the host(s)."
-                    ]
-                    (el
-                        []
-                     <|
-                        text "Pleasantness:"
-                    )
-                ]
             ]
+          <|
+            detailTitleMaker TextLightGrey "Pleasantness:"
         , barPadding
             [ barMaker getExperienceTooltip appearanceEntry.appearanceExperience ]
         ]
 
 
+dateMaker : Appearance -> Element msg
+dateMaker appearanceEntry =
+    detailFormat row
+        [ detailTitleMaker TextLightGrey "Published:"
+        , detailBodyMaker TextLightGrey (text appearanceEntry.appearanceYear)
+        ]
+
+
+subjectMaker : Appearance -> Element msg
+subjectMaker appearanceEntry =
+    detailFormat column
+        [ detailFormatEl <| detailTitleMaker TextLightGrey "Subjects: "
+        , detailFormat column [ listMaker makeSubject appearanceEntry.appearanceSubjects ]
+        ]
+
+
+makeSubject : Subjects -> Element msg
+makeSubject subjects =
+    listItem TextLightGrey subjects.subject
+
+
 getExperienceTooltip : Int -> String
 getExperienceTooltip num =
     case num of
@@ -314,80 +313,3 @@ getExperienceTooltip num =
 
         _ ->
             "Behavior level out of expected range."
-
-
-dateMaker : Appearance -> Element msg
-dateMaker appearanceEntry =
-    row
-        [ F.color colourTheme.textLightGrey
-        , paragraphSpacing
-        , headerFontSizeSmall
-        , F.bold
-        ]
-        [ el
-            [ alignTop
-            ]
-          <|
-            text
-                "Published:"
-        , el
-            [ alignTop
-            , width fill
-            ]
-          <|
-            paragraph
-                [ F.regular
-                , paragraphFontSize
-                ]
-                [ text appearanceEntry.appearanceYear
-                ]
-        ]
-
-
-subjectMaker : Appearance -> Element msg
-subjectMaker appearanceEntry =
-    paragraph
-        [ F.color colourTheme.textLightGrey
-        , paragraphSpacing
-        , headerFontSizeSmall
-        , F.bold
-        ]
-        [ column
-            [ alignTop
-            ]
-            [ text "Subjects: "
-            ]
-        ]
-
-
-subjectList : Appearance -> Element msg
-subjectList appearanceEntry =
-    column
-        [ spacing 5
-        , width fill
-        , paddingEach
-            { top = 0
-            , right = 0
-            , bottom = 0
-            , left = 10
-            }
-        ]
-    <|
-        List.map2 (\x y -> makeSubject x)
-            appearanceEntry.appearanceSubjects
-            (List.range 1 (List.length appearanceEntry.appearanceSubjects))
-
-
-makeSubject : Subjects -> Element msg
-makeSubject subjects =
-    el
-        [ E.width fill
-        , alignLeft
-        ]
-    <|
-        paragraph
-            [ F.regular
-            , paragraphFontSize
-            ]
-            [ text ("• " ++ subjects.subject) ]
-

frontend/src/Pages/Services.elm

@@ -178,7 +178,7 @@ contentList device service =
                 none
 
             _ ->
-                image "Test"
+                image "Fatty"
         , detailFormat column
             [ rateMaker service
             , descriptionMaker
@@ -209,5 +209,5 @@ offeringMaker service =
 makeDescription : Description -> Element msg
 makeDescription description =
     listItem
+        TextLightGrey
         description.point
-        textLightGrey