src/server/Design/Header.hs


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

{-# LANGUAGE OverloadedStrings #-}

module Design.Header
  ( headerDesign
  ) where

import Clay

import Data.Monoid ((<>))

import Design.Color as C
import Design.Constants

headerDesign :: Css
headerDesign =

  header ? do
    let headerHeight = 80
    let sidePercent = (pct blockPercentMargin)

    h1 ? do
      fontSize (px 45)
      textAlign (alignSide sideLeft)
      backgroundColor C.red
      color C.white
      lineHeight (px headerHeight)
      marginBottom blockMarginBottom
      paddingLeft sidePercent

    button # ".icon" ? do
      let iconHeight = 50
      let sideMargin = ((headerHeight - iconHeight) `Prelude.div` 2)
      position absolute
      top (px sideMargin)
      right sidePercent
      height (px iconHeight)
      lineHeight (px iconHeight)
      backgroundColor C.red
      color C.white
      fontSize iconFontSize
      hover & i ? transform (scale 1.2 1.2)