aboutsummaryrefslogtreecommitdiff
path: root/server/src/Design/View/Header.hs
blob: 59e0e5166693dba183ea0186c62a85a7431d1705 (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
74
75
76
77
78
79
module Design.View.Header
  ( design
  ) where

import           Data.Monoid  ((<>))

import           Clay

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
  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

  ".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
      display flex
      justifyContent center
      alignItems center
      svg ? do
        Media.tabletDesktop $ width (px 30)
        Media.mobile $ width (px 20)
        "path" ? ("fill" -: "white")

lineHeightMedia :: Css
lineHeightMedia = do
  Media.desktop $ lineHeight (px 80)
  Media.tablet $ lineHeight (px 65)
  Media.mobile $ lineHeight (px 50)

heightMedia :: Css
heightMedia = do
  Media.desktop $ height (px 80)
  Media.tablet $ height (px 65)
  Media.mobile $ height (px 50)