Add footer and adjust widths

The footer is just a copyright for now. The header is full width, main and
footer max out at 900px. This seems like a reasonable default, so I put it in
the base Biz/Look.hs.

1 files changed, 18 insertions, 4 deletions

diff --git a/Biz/Look.hs b/Biz/Look.hs
index e7bcb82..27bc8c5 100644
--- a/Biz/Look.hs
+++ b/Biz/Look.hs
@@ -25,6 +25,7 @@ where
 
 import Alpha
 import Clay
+import qualified Clay.Flexbox as Flexbox
 import qualified Clay.Stylesheet as Clay
 
 fontStack :: Css
@@ -71,14 +72,21 @@ whenLight :: Css -> Css
 whenLight = query Clay.all [prefersLight]
 
 -- | The stylesheet from <https://perfectmotherfuckingwebsite.com> ported to
--- Clay.
+-- Clay, to be used as the base for other styles.
+--
+-- Differences from the original:
+--   - expects use of header/main/footer
+--   - has a sticky footer
+--   - wider, with a bit of body padding
 fuckingStyle :: Css
 fuckingStyle = do
   "body" ? do
-    maxWidth (px 650)
-    margin (px 40) auto (px 40) auto
-    padding 0 (px 10) 0 (px 10)
+    display flex
+    minHeight (vh 100)
+    flexDirection column
     color "#444"
+    margin (px 0) 0 0 0
+    padding (em 0.5) (em 0.5) (em 0.5) (em 0.5)
     fontSize (px 18)
     lineHeight (em 1.5)
     fontFamily
@@ -93,6 +101,12 @@ fuckingStyle = do
         "Noto Color Emoji"
       ]
       [sansSerif]
+  "main" ? Flexbox.flex 1 0 auto
+  "main" <> "header" <> "footer" ? do
+    maxWidth (px 900)
+    width (pct 100)
+    margin (em 1) auto 1 auto
+    padding (em 0) 0 0 0
   "h1" <> "h2" <> "h3" ? lineHeight (em 1.2)
   query Clay.all [prefersDark] <| do
     "body" ? do