feat: added dodger page

frontend/src/Config/Theme.elm

@@ -3,15 +3,7 @@ module Config.Theme exposing (..)
 import Element exposing (..)
 import Element.Background as B
 import Element.Font as F
-
-
-type alias Theme =
-    { nonHighlightedText : Color
-    , nonHighlightedDarkText : Color
-    , highlightText : Color
-    , backgroundColour : Color
-    , debugColour : Color
-    }
+import Html.Attributes as H exposing (style)
 
 
 topLevelContainer : Element msg -> Element msg
@@ -23,16 +15,58 @@ topLevelContainer =
         ]
 
 
+pageList : List (Attribute msg)
+pageList =
+    [ spacing 40
+    , centerX
+    , centerY
+    , moveDown 60
+    , alignTop
+    ]
+
+
+type alias Theme =
+    { nonHighlightedText : Color
+    , nonHighlightedDarkText : Color
+    , highlightText : Color
+    , highlightTextHover : Color
+    , backgroundColour : Color
+    , debugColour : Color
+    }
+
+
 colourTheme : Theme
 colourTheme =
     { nonHighlightedText = rgb255 212 212 212
     , nonHighlightedDarkText = rgb255 126 126 126
     , highlightText = rgb255 204 102 0
+    , highlightTextHover = rgb255 120 60 0
     , backgroundColour = rgb255 40 40 40
     , debugColour = rgb255 227 28 121
     }
 
 
+transitionStyle : Attribute msg
+transitionStyle =
+    htmlAttribute <| style "transition" "all .2s"
+
+
+transitionHighlightedLinkHover : Element msg -> Element msg
+transitionHighlightedLinkHover =
+    el
+        [ mouseOver [ F.color colourTheme.highlightTextHover ]
+        , transitionStyle
+        ]
+
+
+transitionNonHighlightedLinkHover : Element msg -> Element msg
+transitionNonHighlightedLinkHover =
+    el
+        [ mouseOver [ F.color colourTheme.highlightText ]
+        , transitionStyle
+        ]
+
+
 spartanFont : F.Font
 spartanFont =
     F.typeface "League Spartan"
@@ -43,14 +77,35 @@ imageSpacer =
     spacing 20
 
 
+navBarLinkFormat : List (Attr () msg)
+navBarLinkFormat =
+    [ F.size 15
+
+    -- , F.bold
+    ]
+
+
 titleFormat : List (Attr () msg)
 titleFormat =
     [ F.size 23
     , F.bold
-    , F.color colourTheme.highlightText
     ]
 
 
+nonHighlightedTitleFormat : List (Attr () msg)
+nonHighlightedTitleFormat =
+    [ F.color colourTheme.nonHighlightedText
+    ]
+        ++ titleFormat
+
+
+highlightedTitleFormat : List (Attr () msg)
+highlightedTitleFormat =
+    [ F.color colourTheme.highlightText
+    ]
+        ++ titleFormat
+
+
 paragraphFontSize : Attr decorative msg
 paragraphFontSize =
     F.size 17
@@ -64,16 +119,39 @@ paragraphLinkFormat =
         ]
 
 
+paragraphText : List (Attr () msg)
+paragraphText =
+    [ F.color colourTheme.nonHighlightedText
+    , spacing 8
+    , paragraphFontSize
+    ]
+
+
 paragraphFormat : List (Attr () msg)
 paragraphFormat =
-    [ spacing 8
-    , paragraphFontSize
-    , F.color colourTheme.nonHighlightedText
-    ]
+    []
+        ++ paragraphText
+
+
+paragraphBoldFormat : List (Attr () msg)
+paragraphBoldFormat =
+    [ F.bold ]
+        ++ paragraphText
+
+
+paragraphWidth : Attribute msg
+paragraphWidth =
+    width <| px 700
+
+
+paragraphAlignLeft : List (Attr () msg)
+paragraphAlignLeft =
+    [ alignLeft, paragraphWidth ]
+        ++ paragraphText
 
 
 paragraphColumnFormat : List (Attribute msg)
 paragraphColumnFormat =
     [ spacing 20
-    , width <| px 700
+    , paragraphWidth
     ]