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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
{-# 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,
paddingX,
paddingY,
-- | Border
borderRadiusAll,
-- | Grid
gridArea,
gridTemplateAreas,
columnGap,
rowGap,
)
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
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
columnGap :: Size a -> Css
columnGap = Stylesheet.key "column-gap"
rowGap :: Size a -> Css
rowGap = Stylesheet.key "row-gap"
|
