From 308fba10204b8898b6b14fb481fb7de2088abf09 Mon Sep 17 00:00:00 2001 From: Ben Sima Date: Fri, 29 Jan 2021 04:02:15 -0500 Subject: Slighly better form styling --- Biz/Devalloc.hs | 19 ++++++++++++++++++- Biz/Look.hs | 14 +++++++++++++- 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 -- cgit v1.2.3