blob: 0af225d6b86ff5090c45aa305bdf7bf9b5b9b0dd (
plain)
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
|
{-# LANGUAGE OverloadedStrings #-}
import Clay
import qualified Clay.Media as Media
import Data.Monoid ((<>))
color1 = rgb 113 68 30
color2 = rgb 13 13 81
color3 = rgb 230 230 230
main :: IO ()
main = putCss $ do
appearKeyframes
body ? do
maxWidth responsiveLimit
sym2 margin (px 0) auto
mobile $ fontSize (px 14)
desktop $ fontSize (px 18)
"a.header" ? do
display block
sym2 padding (px 15) (px 0)
sym2 margin (px 0) auto
backgroundColor color1
color white
fontWeight bold
textAlign center
hover & textDecoration none
desktop $ do
fontSize (px 32)
marginBottom (px 30)
borderRadius (px 0) (px 0) (px 5) (px 5)
mobile $ do
fontSize (px 22)
marginBottom (px 20)
a ? do
textDecoration none
color color2
hover & textDecoration underline
"#content" ? do
animationName "appear"
animationDuration (sec 0.2)
animationTimingFunction easeIn
animationIterationCount (iterationCount 1.0)
mobile $ sym2 margin (px 0) (px 20)
(h1 <> h2) ? color color1
h1 ? do
desktop $ fontSize (px 28)
mobile $ fontSize (px 22)
h2 ? do
desktop $ fontSize (px 22)
mobile $ fontSize (px 18)
".number" ? do
fontSize inherit
backgroundColor color3
sym borderRadius (px 5)
sym padding (px 2)
borderStyle none
textAlign (alignSide sideCenter)
desktop $ width (px 70)
mobile $ width (px 50)
(ul <> ol) ? do
listStyleType none
desktop $ paddingLeft (px 15)
mobile $ paddingLeft (px 0)
li ? do
marginBottom (em 0.8)
lineHeight (em 1.6)
(ol <> ul) |> li |> (ol <> ul) ? do
marginTop (em 0.5)
marginLeft (px 30)
ol ? do
"counter-reset" -: "ol"
li ? do
desktop $ paddingLeft (px 40)
mobile $ paddingLeft (px 30)
position relative
textAlign justify
before & do
display inline
position absolute
top (px 0)
left (px 0)
"counter-increment" -: "ol"
"content" -: "counter(ol)"
marginRight (px 10)
backgroundColor color1
color white
sym borderRadius (pct 50)
fontWeight bold
width (em 1.6)
textAlign (alignSide sideCenter)
mobile :: Css -> Css
mobile = query Media.screen [ Media.maxWidth responsiveLimit ]
desktop :: Css -> Css
desktop = query Media.screen [ Media.minWidth responsiveLimit ]
responsiveLimit :: Size LengthUnit
responsiveLimit = px 800
appearKeyframes :: Css
appearKeyframes = keyframes
"appear"
[ (0, do
"transform" -: "translateX(20px)"
opacity 0
)
, (100, "transform" -: "translateX(0px)")
]
|
