Style.hs

module Tintin.Html.Style where

import Tintin.Core as Core hiding (( & ), rem, (|>))

import Clay
import qualified Clay.Media as Media

require Tintin.Domain.Project

data Style

style :: Project.Info -> Text
style info = toText . render $ do
  let (themeColorName, themeColorCode) = themeColor $ Project.color info
  html ? do
    height (pct 100)
    minHeight (pct 100)

  body ? do
    height (pct 100)
    minHeight (pct 100)
    fontFamily [Project.bodyFont info] [sansSerif]
    fontSize (em 1)
    overflowX hidden

  forM_ (zip [(0::Double)..] [h1, h2, h3]) $ \(n, x) -> x ? do
    fontFamily [Project.titleFont info] [sansSerif]
    fontWeight $ weight $ Project.titleFontWeight info
    fontSize (em (2.441 Core.** n))

  h1 ? fontSize (em 2.441)
  h2 ? fontSize (em 1.953)
  h3 ? fontSize (em 1.563)

  blockquote ? do
    borderLeft solid (px 4) "#DDD"
    paddingLeft (rem 1)
    color "#777"

  ".next-prev" ? do
    marginTop (pct 5)
    marginBottom (pct 5)

  "#header-container" ? do
    marginTop (rem 5)
    marginBottom (rem 5)

  ".cover-heading" ? do
    fontSize (pct 800)
    maxHeight (rem 6)
    marginBottom (rem 1.563)

  ".cover-container" ? do
   backgroundColor (rgba 255 255 255 0.0)

  ".watermark" ? do
    position absolute
    top (px 0)
    left (px 0)
    maxHeight (rem 1.2504)
    marginTop (rem 1.2504)
    marginLeft (rem 1.2504)

  ".cover-heading-subtitle" ? do
    marginTop (rem 3)
    fontSize (rem 1.953)

  ".vertical-auto" ? do
    marginTop auto
    marginBottom auto

  ".content" ? do
    marginTop (pct 5)
    marginBottom (pct 5)

  "#wrapper" ? do
    paddingLeft (px 0)
    transition "all" (sec 0.5) ease (sec 0)
    ".toggled" & do
      paddingLeft (px 250)
      "#sidebar-wrapper" ? do
        width (px 250)
      "#page-content-wrapper" & do
        position absolute
        marginRight (px (-250))

  "#page-content-wrapper" ? do
    width (pct 100)
    position absolute
    marginTop (rem 3)
    padding (px 15) (px 15) (px 15) (px 15)
    img ? do
      maxWidth (pct 100)

  "#sidebar-wrapper" ? do
    zIndex 1000
    position fixed
    left (px 250)
    width (px 0)
    marginLeft (px (-250))
    overflowY hidden
    overflowX hidden
    transition "all" (sec 0.5) ease (sec 0)


  ".sidebar-nav" ? do
    position absolute
    top (px 0)
    width (px 250)
    margin (px 0) (px 0) (px 0) (px 0)
    padding (px 0) (px 0) (px 0) (px 0)
    listStyleType none
    "li" ? do
      textIndent (indent $ px 20)
      lineHeight (px 40)
      "a" ? do
        display block
        textDecoration none
        fontWeight bold
      ".tintin-fg-disabled" ? do
        ":hover" & do
           "mix-blend-mode" -: "normal"
           Clay.filter $ invert (pct 0)
           textDecoration none
           color black
      ".tintin-fg-active" ? do
        ":hover" & do
           "mix-blend-mode" -: "normal"
           Clay.filter $ invert (pct 0)
           textDecoration none
           color white

  "#menu-toggle" ? do
    position absolute
    img ? do
      position absolute
      left (px 0)
    ".rotateIn" ? do
      zIndex 999

  ".tintin-doc-topbar" ? do
    height (rem 3)
    a ? do
      marginLeft (rem 1)
      marginTop (rem 0)
      width (rem 1.5)
      img ? do
        Clay.filter (invert $ pct 70)

  ".filter-gray" ? do
    position relative
    bottom (px ( 3 ))
    marginLeft (rem 0.25)
    marginRight (rem 1)
    height (rem 1)
    Clay.filter (brightness 0.75)

  ".footer-theam" ? do
    position relative
    bottom (px $ 1)
    marginLeft (rem $ -0.25)
    height (rem 1.75)
    Clay.filter (invert (pct 75))

  ".tintin-doc-footer" ? do
    bottom (px 0)
    height (rem $ -15)
    width (pct 100)
    color (rgba 0 0 0 0.30)

  ".main-container" ? do
    minHeight (pct 100)
    position relative

  "#content" ? do
    minHeight (pct 95)

  ".sidebar-nav" |> ".sidebar-brand" ? do
    height (rem 3)
    fontSize (rem 2)
    fontFamily [Project.titleFont info] [sansSerif]
    fontWeight $ weight $ Project.titleFontWeight info
    paddingTop (rem 2.5)
    paddingBottom (rem 2.5)
    marginBottom (rem 1.5)
    img ? do
      height (rem 1.5)

  ".tintin-navbar" ? do
    fontWeight bold
    backgroundColor (rgba 255 255 255 0.15)
    ".left-part" ? do
      important $ paddingLeft (px 0)
    ul ? do
      marginTop (rem 1)
      listStyleType none
      li ? do
        marginRight (rem 1)
        display inline
        a ? do
          color black
          Clay.filter $ invert (pct 35)
          "mix-blend-mode" -: "difference"
        "a:hover" ? do
          "mix-blend-mode" -: "normal"
          Clay.filter $ invert (pct 0)
          textDecoration none
          color black

    ".tintin-navbar-active" ? do
      a ? do
        "mix-blend-mode" -: "normal"
        Clay.filter $ invert (pct 0)
        color white
      "a:hover" ? do
        "mix-blend-mode" -: "normal"
        Clay.filter $ invert (pct 0)
        textDecoration none
        color white

  ".tintin-bg-70" ? do
    backgroundColor (rgba 255 255 255 0.15)
 
  (element $ ".tintin-bg-" <> themeColorName) ? do
    backgroundColor themeColorCode

  (element $ ".tintin-fg-" <> themeColorName) ? do
    color themeColorCode

  ".tintin-fg-active" ? do
    color (rgba 255 255 255 1.0)


  ".tintin-fg-disabled" ? do
    color black
    Clay.filter $ invert (pct 35)
    "mix-blend-mode" -: "difference"

  footer ? do
    position relative
    bottom (px 0)
    left (px 0)
    width (pct 100)
    paddingTop (px 30)
    paddingBottom (px 30)

  ".container" ? do
    maxWidth (rem 50)

  query Media.screen [Media.minWidth (px 768)] $ do
    "#wrapper" ? do
      paddingLeft (px 0)
      ".toggled" ? do
        paddingLeft (px 250)
        "#sidebar-wrapper" ? do
          width (px 250)
        "#page-content-wrapper" ? do
          position relative
          marginRight (px 0)

    "#sidebar-wrapper" ? do
      width (px 0)

    "#page-content-wrapper" ? do
      padding (px 20) (px 20) (px 20) (px 20)
      position relative


themeColor :: Project.Color -> (Text, Color)
themeColor (Project.HexColor colorCode) = ("custom", fromString $ toString colorCode)
themeColor Project.Purple               = ("purple" , "#9F76B4")
themeColor Project.LightGreen           = ("lightgreen" , "#A4CB58")
themeColor Project.DarkGreen            = ("darkgreen" , "#3C8B6A")
themeColor Project.Blue                 = ("blue" , "#94C1E8")
themeColor Project.DarkBlue             = ("darkblue" , "#007C99")
themeColor Project.Bronze               = ("bronze" , "#A4A27A")
themeColor Project.DarkOrange           = ("darkorange" , "#FF6602")
themeColor Project.LightOrange          = ("l ", "#FAA73E")
themeColor Project.Red                  = ("red" , "#D30228")
themeColor Project.Grey                 = ("grey" , "#4D4D4D")