feat: added website template

templates/website/frontend/src/Config/Helpers/Response.elm

@@ -0,0 +1,94 @@
+module Config.Helpers.Response exposing
+    ( contentContainer
+    , pageList
+    , pageListCenter
+    , pageListFormat
+    , topLevelContainer
+    )
+
+import Config.Style.Colour.Helpers exposing (colourTheme)
+import Element as E
+    exposing
+        ( Attribute
+        , Device
+        , DeviceClass(..)
+        , Element
+        , Orientation(..)
+        , alignTop
+        , centerX
+        , centerY
+        , el
+        , fill
+        , height
+        , maximum
+        , minimum
+        , padding
+        , paddingXY
+        , scrollbarY
+        , spacing
+        , width
+        )
+import Element.Background as B exposing (color)
+import Html.Attributes exposing (style)
+
+
+topLevelContainer : Element msg -> Element msg
+topLevelContainer =
+    el
+        [ width fill
+        , height fill
+        , B.color colourTheme.backgroundLightGrey
+        ]
+
+
+pageListCenter : Device -> List (Attribute msg)
+pageListCenter device =
+    [ centerY
+    ]
+        ++ pageListFormat device
+
+
+pageList : Device -> List (Attribute msg)
+pageList device =
+    [ alignTop
+    ]
+        ++ pageListFormat device
+
+
+pageListFormat : Device -> List (Attribute msg)
+pageListFormat device =
+    let
+        pageListAttr =
+            [ centerX
+            , width fill
+            , height fill
+            , scrollbarY
+            ]
+    in
+    pageListAttr
+        ++ (case ( device.class, device.orientation ) of
+                ( Phone, Portrait ) ->
+                    [ spacing 0
+                    , paddingXY 10 30
+                    ]
+
+                ( Tablet, Portrait ) ->
+                    [ spacing 0
+                    , paddingXY 10 30
+                    ]
+
+                _ ->
+                    [ spacing 20
+                    , paddingXY 30 30
+                    ]
+           )
+
+
+contentContainer : Element msg -> Element msg
+contentContainer =
+    el
+        [ width (fill |> minimum 100)
+        , width (fill |> maximum 875)
+        , padding 10
+        , centerX
+        ]

templates/website/frontend/src/Config/Helpers/Viewport.elm

@@ -0,0 +1,16 @@
+module Config.Helpers.Viewport exposing
+    ( Msg
+    , resetViewport
+    )
+
+import Browser.Dom as Dom exposing (setViewport)
+import Task exposing (attempt)
+
+
+type Msg
+    = NoOp
+
+
+resetViewport : Cmd Msg
+resetViewport =
+    Task.attempt (\_ -> NoOp) (Dom.setViewportOf "scroll-container" 0 0)

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

@@ -0,0 +1,118 @@
+module Config.Style.Colour.Helpers exposing
+    ( ThemeColor(..)
+    , colourTheme
+    , getThemeColor
+    , syntaxTheme
+    )
+
+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
+    }
+
+
+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

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

@@ -0,0 +1,36 @@
+module Config.Style.Colour.Types exposing
+    ( SyntaxColors
+    , Theme
+    )
+
+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
+    }

templates/website/frontend/src/Config/Style/Fonts.elm

@@ -0,0 +1,50 @@
+module Config.Style.Fonts exposing
+    ( defaultFontSize
+    , headerFontSizeBig
+    , headerFontSizeMedium
+    , paragraphSpacing
+    , smallTextFontSize
+    , spartanFont
+    )
+
+import Element
+    exposing
+        ( Attr
+        , Attribute
+        , spacing
+        )
+import Element.Font as F
+    exposing
+        ( size
+        , typeface
+        )
+
+
+spartanFont : F.Font
+spartanFont =
+    F.typeface "League Spartan"
+
+
+paragraphSpacing : Attribute msg
+paragraphSpacing =
+    spacing 0
+
+
+headerFontSizeBig : Attr decorative msg
+headerFontSizeBig =
+    F.size 23
+
+
+headerFontSizeMedium : Attr decorative msg
+headerFontSizeMedium =
+    F.size 20
+
+
+defaultFontSize : Attr decorative msg
+defaultFontSize =
+    F.size 18
+
+
+smallTextFontSize : Attr decorative msg
+smallTextFontSize =
+    F.size 16

templates/website/frontend/src/Config/Style/Glow.elm

@@ -0,0 +1,24 @@
+module Config.Style.Glow exposing
+    ( glowDeepDarkGrey
+    , glowDeepDarkGreyNavbar
+    , glowDeepDarkOrange
+    )
+
+import Config.Style.Colour.Helpers exposing (ThemeColor(..), colourTheme, getThemeColor)
+import Element exposing (Attr)
+import Element.Border as D exposing (glow)
+
+
+glowDeepDarkGrey : Attr decorative msg
+glowDeepDarkGrey =
+    D.glow (getThemeColor Shadow) 4
+
+
+glowDeepDarkOrange : Attr decorative msg
+glowDeepDarkOrange =
+    D.glow (getThemeColor TextDeepDarkOrange) 4
+
+
+glowDeepDarkGreyNavbar : Attr decorative msg
+glowDeepDarkGreyNavbar =
+    D.glow (getThemeColor Shadow) 10

templates/website/frontend/src/Config/Style/Icons/Helpers.elm

@@ -0,0 +1,32 @@
+module Config.Style.Icons.Helpers exposing (buildSvg)
+
+import Config.Style.Icons.Types as SvgTypes
+    exposing
+        ( InnerPart
+        , OuterPart
+        )
+import Element as E
+    exposing
+        ( Element
+        , el
+        , html
+        )
+import Svg exposing (svg)
+
+
+
+{- buildSvg consumes an inner record to construct most of an SVG, and an outer record to supply
+   any potentially varying TypedSvg.Core.Attribute msgs and wrap it in an Element.el so it can be
+   used by elm-ui. It provides a consistent interface for inserting SVGs into elm-ui code.
+-}
+
+
+buildSvg : SvgTypes.OuterPart msg -> SvgTypes.InnerPart msg -> Element msg
+buildSvg outer inner =
+    el
+        outer.elementAttributes
+    <|
+        html <|
+            Svg.svg
+                (outer.svgAttributes ++ inner.svgAttributes)
+                inner.svg

templates/website/frontend/src/Config/Style/Icons/Types.elm

@@ -0,0 +1,28 @@
+module Config.Style.Icons.Types exposing
+    ( InnerPart
+    , OuterPart
+    )
+
+{-| The types used for SVG management.
+-}
+
+import Element exposing (Attribute)
+import Shared exposing (Model)
+import Svg exposing (svg)
+
+
+{-| The outer record for the SVG builder. This is explained in ../Helpers/Svg.elm.
+-}
+type alias OuterPart msg =
+    { elementAttributes : List (Element.Attribute msg)
+    , sharedModel : Shared.Model
+    , svgAttributes : List (Svg.Attribute msg)
+    }
+
+
+{-| The inner record for the SVG builder. This is explained in ../Helpers/Svg.elm.
+-}
+type alias InnerPart msg =
+    { svgAttributes : List (Svg.Attribute msg)
+    , svg : List (Svg.Svg msg)
+    }

templates/website/frontend/src/Config/Style/Transitions.elm

@@ -0,0 +1,69 @@
+module Config.Style.Transitions exposing (..)
+
+import Config.Style.Colour.Helpers exposing (colourTheme)
+import Config.Style.Glow
+    exposing
+        ( glowDeepDarkGrey
+        , glowDeepDarkOrange
+        )
+import Element
+    exposing
+        ( Attribute
+        , htmlAttribute
+        , mouseOver
+        )
+import Element.Background as B exposing (color)
+import Element.Border as D exposing (color)
+import Element.Font as F exposing (color)
+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"
+
+
+specialNavbarTransition : Attribute msg
+specialNavbarTransition =
+    htmlAttribute <| style "transition" "opacity .4s"
+
+
+
+-- This special transition is needed to avoid weird animation sequencing rather in Chrome-based browsers.
+
+
+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.textLightOrange
+        ]