Feat/15 add elm css (#31)

* Init elm-css integration

* Wrap base view in Theme & add basic theme layouts

* Add heading style to base page template

* Correct protocol for canonical url

elm.json

@@ -15,7 +15,8 @@
             "elm/json": "1.1.3",
             "elm/parser": "1.1.0",
             "elm/time": "1.0.0",
-            "elm/url": "1.0.0"
+            "elm/url": "1.0.0",
+            "rtfeldman/elm-css": "17.0.5"
         },
         "indirect": {
             "MartinSStewart/elm-serialize": "1.2.6",

src/Shared.elm

@@ -2,12 +2,14 @@ module Shared exposing (Data, Model, Msg(..), SharedMsg(..), template)
 
 import Browser.Navigation
 import DataSource
-import Html exposing (Html)
+import Html
+import Html.Styled
 import Pages.Flags
 import Pages.PageUrl exposing (PageUrl)
 import Path exposing (Path)
 import Route exposing (Route)
 import SharedTemplate exposing (SharedTemplate)
+import Theme
 import View exposing (View)
 
 
@@ -93,8 +95,10 @@ view :
     -> Model
     -> (Msg -> msg)
     -> View msg
-    -> { body : Html msg, title : String }
+    -> { body : Html.Html msg, title : String }
 view sharedData page model toMsg pageView =
-    { body = Html.div [] pageView.body
+    { body =
+        Html.Styled.toUnstyled
+            (Theme.container ([ Theme.globalStyles ] ++ pageView.body))
     , title = pageView.title
     }

src/Site.elm

@@ -14,7 +14,7 @@ type alias Data =
 config : SiteConfig Data
 config =
     { data = data
-    , canonicalUrl = "http://transdimension.uk/"
+    , canonicalUrl = "https://transdimension.uk/"
     , manifest = manifest
     , head = head
     }

src/Theme.elm

@@ -0,0 +1,183 @@
+module Theme exposing (blue, container, containerContent, darkBlue, generateId, globalStyles, gridStyle, maxMobile, oneColumn, pageHeadingStyle, pink, threeColumn, twoColumn, verticalSpacing, white, withMediaDesktop, withMediaLargeDevice, withMediaTablet)
+
+import Css exposing (..)
+import Css.Global exposing (adjacentSiblings, global, typeSelector)
+import Css.Media as Media exposing (minWidth, only, screen, withMedia)
+import Html.Styled exposing (Html, div, text)
+import Html.Styled.Attributes exposing (css)
+
+
+
+-- Brand colours
+
+
+darkBlue : Color
+darkBlue =
+    hex "040F39"
+
+
+pink : Color
+pink =
+    hex "FF7AA7"
+
+
+blue : Color
+blue =
+    hex "53C3FF"
+
+
+white : Color
+white =
+    hex "FFFFFF"
+
+
+
+-- Accent colours
+-- Text and background colours
+-- Breakpoints
+
+
+maxMobile : Float
+maxMobile =
+    576
+
+
+withMediaTablet : List Style -> Style
+withMediaTablet =
+    withMedia [ only screen [ Media.minWidth (px maxMobile), Media.maxWidth (px maxTablet) ] ]
+
+
+maxTablet : Float
+maxTablet =
+    769
+
+
+withMediaDesktop : List Style -> Style
+withMediaDesktop =
+    withMedia [ only screen [ Media.minWidth (px maxTablet) ] ]
+
+
+maxLargeDevice : Float
+maxLargeDevice =
+    992
+
+
+withMediaLargeDevice : List Style -> Style
+withMediaLargeDevice =
+    withMedia [ only screen [ Media.minWidth (px maxLargeDevice) ] ]
+
+
+{-| Injects a <style> tag into the body, and can target element or
+class selectors anywhere, including outside the Elm app.
+-}
+globalStyles : Html msg
+globalStyles =
+    global
+        [ typeSelector "body"
+            [ backgroundColor white
+            , color darkBlue
+            , fontFamilies [ "covik-sans", sansSerif.value ]
+            , fontWeight (int 400)
+            ]
+        , typeSelector "h1"
+            [ color blue
+            ]
+        , typeSelector "h2"
+            [ color blue
+            ]
+        , typeSelector "h3"
+            [ color blue
+            ]
+        , typeSelector "h4"
+            [ color blue
+            ]
+        , typeSelector "b"
+            [ fontWeight (int 700)
+            ]
+        , typeSelector "p"
+            [ adjacentSiblings
+                [ typeSelector "p"
+                    [ marginTop (rem 1)
+                    ]
+                ]
+            ]
+        , typeSelector "blockquote"
+            [ adjacentSiblings
+                [ typeSelector "blockquote"
+                    [ marginTop (rem 1)
+                    ]
+                ]
+            ]
+        ]
+
+
+container : List (Html msg) -> Html msg
+container children =
+    div [ css [ margin2 zero auto, maxWidth (px 1200), width (pct 100) ] ] children
+
+
+containerContent : List (Html msg) -> Html msg
+containerContent children =
+    div [ css [ margin2 zero auto, maxWidth (px 800), width (pct 100) ] ] children
+
+
+gridStyle : Style
+gridStyle =
+    batch
+        [ displayFlex
+        , flexWrap wrap
+        , alignItems start
+        ]
+
+
+{-| A flex row item width for a single column layout
+oneColumn : Css.CalculatedLength (not exposed by <https://github.com/rtfeldman/elm-css/pull/519>)
+-}
+oneColumn =
+    calc (pct 100) minus (rem 2)
+
+
+{-| A flex row item width for a double column layout
+twoColumn : Css.CalculatedLength
+-}
+twoColumn =
+    calc (pct 50) minus (rem 2)
+
+
+{-| A flex row item width for a triple column layout
+threeColumn : Css.CalculatedLength
+-}
+threeColumn =
+    calc (pct 33.33) minus (rem 2)
+
+
+{-| A div with known vertical margin
+-}
+verticalSpacing : Float -> Html msg
+verticalSpacing num =
+    div [ css [ margin2 (rem num) zero ] ] []
+
+
+{-| For a top header, likely an h1
+-}
+pageHeadingStyle : Style
+pageHeadingStyle =
+    batch
+        [ fontSize (rem 1.8)
+        , outline none
+        , padding2 (rem 2) zero
+        , textAlign center
+        , withMediaTablet
+            [ fontSize (rem 2.5) ]
+        , withMediaDesktop
+            [ fontSize (rem 2.5) ]
+        ]
+
+
+
+-- Helpers
+
+
+generateId : String -> String
+generateId input =
+    String.trim (String.replace " " "-" (String.toLower input))

src/View.elm

@@ -1,23 +1,30 @@
 module View exposing (View, map, placeholder)
 
-import Html exposing (Html)
+import Html.Styled
+import Html.Styled.Attributes
+import Theme
 
 
 type alias View msg =
     { title : String
-    , body : List (Html msg)
+    , body : List (Html.Styled.Html msg)
     }
 
 
 map : (msg1 -> msg2) -> View msg1 -> View msg2
 map fn doc =
     { title = doc.title
-    , body = List.map (Html.map fn) doc.body
+    , body = List.map (Html.Styled.map fn) doc.body
     }
 
 
 placeholder : String -> View msg
 placeholder moduleName =
     { title = "Placeholder - " ++ moduleName
-    , body = [ Html.text moduleName ]
+    , body =
+        [ Html.Styled.h1
+            [ Html.Styled.Attributes.css [ Theme.pageHeadingStyle ]
+            ]
+            [ Html.Styled.text moduleName ]
+        ]
     }