Slighly better form styling

2 files changed, 31 insertions, 2 deletions

diff --git a/Biz/Devalloc.hs b/Biz/Devalloc.hs
index 701e95a..0e214d8 100644
--- a/Biz/Devalloc.hs
+++ b/Biz/Devalloc.hs
@@ -702,7 +702,7 @@ htmlApp cooks kp cfg jwk oAuthArgs =
       css =
         pure <. toStrict <. Clay.render <| do
           let yellow = "#ffe000"
-          let black = "#1d2d35" -- really a dark blue
+          let black = "#121212"
           Biz.Look.fuckingStyle
 
           Biz.Look.whenDark <| do
@@ -713,6 +713,9 @@ htmlApp cooks kp cfg jwk oAuthArgs =
               Clay.color Clay.white
             "a:hover" ? do
               Clay.textDecorationColor yellow
+            "select" <> "button" <> "input" ? do
+              Clay.backgroundColor black
+              Clay.color Clay.white
 
           Biz.Look.whenLight <| do
             "body" ? do
@@ -722,6 +725,9 @@ htmlApp cooks kp cfg jwk oAuthArgs =
               Clay.color black
             "a:hover" ? do
               Clay.textDecorationColor yellow
+            "select" <> "button" <> "input" ? do
+              Clay.backgroundColor Clay.white
+              Clay.color black
 
           "body" ? Biz.Look.fontStack
           "header" ? do
@@ -746,6 +752,17 @@ htmlApp cooks kp cfg jwk oAuthArgs =
             Clay.textDecoration Clay.underline
             Biz.Look.textDecorationThickness (em 0.2)
             Biz.Look.textDecorationWidth (em 0.2)
+
+          "select" <> "button" <> "input" ? do
+            Biz.Look.paddingAll (em 0.5)
+            Biz.Look.marginX (em 0.5)
+            Clay.borderColor yellow
+            Clay.borderStyle Clay.solid
+
+          "label" ? do
+            Clay.display Clay.inlineBlock
+            Clay.width (px 100)
+
           "nav" ? do
             Clay.display Clay.flex
             Clay.justifyContent Clay.spaceBetween
diff --git a/Biz/Look.hs b/Biz/Look.hs
index a6bb626..9cd4ad9 100644
--- a/Biz/Look.hs
+++ b/Biz/Look.hs
@@ -22,6 +22,9 @@ module Biz.Look
     hoverButton,
     -- | Geometry
     marginAll,
+    marginX,
+    marginY,
+    paddingAll,
   )
 where
 
@@ -124,4 +127,13 @@ textDecorationWidth :: Size LengthUnit -> Css
 textDecorationWidth = Clay.key "text-decoration-width"
 
 marginAll :: Size a -> Css
-marginAll x = Clay.margin x x x x
+marginAll x = margin x x x x
+
+marginX :: Size a -> Css
+marginX n = marginLeft n <> marginRight n
+
+marginY :: Size a -> Css
+marginY n = marginTop n <> marginBottom n
+
+paddingAll :: Size a -> Css
+paddingAll x = Clay.padding x x x x