website/frontend/src/Config/Theme.elm

module Config.Theme exposing (..)

import Element exposing (..)
import Element.Background as B
import Element.Font as F
import Html.Attributes as H exposing (style)


topLevelContainer : Element msg -> Element msg
topLevelContainer =
    el
        [ width fill
        , height fill
        , B.color colourTheme.backgroundColour
        ]


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"


imageSpacer : Attribute msg
imageSpacer =
    spacing 20


navBarLinkFormat : List (Attr () msg)
navBarLinkFormat =
    [ F.size 15

    -- , F.bold
    ]


titleFormat : List (Attr () msg)
titleFormat =
    [ F.size 23
    , F.bold
    ]


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


paragraphLinkFormat : { url : String, label : Element msg } -> Element msg
paragraphLinkFormat =
    newTabLink
        [ paragraphFontSize
        , F.color colourTheme.highlightText
        ]


paragraphText : List (Attr () msg)
paragraphText =
    [ F.color colourTheme.nonHighlightedText
    , spacing 8
    , paragraphFontSize
    ]


paragraphFormat : List (Attr () msg)
paragraphFormat =
    []
        ++ 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
    , paragraphWidth
    ]