{-# LANGUAGE OverloadedStrings #-}

module Design.Global
  ( globalDesign
  ) where

import qualified Prelude
import Prelude

import Clay

import Data.Monoid ((<>))
import Data.Text.Lazy (Text)

import Design.Color as C

globalDesign :: Text
globalDesign = renderWith compact [] global

iconFontSize :: Integer
iconFontSize = 32

global :: Css
global = do

  header ? do
    let headerHeight = 120

    h1 ? do
      fontSize (px 40)
      textAlign (alignSide sideCenter)
      color C.brown
      lineHeight (px headerHeight)

    button # ".signOut" ? do
      let iconHeight = 50
      let sideMargin = ((headerHeight - iconHeight) `Prelude.div` 2)
      position absolute
      top (px 0)
      right (px 10)
      marginTop (px sideMargin)
      marginRight (px sideMargin)
      height (px iconHeight)
      lineHeight (px iconHeight)
      backgroundColor C.white
      color C.brown
      borderWidth (px 0)
      fontSize (px iconFontSize)
      hover & transform (scale 1.2 1.2)

  table ? do
    width (pct 100)
    textAlign (alignSide (sideCenter))
    "border-spacing" -: "10 px"

    th ? do
      backgroundColor C.brown
      color C.white
      fontSize (px iconFontSize)
      lineHeight (px 70)

    tr ? do
      fontSize (px 20)
      lineHeight (px 60)
      nthChild "odd" & backgroundColor C.lightGrey

  form # ".signIn" ? do
    let inputHeight = 50
    marginTop (px 80)
    marginBottom (px 80)
    width (pct 60)
    marginLeft auto
    marginRight auto
    input ? do
      width (pct 80)
      padding (px 10) (px 10) (px 10) (px 10)
      height (px inputHeight)
    button ? do
      width (pct 20)
      height (px inputHeight)
      backgroundColor C.brown
      color C.white
      borderWidth (px 0)