aboutsummaryrefslogtreecommitdiff
path: root/src/server/Design/Header.hs
blob: 4e318910085801d05d069c58d8be1281ef48144d (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
{-# 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
      svg ? do
        Media.mobile $ width (px 20)

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)