1 files changed, 56 insertions, 0 deletions
diff --git a/src/Design/Header.hs b/src/Design/Header.hs
new file mode 100644
index 0000000..d2bbace
--- /dev/null
+++ b/src/Design/Header.hs
@@ -0,0 +1,56 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.Header
+  ( headerCss
+  ) where
+
+import Data.Monoid ((<>))
+
+import Clay
+import Clay.Display (displayTable)
+
+import qualified Design.Color as Color
+import qualified Design.Media as Media
+
+headerCss :: Css
+headerCss = do
+  ".header" ? do
+    backgroundColor Color.red
+    color Color.white
+    fontSize (px 28)
+
+    ul ? do
+      width (pct 100)
+      display displayTable
+      "table-layout" -: "fixed"
+
+      li ? do
+        display tableCell
+
+        a ? do
+          display block
+          height (em 3)
+          lineHeight (em 3)
+          textDecoration none
+          padding (px 0) (px 0) (px 0) (px 0)
+          textAlign (alignSide sideCenter)
+          color Color.white
+          textTransform capitalize
+          transition "background-color" (ms 500) ease (sec 0)
+
+          i ? marginRight (em 0.5)
+
+          Media.mobile $ do
+            i ? display none
+            fontSize (em 0.6)
+
+          Media.tablet $ fontSize (em 0.8)
+
+        (a # hover <> a # focus <> a # ".currentHeader") ? do
+          backgroundColor Color.red
+          borderBottomStyle solid
+          borderBottomColor (Color.red +. 40)
+
+          Media.mobile $ borderBottomWidth (px 6)
+          Media.tablet $ borderBottomWidth (px 8)
+          Media.desktop $ borderBottomWidth (px 10)