summaryrefslogtreecommitdiff
path: root/Biz/Look.hs
blob: 4315994b045ead474dca5d758ac0c178982a60ca (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{-# 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)
      ]