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.Types as C
+import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
+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
-        Ok ( toc, renderedMarkdown ) ->
-            paragraph []
-                [ column
-                    [ width fill
-                    , centerX
-                    , spacing 10
-                    ]
-                    (tocView toc :: renderedMarkdown)
-                ]
+    case
+        markdown
+            |> String.split "\n"
+            |> List.map String.trimRight
+            |> String.join "\n"
+            |> Markdown.Parser.parse
+    of
+        Ok ast ->
+            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.height <| px (imageSizer size)
+        , E.width <| 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" ->
-            35
+        "Fill" ->
+            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