blob: 6f0f48e6ec34cbaf3a5f641670b8dce219a371dd (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
{-# LANGUAGE OverloadedStrings #-}
module Design.Header
( design
) where
import Data.Monoid ((<>))
import Clay
import Design.Constants
import Design.Color as Color
import qualified Design.Media as Media
design :: Css
design = do
let headerPadding = "padding" -: "0 20px"
display flex
"flex-wrap" -: "wrap"
lineHeightMedia
marginBottom blockMarginBottom
position relative
backgroundColor Color.chestnutRose
color Color.white
".title" <> ".item" ? headerPadding
".title" ? do
height (pct 100)
textAlign (alignSide sideLeft)
Media.mobile $ fontSize (px 22)
Media.mobileTablet $ width (pct 100)
Media.tabletDesktop $ do
display inlineBlock
fontSize (px 35)
".item" ? do
display inlineBlock
transition "background-color" (ms 50) easeIn (sec 0)
".current" & backgroundColor (Color.chestnutRose -. 20)
Media.mobile $ fontSize (px 13)
(".item" # hover) <> (".item" # focus) ? backgroundColor (Color.chestnutRose +. 10)
(".item.current" # hover) <> (".item.current" # focus) ? backgroundColor (Color.chestnutRose -. 10)
".nameSignOut" ? do
display flex
heightMedia
position absolute
top (px 0)
right (px 0)
".name" ? do
Media.mobile $ display none
Media.tabletDesktop $ headerPadding
".signOut" ? do
heightMedia
color Color.white
Media.mobile $ fontSize (px 20)
Media.tabletDesktop $ fontSize iconFontSize
lineHeightMedia :: Css
lineHeightMedia = do
Media.mobile $ lineHeight (px 50)
Media.tabletDesktop $ lineHeight (px 80)
heightMedia :: Css
heightMedia = do
Media.mobile $ height (px 50)
Media.tabletDesktop $ height (px 80)
|
