1 files changed, 63 insertions, 12 deletions
diff --git a/Biz/Look.hs b/Biz/Look.hs
index 4315994..51224a9 100644
--- a/Biz/Look.hs
+++ b/Biz/Look.hs
@@ -5,36 +5,87 @@
 --
 -- https://leerob.io/blog/how-stripe-designs-beautiful-websites
 module Biz.Look
-  ( fontstack,
+  ( -- | Base stylesheets
+    fuckingStyle,
+    -- | Clay.Media extensions
+    prefersLight,
+    prefersDark,
+    noColorPreference,
+    -- | Font
+    fontStack,
+    -- | Elements
     hoverButton,
   )
 where
 
+import Alpha
 import Clay
+import qualified Clay.Stylesheet as Clay
 
-fontstack :: Css
-fontstack = do
+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
+hoverButton =
   button # hover ? do
     color "#7795f8"
-    transform $ translateY $ px (-1)
+    transform <| translateY <| px (-1)
     boxShadow
-      [ bsColor (rgba 50 50 93 0.1) $
-          shadow
+      [ bsColor (rgba 50 50 93 0.1)
+          <| shadow
             (px 7)
             (px 14),
         bsColor
           (rgba 0 0 0 0.08)
-          $ shadow
+          <| 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)))
+
+-- | 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)