feat: slow refactor

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

@@ -2,8 +2,8 @@ module Config.Helpers.Articles.Article exposing (..)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Types exposing (References)
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Format exposing (..)
 import Config.Helpers.Headers.Helpers exposing (..)
 import Config.Helpers.Headers.Types exposing (Header)
@@ -24,7 +24,7 @@ import Config.Pages.Blog.Types exposing (BlogArticle)
 import Config.Pages.Contact.Types exposing (..)
 import Config.Pages.Interviews.Types exposing (..)
 import Config.Pages.Products.Types exposing (..)
-import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (colourTheme)
 import Config.Style.Transitions
     exposing
         ( hoverFontDarkOrange

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

@@ -0,0 +1,210 @@
+module Config.Helpers.Cards.Inner.Helpers exposing (..)
+
+import Config.Data.Identity exposing (pageNames)
+import Config.Helpers.Converters exposing (formatSocial)
+import Config.Helpers.Format
+    exposing
+        ( headerFontSizeBig
+        , headerFontSizeMedium
+        , headerFontSizeSmall
+        , paragraphFontSize
+        , paragraphSpacing
+        )
+import Config.Style.Colour.Helpers exposing (..)
+import Config.Style.Transitions
+    exposing
+        ( hoverFontDarkOrange
+        , transitionStyleFast
+        , transitionStyleMedium
+        , transitionStyleSlow
+        )
+import Element as E exposing (..)
+import Element.Background as B
+import Element.Border as D
+import Element.Font as F
+
+
+detailSpacing : Attribute msg
+detailSpacing =
+    spacing 3
+
+
+detailFormat : (List (Attribute msg) -> List (Element msg) -> Element msg) -> List (Element msg) -> Element msg
+detailFormat block elements =
+    block
+        [ detailSpacing
+        , width fill
+        ]
+        elements
+
+
+detailFormatEl : Element msg -> Element msg
+detailFormatEl element =
+    el
+        [ detailSpacing
+        , width fill
+        ]
+        element
+
+
+titleFormat : ThemeColor -> List (Attribute msg)
+titleFormat colour =
+    [ alignTop
+    , F.bold
+    , F.color (getThemeColor colour)
+    , headerFontSizeSmall
+    , paragraphSpacing
+    ]
+
+
+bodyFormat : ThemeColor -> List (Attribute msg)
+bodyFormat colour =
+    [ F.regular
+    , paragraphFontSize
+    , F.color (getThemeColor colour)
+    , E.width fill
+    ]
+
+
+detailTitleMaker : ThemeColor -> String -> Element msg
+detailTitleMaker colour item =
+    el
+        (titleFormat colour)
+    <|
+        E.text item
+
+
+detailTitleLink : ThemeColor -> String -> Element msg
+detailTitleLink colour item =
+    el
+        (getHoverColours colour
+            ++ titleFormat colour
+        )
+    <|
+        E.text item
+
+
+detailBodyLink : ThemeColor -> String -> Element msg
+detailBodyLink colour item =
+    el
+        (getHoverColours colour
+            ++ bodyFormat colour
+        )
+    <|
+        E.text item
+
+
+getHoverColours : ThemeColor -> List (Attribute msg)
+getHoverColours colour =
+    [ transitionStyleMedium
+    , mouseOver
+        [ case colour of
+            TextLightGrey ->
+                F.color (getThemeColor TextLightOrange)
+
+            TextLightOrange ->
+                F.color (getThemeColor TextDarkOrange)
+
+            TextDarkOrange ->
+                F.color (getThemeColor TextDeepDarkOrange)
+
+            _ ->
+                F.color (getThemeColor TextDeepDarkOrange)
+        ]
+    ]
+
+
+detailBodyMaker : ThemeColor -> Element msg -> Element msg
+detailBodyMaker colour item =
+    paragraph
+        (bodyFormat colour)
+        [ item ]
+
+
+listMaker : (a -> Element msg) -> List a -> Element msg
+listMaker makeItem itemInfo =
+    column
+        [ spacing 5
+        , width fill
+        ]
+    <|
+        List.map2 (\x y -> makeItem x)
+            itemInfo
+            (List.range 1 (List.length itemInfo))
+
+
+listItem : String -> Attribute msg -> Element msg
+listItem item colour =
+    el
+        [ paragraphFontSize
+        , F.bold
+        , alignLeft
+        , width fill
+        , colour
+        ]
+    <|
+        paragraph [ F.regular ]
+            [ E.text ("• " ++ item) ]
+
+
+numberedListItem : ThemeColor -> Int -> Element msg
+numberedListItem colour index =
+    el
+        [ alignTop
+        , F.bold
+        , F.color (getThemeColor colour)
+        , paragraphFontSize
+        ]
+    <|
+        text (String.fromInt index ++ ". ")
+
+
+proofTreeButton : String -> String -> Element msg
+proofTreeButton url item =
+    newTabLink
+        [ alignTop
+        , alignRight
+        , paddingXY 0 5
+        ]
+        { url = url
+        , label =
+            el
+                [ F.color colourTheme.textLightGrey
+                , B.color colourTheme.textDarkOrange
+                , D.rounded 10
+                , paddingEach
+                    { top = 6
+                    , bottom = 3
+                    , left = 10
+                    , right = 10
+                    }
+                , mouseOver
+                    [ F.color colourTheme.textLightOrange
+                    , B.color colourTheme.textDeepDarkOrange
+                    ]
+                , transitionStyleSlow
+                , headerFontSizeSmall
+                , F.bold
+                ]
+            <|
+                text
+                    item
+        }
+
+
+socialMaker : String -> String -> Element msg
+socialMaker link item =
+    newTabLink
+        []
+        { url = link
+        , label =
+            detailTitleLink
+                TextLightOrange
+                (formatSocial item)
+        }
+
+
+listCounter : Int -> Element msg
+listCounter index =
+    detailTitleMaker TextLightGrey
+        (String.fromInt index ++ ". ")

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

@@ -1,15 +1,14 @@
-module Config.Helpers.Cards.Helpers exposing (..)
+module Config.Helpers.Cards.Outer.Helpers exposing (..)
 
 import Config.Data.Identity
     exposing
         ( pageNames
         )
-import Config.Helpers.Cards.Types as C exposing (..)
+import Config.Helpers.Cards.Outer.Types as C exposing (..)
 import Config.Helpers.Converters exposing (formatName)
 import Config.Helpers.Format
     exposing
-        ( divider
+        ( headerFontSizeBig
-        , headerFontSizeBig
         , headerFontSizeMedium
         , paragraphFontSize
         , paragraphSpacing
@@ -17,7 +16,7 @@ import Config.Helpers.Format
 import Config.Helpers.ImageFolders as M exposing (..)
 import Config.Helpers.Response exposing (contentContainer)
 import Config.Pages.Debate.Arguments.Records.Template exposing (argument)
-import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (colourTheme)
 import Config.Style.Glow
     exposing
         ( glowDeepDarkGrey
@@ -37,6 +36,7 @@ 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
@@ -49,7 +49,7 @@ cardMaker device cardable contents =
                     False
 
                 C.Cuck c ->
-                    True
+                    False
 
                 C.BlogArticle _ ->
                     False

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

@@ -1,4 +1,4 @@
-module Config.Helpers.Cards.Types exposing (..)
+module Config.Helpers.Cards.Outer.Types exposing (..)
 
 import Config.Pages.Blog.Types exposing (BlogArticle)
 import Config.Pages.Contact.Types exposing (Contact)

frontend/src/Config/Helpers/Format.elm

@@ -1,19 +1,14 @@
 module Config.Helpers.Format exposing (..)
 
-import Config.Style.Colour exposing (..)
+import Config.Style.Colour.Types exposing (..)
 import Element exposing (..)
 import Element.Border as D
 import Element.Font as F
 
 
-paragraphFontSize : Attr decorative msg
-paragraphFontSize =
-    F.size 16
-
-
 paragraphSpacing : Attribute msg
 paragraphSpacing =
-    spacing 3
+    spacing 0
 
 
 headerFontSizeBig : Attr decorative msg
@@ -31,9 +26,14 @@ headerFontSizeSmall =
     F.size 18
 
 
+paragraphFontSize : Attr decorative msg
+paragraphFontSize =
+    F.size 18
+
+
 smallTextFontSize : Attr decorative msg
 smallTextFontSize =
-    F.size 12
+    F.size 16
 
 
 renderCodeLine : SyntaxColors -> List (Element msg) -> Element msg
@@ -45,28 +45,3 @@ renderCodeLine colors elements =
             [ F.monospace ]
         ]
         elements
-
-
-divider : Element msg
-divider =
-    el
-        [ width fill
-        , height fill
-        , centerX
-        , width (fill |> maximum 600)
-        , D.widthEach
-            { bottom = 1
-            , top = 0
-            , left = 0
-            , right = 0
-            }
-        , D.color colourTheme.textLightOrange
-        , paddingEach
-            { top = 10
-            , bottom = 0
-            , left = 0
-            , right = 0
-            }
-        ]
-    <|
-        none

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

@@ -3,8 +3,7 @@ module Config.Helpers.Headers.Helpers exposing (..)
 import Config.Helpers.Converters exposing (formatName)
 import Config.Helpers.Format
     exposing
-        ( divider
+        ( headerFontSizeBig
-        , headerFontSizeBig
         , headerFontSizeMedium
         , headerFontSizeSmall
         , paragraphFontSize
@@ -12,7 +11,8 @@ import Config.Helpers.Format
         )
 import Config.Helpers.Headers.Types as C exposing (..)
 import Config.Helpers.Response exposing (contentContainer)
-import Config.Style.Colour exposing (colourTheme)
+import Config.Helpers.ServiceFormat exposing (divider)
+import Config.Style.Colour.Helpers exposing (colourTheme)
 import Config.Style.Glow
     exposing
         ( glowDeepDarkGrey

frontend/src/Config/Helpers/Markdown.elm

@@ -4,14 +4,14 @@ import Browser
 import Config.Helpers.Converters exposing (toTitleCase)
 import Config.Helpers.Format
     exposing
-        ( divider
+        ( headerFontSizeBig
-        , headerFontSizeBig
         , headerFontSizeMedium
         , headerFontSizeSmall
         , paragraphFontSize
         )
 import Config.Helpers.Response exposing (pageList)
-import Config.Style.Colour exposing (colourTheme)
+import Config.Helpers.ServiceFormat exposing (divider)
+import Config.Style.Colour.Helpers exposing (colourTheme)
 import Config.Style.Transitions
     exposing
         ( hoverFontDarkOrange
@@ -57,19 +57,32 @@ articleImage pic =
 
 renderDeviceMarkdown : String -> Element msg
 renderDeviceMarkdown markdown =
-    case renderMarkdown markdown of
+    case
-        Ok ( toc, renderedMarkdown ) ->
+        markdown
-            paragraph []
+            |> String.split "\n"
-                [ column
+            |> List.map String.trimRight
-                    [ width fill
+            |> String.join "\n"
-                    , centerX
+            |> Markdown.Parser.parse
-                    , spacing 10
+    of
-                    ]
+        Ok ast ->
-                    (tocView toc :: renderedMarkdown)
+            case Markdown.Renderer.render elmUiRenderer ast of
-                ]
+                Ok rendered ->
+                    column
+                        [ width fill
+                        , centerX
+                        , spacing 10
+                        ]
+                        rendered
+
+                Err errors ->
+                    text errors
 
         Err error ->
-            E.text error
+            text
+                (error
+                    |> List.map Markdown.Parser.deadEndToString
+                    |> String.join "\n"
+                )
 
 
 renderMarkdown : String -> Result String ( TableOfContents, List (Element msg) )
@@ -89,7 +102,11 @@ renderMarkdown markdown =
                     Err errors
 
         Err error ->
-            Err (error |> List.map Markdown.Parser.deadEndToString |> String.join "\n")
+            Err
+                (error
+                    |> List.map Markdown.Parser.deadEndToString
+                    |> String.join "\n"
+                )
 
 
 renderDeviceMarkdownNoToc : String -> Element msg
@@ -359,8 +376,18 @@ elmUiRenderer =
                 , B.color colourTheme.backgroundLightGrey
                 , paragraphFontSize
                 , width fill
+                , E.spacing 10
                 ]
-                children
+                (List.map
+                    (\child ->
+                        E.paragraph
+                            [ width fill
+                            , E.spacing 5
+                            ]
+                            [ child ]
+                    )
+                    children
+                )
     , unorderedList =
         \items ->
             E.column

frontend/src/Config/Helpers/Price.elm

@@ -1,7 +1,7 @@
 module Config.Helpers.Price exposing (..)
 
 import Config.Helpers.Format exposing (headerFontSizeBig)
-import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (colourTheme)
 import Config.Style.Glow exposing (glowDeepDarkGrey)
 import Config.Style.Transitions exposing (hoverPageButtonDeepDarkOrange, transitionStyleMedium)
 import Element as E exposing (..)

frontend/src/Config/Helpers/Response.elm

@@ -1,6 +1,6 @@
 module Config.Helpers.Response exposing (..)
 
-import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (colourTheme)
 import Element as E exposing (..)
 import Element.Background as B exposing (color)
 import Html.Attributes exposing (style)

frontend/src/Config/Helpers/ServiceFormat.elm

@@ -9,7 +9,7 @@ import Config.Helpers.Format
         , paragraphFontSize
         , paragraphSpacing
         )
-import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (colourTheme)
 import Config.Style.Transitions
     exposing
         ( hoverFontDarkOrange
@@ -66,6 +66,20 @@ titleMaker title =
         text title
 
 
+subTitleMaker : String -> Element msg
+subTitleMaker item =
+    el
+        [ alignTop
+        , F.color colourTheme.textLightOrange
+        , paragraphSpacing
+        , F.bold
+        , headerFontSizeSmall
+        , E.width fill
+        ]
+    <|
+        E.text item
+
+
 highlightedBlockMaker : String -> List String -> Element msg
 highlightedBlockMaker title items =
     column
@@ -219,3 +233,28 @@ numberMaker items =
                     ]
             )
             items
+
+
+divider : Element msg
+divider =
+    el
+        [ width fill
+        , height fill
+        , centerX
+        , width (fill |> maximum 600)
+        , D.widthEach
+            { bottom = 1
+            , top = 0
+            , left = 0
+            , right = 0
+            }
+        , D.color colourTheme.textLightOrange
+        , paddingEach
+            { top = 10
+            , bottom = 0
+            , left = 0
+            , right = 0
+            }
+        ]
+    <|
+        none

frontend/src/Config/Helpers/StrengthBar.elm

@@ -1,7 +1,7 @@
 module Config.Helpers.StrengthBar exposing (..)
 
 import Config.Helpers.ToolTip exposing (..)
-import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (colourTheme)
 import Element as E exposing (..)
 import Element.Background as B
 import Element.Border as D

frontend/src/Config/Helpers/ToolTip.elm

@@ -1,6 +1,6 @@
 module Config.Helpers.ToolTip exposing (..)
 
-import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (colourTheme)
 import Config.Style.Transitions exposing (transitionStyleSlow)
 import Element as E exposing (..)
 import Element.Background as B

frontend/src/Config/Helpers/Viewport.elm

@@ -10,4 +10,4 @@ type Msg
 
 resetViewport : Cmd Msg
 resetViewport =
-    Task.perform (\_ -> NoOp) (Dom.setViewport 0 0)
+    Task.attempt (\_ -> NoOp) (Dom.setViewportOf "scroll-container" 0 0)

frontend/src/Config/Pages/Debate/Cuckery/Records/AmberOHearn.elm

@@ -22,7 +22,7 @@ cuckAmberOHearn =
           , dodgeReceipts =
                 [ { receipt = "receipt1" }
                 ]
-          , dodgeFallacy = Just (SpecificFallacy "")
+          , dodgeFallacy = Nothing
           , dodgeNicksDoxasticState = Nothing
           , dodgeNicksDoxasticReason = NoProp
           }

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

@@ -8,19 +8,17 @@ import Element.Font as F exposing (..)
 productNutriDex : NutriDex
 productNutriDex =
     { nutriDexTitle = "The NutriDex"
-   
-    
     , nutriDexFeatures =
-        [ { feature = "The essential nutrient yields of over 700 foods are ranked and adjusted for bioavailability, nutrient absorption capacity, and metabolic conversion inefficiencies!"
+        [ { feature = "Over 700 foods are ranked and adjusted for nutrient bioavailability, absorption capacity, and metabolic conversion rates!"
           , featureTitle = "Nutrient Density Scoring: "
           }
-        , { feature = "Specialized Nutrition Scoring: " ++ "Figure out the right foods for you with 30 different nutrition scores that stratify foods by a number of different dietary goals!"
+        , { feature = "30 different nutrition scores that stratify foods by a number of different dietary goals!"
           , featureTitle = "Specialized Nutrition Scoring: "
           }
         , { feature = "Use the included Custom Score tab to help create your own personal nutrition score to plan your own ideal diet!"
           , featureTitle = "Custom Nutrition Scoring: "
           }
-        , { feature = "Custom-tailor your diet with in-depth nutrition data, including oxalates, phytates, glycemic index, glycemic load, satiety, FODMAPs, PCDAAS, price, shelf life, and over 500 polyphenolic compounds!"
+        , { feature = "Custom-tailor your diet with in-depth nutrition data, including antinutrients, glycemic effects, satiety, FODMAPs, and more!"
           , featureTitle = "Diverse Nutrition Data: "
           }
         , { feature = "Avoid potential hazards from certain nutrients and other compounds with the included hazard profile data!"
@@ -35,7 +33,7 @@ productNutriDex =
         , { feature = "Keep expenses in check with an interactive grocery list that can intelligently estimate the cost of your grocery trip. "
           , featureTitle = "Grocery List: "
           }
-        , { feature = "Use the included nutrition analyser to quantify the nutrient content of your food selection, and minimize anti-nutrients, hunger, calories, sugar, and more!"
+        , { feature = "Quantify the nutrient content of your food selection, and minimize anti-nutrients, hunger, calories, sugar, and more!"
           , featureTitle = "Nutrition Analyser: "
           }
         , { feature = "Schedule your meals and workouts, as well as calculate your calorie and macro requirements based on your goals and body composition!"

frontend/src/Config/Pages/Services/Records/ElmBuilds.elm

@@ -2,7 +2,7 @@ module Config.Pages.Services.Records.ElmBuilds exposing (..)
 
 import Config.Helpers.Converters exposing (formatName)
 import Config.Pages.Services.Types exposing (..)
-import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (colourTheme)
 import Config.Style.Transitions exposing (hoverFontDarkOrange, transitionStyleMedium)
 import Element as E exposing (..)
 import Element.Font as F exposing (..)

frontend/src/Config/Pages/Services/Records/NixBuilds.elm

@@ -2,7 +2,7 @@ module Config.Pages.Services.Records.NixBuilds exposing (..)
 
 import Config.Helpers.Converters exposing (formatName)
 import Config.Pages.Services.Types exposing (..)
-import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (colourTheme)
 import Config.Style.Transitions exposing (hoverFontDarkOrange, transitionStyleMedium)
 import Element as E exposing (..)
 import Element.Font as F exposing (..)

frontend/src/Config/Style/Colour.elm

@@ -1,70 +0,0 @@
-module Config.Style.Colour exposing (..)
-
-import Element as E
-    exposing
-        ( Color
-        , rgb255
-        , rgba
-        )
-
-
-type alias Theme =
-    { textLightGrey : Color
-    , textDarkGrey : Color
-    , textLightOrange : Color
-    , textDarkOrange : Color
-    , textDeepDarkOrange : Color
-    , backgroundLightGrey : Color
-    , backgroundDarkGrey : Color
-    , backgroundDeepDarkGrey : Color
-    , backgroundSpreadsheet : Color
-    , backgroundSpreadsheetDark : Color
-    , shadow : Color
-    , barGreen : Color
-    , barRed : Color
-    , debugColour : Color
-    , transparent : Color
-    }
-
-
-type alias SyntaxColors =
-    { punctuation : Color
-    , key : Color
-    , string : Color
-    , keyword : Color
-    , operator : Color
-    , background : Color
-    , text : Color
-    }
-
-
-colourTheme : Theme
-colourTheme =
-    { textLightGrey = rgb255 212 212 212
-    , textDarkGrey = rgb255 126 126 126
-    , textLightOrange = rgb255 204 102 0
-    , textDarkOrange = rgb255 120 60 0
-    , textDeepDarkOrange = rgb255 60 30 0
-    , backgroundLightGrey = rgb255 40 40 40
-    , backgroundDarkGrey = rgb255 30 30 30
-    , backgroundDeepDarkGrey = rgb255 20 20 20
-    , backgroundSpreadsheet = rgb255 36 36 36
-    , backgroundSpreadsheetDark = rgb255 26 26 26
-    , shadow = rgb255 10 10 10
-    , barGreen = rgb255 0 102 0
-    , barRed = rgb255 102 0 0
-    , debugColour = rgb255 227 28 121
-    , transparent = rgba 1 1 1 0
-    }
-
-
-syntaxTheme : SyntaxColors
-syntaxTheme =
-    { punctuation = rgb255 202 158 230
-    , key = rgb255 138 173 244
-    , string = rgb255 166 218 149
-    , keyword = rgb255 245 169 127
-    , operator = rgb255 178 185 194
-    , background = rgb255 36 39 58
-    , text = rgb255 202 211 245
-    }

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

@@ -0,0 +1,231 @@
+module Config.Style.Colour.Helpers exposing (..)
+
+import Config.Style.Colour.Types
+    exposing
+        ( SyntaxColors
+        , Theme
+        )
+import Element as E
+    exposing
+        ( Color
+        , rgb255
+        , rgba
+        )
+import Element.Font as F exposing (color)
+
+
+colourTheme : Theme
+colourTheme =
+    { textLightGrey = rgb255 212 212 212
+    , textDarkGrey = rgb255 126 126 126
+    , textLightOrange = rgb255 204 102 0
+    , textDarkOrange = rgb255 120 60 0
+    , textDeepDarkOrange = rgb255 60 30 0
+    , backgroundLightGrey = rgb255 40 40 40
+    , backgroundDarkGrey = rgb255 30 30 30
+    , backgroundDeepDarkGrey = rgb255 20 20 20
+    , backgroundSpreadsheet = rgb255 36 36 36
+    , backgroundSpreadsheetDark = rgb255 26 26 26
+    , shadow = rgb255 10 10 10
+    , barGreen = rgb255 0 102 0
+    , barRed = rgb255 102 0 0
+    , debugColour = rgb255 227 28 121
+    , transparent = rgba 1 1 1 0
+    }
+
+
+syntaxTheme : SyntaxColors
+syntaxTheme =
+    { punctuation = rgb255 202 158 230
+    , key = rgb255 138 173 244
+    , string = rgb255 166 218 149
+    , keyword = rgb255 245 169 127
+    , operator = rgb255 178 185 194
+    , background = rgb255 36 39 58
+    , text = rgb255 202 211 245
+    }
+
+
+
+-- 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
+    | TextLightOrange
+    | TextDarkOrange
+    | TextDeepDarkOrange
+    | BackgroundLightGrey
+    | BackgroundDarkGrey
+    | BackgroundDeepDarkGrey
+    | BackgroundSpreadsheet
+    | BackgroundSpreadsheetDark
+    | Shadow
+    | BarGreen
+    | BarRed
+    | DebugColour
+    | Transparent
+
+
+getThemeColor : ThemeColor -> Color
+getThemeColor color =
+    case color of
+        TextLightGrey ->
+            colourTheme.textLightGrey
+
+        TextDarkGrey ->
+            colourTheme.textDarkGrey
+
+        TextLightOrange ->
+            colourTheme.textLightOrange
+
+        TextDarkOrange ->
+            colourTheme.textDarkOrange
+
+        TextDeepDarkOrange ->
+            colourTheme.textDeepDarkOrange
+
+        BackgroundLightGrey ->
+            colourTheme.backgroundLightGrey
+
+        BackgroundDarkGrey ->
+            colourTheme.backgroundDarkGrey
+
+        BackgroundDeepDarkGrey ->
+            colourTheme.backgroundDeepDarkGrey
+
+        BackgroundSpreadsheet ->
+            colourTheme.backgroundSpreadsheet
+
+        BackgroundSpreadsheetDark ->
+            colourTheme.backgroundSpreadsheetDark
+
+        Shadow ->
+            colourTheme.shadow
+
+        BarGreen ->
+            colourTheme.barGreen
+
+        BarRed ->
+            colourTheme.barRed
+
+        DebugColour ->
+            colourTheme.debugColour
+
+        Transparent ->
+            colourTheme.transparent

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

@@ -0,0 +1,33 @@
+module Config.Style.Colour.Types exposing (..)
+
+import Element exposing (Color)
+
+
+type alias Theme =
+    { textLightGrey : Color
+    , textDarkGrey : Color
+    , textLightOrange : Color
+    , textDarkOrange : Color
+    , textDeepDarkOrange : Color
+    , backgroundLightGrey : Color
+    , backgroundDarkGrey : Color
+    , backgroundDeepDarkGrey : Color
+    , backgroundSpreadsheet : Color
+    , backgroundSpreadsheetDark : Color
+    , shadow : Color
+    , barGreen : Color
+    , barRed : Color
+    , debugColour : Color
+    , transparent : Color
+    }
+
+
+type alias SyntaxColors =
+    { punctuation : Color
+    , key : Color
+    , string : Color
+    , keyword : Color
+    , operator : Color
+    , background : Color
+    , text : Color
+    }

frontend/src/Config/Style/Glow.elm

@@ -1,6 +1,6 @@
 module Config.Style.Glow exposing (..)
 
-import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (colourTheme)
 import Element exposing (Attr)
 import Element.Border as D exposing (glow)
 import Html.Attributes as H exposing (style)

frontend/src/Config/Style/Icons/Icons.elm

@@ -871,6 +871,22 @@ circleX inner =
         }
 
 
+line : SvgTypes.OuterPart msg -> Element msg
+line inner =
+    HeSvg.buildSvg inner
+        { svgAttributes =
+            [ SvgAttr.viewBox "0 0 448 512"
+            , SvgAttr.fill "currentColor"
+            ]
+        , svg =
+            [ path
+                [ SvgAttr.d "M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"
+                ]
+                []
+            ]
+        }
+
+
 circleDots : SvgTypes.OuterPart msg -> Element msg
 circleDots inner =
     HeSvg.buildSvg inner

frontend/src/Config/Style/Images.elm

@@ -1,7 +1,7 @@
 module Config.Style.Images exposing (..)
 
 import Config.Helpers.ImageFolders exposing (..)
-import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (colourTheme)
 import Element as E exposing (..)
 import Element.Background as B exposing (color)
 import Element.Border as D
@@ -17,28 +17,30 @@ imageSquareMaker device imagePath isLeft size =
     E.image
         [ D.rounded 10
         , clip
-        , E.width <| px (imageSizer size)
+        , E.width <| imageSizer size
-        , E.height <| px (imageSizer size)
         ]
         { src = imagePath
         , description = ""
         }
 
 
-imageSizer : String -> Int
+imageSizer : String -> Length
 imageSizer size =
     case size of
         "Fatty" ->
-            80
+            px 80
 
         "Big" ->
-            65
+            px 60
 
         "Medium" ->
-            45
+            px 45
 
-        "Smallish" ->
+        "Fill" ->
-            35
+            fill
+
+        "Test" ->
+            px 145
 
         _ ->
-            28
+            px 28

frontend/src/Config/Style/Transitions.elm

@@ -1,6 +1,6 @@
 module Config.Style.Transitions exposing (..)
 
-import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (colourTheme)
 import Config.Style.Glow
     exposing
         ( glowDeepDarkGrey

frontend/src/Layouts/Navbar.elm

@@ -6,7 +6,7 @@ import Config.Helpers.Format
         ( paragraphFontSize
         , paragraphSpacing
         )
-import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (colourTheme)
 import Config.Style.Fonts exposing (spartanFont)
 import Config.Style.Glow exposing (glowDeepDarkGreyNavbar)
 import Config.Style.Icons.Icons
@@ -22,6 +22,7 @@ import Config.Style.Icons.Icons
         , hyperBlog
         , interviews
         , leaving
+        , line
         , lock
         , mastodon
         , nutriDex
@@ -203,6 +204,7 @@ navbarContainer input maker =
             [ height fill
             , width fill
             , scrollbarY
+            , E.htmlAttribute (H.id "scroll-container")
             ]
             input.content.element
 
@@ -253,6 +255,18 @@ topbar input =
 
 topbarLogo : NavbarInput contentMsg -> Element contentMsg
 topbarLogo input =
+    let
+        svgFormat =
+            { elementAttributes =
+                [ centerX
+                , centerY
+                , Events.onClick input.contentMessage
+                , transitionStyleSlow
+                ]
+            , sharedModel = input.sharedModel
+            , svgAttributes = [ SvgAttr.width "30" ]
+            }
+    in
     row
         ([ height <| px barReservedRegion.topbar
          , transitionStyleMedium
@@ -276,22 +290,90 @@ topbarLogo input =
             [ height <| px 50
             , width <| px 40
             , alignRight
+            , centerY
+            , moveUp 5
             ]
           <|
-            (if input.model.isNavbarExpanded then
+            -- (if input.model.isNavbarExpanded then
-                circleX
+            column [ centerY ]
+                [ line
+                    (if input.model.isNavbarExpanded then
+                        { elementAttributes =
+                            [ centerX
+                            , centerY
+                            , moveDown 13
+                            , rotate (degrees 45)
+                            , Events.onClick input.contentMessage
+                            , transitionStyleSlow
+                            ]
+                        , sharedModel = input.sharedModel
+                        , svgAttributes = [ SvgAttr.width "30" ]
+                        }
 
-             else
+                     else
-                circleDots
+                        { elementAttributes =
-            )
+                            [ centerX
-                { elementAttributes =
+                            , centerY
-                    [ centerX
+                            , Events.onClick input.contentMessage
-                    , centerY
+                            , transitionStyleSlow
-                    , Events.onClick input.contentMessage
+                            ]
-                    ]
+                        , sharedModel = input.sharedModel
-                , sharedModel = input.sharedModel
+                        , svgAttributes = [ SvgAttr.width "30" ]
-                , svgAttributes = [ SvgAttr.width "30" ]
+                        }
-                }
+                    )
+                , line
+                    (if input.model.isNavbarExpanded then
+                        { elementAttributes =
+                            [ centerX
+                            , centerY
+                            , moveUp 22
+                            , transparent True
+                            , Events.onClick input.contentMessage
+                            , transitionStyleSlow
+                            ]
+                        , sharedModel = input.sharedModel
+                        , svgAttributes = [ SvgAttr.width "30" ]
+                        }
+
+                     else
+                        { elementAttributes =
+                            [ centerX
+                            , centerY
+                            , moveUp 22
+                            , Events.onClick input.contentMessage
+                            , transitionStyleSlow
+                            ]
+                        , sharedModel = input.sharedModel
+                        , svgAttributes = [ SvgAttr.width "30" ]
+                        }
+                    )
+                , line
+                    (if input.model.isNavbarExpanded then
+                        { elementAttributes =
+                            [ centerX
+                            , centerY
+                            , rotate (degrees -45)
+                            , moveUp 56
+                            , Events.onClick input.contentMessage
+                            , transitionStyleSlow
+                            ]
+                        , sharedModel = input.sharedModel
+                        , svgAttributes = [ SvgAttr.width "30" ]
+                        }
+
+                     else
+                        { elementAttributes =
+                            [ centerX
+                            , centerY
+                            , moveUp 44
+                            , Events.onClick input.contentMessage
+                            , transitionStyleSlow
+                            ]
+                        , sharedModel = input.sharedModel
+                        , svgAttributes = [ SvgAttr.width "30" ]
+                        }
+                    )
+                ]
         ]
 
 

frontend/src/Pages/Blog.elm

@@ -2,8 +2,14 @@ module Pages.Blog exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (extractFirstWords)
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Inner.Helpers
-import Config.Helpers.Cards.Types as C
+    exposing
+        ( detailBodyMaker
+        , detailFormat
+        , detailTitleMaker
+        )
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Converters
     exposing
         ( formatName
@@ -42,7 +48,7 @@ import Config.Pages.Blog.Records.SeedOils exposing (articleSeedOils)
 import Config.Pages.Blog.Records.Shenangians exposing (articleShenanigans)
 import Config.Pages.Blog.Records.SweetDeception exposing (articleSweetDeception)
 import Config.Pages.Blog.Types exposing (..)
-import Config.Style.Colour as T exposing (..)
+import Config.Style.Colour.Helpers as T exposing (..)
 import Config.Style.Icons.Icons exposing (construction)
 import Config.Style.Images exposing (imageSquareMaker)
 import Effect exposing (Effect)
@@ -176,7 +182,7 @@ articleImage :
         , description : String
         }
 articleImage article =
-    { src = "blog/" ++ article.articleImage ++ "thumb.png"
+    { src = imagePathMaker M.BlogArticle article.articleImage
     , description = article.articleName
     }
 
@@ -189,78 +195,40 @@ articleMaker device article =
             el
                 [ alignLeft
                 , alignTop
+                , width fill
                 , paddingEach
                     { top = 0
                     , right = 10
-                    , bottom = 0
+                    , bottom = 7
                     , left = 0
                     }
                 ]
             <|
-                imageSquareMaker device (imagePathMaker M.BlogCard article.articleImage) True size
+                imageSquareMaker device (imagePathMaker M.BlogArticle article.articleImage) True size
     in
-    column
+    detailFormat column
-        [ E.width fill
+        [ case ( device.class, device.orientation ) of
-        , centerX
+            ( Phone, Portrait ) ->
-        ]
+                none
-        [ row
-            [ width fill
-            ]
-            [ case ( device.class, device.orientation ) of
-                ( Phone, Portrait ) ->
-                    none
 
-                ( Tablet, Portrait ) ->
+            ( Tablet, Portrait ) ->
-                    none
+                none
 
-                _ ->
+            _ ->
-                    image "Big"
+                image "Fill"
-            , column
+        , detailFormat column
-                [ width fill
+            (articleRows article)
-                , alignTop
-                ]
-                (articleRows article)
-            ]
         , el [] <|
-            paragraph
+            detailBodyMaker TextLightGrey (renderDeviceMarkdownNoToc (extractFirstWords article.articleBody))
-                [ F.color colourTheme.textLightGrey
-                , paragraphSpacing
-                , paragraphFontSize
-                , spacing 3
-                , F.regular
-                , F.alignLeft
-                , paddingEach
-                    { top = 8
-                    , bottom = 0
-                    , left = 0
-                    , right = 0
-                    }
-                ]
-                [ renderDeviceMarkdownNoToc (extractFirstWords article.articleBody) ]
         ]
 
 
-infoRow : String -> String -> Element msg
+infoRow : String -> Element msg -> Element msg
 infoRow label value =
-    row [ width fill ]
+    detailFormat row
-        [ el [ width <| px 88 ] <|
+        [ el [ width <| px 82 ] <|
-            el
+            detailTitleMaker TextLightOrange label
-                [ F.color colourTheme.textLightOrange
+        , detailBodyMaker TextLightGrey value
-                , paragraphSpacing
-                , F.bold
-                , headerFontSizeSmall
-                , E.width fill
-                ]
-            <|
-                text label
-        , el [ width fill ] <|
-            paragraph
-                [ F.color colourTheme.textLightGrey
-                , F.regular
-                , paragraphFontSize
-                , width fill
-                ]
-                [ text value ]
         ]
 
 
@@ -270,13 +238,28 @@ articleRows article =
         referenceCount =
             List.length article.articleReferences
     in
-    [ infoRow "Published:" article.articlePublished
+    [ infoRow "Published:" (text article.articlePublished)
-    , infoRow "Author:" article.articleAuthor
+    , infoRow "Author:" (text article.articleAuthor)
-    , infoRow "Duration:" (String.fromInt (wordCount article.articleBody // 225) ++ " minutes")
+    , infoRow "Duration:"
-    , infoRow "Words:" (String.fromInt (wordCount article.articleBody))
+        (text
+            (String.fromInt
+                (wordCount article.articleBody // 225)
+                ++ " minutes"
+            )
+        )
+    , infoRow "Words"
+        (text
+            (String.fromInt
+                (wordCount article.articleBody)
+            )
+        )
     ]
         ++ (if referenceCount >= 2 then
-                [ infoRow "Sources:" (String.fromInt referenceCount) ]
+                [ infoRow "Sources"
+                    (text
+                        (String.fromInt referenceCount)
+                    )
+                ]
 
             else
                 []

frontend/src/Pages/Blog/Bigfatsurprise.elm

@@ -2,8 +2,8 @@ module Pages.Blog.Bigfatsurprise exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (contentList)
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response
     exposing

frontend/src/Pages/Blog/Everettvegans.elm

@@ -2,8 +2,8 @@ module Pages.Blog.Everettvegans exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (contentList)
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response
     exposing

frontend/src/Pages/Blog/Huntergatherers.elm

@@ -2,8 +2,8 @@ module Pages.Blog.Huntergatherers exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (contentList)
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response
     exposing

frontend/src/Pages/Blog/Meatapologetics.elm

@@ -2,8 +2,8 @@ module Pages.Blog.Meatapologetics exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (contentList)
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response
     exposing

frontend/src/Pages/Blog/Nagragoodrich.elm

@@ -2,8 +2,8 @@ module Pages.Blog.Nagragoodrich exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (contentList)
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response
     exposing

frontend/src/Pages/Blog/Plantbasedmeta.elm

@@ -2,8 +2,8 @@ module Pages.Blog.Plantbasedmeta exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (contentList)
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response
     exposing

frontend/src/Pages/Blog/Quacksmashing.elm

@@ -2,8 +2,8 @@ module Pages.Blog.Quacksmashing exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (contentList)
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response
     exposing

frontend/src/Pages/Blog/Sapiendiet.elm

@@ -2,8 +2,8 @@ module Pages.Blog.Sapiendiet exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (contentList)
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response
     exposing

frontend/src/Pages/Blog/Seedoils.elm

@@ -2,8 +2,8 @@ module Pages.Blog.Seedoils exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (contentList)
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response
     exposing

frontend/src/Pages/Blog/Shenanigans.elm

@@ -2,8 +2,8 @@ module Pages.Blog.Shenanigans exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (contentList)
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response
     exposing

frontend/src/Pages/Blog/Sweetdeception.elm

@@ -2,8 +2,8 @@ module Pages.Blog.Sweetdeception exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
 import Config.Helpers.Articles.Article exposing (contentList)
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response
     exposing

frontend/src/Pages/Contact.elm

@@ -1,8 +1,8 @@
 module Pages.Contact exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Format exposing (..)
 import Config.Helpers.Headers.Helpers exposing (..)
 import Config.Helpers.Headers.Records exposing (contactHeader, nutriDexHeader)
@@ -15,12 +15,13 @@ import Config.Helpers.Response
 import Config.Helpers.ServiceFormat
     exposing
         ( chunkMaker
+        , divider
         , titleMaker
         )
 import Config.Helpers.ToolTip exposing (..)
 import Config.Helpers.Viewport exposing (resetViewport)
 import Config.Pages.Contact.Types exposing (..)
-import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (colourTheme)
 import Config.Style.Transitions
     exposing
         ( hoverFontDarkOrange

frontend/src/Pages/Debate.elm

@@ -11,8 +11,8 @@ import Config.Data.Identity
     exposing
         ( pageNames
         )
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Converters exposing (formatName)
 import Config.Helpers.Format
     exposing
@@ -35,7 +35,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 as T exposing (colourTheme)
+import Config.Style.Colour.Helpers as T exposing (colourTheme)
 import Config.Style.Glow
     exposing
         ( glowDeepDarkGrey

frontend/src/Pages/Debate/Arguments.elm

@@ -1,8 +1,17 @@
 module Pages.Debate.Arguments exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Inner.Helpers
-import Config.Helpers.Cards.Types as C
+    exposing
+        ( bodyFormat
+        , detailBodyMaker
+        , detailFormat
+        , detailSpacing
+        , detailTitleMaker
+        , proofTreeButton
+        )
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Converters exposing (toTitleCase)
 import Config.Helpers.Format
     exposing
@@ -31,7 +40,13 @@ import Config.Pages.Debate.Arguments.List
         ( argumentList
         )
 import Config.Pages.Debate.Arguments.Types exposing (..)
-import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Colour.Helpers
+    exposing
+        ( ThemeColor(..)
+        , colourTheme
+        , textLightGrey
+        , textLightOrange
+        )
 import Config.Style.Glow
     exposing
         ( glowDeepDarkGrey
@@ -160,13 +175,13 @@ contentList device argument =
                 , alignTop
                 , paddingEach
                     { top = 0
-                    , right = 0
+                    , right = 10
                     , bottom = 0
-                    , left = 10
+                    , left = 0
                     }
                 ]
             <|
-                imageSquareMaker device (imagePathMaker M.Argument argument.argumentImage) False size
+                imageSquareMaker device (imagePathMaker M.Argument argument.argumentImage) True size
     in
     [ row
         [ width fill
@@ -186,276 +201,39 @@ contentList device argument =
             , left = 0
             }
         ]
-        [ column
+        [ detailFormat column
-            [ width fill
+            [ detailFormat paragraph
-            , spacing 8
+                [ case ( device.class, device.orientation ) of
-            ]
+                    ( Phone, Portrait ) ->
-            [ summaryMakerDesktop device argument
+                        none
-            , strengthBar device argument
-            ]
-        , case ( device.class, device.orientation ) of
-            ( Phone, Portrait ) ->
-                none
 
-            ( Tablet, Portrait ) ->
+                    ( Tablet, Portrait ) ->
-                none
+                        none
 
-            _ ->
+                    _ ->
-                image "Fatty"
+                        image "Fatty"
+                , el ([ height fill ] ++ bodyFormat TextLightGrey) <| text argument.propositionSummary
+                ]
+            , detailFormat row
+                [ strengthMaker
+                , barMaker getConfidenceTooltip argument.argumentCertainty
+                ]
+            ]
         ]
     , tableMaker device argument
-    , desktopFormalizationMaker argument
+    , formalizationMaker argument
-    , proofTreeButton argument.proofLink
+    , proofTreeButton argument.proofLink "Proof Tree"
     ]
 
 
-proofTreeButton : String -> Element msg
-proofTreeButton url =
-    newTabLink
-        [ alignTop
-        , alignRight
-        , paddingXY 0 5
-        ]
-        { url = url
-        , label =
-            el
-                [ F.color colourTheme.textLightGrey
-                , B.color colourTheme.textDarkOrange
-                , D.rounded 10
-                , paddingEach
-                    { top = 6
-                    , bottom = 3
-                    , left = 10
-                    , right = 10
-                    }
-                , mouseOver
-                    [ F.color colourTheme.textLightOrange
-                    , B.color colourTheme.textDeepDarkOrange
-                    ]
-                , transitionStyleSlow
-                , headerFontSizeSmall
-                , F.bold
-                ]
-            <|
-                text
-                    "Proof Tree"
-        }
-
-
-infoSpacing =
-    E.width <| px 100
-
-
-propositionMaker : Element msg
-propositionMaker =
-    column
-        [ E.alignTop, E.alignLeft ]
-        [ paragraph
-            [ F.color colourTheme.textLightGrey
-            , paragraphSpacing
-            , headerFontSizeSmall
-            , F.bold
-            , infoSpacing
-            ]
-            [ el
-                [ tooltip
-                    "A proposition is a declarative statement that can be evaluated as either true or false, and which serves as the basis for debate."
-                ]
-                (text "Proposition:")
-                |> el [ F.color colourTheme.textLightOrange ]
-            ]
-        ]
-
-
-propositionTitleMaker : Argument -> Element msg
-propositionTitleMaker argument =
-    column
-        [ E.width fill, E.alignLeft ]
-        [ paragraph
-            [ F.color colourTheme.textLightGrey
-            , paragraphSpacing
-            , headerFontSizeSmall
-            , F.bold
-            ]
-            [ text argument.propositionTitle
-                |> el
-                    [ F.color colourTheme.textLightGrey
-                    , F.regular
-                    , paragraphFontSize
-                    ]
-            ]
-        ]
-
-
-reductioMakerDesktop : Argument -> Element msg
-reductioMakerDesktop argument =
-    case argument.propositionReductio of
-        "" ->
-            none
-
-        reductio ->
-            row
-                []
-                [ reductioMaker
-                , reductioMakerTitle reductio
-                ]
-
-
-reductioMaker : Element msg
-reductioMaker =
-    column
-        [ E.alignTop, E.alignLeft ]
-        [ paragraph
-            [ F.color colourTheme.textLightGrey
-            , paragraphSpacing
-            , headerFontSizeSmall
-            , F.bold
-            , infoSpacing
-            ]
-            [ el
-                [ tooltip
-                    "This is the position from which the reductio ad absurdum is derived."
-                ]
-                (text "Reductio:")
-                |> el [ F.color colourTheme.textLightOrange ]
-            ]
-        ]
-
-
-reductioMakerTitle : String -> Element msg
-reductioMakerTitle reductio =
-    column [ E.width fill, E.alignLeft ]
-        [ paragraph
-            [ F.color colourTheme.textLightGrey
-            , paragraphSpacing
-            , paragraphFontSize
-            , spacing 3
-            ]
-            [ text reductio ]
-        ]
-
-
-summaryMakerDesktop : Device -> Argument -> Element msg
-summaryMakerDesktop device argument =
-    (case ( device.class, device.orientation ) of
-        ( Phone, Portrait ) ->
-            column
-
-        ( Tablet, Portrait ) ->
-            column
-
-        _ ->
-            row
-    )
-        []
-        [ summaryMaker
-        , summaryMakerTitle argument
-        ]
-
-
-summaryMaker : Element msg
-summaryMaker =
-    column
-        [ E.alignTop
-        , E.alignLeft
-        ]
-        [ paragraph
-            [ F.color colourTheme.textLightGrey
-            , paragraphSpacing
-            , paragraphFontSize
-            , F.bold
-            , infoSpacing
-            , headerFontSizeSmall
-            ]
-            [ el
-                [ tooltip
-                    "The following information provides additional context and insight into the reasoning behind the argument."
-                ]
-                (text "Summary:")
-                |> el [ F.color colourTheme.textLightOrange ]
-            ]
-        ]
-
-
-summaryMakerTitle : Argument -> Element msg
-summaryMakerTitle argument =
-    column
-        [ E.width fill
-        , E.alignLeft
-        ]
-        [ paragraph
-            [ F.color colourTheme.textLightGrey
-            , paragraphSpacing
-            , F.bold
-            , spacing 3
-            , headerFontSizeSmall
-            ]
-            [ text argument.propositionSummary
-                |> el
-                    [ F.color colourTheme.textLightGrey
-                    , F.regular
-                    , paragraphFontSize
-                    ]
-            ]
-        ]
-
-
-strengthBar : Device -> Argument -> Element msg
-strengthBar device argument =
-    (case ( device.class, device.orientation ) of
-        ( Phone, Portrait ) ->
-            column
-
-        ( Tablet, Portrait ) ->
-            column
-
-        _ ->
-            row
-    )
-        [ E.width fill ]
-        [ strengthMaker
-        , strengthMakerBar argument
-        ]
-
-
 strengthMaker : Element msg
 strengthMaker =
-    column
+    el
-        [ E.alignTop
+        [ tooltip
-        , E.alignLeft
+            "This represents my confidence in the soundness of the argument."
         ]
-        [ paragraph
+    <|
-            [ F.color colourTheme.textLightGrey
+        detailTitleMaker TextLightOrange "Confidence:"
-            , paragraphSpacing
-            , paragraphFontSize
-            , F.bold
-            , E.width fill
-            , headerFontSizeSmall
-            ]
-            [ el
-                [ tooltip
-                    "This represents my confidence in the soundness of the argument."
-                ]
-                (el
-                    [ paddingEach
-                        { top = 0
-                        , right = 5
-                        , bottom = 0
-                        , left = 0
-                        }
-                    ]
-                 <|
-                    text "Confidence:"
-                )
-                |> el [ F.color colourTheme.textLightOrange ]
-            ]
-        ]
-
-
-strengthMakerBar : Argument -> Element msg
-strengthMakerBar argument =
-    barPadding
-        [ barMaker getConfidenceTooltip argument.argumentCertainty ]
 
 
 getConfidenceTooltip : Int -> String
@@ -510,12 +288,7 @@ tableMaker device argument =
         , E.width fill
         ]
         [ el
-            [ F.color colourTheme.textLightGrey
+            [ E.width fill
-            , paragraphSpacing
-            , paragraphFontSize
-            , F.bold
-            , E.alignLeft
-            , E.width fill
             , htmlAttribute <| H.style "position" "relative"
             ]
           <|
@@ -552,15 +325,14 @@ tableMaker device argument =
                                 , E.width fill
                                 ]
                             <|
-                                el [ F.color colourTheme.textLightOrange ] <|
+                                detailTitleMaker
-                                    text "Definiendum"
+                                    TextLightOrange
+                                    "Definiendum"
                       , width = fill |> maximum 30
                       , view =
                             \definition ->
                                 el
-                                    [ F.color colourTheme.textLightOrange
+                                    [ D.widthEach
-                                    , F.bold
-                                    , D.widthEach
                                         { bottom = 1
                                         , top = 0
                                         , left = 1
@@ -571,13 +343,16 @@ tableMaker device argument =
                                     , E.height fill
                                     ]
                                 <|
-                                    el [ centerX ] <|
+                                    el
-                                        paragraph [] [ text definition.definiendum ]
+                                        [ centerX
+                                        , centerY
+                                        ]
+                                    <|
+                                        paragraph [] [ detailTitleMaker TextLightOrange definition.definiendum ]
                       }
                     , { header =
                             el
-                                [ F.bold
+                                [ D.widthEach
-                                , D.widthEach
                                     { bottom = 1
                                     , top = 1
                                     , left = 0
@@ -588,17 +363,12 @@ tableMaker device argument =
                                 , E.width fill
                                 ]
                             <|
-                                el
+                                detailTitleMaker TextLightOrange "Definiens"
-                                    [ F.color colourTheme.textLightOrange ]
-                                <|
-                                    text "Definiens"
                       , width = fill
                       , view =
                             \definition ->
                                 el
-                                    [ F.color colourTheme.textLightGrey
+                                    [ D.widthEach
-                                    , F.regular
-                                    , D.widthEach
                                         { bottom = 1
                                         , top = 0
                                         , left = 0
@@ -610,25 +380,15 @@ tableMaker device argument =
                                     ]
                                 <|
                                     el [] <|
-                                        paragraph [] [ text definition.definiens ]
+                                        paragraph [] [ detailBodyMaker TextLightGrey (text definition.definiens) ]
                       }
                     ]
                 }
         ]
 
 
-argumentDesktopPadding : Attribute msg
+formalizationMaker : Argument -> Element msg
-argumentDesktopPadding =
+formalizationMaker argument =
-    paddingXY 40 3
-
-
-desktopFormalizationMaker : Argument -> Element msg
-desktopFormalizationMaker argument =
-    formalizationMaker argument argumentDesktopPadding
-
-
-formalizationMaker : Argument -> Attribute msg -> Element msg
-formalizationMaker argument padding =
     column
         [ centerX
         , E.width fill
@@ -637,57 +397,42 @@ formalizationMaker argument padding =
         (List.indexedMap
             (\index argumentEntry ->
                 column
-                    [ F.color colourTheme.textLightGrey
+                    [ paddingXY 40 3
-                    , paragraphSpacing
-                    , paragraphFontSize
-                    , spacing 3
-                    , centerX
-                    , E.width fill
-                    , padding
                     ]
                     (List.indexedMap
                         (\entryIndex entryWithNotation ->
                             column
                                 [ centerX
                                 , F.center
-                                , spacing 3
+                                , detailSpacing
                                 , E.width fill
                                 ]
                                 [ paragraph
-                                    [ F.color colourTheme.textLightOrange
+                                    [ width fill ]
-                                    , F.bold
+                                    [ detailTitleMaker
-                                    , spacing 3
+                                        TextLightOrange
-                                    , paragraphFontSize
-                                    ]
-                                    [ text
                                         (if entryIndex < List.length argumentEntry.premises then
                                             "P" ++ String.fromInt (entryIndex + 1) ++ ") "
 
                                          else
                                             "C) "
                                         )
-                                    , text
+                                    , detailBodyMaker TextLightGrey
-                                        (if entryIndex < List.length argumentEntry.premises then
+                                        (text
-                                            entryWithNotation.premise
+                                            (if entryIndex < List.length argumentEntry.premises then
+                                                entryWithNotation.premise
 
-                                         else
+                                             else
-                                            argumentEntry.conclusion
+                                                argumentEntry.conclusion
+                                            )
                                         )
                                         |> el
-                                            [ F.color colourTheme.textLightGrey
+                                            []
-                                            , F.regular
-                                            , E.width fill
-                                            ]
                                     ]
                                 , paragraph
-                                    [ centerX
+                                    []
-                                    , F.center
+                                    [ detailTitleMaker
-                                    , spacing 3
+                                        TextLightOrange
-                                    , E.width fill
-                                    , F.color colourTheme.textLightOrange
-                                    , F.bold
-                                    ]
-                                    [ text
                                         (if entryIndex < List.length argumentEntry.premises then
                                             "(" ++ entryWithNotation.notation ++ ")"
 

frontend/src/Pages/Debate/Cucklist.elm

@@ -1,8 +1,9 @@
 module Pages.Debate.Cucklist exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Inner.Helpers exposing (detailBodyMaker, detailFormat, detailSpacing, detailTitleLink, detailTitleMaker, numberedListItem)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Converters exposing (formatSocial)
 import Config.Helpers.Format
     exposing
@@ -28,7 +29,7 @@ import Config.Pages.Debate.Cuckery.List
         , cuckListNumber
         )
 import Config.Pages.Debate.Cuckery.Types exposing (..)
-import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (ThemeColor(..), colourTheme, textLightGrey)
 import Config.Style.Images exposing (imageSquareMaker)
 import Config.Style.Transitions
     exposing
@@ -152,7 +153,7 @@ contentList device cuck =
                 [ alignRight
                 , alignTop
                 , paddingEach
-                    { top = 3
+                    { top = 0
                     , right = 10
                     , bottom = 0
                     , left = 0
@@ -161,7 +162,7 @@ contentList device cuck =
             <|
                 imageSquareMaker device (imagePathMaker M.Cuck cuck.cuckImage) True size
     in
-    [ row [ width fill ]
+    [ detailFormat row
         [ case ( device.class, device.orientation ) of
             ( Phone, Portrait ) ->
                 image "Smallish"
@@ -170,26 +171,8 @@ contentList device cuck =
                 image "Smallish"
 
             _ ->
-                image "Medium"
+                image "Test"
-        , column
+        , detailFormat column
-            [ width fill
-            , spacing 3
-            , paddingEach
-                { top =
-                    case ( device.class, device.orientation ) of
-                        ( Phone, Portrait ) ->
-                            3
-
-                        ( Tablet, Portrait ) ->
-                            3
-
-                        _ ->
-                            0
-                , right = 0
-                , bottom = 0
-                , left = 0
-                }
-            ]
             [ socialMaker cuck
             , dodgeTitle cuck
             , dodgeMaker device cuck
@@ -212,93 +195,29 @@ dodgeMaker device cuck =
 
 socialMaker : Cuck -> Element msg
 socialMaker cuck =
-    paragraph
+    newTabLink
-        [ F.color colourTheme.textLightGrey
+        []
-        , paragraphSpacing
+        { url = cuck.cuckSocial
-        , F.bold
+        , label =
-        , headerFontSizeSmall
+            detailTitleLink
-        , spacing 8
+                TextLightOrange
-        ]
+                (formatSocial cuck.cuckSocial)
-        [ text "Social: "
+        }
-        , newTabLink
-            [ paragraphFontSize
-            , F.color colourTheme.textLightOrange
-            ]
-            { url = cuck.cuckSocial
-            , label =
-                el
-                    [ transitionStyleSlow
-                    , hoverFontDarkOrange
-                    ]
-                <|
-                    text (formatSocial cuck.cuckSocial)
-            }
-        ]
 
 
 dodgeTitle : Cuck -> Element msg
 dodgeTitle cuck =
-    paragraph
+    detailTitleMaker
-        [ F.color colourTheme.textLightGrey
+        TextLightGrey
-        , paragraphSpacing
+        "Dodges: "
-        , F.bold
-        , headerFontSizeSmall
-        ]
-        [ text "Dodges: " ]
 
 
 makeDodge : Device -> Cuck -> Dodge -> Int -> Element msg
 makeDodge device cuck dodge index =
-    column
+    detailFormat row
-        [ F.color colourTheme.textLightGrey
+        [ numberedListItem TextLightGrey index
-        , paragraphSpacing
+        , detailFormat column
-        , paragraphFontSize
+            (dodgeRows device cuck dodge)
-        , alignLeft
-        , spacing 8
-        , width fill
-        ]
-        [ row
-            [ width fill
-            , case ( device.class, device.orientation ) of
-                ( Phone, Portrait ) ->
-                    moveLeft 40
-
-                ( Tablet, Portrait ) ->
-                    moveLeft 40
-
-                _ ->
-                    paddingEach
-                        { top = 0
-                        , right = 0
-                        , bottom = 0
-                        , left = 10
-                        }
-            ]
-            [ column
-                [ F.color colourTheme.textLightGrey
-                , paragraphSpacing
-                , headerFontSizeSmall
-                , alignTop
-                , alignRight
-                , F.alignRight
-                ]
-                [ text (String.fromInt index ++ ". ") ]
-            , column
-                [ spacing 3
-                , width fill
-                ]
-                [ circumstanceMaker cuck dodge
-                , column
-                    [ spacing 3
-                    , width fill
-                    ]
-                    [ propositionMaker device dodge
-                    , reductioMaker device dodge
-                    , attitudeMaker device dodge
-                    , reasonMaker device dodge
-                    ]
-                ]
-            ]
         ]
 
 
@@ -317,64 +236,45 @@ formatProposition proposition =
 
 dodgeCounter : Int -> Element msg
 dodgeCounter index =
-    column
+    detailTitleMaker TextLightGrey
-        [ F.color colourTheme.textLightGrey
+        (String.fromInt index ++ ". ")
-        , paragraphSpacing
-        , headerFontSizeSmall
-        ]
-        [ text (String.fromInt index ++ ". ") ]
 
 
 circumstanceMaker : Cuck -> Dodge -> Element msg
 circumstanceMaker cuck dodge =
-    el
+    newTabLink
-        [ spacing 5
+        []
-        ]
+        { url = dodge.dodgeLink
-    <|
+        , label = circumstance cuck dodge
-        newTabLink
+        }
-            [ paragraphFontSize
-            , F.color colourTheme.textLightOrange
-            ]
-            { url = dodge.dodgeLink
-            , label =
-                el
-                    [ headerFontSizeSmall
-                    ]
-                <|
-                    circumstance cuck dodge
-            }
 
 
 circumstance : Cuck -> Dodge -> Element msg
 circumstance cuck dodge =
-    paragraph
+    detailFormat paragraph
-        []
+        [ detailTitleLink TextLightOrange
-        [ el
+            (case dodge.dodgeDescription of
-            [ transitionStyleSlow
-            , hoverFontDarkOrange
-            ]
-          <|
-            case dodge.dodgeDescription of
                 NoReply ->
-                    text "Debate invitation extended with no response"
+                    "Debate invitation extended with no response"
 
                 RanAway ->
-                    text "Engaged in written debate and ran away when cornered"
+                    "Engaged in written debate and ran away when cornered"
 
                 GhostedMe ->
-                    text "Debate invitation accepted with no follow-up"
+                    "Debate invitation accepted with no follow-up"
 
                 OutrightNo ->
-                    text "Debate invitation declined"
+                    "Debate invitation declined"
 
                 InTooDeep ->
-                    text "Debate invitation accepted and subsequently retracted"
+                    "Debate invitation accepted and subsequently retracted"
 
                 KillScreen ->
-                    text "All further debate invitations preemptively declined"
+                    "All further debate invitations preemptively declined"
 
                 VagueGesture ->
-                    text "Chose to gesture vaguely instead of engaging"
+                    "Chose to gesture vaguely instead of engaging"
+            )
         , el [ F.color colourTheme.textLightGrey ] <|
             text "."
 
@@ -414,92 +314,83 @@ receipts cuck dodge =
             dodge.dodgeReceipts
 
 
-propositionMaker : Device -> Dodge -> Element msg
+infoRow : Device -> String -> Element msg -> Element msg
-propositionMaker device dodge =
+infoRow device label value =
-    (case ( device.class, device.orientation ) of
+    detailFormat
-        ( Phone, Portrait ) ->
+        (case ( device.class, device.orientation ) of
-            column
+            ( Phone, Portrait ) ->
+                column
 
-        ( Tablet, Portrait ) ->
+            ( Tablet, Portrait ) ->
-            column
+                column
+
+            _ ->
+                row
+        )
+        (if String.isEmpty label then
+            [ detailBodyMaker TextLightGrey value ]
+
+         else
+            [ el
+                [ width <| px 75
+                , alignTop
+                ]
+              <|
+                detailTitleMaker TextLightGrey label
+            , detailBodyMaker TextLightGrey value
+            ]
+        )
+
+
+dodgeRows : Device -> Cuck -> Dodge -> List (Element msg)
+dodgeRows device cuck dodge =
+    [ infoRow device "" (circumstanceMaker cuck dodge)
+    , infoRow device "Prop:" (text (formatProposition dodge.dodgeProposition))
+    , case dodge.dodgeFallacy of
+        Nothing ->
+            none
 
         _ ->
-            row
+            infoRow device "Fallacy:" (reductioMaker device dodge)
-    )
+    , infoRow device "Attitude:" (attitudeMaker device dodge)
-        [ F.color colourTheme.textLightGrey
+    , infoRow device "Reason:" (reasonMaker device dodge)
-        , paragraphSpacing
+    ]
-        , paragraphFontSize
-        , F.bold
-        ]
-        [ paragraph
-            [ alignTop
-            , dodgeWidth
-            ]
-            [ text "Proposition:"
-            ]
-        , paragraph
-            [ E.width fill
-            , alignLeft
-            ]
-            [ paragraph [ F.regular ] [ text (formatProposition dodge.dodgeProposition) ]
-            ]
-        ]
 
 
 attitudeMaker : Device -> Dodge -> Element msg
 attitudeMaker device dodge =
-    (case ( device.class, device.orientation ) of
+    detailFormat paragraph
-        ( Phone, Portrait ) ->
+        [ case dodge.dodgeNicksDoxasticState of
-            column
+            Nothing ->
+                paragraph [ F.regular ] [ text "I don't form a doxastic state." ]
 
-        ( Tablet, Portrait ) ->
+            Just Belief ->
-            column
+                paragraph [ F.regular ]
+                    [ text "I lean more toward "
+                    , el [ F.bold ] (text "TRUE")
+                    , text " than false."
+                    ]
 
-        _ ->
+            Just Disbelief ->
-            row
+                paragraph [ F.regular ]
-    )
+                    [ text "I lean more toward "
-        [ F.color colourTheme.textLightGrey
+                    , text "FALSE" |> el [ F.bold ]
-        , paragraphSpacing
+                    , text " than true."
-        , paragraphFontSize
+                    ]
-        , F.bold
-        , width fill
-        ]
-        [ paragraph
-            [ alignTop
-            , dodgeWidth
-            ]
-            [ text "Attitude:"
-            ]
-        , paragraph
-            [ E.width fill
-            , alignLeft
-            ]
-            [ case dodge.dodgeNicksDoxasticState of
-                Nothing ->
-                    paragraph [ F.regular ] [ text "I don't form a doxastic state." ]
 
-                Just Belief ->
+            Just Agnostic ->
-                    paragraph [ F.regular ]
+                el [ F.regular ] (text "I don't form beliefs about this proposition.")
-                        [ text "I lean more toward "
-                        , el [ F.bold ] (text "TRUE")
-                        , text " than false."
-                        ]
-
-                Just Disbelief ->
-                    paragraph [ F.regular ]
-                        [ text "I lean more toward "
-                        , text "FALSE" |> el [ F.bold ]
-                        , text " than true."
-                        ]
-
-                Just Agnostic ->
-                    el [ F.regular ] (text "I don't form beliefs about this proposition.")
-            ]
         ]
 
 
 reductioMaker : Device -> Dodge -> Element msg
 reductioMaker device dodge =
+    let
+        displayFallacy : String -> Element msg
+        displayFallacy fallacyText =
+            detailFormat paragraph
+                [ text fallacyText ]
+    in
     case dodge.dodgeFallacy of
         Nothing ->
             none
@@ -511,106 +402,50 @@ reductioMaker device dodge =
                         none
 
                     else
-                        displayFallacy device str
+                        displayFallacy str
 
                 AppealToNature ->
-                    displayFallacy device "Appeal to Nature"
+                    displayFallacy "Appeal to Nature"
 
                 AppealToTradition ->
-                    displayFallacy device "Appeal to Tradition"
+                    displayFallacy "Appeal to Tradition"
 
                 AppealToIgnorance ->
-                    displayFallacy device "Appeal to Ignorance"
+                    displayFallacy "Appeal to Ignorance"
 
                 AppealFromIncredulity ->
-                    displayFallacy device "Appeal from Incredulity"
+                    displayFallacy "Appeal from Incredulity"
 
                 RedHerring ->
-                    displayFallacy device "Red Herring"
+                    displayFallacy "Red Herring"
 
                 BeggingTheQuestion ->
-                    displayFallacy device "Begging the Question"
+                    displayFallacy "Begging the Question"
 
                 Strawman ->
-                    displayFallacy device "Strawman"
+                    displayFallacy "Strawman"
 
                 Equivocation ->
-                    displayFallacy device "Equivocation"
+                    displayFallacy "Equivocation"
 
                 GeneticFallacy ->
-                    displayFallacy device "Genetic Fallacy"
+                    displayFallacy "Genetic Fallacy"
 
                 MotteAndBailey ->
-                    displayFallacy device "Motte and Bailey"
+                    displayFallacy "Motte and Bailey"
 
 
 reasonMaker : Device -> Dodge -> Element msg
 reasonMaker device dodge =
-    (case ( device.class, device.orientation ) of
+    detailFormat paragraph
-        ( Phone, Portrait ) ->
+        [ text <|
-            column
+            case dodge.dodgeNicksDoxasticReason of
+                NoProp ->
+                    "There is no proposition to evaluate."
 
-        ( Tablet, Portrait ) ->
+                VagueProp ->
-            column
+                    "The proposition is too vague to evaluate."
 
-        _ ->
+                SpecificPropReason str ->
-            row
+                    str
-    )
-        [ F.color colourTheme.textLightGrey
-        , paragraphSpacing
-        , paragraphFontSize
-        , F.bold
-        , width fill
-        ]
-        [ paragraph
-            [ alignTop
-            , dodgeWidth
-            ]
-            [ text "Reason:"
-            ]
-        , paragraph [ F.regular ]
-            [ text <|
-                case dodge.dodgeNicksDoxasticReason of
-                    NoProp ->
-                        "There is no proposition to evaluate."
-
-                    VagueProp ->
-                        "The proposition is too vague to evaluate."
-
-                    SpecificPropReason str ->
-                        str
-            ]
-        ]
-
-
-displayFallacy : Device -> String -> Element msg
-displayFallacy device fallacyText =
-    (case ( device.class, device.orientation ) of
-        ( Phone, Portrait ) ->
-            column
-
-        ( Tablet, Portrait ) ->
-            column
-
-        _ ->
-            row
-    )
-        [ F.color colourTheme.textLightGrey
-        , paragraphSpacing
-        , paragraphFontSize
-        , F.bold
-        ]
-        [ paragraph
-            [ alignTop
-            , dodgeWidth
-            ]
-            [ text "Fallacy:"
-            ]
-        , paragraph
-            [ E.width fill
-            , alignLeft
-            ]
-            [ paragraph [ F.regular ]
-                [ text fallacyText ]
-            ]
         ]

frontend/src/Pages/Debate/Gibberish.elm

@@ -1,8 +1,8 @@
 module Pages.Debate.Gibberish exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Converters exposing (toTitleCase)
 import Config.Helpers.Format
     exposing
@@ -37,7 +37,7 @@ import Config.Pages.Debate.Gibberish.Records.PhilOfLanguage exposing (philOfLang
 import Config.Pages.Debate.Gibberish.Records.PhilOfMind exposing (philOfMindGibberish)
 import Config.Pages.Debate.Gibberish.Records.Theology exposing (theologyGibberish)
 import Config.Pages.Debate.Gibberish.Types exposing (..)
-import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (colourTheme)
 import Config.Style.Images exposing (imageSquareMaker)
 import Effect exposing (Effect)
 import Element as E exposing (..)

frontend/src/Pages/Donate.elm

@@ -1,8 +1,8 @@
 module Pages.Donate exposing (Model, Msg, page)
 
 import Config.Data.Identity as I exposing (..)
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Format
     exposing
         ( headerFontSizeSmall
@@ -34,7 +34,7 @@ import Config.Pages.Donate.Records.PayPal exposing (donatePayPal)
 import Config.Pages.Donate.Records.Stripe exposing (donateStripe)
 import Config.Pages.Donate.Records.YouTube exposing (donateYouTube)
 import Config.Pages.Donate.Types exposing (..)
-import Config.Style.Colour as T exposing (..)
+import Config.Style.Colour.Helpers as T exposing (..)
 import Config.Style.Images exposing (imageSquareMaker)
 import Effect exposing (Effect)
 import Element as E exposing (..)

frontend/src/Pages/Home_.elm

@@ -13,7 +13,7 @@ import Config.Helpers.Response
         , topLevelContainer
         )
 import Config.Helpers.Viewport exposing (resetViewport)
-import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (colourTheme)
 import Config.Style.Glow exposing (glowDeepDarkGrey)
 import Config.Style.Icons.Icons
     exposing

frontend/src/Pages/Interviews.elm

@@ -1,8 +1,9 @@
 module Pages.Interviews exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Inner.Helpers exposing (..)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Converters exposing (formatSocial)
 import Config.Helpers.Format
     exposing
@@ -26,6 +27,7 @@ import Config.Helpers.StrengthBar
         )
 import Config.Helpers.ToolTip exposing (tooltip)
 import Config.Helpers.Viewport exposing (resetViewport)
+import Config.Pages.Debate.Cuckery.List exposing (cuckListNumber)
 import Config.Pages.Interviews.Records.DrShawnBakerPodcast exposing (drShawnBakerPodcast)
 import Config.Pages.Interviews.Records.FitAndFurious exposing (fitAndFurious)
 import Config.Pages.Interviews.Records.FoolproofMastery exposing (foolproofMastery)
@@ -36,7 +38,7 @@ import Config.Pages.Interviews.Records.MuscleMemoirsPodcast exposing (muscleMemo
 import Config.Pages.Interviews.Records.SigmaNutritionRadio exposing (sigmaNutritionRadio)
 import Config.Pages.Interviews.Records.StrenuousLifePodcast exposing (strenuousLifePodcast)
 import Config.Pages.Interviews.Types exposing (..)
-import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (ThemeColor(..), colourTheme)
 import Config.Style.Images exposing (imageSquareMaker)
 import Config.Style.Transitions
     exposing
@@ -177,6 +179,18 @@ contentList device interview =
                 ]
             <|
                 imageSquareMaker device (imagePathMaker M.Interviews interview.interviewImage) True size
+
+        imageMaker : Element msg
+        imageMaker =
+            case ( device.class, device.orientation ) of
+                ( Phone, Portrait ) ->
+                    image "Smallish"
+
+                ( Tablet, Portrait ) ->
+                    image "Smallish"
+
+                _ ->
+                    image "Test"
     in
     [ row
         [ paddingEach
@@ -185,80 +199,19 @@ contentList device interview =
             , bottom = 0
             , left = 0
             }
+        , detailSpacing
+        , width fill
         ]
-        [ case ( device.class, device.orientation ) of
+        [ imageMaker
-            ( Phone, Portrait ) ->
+        , detailFormat column
-                image "Smallish"
+            [ socialMaker interview.interviewSocial interview.interviewSocial
-
+            , detailTitleMaker TextLightGrey "Appearances:"
-            ( Tablet, Portrait ) ->
+            , appearanceMaker interview
-                image "Smallish"
-
-            _ ->
-                image "Medium"
-        , column
-            [ width fill
-            ]
-            [ socialMaker interview
-            , appearanceTitle interview
             ]
         ]
-    , el
-        [ paddingEach
-            { top = 0
-            , right = 0
-            , bottom = 0
-            , left =
-                case ( device.class, device.orientation ) of
-                    ( Phone, Portrait ) ->
-                        5
-
-                    ( Tablet, Portrait ) ->
-                        5
-
-                    _ ->
-                        55
-            }
-        ]
-      <|
-        appearanceMaker interview
     ]
 
 
-socialMaker : Interview -> Element msg
-socialMaker interview =
-    paragraph
-        [ F.color colourTheme.textLightGrey
-        , paragraphSpacing
-        , F.bold
-        , headerFontSizeSmall
-        ]
-        [ newTabLink
-            [ paragraphFontSize
-            , F.color colourTheme.textLightOrange
-            ]
-            { url = interview.interviewSocial
-            , label =
-                el
-                    [ transitionStyleSlow
-                    , hoverFontDarkOrange
-                    ]
-                <|
-                    text (formatSocial interview.interviewSocial)
-            }
-        ]
-
-
-appearanceTitle : Interview -> Element msg
-appearanceTitle interview =
-    paragraph
-        [ F.color colourTheme.textLightGrey
-        , paragraphSpacing
-        , headerFontSizeSmall
-        , F.bold
-        ]
-        [ text "Appearances: " ]
-
-
 appearanceMaker : Interview -> Element msg
 appearanceMaker interview =
     column [ spacing 10, width fill ] <|
@@ -269,55 +222,24 @@ appearanceMaker interview =
 
 makeAppearance : Appearance -> Int -> Element msg
 makeAppearance appearanceEntry index =
-    el
+    detailFormat row
-        [ alignLeft
+        [ listCounter index
-        , width fill
+        , detailFormat column
+            [ episodeMaker appearanceEntry
+            , experienceMaker appearanceEntry
+            , dateMaker appearanceEntry
+            , subjectMaker appearanceEntry
+            , subjectList appearanceEntry
+            ]
         ]
-    <|
-        row
-            [ E.width fill
-            , spacing 3
-            ]
-            [ el
-                [ F.color colourTheme.textLightGrey
-                , paragraphSpacing
-                , paragraphFontSize
-                , F.bold
-                , alignTop
-                , F.alignRight
-                ]
-              <|
-                text (String.fromInt index ++ ". ")
-            , column
-                [ width fill
-                , spacing 3
-                ]
-                [ episodeMaker appearanceEntry
-                , experienceMaker appearanceEntry
-                , dateMaker appearanceEntry
-                , subjectMaker appearanceEntry
-                , subjectList appearanceEntry
-                ]
-            ]
 
 
 episodeMaker : Appearance -> Element msg
 episodeMaker appearanceEntry =
     newTabLink
-        [ paragraphFontSize
+        []
-        , F.color colourTheme.textLightOrange
-        ]
         { url = appearanceEntry.appearanceLink
-        , label =
+        , label = detailTitleMaker TextLightOrange ("#" ++ appearanceEntry.appearanceEpisode ++ ": " ++ appearanceEntry.appearanceTitle)
-            paragraph
-                [ headerFontSizeSmall
-                ]
-                [ text ("#" ++ appearanceEntry.appearanceEpisode ++ ": " ++ appearanceEntry.appearanceTitle)
-                    |> el
-                        [ F.color colourTheme.textLightOrange
-                        , hoverFontDarkOrange
-                        ]
-                ]
         }
 
 
@@ -468,3 +390,4 @@ makeSubject subjects =
             , paragraphFontSize
             ]
             [ text ("• " ++ subjects.subject) ]
+

frontend/src/Pages/NotFound_.elm

@@ -1,8 +1,8 @@
 module Pages.NotFound_ exposing (Model, Msg, page)
 
 import Config.Data.Identity exposing (pageNames)
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Headers.Helpers exposing (..)
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Response

frontend/src/Pages/Nutridex.elm

@@ -3,12 +3,12 @@ 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.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Inner.Helpers exposing (detailBodyMaker, detailFormat, detailTitleMaker)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Format
     exposing
-        ( divider
+        ( headerFontSizeBig
-        , headerFontSizeBig
         , headerFontSizeSmall
         , paragraphFontSize
         , paragraphSpacing
@@ -23,6 +23,7 @@ import Config.Helpers.Response
         ( pageList
         , topLevelContainer
         )
+import Config.Helpers.ServiceFormat exposing (divider)
 import Config.Helpers.StrengthBar
     exposing
         ( barMaker
@@ -32,7 +33,7 @@ import Config.Helpers.ToolTip exposing (tooltip)
 import Config.Helpers.Viewport exposing (resetViewport)
 import Config.Pages.Products.Records.NutriDex exposing (productNutriDex)
 import Config.Pages.Products.Types exposing (..)
-import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (ThemeColor(..), colourTheme)
 import Config.Style.Glow exposing (glowDeepDarkGrey)
 import Config.Style.Icons.Icons exposing (nutriDexLogo)
 import Config.Style.Transitions
@@ -176,7 +177,7 @@ contentList device nutridex =
 
 makeFeature : Features -> Element msg
 makeFeature features =
-    column
+    el
         [ E.width fill
         , alignLeft
         , paddingEach
@@ -186,31 +187,14 @@ makeFeature features =
             , left = 8
             }
         ]
-        [ row [ E.width fill ]
+    <|
-            [ column [ E.width fill ]
+        detailFormat column
-                [ paragraph [ F.regular, F.alignLeft ]
+            [ detailFormat paragraph
-                    [ text "• ", el [ F.bold, F.color colourTheme.textLightOrange ] (text features.featureTitle), text features.feature ]
+                [ text "• "
+                , detailTitleMaker TextLightOrange features.featureTitle
+                , detailBodyMaker TextLightGrey (text features.feature |> el [ smallTextFontSize ])
                 ]
             ]
-        ]
-
-
-price : Element msg
-price =
-    newTabLink []
-        { url = "https://uprootnutrition.myshopify.com/cart/31192710807615:1?channel=buy_button"
-        , label =
-            row
-                [ F.center
-                , paddingEach
-                    { top = 3
-                    , right = 0
-                    , bottom = 0
-                    , left = 0
-                    }
-                ]
-                [ text "$19.99" ]
-        }
 
 
 featureList : NutriDex -> Device -> Element msg
@@ -714,7 +698,6 @@ nutriDexFattyAcids =
                             { url = "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5946201/"
                             , label = text "17"
                             }
-                        , text ", "
                         , newTabLink referenceFormat
                             { url = "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5452278/"
                             , label = text "18"

frontend/src/Pages/Services.elm

@@ -2,8 +2,16 @@ module Pages.Services exposing (Model, Msg, page)
 
 import Browser
 import Config.Data.Identity exposing (pageNames)
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Inner.Helpers
-import Config.Helpers.Cards.Types as C
+    exposing
+        ( detailBodyMaker
+        , detailFormat
+        , detailTitleMaker
+        , listItem
+        , listMaker
+        )
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Format
     exposing
         ( headerFontSizeMedium
@@ -20,6 +28,7 @@ import Config.Helpers.Response
         ( pageList
         , topLevelContainer
         )
+import Config.Helpers.ServiceFormat exposing (divider)
 import Config.Helpers.Viewport exposing (resetViewport)
 import Config.Pages.Services.Records.DebateAnalysis exposing (..)
 import Config.Pages.Services.Records.DebateCoaching exposing (..)
@@ -27,7 +36,7 @@ import Config.Pages.Services.Records.ElmBuilds exposing (..)
 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.Colour.Helpers as T exposing (..)
 import Config.Style.Glow exposing (glowDeepDarkGrey, glowDeepDarkOrange)
 import Config.Style.Images exposing (imageSquareMaker)
 import Config.Style.Transitions exposing (transitionStyleMedium)
@@ -160,93 +169,45 @@ contentList device service =
             <|
                 imageSquareMaker device (imagePathMaker M.ServicePage service.serviceImage) True size
     in
-    [ row []
+    [ detailFormat row
-        [ image "Small"
+        [ case ( device.class, device.orientation ) of
-        , column [ alignBottom ]
+            ( Phone, Portrait ) ->
+                none
+
+            ( Tablet, Portrait ) ->
+                none
+
+            _ ->
+                image "Test"
+        , detailFormat column
             [ rateMaker service
-            , descriptionMaker service
+            , descriptionMaker
+            , offeringMaker service
             ]
         ]
-    , offeringMaker service
     ]
 
 
-serviceWidth =
-    width <| px 45
-
-
 rateMaker : Service msg -> Element msg
 rateMaker service =
-    row
+    detailFormat row
-        [ F.color colourTheme.textLightOrange
+        [ detailTitleMaker TextLightOrange "Rate:"
-        , paragraphSpacing
+        , el [ width fill ] <| detailBodyMaker TextLightGrey (text service.serviceRate)
-        , F.bold
-        , headerFontSizeSmall
-        , E.width fill
-        ]
-        [ column
-            [ alignTop
-            , serviceWidth
-            ]
-            [ E.text "Rate:"
-            ]
-        , column
-            [ E.width fill
-            , alignLeft
-            ]
-            [ el
-                [ F.regular
-                , paragraphFontSize
-                , F.color colourTheme.textLightGrey
-                ]
-              <|
-                E.text service.serviceRate
-            ]
         ]
 
 
-descriptionMaker : Service msg -> Element msg
+descriptionMaker : Element msg
-descriptionMaker service =
+descriptionMaker =
-    row
+    detailTitleMaker TextLightOrange "Offerings:"
-        [ F.color colourTheme.textLightOrange
-        , paragraphSpacing
-        , headerFontSizeSmall
-        , F.bold
-        ]
-        [ column
-            [ alignTop
-            , width <| px 80
-            ]
-            [ E.text "Offerings:"
-            ]
-        ]
 
 
 offeringMaker : Service msg -> Element msg
 offeringMaker service =
-    column
+    listMaker makeDescription service.serviceDescription
-        [ spacing 8
-        , width fill
-        ]
-    <|
-        List.map2 (\x y -> makeDescription x)
-            service.serviceDescription
-            (List.range 1 (List.length service.serviceDescription))
 
 
 makeDescription : Description -> Element msg
 makeDescription description =
-    column
+    listItem
-        ([ F.color colourTheme.textLightGrey
+        description.point
-         , paragraphSpacing
+        textLightGrey
-         , paragraphFontSize
-         , F.bold
-         , alignLeft
-         ]
-            ++ [ spacing 8
-               , width fill
-               ]
-        )
-        [ paragraph [ F.regular ]
-            [ E.text ("• " ++ description.point) ]
-        ]

frontend/src/Pages/Services/Analysis.elm

@@ -1,7 +1,7 @@
 module Pages.Services.Analysis exposing (Model, Msg, page)
 
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
-import Config.Helpers.Cards.Types as C exposing (..)
+import Config.Helpers.Cards.Outer.Types as C exposing (..)
 import Config.Helpers.Format exposing (..)
 import Config.Helpers.Headers.Types exposing (Header)
 import Config.Helpers.Price exposing (buyButton)
@@ -10,7 +10,7 @@ import Config.Helpers.ServiceFormat exposing (..)
 import Config.Helpers.ToolTip exposing (..)
 import Config.Helpers.Viewport exposing (resetViewport)
 import Config.Pages.Services.Records.DebateAnalysis exposing (..)
-import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (colourTheme)
 import Config.Style.Transitions
     exposing
         ( hoverFontDarkOrange

frontend/src/Pages/Services/Coaching.elm

@@ -1,7 +1,7 @@
 module Pages.Services.Coaching exposing (Model, Msg, page)
 
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Format exposing (..)
 import Config.Helpers.Headers.Helpers exposing (..)
 import Config.Helpers.Headers.Types exposing (Header)
@@ -15,7 +15,7 @@ import Config.Helpers.ServiceFormat exposing (..)
 import Config.Helpers.ToolTip exposing (..)
 import Config.Helpers.Viewport exposing (resetViewport)
 import Config.Pages.Services.Records.DebateCoaching exposing (servicesDebateCoaching)
-import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (colourTheme)
 import Config.Style.Transitions
     exposing
         ( hoverFontDarkOrange

frontend/src/Pages/Services/Elm.elm

@@ -1,7 +1,7 @@
 module Pages.Services.Elm exposing (Model, Msg, page)
 
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Format exposing (..)
 import Config.Helpers.Headers.Helpers exposing (..)
 import Config.Helpers.Headers.Types exposing (Header)
@@ -14,7 +14,7 @@ import Config.Helpers.ServiceFormat exposing (..)
 import Config.Helpers.ToolTip exposing (..)
 import Config.Helpers.Viewport exposing (resetViewport)
 import Config.Pages.Services.Records.ElmBuilds exposing (servicesElmBuilds)
-import Config.Style.Colour exposing (..)
+import Config.Style.Colour.Helpers exposing (..)
 import Config.Style.Transitions
     exposing
         ( hoverFontDarkOrange

frontend/src/Pages/Services/Nix.elm

@@ -1,7 +1,7 @@
 module Pages.Services.Nix exposing (Model, Msg, page)
 
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Format exposing (..)
 import Config.Helpers.Headers.Helpers exposing (..)
 import Config.Helpers.Headers.Types exposing (Header)
@@ -14,7 +14,8 @@ import Config.Helpers.ServiceFormat exposing (..)
 import Config.Helpers.ToolTip exposing (..)
 import Config.Helpers.Viewport exposing (resetViewport)
 import Config.Pages.Services.Records.NixBuilds exposing (servicesNixBuilds)
-import Config.Style.Colour exposing (..)
+import Config.Style.Colour.Helpers exposing (..)
+import Config.Style.Colour.Types exposing (..)
 import Config.Style.Transitions
     exposing
         ( hoverFontDarkOrange

frontend/src/Pages/Services/Nutrition.elm

@@ -1,7 +1,7 @@
 module Pages.Services.Nutrition exposing (Model, Msg, page)
 
-import Config.Helpers.Cards.Helpers exposing (cardMaker)
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
-import Config.Helpers.Cards.Types as C
+import Config.Helpers.Cards.Outer.Types as C
 import Config.Helpers.Format exposing (..)
 import Config.Helpers.Headers.Helpers exposing (..)
 import Config.Helpers.Headers.Types exposing (Header)
@@ -15,7 +15,7 @@ import Config.Helpers.ServiceFormat exposing (..)
 import Config.Helpers.ToolTip exposing (..)
 import Config.Helpers.Viewport exposing (resetViewport)
 import Config.Pages.Services.Records.NutritionScience exposing (servicesNutritionScience)
-import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Colour.Helpers exposing (colourTheme)
 import Config.Style.Transitions
     exposing
         ( hoverFontDarkOrange