{-# LANGUAGE OverloadedStrings #-}

module Design.Projects
  ( projectsCss
  ) where

import           Prelude      hiding ((**))

import           Data.Monoid  ((<>))

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

projectsCss :: Css
projectsCss =
  ".project" ? do
    margin (pct 0) (pct 10) (pct 0) (pct 10)

    h1 ? ".separator" ? color Color.black

    ".body" ? do
      Size.indentation

      ".technologies" <> ".pageLink" ? do
        i ? marginRight (em 0.5)
        Size.lineHeight
        marginBottom (px 10)

      ".technologies" ? do
        Media.mobile $ fontSize (pct 90)
        ul ? do
          display flex
          flexWrap CF.wrap
          li ? do
            backgroundColor Color.orange
            color Color.white
            borderRadius (px 2) (px 2) (px 2) (px 2)
            margin (px 0) (px 10) (px 5) (px 0)
            ":last-child:after" & marginRight (px 0)

            Media.desktop $ padding (px 0) (px 10) (px 0) (px 10)
            Media.mobileTablet $ padding (px 0) (px 5) (px 0) (px 5)

      ".description" ? do
        Size.lineHeight
        marginTop (px 10)
        Media.desktop $ width (pct 50)