Setup personal page with Hakyll

1 files changed, 53 insertions, 0 deletions

diff --git a/css/Header.hs b/css/Header.hs
new file mode 100644
index 0000000..ab58b0c
--- /dev/null
+++ b/css/Header.hs
@@ -0,0 +1,53 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Header
+  ( style
+  ) where
+
+import           Data.Monoid  ((<>))
+
+import           Clay         hiding (style)
+import           Clay.Display (displayTable)
+
+import qualified Color        as Color
+import qualified Media        as Media
+
+style :: Css
+style = do
+
+  ".Header__Container" ? do
+    backgroundColor Color.red
+    color Color.white
+    fontSize (px 28)
+    display flex
+
+  ".Header__Link" ? do
+    display flex
+    justifyContent center
+    alignItems center
+    flexGrow 1
+    flexBasis (px 0)
+    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)
+    Media.tablet $ fontSize (em 0.8)
+    Media.mobile $ fontSize (em 0.6)
+
+  (".Header__Link" # hover <> ".Header__Link" # focus <> ".Header__LinkCurrent") ? 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)
+
+  ".Header__Icon" ? do
+    display flex
+    height (px 40)
+    marginRight (px 20)
+    Media.mobile $ display none