diff options
author | Ben Sima <ben@bsima.me> | 2024-11-15 14:55:37 -0500 |
---|---|---|
committer | Ben Sima <ben@bsima.me> | 2024-12-21 10:06:49 -0500 |
commit | 6513755670892983db88a6633b8c1ea6019c03d1 (patch) | |
tree | 44e9eccdb7a3a74ab7e96a8fee7572dd6a78dc73 /Omni/Look.hs | |
parent | ae7b7e0186b5f2e0dcd4d5fac0a71fa264caedc2 (diff) |
Re-namespace some stuff to Omni
I was getting confused about what is a product and what is internal
infrastructure; I think it is good to keep those things separate. So I moved a
bunch of stuff to an Omni namespace, actually most stuff went there. Only things
that are explicitly external products are still in the Biz namespace.
Diffstat (limited to 'Omni/Look.hs')
-rw-r--r-- | Omni/Look.hs | 187 |
1 files changed, 187 insertions, 0 deletions
diff --git a/Omni/Look.hs b/Omni/Look.hs new file mode 100644 index 0000000..d75d056 --- /dev/null +++ b/Omni/Look.hs @@ -0,0 +1,187 @@ +{-# LANGUAGE OverloadedLists #-} +{-# LANGUAGE OverloadedStrings #-} + +-- | Library of styles +-- +-- https://leerob.io/blog/how-stripe-designs-beautiful-websites +module Omni.Look + ( -- | Base stylesheets + fuckingStyle, + -- | Clay.Media extensions + prefersLight, + whenLight, + prefersDark, + whenDark, + noColorPreference, + -- | Font + fontStack, + fontSmoothing, + -- | Clay.Text extensions + textDecorationThickness, + textDecorationWidth, + -- | Elements + hoverButton, + -- | Geometry + marginAll, + marginX, + marginY, + paddingAll, + paddingX, + paddingY, + -- | Border + borderRadiusAll, + -- | Grid + gridArea, + gridTemplateAreas, + gridTemplateRows, + columnGap, + rowGap, + -- | Alignment + justifySelf, + ) +where + +import Alpha +import Clay +import qualified Clay.Flexbox as Flexbox +import qualified Clay.Property as Property +import qualified Clay.Stylesheet as Stylesheet + +fontStack :: Css +fontStack = do + -- i like adobe source pro, maybe use that instead of camphor + fontFamily ["Camphor", "Open Sans", "Segoe UI"] [sansSerif] + textRendering optimizeLegibility + +fontSmoothing :: Css +fontSmoothing = do + Stylesheet.key "-webkit-font-smoothing" ("antialiased" :: Text) + Stylesheet.key "-moz-osx-font-smoothing" ("grayscale" :: Text) + +hoverButton :: Css +hoverButton = + button # hover ? do + color "#7795f8" + transform <| translateY <| px (-1) + boxShadow + [ bsColor (rgba 50 50 93 0.1) + <| shadow + (px 7) + (px 14), + bsColor + (rgba 0 0 0 0.08) + <| shadow + (px 3) + (px 6) + ] + +prefersDark :: Stylesheet.Feature +prefersDark = + Stylesheet.Feature "prefers-color-scheme" (Just (Clay.value ("dark" :: Text))) + +prefersLight :: Stylesheet.Feature +prefersLight = + Stylesheet.Feature "prefers-color-scheme" (Just (Clay.value ("light" :: Text))) + +noColorPreference :: Stylesheet.Feature +noColorPreference = + Stylesheet.Feature + "prefers-color-scheme" + (Just (Clay.value ("no-preference" :: Text))) + +whenDark :: Css -> Css +whenDark = query Clay.all [prefersDark] + +whenLight :: Css -> Css +whenLight = query Clay.all [prefersLight] + +-- | The stylesheet from <https://perfectmotherfuckingwebsite.com> ported to +-- 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 + 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 + [ "Segoe UI", + "Roboto", + "Helvetica Neue", + "Arial", + "Noto Sans", + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol", + "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 + color white + background ("#444" :: Color) + "a:link" ? color ("#5bf" :: Color) + "a:visited" ? color ("#ccf" :: Color) + +textDecorationThickness :: Size LengthUnit -> Css +textDecorationThickness = Stylesheet.key "text-decoration-thickness" + +textDecorationWidth :: Size LengthUnit -> Css +textDecorationWidth = Stylesheet.key "text-decoration-width" + +marginAll :: Size a -> Css +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 + +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 + +gridTemplateRows :: [Property.Literal] -> Css +gridTemplateRows = Stylesheet.key "grid-template-columns" <. noCommas + +columnGap :: Size a -> Css +columnGap = Stylesheet.key "column-gap" + +rowGap :: Size a -> Css +rowGap = Stylesheet.key "row-gap" + +justifySelf :: JustifyContentValue -> Css +justifySelf = Stylesheet.key "justify-self" |