Add the initial library of styles

1 files changed, 40 insertions, 0 deletions

diff --git a/Biz/Look.hs b/Biz/Look.hs
new file mode 100644
index 0000000..4315994
--- /dev/null
+++ b/Biz/Look.hs
@@ -0,0 +1,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)
+      ]