Responsive header

1 files changed, 49 insertions, 35 deletions

diff --git a/src/server/Design/Header.hs b/src/server/Design/Header.hs
index d4546f8..94334c6 100644
--- a/src/server/Design/Header.hs
+++ b/src/server/Design/Header.hs
@@ -8,52 +8,66 @@ import Data.Monoid ((<>))
 
 import Clay
 
-import Design.Color as C
 import Design.Constants
+import Design.Color as Color
+import qualified Design.Media as Media
 
 design :: Css
 design = do
-  let headerHeight = px 80
-  let headerPadding = px 20
-  let darkenedRed = C.red +. 10
-  lineHeight headerHeight
-  height headerHeight
+  let headerPadding = "padding" -: "0 20px"
+  display flex
+  "flex-wrap" -: "wrap"
+  lineHeightMedia
   marginBottom blockMarginBottom
   position relative
-  backgroundColor C.red
-  color C.white
+  backgroundColor Color.red
+  color Color.white
 
-  ".item" ? do
-    float floatLeft
-    paddingLeft headerPadding
-    paddingRight headerPadding
-    hover & backgroundColor darkenedRed
-    focus & backgroundColor darkenedRed
-    position relative
-    ".current" & after & do
-        display block
-        content (stringContent "")
-        height (px 5)
-        width (pct 100)
-        position absolute
-        bottom (px 0)
-        left (px 0)
-        backgroundColor C.white
+  ".title" <> ".item" ? headerPadding
 
   ".title" ? do
     height (pct 100)
-    fontSize (px 35)
     textAlign (alignSide sideLeft)
-    paddingLeft headerPadding
-    paddingRight headerPadding
 
-  (".name" <> ".signOut") ? float floatRight
+    Media.mobile $ fontSize (px 22)
+    Media.mobileTablet $ width (pct 100)
+    Media.tabletDesktop $ do
+      display inlineBlock
+      fontSize (px 35)
 
-  ".name" ? do
-    paddingLeft headerPadding
-    paddingRight headerPadding
+  ".item" ? do
+    display inlineBlock
+    transition "background-color" (ms 50) easeIn (sec 0)
+    ".current" & backgroundColor (Color.red -. 20)
+    Media.mobile $ fontSize (px 13)
 
-  ".signOut" ? do
-    height (pct 100)
-    fontSize iconFontSize
-    color C.white
+  (".item" # hover) <> (".item" # focus) ? backgroundColor (Color.red +. 10)
+  (".item.current" # hover) <> (".item.current" # focus) ? backgroundColor (Color.red -. 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
+      heightMedia
+      color Color.white
+
+      Media.mobile $ fontSize (px 20)
+      Media.tabletDesktop $ fontSize iconFontSize
+
+lineHeightMedia :: Css
+lineHeightMedia = do
+  Media.mobile $ lineHeight (px 50)
+  Media.tabletDesktop $ lineHeight (px 80)
+
+heightMedia :: Css
+heightMedia = do
+  Media.mobile $ height (px 50)
+  Media.tabletDesktop $ height (px 80)