Merge branch 'with-ghcjs' into 'master'

Use Haskell on the frontend

See merge request guyonvarch/shared-cost!2

1 files changed, 78 insertions, 0 deletions

diff --git a/server/src/Design/View/Header.hs b/server/src/Design/View/Header.hs
new file mode 100644
index 0000000..609d8fc
--- /dev/null
+++ b/server/src/Design/View/Header.hs
@@ -0,0 +1,78 @@
+module Design.View.Header
+  ( design
+  ) where
+
+import           Data.Monoid  ((<>))
+
+import           Clay
+
+import           Design.Color as Color
+import qualified Design.Media as Media
+
+design :: Css
+design = do
+  let headerPadding = "padding" -: "0 20px"
+  display flex
+  "flex-wrap" -: "wrap"
+  lineHeightMedia
+  position relative
+  backgroundColor Color.chestnutRose
+  color Color.white
+  Media.desktop $ marginBottom (em 3)
+  Media.mobileTablet $ marginBottom (em 2)
+  Media.mobile $ marginBottom (em 1.5)
+
+  ".title" <> ".item" ? headerPadding
+
+  ".title" ? do
+    textAlign (alignSide sideLeft)
+
+    Media.mobile $ fontSize (px 22)
+    Media.mobileTablet $ width (pct 100)
+    Media.tabletDesktop $ do
+      display inlineBlock
+      fontSize (px 35)
+
+  ".item" ? do
+    display inlineBlock
+    transition "background-color" (ms 50) easeIn (sec 0)
+    ".current" & backgroundColor (Color.chestnutRose -. 20)
+    Media.mobile $ fontSize (px 13)
+
+  (".item" # hover) <> (".item" # focus) ?
+    backgroundColor (Color.chestnutRose +. 10)
+
+  (".item.current" # hover) <> (".item.current" # focus) ?
+    backgroundColor (Color.chestnutRose -. 10)
+
+  ".nameSignOut" ? do
+    display flex
+    heightMedia
+    position absolute
+    top (px 0)
+    right (px 0)
+
+    ".name" ? do
+      Media.mobile $ display none
+      Media.tabletDesktop $ headerPadding
+
+    ".signOut" ? do
+      display flex
+      justifyContent center
+      alignItems center
+      svg ? do
+        Media.tabletDesktop $ width (px 30)
+        Media.mobile $ width (px 20)
+        "path" ? ("fill" -: "white")
+
+lineHeightMedia :: Css
+lineHeightMedia = do
+  Media.desktop $ lineHeight (px 80)
+  Media.tablet $ lineHeight (px 65)
+  Media.mobile $ lineHeight (px 50)
+
+heightMedia :: Css
+heightMedia = do
+  Media.desktop $ height (px 80)
+  Media.tablet $ height (px 65)
+  Media.mobile $ height (px 50)