{-# LANGUAGE OverloadedLists #-}
{-# LANGUAGE OverloadedStrings #-}

-- | Library of styles
--
-- https://leerob.io/blog/how-stripe-designs-beautiful-websites
module Biz.Look
  ( -- | Base stylesheets
    fuckingStyle,
    -- | Clay.Media extensions
    prefersLight,
    whenLight,
    prefersDark,
    whenDark,
    noColorPreference,
    -- | Font
    fontStack,
    -- | Clay.Text extensions
    textDecorationThickness,
    textDecorationWidth,
    -- | Elements
    hoverButton,
  )
where

import Alpha
import Clay
import qualified Clay.Stylesheet as Clay

fontStack :: Css
fontStack = do
  -- i like adobe source pro, maybe use that instead of camphor
  fontFamily ["Camphor", "Open Sans", "Segoe UI"] [sansSerif]
  textRendering optimizeLegibility

hoverButton :: Css
hoverButton =
  button # hover ? do
    color "#7795f8"
    transform <| translateY <| px (-1)
    boxShadow
      [ bsColor (rgba 50 50 93 0.1)
          <| shadow
            (px 7)
            (px 14),
        bsColor
          (rgba 0 0 0 0.08)
          <| shadow
            (px 3)
            (px 6)
      ]

prefersDark :: Clay.Feature
prefersDark =
  Clay.Feature "prefers-color-scheme" (Just (Clay.value ("dark" :: Text)))

prefersLight :: Clay.Feature
prefersLight =
  Clay.Feature "prefers-color-scheme" (Just (Clay.value ("light" :: Text)))

noColorPreference :: Clay.Feature
noColorPreference =
  Clay.Feature
    "prefers-color-scheme"
    (Just (Clay.value ("no-preference" :: Text)))

whenDark :: Css -> Css
whenDark = query Clay.all [prefersDark]

whenLight :: Css -> Css
whenLight = query Clay.all [prefersLight]

-- | The stylesheet from <https://perfectmotherfuckingwebsite.com> ported to
-- Clay.
fuckingStyle :: Css
fuckingStyle = do
  "body" ? do
    maxWidth (px 650)
    margin (px 40) auto (px 40) auto
    padding 0 (px 10) 0 (px 10)
    color "#444"
    fontSize (px 18)
    lineHeight (em 1.5)
    fontFamily
      [ "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "Noto Sans",
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji"
      ]
      [sansSerif]
  "h1" <> "h2" <> "h3" ? lineHeight (em 1.2)
  query Clay.all [prefersDark] <| do
    "body" ? do
      color white
      background ("#444" :: Color)
    "a:link" ? color ("#5bf" :: Color)
    "a:visited" ? color ("#ccf" :: Color)

textDecorationThickness :: Size LengthUnit -> Css
textDecorationThickness = Clay.key "text-decoration-thickness"

textDecorationWidth :: Size LengthUnit -> Css
textDecorationWidth = Clay.key "text-decoration-width"