Put an example analysis on the homepage

The design kinda sucks, but I will refresh it later. I just want to get this
shipped right now.

1 files changed, 40 insertions, 9 deletions

diff --git a/Biz/Look.hs b/Biz/Look.hs
index 9cd4ad9..aeed072 100644
--- a/Biz/Look.hs
+++ b/Biz/Look.hs
@@ -25,13 +25,23 @@ module Biz.Look
     marginX,
     marginY,
     paddingAll,
+    paddingX,
+    paddingY,
+    -- | Border
+    borderRadiusAll,
+    -- | Grid
+    gridArea,
+    gridTemplateAreas,
+    columnGap,
+    rowGap,
   )
 where
 
 import Alpha
 import Clay
 import qualified Clay.Flexbox as Flexbox
-import qualified Clay.Stylesheet as Clay
+import qualified Clay.Stylesheet as Stylesheet
+import qualified Clay.Property as Property
 
 fontStack :: Css
 fontStack = do
@@ -56,17 +66,17 @@ hoverButton =
             (px 6)
       ]
 
-prefersDark :: Clay.Feature
+prefersDark :: Stylesheet.Feature
 prefersDark =
-  Clay.Feature "prefers-color-scheme" (Just (Clay.value ("dark" :: Text)))
+  Stylesheet.Feature "prefers-color-scheme" (Just (Clay.value ("dark" :: Text)))
 
-prefersLight :: Clay.Feature
+prefersLight :: Stylesheet.Feature
 prefersLight =
-  Clay.Feature "prefers-color-scheme" (Just (Clay.value ("light" :: Text)))
+  Stylesheet.Feature "prefers-color-scheme" (Just (Clay.value ("light" :: Text)))
 
-noColorPreference :: Clay.Feature
+noColorPreference :: Stylesheet.Feature
 noColorPreference =
-  Clay.Feature
+  Stylesheet.Feature
     "prefers-color-scheme"
     (Just (Clay.value ("no-preference" :: Text)))
 
@@ -121,10 +131,10 @@ fuckingStyle = do
     "a:visited" ? color ("#ccf" :: Color)
 
 textDecorationThickness :: Size LengthUnit -> Css
-textDecorationThickness = Clay.key "text-decoration-thickness"
+textDecorationThickness = Stylesheet.key "text-decoration-thickness"
 
 textDecorationWidth :: Size LengthUnit -> Css
-textDecorationWidth = Clay.key "text-decoration-width"
+textDecorationWidth = Stylesheet.key "text-decoration-width"
 
 marginAll :: Size a -> Css
 marginAll x = margin x x x x
@@ -137,3 +147,24 @@ marginY n = marginTop n <> marginBottom n
 
 paddingAll :: Size a -> Css
 paddingAll x = Clay.padding x x x x
+
+paddingX :: Size a -> Css
+paddingX n = paddingLeft n <> paddingRight n
+
+paddingY :: Size a -> Css
+paddingY n = paddingTop n <> paddingBottom n
+
+borderRadiusAll :: Size a -> Css
+borderRadiusAll x = Clay.borderRadius x x x x
+
+gridArea :: Text -> Css
+gridArea = Stylesheet.key "grid-area"
+
+gridTemplateAreas :: [Property.Literal] -> Css
+gridTemplateAreas = Stylesheet.key "grid-template-areas" <. noCommas
+
+columnGap :: Size a -> Css
+columnGap = Stylesheet.key "column-gap"
+
+rowGap :: Size a -> Css
+rowGap = Stylesheet.key "row-gap"