Fix responsive header

1 files changed, 39 insertions, 30 deletions

diff --git a/server/src/Design/View/Header.hs b/server/src/Design/View/Header.hs
index ca1c66e..2ad0455 100644
--- a/server/src/Design/View/Header.hs
+++ b/server/src/Design/View/Header.hs
@@ -9,29 +9,53 @@ import           Clay
 import           Design.Color as Color
 import qualified Design.Media as Media
 
+desktopLineHeight :: Double
+desktopLineHeight = 80
+
+tabletLineHeight :: Double
+tabletLineHeight = 60
+
+mobileLineHeight :: Double
+mobileLineHeight = 40
+
 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
+  Media.desktop $ do
+    minHeight (px desktopLineHeight)
+    lineHeight (px desktopLineHeight)
+    marginBottom (em 3)
+  Media.tablet $ do
+    minHeight (px (tabletLineHeight * 2))
+    lineHeight (px tabletLineHeight)
+    marginBottom (em 2)
+  Media.mobile $ do
+    minHeight (px (mobileLineHeight * 2))
+    lineHeight (px mobileLineHeight)
+    marginBottom (em 1.5)
+
+  ".title" <> ".item" ? do
+      Media.tabletDesktop $ sym2 padding (px 0) (px 20)
+      Media.mobile $ sym2 padding (px 0) (px 10)
 
   ".title" ? do
     textAlign (alignSide sideLeft)
 
-    Media.mobile $ fontSize (px 22)
-    Media.mobileTablet $ width (pct 100)
-    Media.tabletDesktop $ do
-      display inlineBlock
+    Media.desktop $ do
       fontSize (px 35)
+      display inlineBlock
+    Media.tablet $ do
+      fontSize (px 28)
+      display inlineBlock
+      width (pct 100)
+    Media.mobile $ do
+      fontSize (px 22)
+      width (pct 100)
 
   ".item" ? do
     display inlineBlock
@@ -47,14 +71,17 @@ design = do
 
   ".nameSignOut" ? do
     display flex
-    heightMedia
     position absolute
     top (px 0)
     right (px 0)
 
+    Media.desktop $ height (px desktopLineHeight)
+    Media.tablet $ height (px tabletLineHeight)
+    Media.mobile $ height (px mobileLineHeight)
+
     ".name" ? do
       Media.mobile $ display none
-      Media.tabletDesktop $ headerPadding
+      Media.tabletDesktop $ sym2 padding (px 0) (px 20)
 
     ".signOut" ? do
       display flex
@@ -64,21 +91,3 @@ design = do
         Media.tabletDesktop $ width (px 30)
         Media.mobile $ width (px 20)
         "path" ? ("fill" -: "white")
-
-lineHeightMedia :: Css
-lineHeightMedia = do
-  Media.desktop $ do
-    minHeight (px 80)
-    lineHeight (px 80)
-  Media.tablet $ do
-    minHeight (px 65)
-    lineHeight (px 65)
-  Media.mobile $ do
-    minHeight (px 50)
-    lineHeight (px 50)
-
-heightMedia :: Css
-heightMedia = do
-  Media.desktop $ height (px 80)
-  Media.tablet $ height (px 65)
-  Media.mobile $ height (px 50)