aboutsummaryrefslogtreecommitdiff
path: root/server/src/Design
diff options
context:
space:
mode:
Diffstat (limited to 'server/src/Design')
-rw-r--r--server/src/Design/View/Header.hs69
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)