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
|
{-# 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,
)
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 = Clay.margin x x x x
|
