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

-- | Library of styles
--
-- https://leerob.io/blog/how-stripe-designs-beautiful-websites
module Biz.Look
  ( fontstack,
    hoverButton,
  )
where

import 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

-- TODO: fontSmoothing is not yet implemented in clay
-- -webkit-font-smoothing: antialiased
-- -moz-osx-font-smoothing: grayscale

hoverButton :: Css
hoverButton = do
  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)
      ]