{-# LANGUAGE OverloadedStrings #-}

module Design.Header
  ( headerDesign
  ) where

import Clay

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)
      focus & i ? transform (scale 1.2 1.2)