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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
{-# 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,
-- | Clay.Text extensions
textDecorationThickness,
textDecorationWidth,
-- | Elements
hoverButton,
-- | Geometry
marginAll,
marginX,
marginY,
paddingAll,
)
where
import Alpha
import Clay
import qualified Clay.Flexbox as Flexbox
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, 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 = Clay.key "text-decoration-thickness"
textDecorationWidth :: Size LengthUnit -> Css
textDecorationWidth = Clay.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
|
