{-# LANGUAGE OverloadedStrings #-}

import Clay
import Data.Monoid ((<>))
import qualified Clay.Media as Media

color1 = rgb 113 68 30
color2 = rgb 13 13 81
color3 = rgb 230 230 230

main :: IO ()
main = putCss $ do

  body ? do
    maxWidth responsiveLimit
    sym2 margin (px 0) auto
    mobile $ fontSize (px 14)
    desktop $ fontSize (px 18)

    "a.header" ? do
      display block
      sym2 padding (px 15) (px 0)
      sym2 margin (px 0) auto
      backgroundColor color1
      color white
      fontWeight bold
      textAlign center
      hover & textDecoration none
      desktop $ do
        fontSize (px 32)
        marginBottom (px 30)
        borderRadius (px 0) (px 0) (px 5) (px 5)
      mobile $ do
        fontSize (px 22)
        marginBottom (px 20)

    a ? do
      textDecoration none
      color color2
      hover & textDecoration underline

    "#content" ? do
      mobile $ sym2 margin (px 0) (px 20)

      (h1 <> h2) ? color color1

      h1 ? do
        desktop $ fontSize (px 28)
        mobile $ fontSize (px 22)

      h2 ? do
        desktop $ fontSize (px 22)
        mobile $ fontSize (px 18)

      ".number" ? do
        fontSize inherit
        backgroundColor color3
        sym borderRadius (px 5)
        sym padding (px 2)
        borderStyle none
        textAlign (alignSide sideCenter)
        desktop $ width (px 70)
        mobile $ width (px 50)

      (ul <> ol) ? do
        listStyleType none
        desktop $ paddingLeft (px 15)
        mobile $ paddingLeft (px 0)

        li ? do
          marginBottom (em 0.8)
          lineHeight (em 1.6)

      (ol <> ul) |> li |> (ol <> ul) ? do
        marginTop (em 0.5)
        marginLeft (px 30)

      ol ? do
        "counter-reset" -: "ol"

        li ? do
          desktop $ paddingLeft (px 40)
          mobile $ paddingLeft (px 30)
          position relative
          textAlign justify
          before & do
            display inline
            position absolute
            top (px 0)
            left (px 0)
            "counter-increment" -: "ol"
            "content" -: "counter(ol)"
            marginRight (px 10)
            backgroundColor color1
            color white
            sym borderRadius (pct 50)
            fontWeight bold
            width (em 1.6)
            textAlign (alignSide sideCenter)

mobile :: Css -> Css
mobile = query Media.screen [ Media.maxWidth responsiveLimit ]

desktop :: Css -> Css
desktop = query Media.screen [ Media.minWidth responsiveLimit ]

responsiveLimit :: Size LengthUnit
responsiveLimit = px 800