{-# LANGUAGE OverloadedStrings #-}

module Design.Resume
  ( resumeCss
  ) where

import           Prelude      hiding ((**))

import           Clay
import qualified Clay.Flexbox as CF

import qualified Design.Color as Color
import qualified Design.Media as Media
import qualified Design.Size  as Size

resumeCss :: Css
resumeCss =
  ".section" ? do
    position relative
    margin (pct 0) (pct 10) (pct 0) (pct 10)

    h1 ? textTransform capitalize

    ".identity" ? do
      ".mail" <> ".git" ? do
        Size.indentation
        i ? marginRight (em 0.5)

        Media.mobile $ do
          fontSize (px 14)
          marginBottom (px 15)

        Media.tablet $ do
          fontSize (px 18)
          marginBottom (px 25)

        Media.desktop $ do
          fontSize (px 20)
          marginBottom (px 30)

    ".pdf" ? do
      position absolute
      right (px 0)
      top (px 0)
      color Color.red
      transition "all" (ms 100) ease (sec 0)
      i ? marginRight (px 0)
      hover & transform (scale 1.2 1.2)

      Media.mobile $ do
        lineHeight (px 30)
        height (px 30)
        fontSize (px 20)

      Media.tablet $ do
        lineHeight (px 40)
        height (px 40)
        fontSize (px 30)

      Media.desktop $ do
        lineHeight (px 50)
        height (px 50)
        fontSize (px 40)

    ".item" ? do
      marginBottom (px 40)
      Size.indentation
      Media.mobile $ marginBottom (px 25)

      ".title" <> ".location" <> ".description" ? do
        Size.lineHeight

      ".title" ? do
        Media.desktop $ do
          display flex
          marginBottom (px 10)

        ".skills" & do
          Size.tabletMarginBottom

        ".text" ? do
          backgroundColor Color.orange
          color Color.white
          padding (px 0) (px 10) (px 0) (px 10)
          sym borderRadius (px 2)
          Media.mobileTablet $ marginBottom (px 10)

        ".date" ? do
          fontStyle italic
          Media.mobile $ fontSize (pct 90)
          Media.desktop $ marginLeft (px 15)

      ".description" ? ".detail" ?
        marginTop Size.listItemSep

      ".location" ? do
        color Color.green
        Media.mobile $ do
          fontSize (pct 90)
          marginBottom (px 10)
        Size.tabletMarginBottom

    ".itemList" ? marginTop (px 5)

    ".bullets" |> ".detail" ? do
      Media.mobile $ marginBottom Size.listItemSep
      Size.tabletMarginBottom

    ".bullets" |> li ? do
      Size.lineHeight
      before & do
        content (stringContent "•")
        color Color.red
        display inlineBlock
        marginRight (px 10)

    ".technos" ? do
      display flex
      flexWrap CF.wrap
      sym2 margin (px 5) (px 0)

    ".technos" |> ".techno" ? do
      lineHeight normal
      borderBottom solid (px 2) lightgray
      margin (px 10) (px 15) (px 5) (px 0)