Splitting Global design file into a hierarchy of files

1 files changed, 39 insertions, 0 deletions

diff --git a/src/server/Design/Header.hs b/src/server/Design/Header.hs
new file mode 100644
index 0000000..7b82577
--- /dev/null
+++ b/src/server/Design/Header.hs
@@ -0,0 +1,39 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.Header
+  ( headerDesign
+  ) where
+
+import Clay
+
+import Design.Color as C
+import Design.Constants
+
+headerDesign :: Css
+headerDesign =
+
+  header ? do
+    let headerHeight = 80
+    let sidePercent = (pct blockPercentMargin)
+
+    h1 ? do
+      fontSize (px 45)
+      textAlign (alignSide sideLeft)
+      backgroundColor C.red
+      color C.white
+      lineHeight (px headerHeight)
+      marginBottom blockMarginBottom
+      paddingLeft sidePercent
+
+    button # ".signOut" ? do
+      let iconHeight = 50
+      let sideMargin = ((headerHeight - iconHeight) `Prelude.div` 2)
+      position absolute
+      top (px sideMargin)
+      right sidePercent
+      height (px iconHeight)
+      lineHeight (px iconHeight)
+      backgroundColor C.red
+      color C.white
+      fontSize iconFontSize
+      hover & transform (scale 1.2 1.2)