feat: refactored a shit ton of stuff

frontend/src/Config/Style/Colour.elm

@@ -0,0 +1,36 @@
+module Config.Style.Colour exposing (..)
+
+import Element as E exposing (..)
+
+
+type alias Theme =
+    { textLightGrey : Color
+    , textDarkGrey : Color
+    , textLightOrange : Color
+    , textDarkOrange : Color
+    , textDeepDarkOrange : Color
+    , backgroundLightGrey : Color
+    , backgroundDarkGrey : Color
+    , backgroundDeepDarkGrey : Color
+    , barGreen : Color
+    , barRed : Color
+    , debugColour : Color
+    , transparent : 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
+    , barGreen = rgb255 0 102 0
+    , barRed = rgb255 102 0 0
+    , debugColour = rgb255 227 28 121
+    , transparent = rgba 1 1 1 0
+    }

frontend/src/Config/Style/Fonts.elm

@@ -0,0 +1,8 @@
+module Config.Style.Fonts exposing (..)
+
+import Element.Font as F exposing (typeface)
+
+
+spartanFont : F.Font
+spartanFont =
+    F.typeface "League Spartan"

frontend/src/Config/Style/Glow.elm

@@ -0,0 +1,16 @@
+module Config.Style.Glow exposing (..)
+
+import Config.Style.Colour exposing (colourTheme)
+import Element exposing (..)
+import Element.Border as D
+import Html.Attributes as H exposing (style)
+
+
+glowDeepDarkGrey : Attr decorative msg
+glowDeepDarkGrey =
+    D.glow colourTheme.backgroundDeepDarkGrey 5
+
+
+glowDeepDarkOrange : Attr decorative msg
+glowDeepDarkOrange =
+    D.glow colourTheme.textDeepDarkOrange 5

frontend/src/Config/Style/Transitions.elm

@@ -0,0 +1,51 @@
+module Config.Style.Transitions exposing (..)
+
+import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Glow exposing (glowDeepDarkGrey, glowDeepDarkOrange)
+import Element exposing (..)
+import Element.Background as B
+import Element.Border as D
+import Element.Font as F
+import Html.Attributes as H exposing (style)
+
+
+transitionStyleSlow : Attribute msg
+transitionStyleSlow =
+    htmlAttribute <| style "transition" "all 0.4s ease-in-out"
+
+
+transitionStyleMedium : Attribute msg
+transitionStyleMedium =
+    htmlAttribute <| style "transition" "all 0.2s ease-in-out"
+
+
+transitionStyleFast : Attribute msg
+transitionStyleFast =
+    htmlAttribute <| style "transition" "all 0.1s ease-in-out"
+
+
+hoverFontLightOrange : Attribute msg
+hoverFontLightOrange =
+    mouseOver [ F.color colourTheme.textLightOrange ]
+
+
+hoverFontDarkOrange : Attribute msg
+hoverFontDarkOrange =
+    mouseOver [ F.color colourTheme.textDarkOrange ]
+
+
+hoverCircleButtonDarkOrange : Attribute msg
+hoverCircleButtonDarkOrange =
+    mouseOver
+        [ D.color colourTheme.textDarkOrange
+        , B.color colourTheme.textDarkOrange
+        , glowDeepDarkOrange
+        ]
+
+
+hoverPageButtonDeepDarkOrange : Attribute msg
+hoverPageButtonDeepDarkOrange =
+    mouseOver
+        [ B.color colourTheme.textDeepDarkOrange
+        , F.color colourTheme.textDarkGrey
+        ]