{-# LANGUAGE OverloadedStrings #-}

module Design.Global
  ( globalDesign
  ) where

import Clay

import Data.Text.Lazy (Text)

import qualified Design.Header as HeaderDesign
import qualified Design.SignIn as SignInDesign
import qualified Design.LoggedIn as LoggedInDesign
import qualified Design.Form as Form

import Design.Animation.Keyframes

import Design.Color as Color

globalDesign :: Text
globalDesign = renderWith compact [] global

global :: Css
global = do

  header ? HeaderDesign.design
  ".signIn" ? SignInDesign.design
  ".loggedIn" ? LoggedInDesign.design
  form ? Form.design

  allKeyframes

  body ? do
    minWidth (px 320)
    fontFamily ["Cantarell"] [sansSerif]

  a ? cursor pointer

  h1 ? do
    fontSize (px 24)
    color Color.chestnutRose
    "margin-bottom" -: "3vh"

  ul ? do
    "margin-bottom" -: "3vh"
    "margin-left" -: "1vh"
    li <? do
      "margin-bottom" -: "2vh"
      before & do
        content (stringContent "• ")
        color Color.chestnutRose
        "margin-right" -: "0.3vw"
      ul <? do
        "margin-left" -: "3vh"
        "margin-top" -: "2vh"

  svg ? height (pct 100)