1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
{-# LANGUAGE OverloadedLists #-}
{-# LANGUAGE OverloadedStrings #-}
-- | Library of styles
--
-- https://leerob.io/blog/how-stripe-designs-beautiful-websites
module Biz.Look
( -- | Base stylesheets
fuckingStyle,
-- | Clay.Media extensions
prefersLight,
whenLight,
prefersDark,
whenDark,
noColorPreference,
-- | Font
fontStack,
-- | Elements
hoverButton,
)
where
import Alpha
import Clay
import qualified Clay.Stylesheet as Clay
fontStack :: Css
fontStack = do
-- i like adobe source pro, maybe use that instead of camphor
fontFamily ["Camphor", "Open Sans", "Segoe UI"] [sansSerif]
textRendering optimizeLegibility
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 :: Clay.Feature
prefersDark =
Clay.Feature "prefers-color-scheme" (Just (Clay.value ("dark" :: Text)))
prefersLight :: Clay.Feature
prefersLight =
Clay.Feature "prefers-color-scheme" (Just (Clay.value ("light" :: Text)))
noColorPreference :: Clay.Feature
noColorPreference =
Clay.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.
fuckingStyle :: Css
fuckingStyle = do
"body" ? do
maxWidth (px 650)
margin (px 40) auto (px 40) auto
padding 0 (px 10) 0 (px 10)
color "#444"
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]
"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)
|
