{-# LANGUAGE OverloadedStrings #-}

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

fernFrond = rgb 101 114 32
violet = rgb 13 13 81

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 fernFrond
      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 violet
      hover & textDecoration underline

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

      (h1 <> h2) ? color fernFrond

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

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

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

        li ? do
          marginBottom (em 0.8)
          lineHeight (em 1.6)
          position relative
          paddingLeft (px 20)
          before & do
            position absolute
            top (px 0)
            left (px 0)
            color fernFrond
            display inlineBlock

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

      ul ? li ? before &
        content (stringContent "•")

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

        li ? do
          desktop $ paddingLeft (px 30)
          mobile $ paddingLeft (px 20)
          position relative
          textAlign justify
          before & do
            "counter-increment" -: "ol"
            "content" -: "counter(ol)\".\""

      p ? do
        lineHeight (px 20)

        (".plus" <> ".moins") ? before & do
          display inlineBlock
          width (px 20)
          height (px 20)
          marginRight (px 10)
          textAlign (center)
          verticalAlign middle
          fontWeight bold
          "transform" -: "translateY(-2px)"
          marginLeft (px 10)

        ".plus" ? before & do
          content (stringContent "+")
          color green

        ".moins" ? before & do
          content (stringContent "−")
          color red


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