diff options
Diffstat (limited to 'public/css/vanilla.css')
-rw-r--r-- | public/css/vanilla.css | 366 |
1 files changed, 96 insertions, 270 deletions
diff --git a/public/css/vanilla.css b/public/css/vanilla.css index 191d545..b7b9772 100644 --- a/public/css/vanilla.css +++ b/public/css/vanilla.css | |||
@@ -1,312 +1,138 @@ | |||
1 | /* Reset */ | 1 | /* Reset */ |
2 | html, | 2 | html, body, div, span, applet, object, iframe, |
3 | body, | 3 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
4 | div, | 4 | a, abbr, acronym, address, big, cite, code, |
5 | span, | 5 | del, dfn, em, img, ins, kbd, q, s, samp, |
6 | applet, | 6 | small, strike, strong, sub, sup, tt, var, |
7 | object, | 7 | b, u, i, center, |
8 | iframe, | 8 | dl, dt, dd, ol, ul, li, |
9 | h1, | 9 | fieldset, form, label, legend, |
10 | h2, | 10 | table, caption, tbody, tfoot, thead, tr, th, td, |
11 | h3, | 11 | article, aside, canvas, details, embed, |
12 | h4, | 12 | figure, figcaption, footer, header, hgroup, |
13 | h5, | 13 | menu, nav, output, ruby, section, summary, |
14 | h6, | 14 | time, mark, audio, video { |
15 | p, | 15 | margin: 0; |
16 | blockquote, | 16 | padding: 0; |
17 | pre, | 17 | border: 0; |
18 | a, | 18 | font-size: 100%; |
19 | abbr, | 19 | font: inherit; |
20 | acronym, | 20 | vertical-align: baseline; |
21 | address, | ||
22 | big, | ||
23 | cite, | ||
24 | code, | ||
25 | del, | ||
26 | dfn, | ||
27 | em, | ||
28 | img, | ||
29 | ins, | ||
30 | kbd, | ||
31 | q, | ||
32 | s, | ||
33 | samp, | ||
34 | small, | ||
35 | strike, | ||
36 | strong, | ||
37 | sub, | ||
38 | sup, | ||
39 | tt, | ||
40 | var, | ||
41 | b, | ||
42 | u, | ||
43 | i, | ||
44 | center, | ||
45 | dl, | ||
46 | dt, | ||
47 | dd, | ||
48 | ol, | ||
49 | ul, | ||
50 | li, | ||
51 | fieldset, | ||
52 | form, | ||
53 | label, | ||
54 | legend, | ||
55 | table, | ||
56 | caption, | ||
57 | tbody, | ||
58 | tfoot, | ||
59 | thead, | ||
60 | tr, | ||
61 | th, | ||
62 | td, | ||
63 | article, | ||
64 | aside, | ||
65 | canvas, | ||
66 | details, | ||
67 | embed, | ||
68 | figure, | ||
69 | figcaption, | ||
70 | footer, | ||
71 | header, | ||
72 | hgroup, | ||
73 | menu, | ||
74 | nav, | ||
75 | output, | ||
76 | ruby, | ||
77 | section, | ||
78 | summary, | ||
79 | time, | ||
80 | mark, | ||
81 | audio, | ||
82 | video { | ||
83 | margin: 0; | ||
84 | padding: 0; | ||
85 | border: 0; | ||
86 | font-size: 100%; | ||
87 | font: inherit; | ||
88 | vertical-align: baseline; | ||
89 | } | 21 | } |
90 | * { | 22 | * { |
91 | box-sizing: border-box; | 23 | box-sizing: border-box; |
92 | } | 24 | } |
93 | 25 | ||
26 | |||
27 | |||
94 | /* Variables */ | 28 | /* Variables */ |
95 | :root { | 29 | :root { |
96 | --desktop-font-size: 1.3rem/1.5; | 30 | --desktop-font-size: 1.3rem/1.5; |
97 | --mobile-font-size: 1.1rem/1.4; | 31 | --mobile-font-size: 1.1rem/1.4; |
98 | --text-color: #2d2d2d; | 32 | --text-color: #2d2d2d; |
99 | --link-color: blue; | 33 | --link-color: blue; |
100 | --primary-color: lightsteelblue; | 34 | --primary-color: lightsteelblue; |
101 | --secondary-color: aliceblue; | 35 | --secondary-color: aliceblue; |
102 | --tertiary-color: whitesmoke; | 36 | --tertiary-color: whitesmoke; |
103 | } | 37 | } |
104 | 38 | ||
39 | |||
40 | |||
41 | |||
105 | /* Typography */ | 42 | /* Typography */ |
106 | body { | 43 | body { |
107 | color: var(--text-color); | 44 | color: var(--text-color); |
108 | padding: 3rem; | 45 | padding: 3rem; |
109 | font: | 46 | font: var(--desktop-font-size) -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol"; |
110 | var(--desktop-font-size) -apple-system, | ||
111 | BlinkMacSystemFont, | ||
112 | 'Segoe UI', | ||
113 | Roboto, | ||
114 | Helvetica, | ||
115 | Arial, | ||
116 | sans-serif, | ||
117 | 'Apple Color Emoji', | ||
118 | 'Segoe UI Emoji', | ||
119 | 'Segoe UI Symbol'; | ||
120 | } | 47 | } |
121 | 48 | ||
122 | h1, | 49 | h1,h2,h3,h4,h5,h6,p,blockquote,dl,img,figure { |
123 | h2, | 50 | margin: 2rem 0; |
124 | h3, | ||
125 | h4, | ||
126 | h5, | ||
127 | h6, | ||
128 | p, | ||
129 | blockquote, | ||
130 | dl, | ||
131 | img, | ||
132 | figure { | ||
133 | margin: 2rem 0; | ||
134 | } | 51 | } |
135 | 52 | ||
136 | h1, | 53 | h1,h2,h3,h4,h5,h6 { font-weight: bold; } |
137 | h2, | 54 | h1 { font-size: 200%; } |
138 | h3, | 55 | h2 { font-size: 150%; } |
139 | h4, | 56 | h3 { font-size: 120%; } |
140 | h5, | 57 | h4,h5,h6 { font-size: 100%; } |
141 | h6 { | 58 | h5, h6 { text-transform: uppercase; } |
142 | font-weight: bold; | ||
143 | } | ||
144 | h1 { | ||
145 | font-size: 200%; | ||
146 | } | ||
147 | h2 { | ||
148 | font-size: 150%; | ||
149 | } | ||
150 | h3 { | ||
151 | font-size: 120%; | ||
152 | } | ||
153 | h4, | ||
154 | h5, | ||
155 | h6 { | ||
156 | font-size: 100%; | ||
157 | } | ||
158 | h5, | ||
159 | h6 { | ||
160 | text-transform: uppercase; | ||
161 | } | ||
162 | 59 | ||
163 | header h1 { | 60 | header h1 { border-bottom: 1px solid; } |
164 | border-bottom: 1px solid; | ||
165 | } | ||
166 | 61 | ||
167 | p { | 62 | p { margin: 2rem 0; } |
168 | margin: 2rem 0; | ||
169 | } | ||
170 | 63 | ||
171 | a, | 64 | a,a:visited { color: var(--link-color); } |
172 | a:visited { | ||
173 | color: var(--link-color); | ||
174 | } | ||
175 | 65 | ||
176 | strong, | 66 | strong, time, b { font-weight: bold; } |
177 | time, | 67 | em, dfn, i { font-style: italic; } |
178 | b { | 68 | sub { font-size: 60%; vertical-align: bottom; } |
179 | font-weight: bold; | 69 | small { font-size: 80%; } |
180 | } | ||
181 | em, | ||
182 | dfn, | ||
183 | i { | ||
184 | font-style: italic; | ||
185 | } | ||
186 | sub { | ||
187 | font-size: 60%; | ||
188 | vertical-align: bottom; | ||
189 | } | ||
190 | small { | ||
191 | font-size: 80%; | ||
192 | } | ||
193 | 70 | ||
194 | blockquote, | 71 | blockquote, q { |
195 | q { | 72 | background: var(--secondary-color); |
196 | background: var(--secondary-color); | 73 | border-left: 10px solid var(--primary-color); |
197 | border-left: 10px solid var(--primary-color); | 74 | font-family: "Georgia", serif; |
198 | font-family: 'Georgia', serif; | 75 | padding: 1rem; |
199 | padding: 1rem; | ||
200 | } | ||
201 | blockquote p:first-child { | ||
202 | margin-top: 0; | ||
203 | } | 76 | } |
77 | blockquote p:first-child { margin-top: 0; } | ||
204 | cite { | 78 | cite { |
205 | font-family: 'Georgia', serif; | 79 | font-family: "Georgia", serif; |
206 | font-style: italic; | 80 | font-style: italic; |
207 | font-weight: bold; | 81 | font-weight: bold; |
208 | } | 82 | } |
209 | 83 | ||
210 | kbd, | 84 | kbd,code,samp,pre,var { font-family: monospace; font-weight: bold; } |
211 | code, | 85 | code, pre { |
212 | samp, | 86 | background: var(--tertiary-color); |
213 | pre, | 87 | padding: 0.5rem 1rem; |
214 | var { | ||
215 | font-family: monospace; | ||
216 | font-weight: bold; | ||
217 | } | ||
218 | code, | ||
219 | pre { | ||
220 | background: var(--tertiary-color); | ||
221 | padding: 0.5rem 1rem; | ||
222 | } | ||
223 | code pre, | ||
224 | pre code { | ||
225 | padding: 0; | ||
226 | } | 88 | } |
89 | code pre , pre code { padding: 0; } | ||
90 | |||
91 | |||
227 | 92 | ||
228 | /* Elements */ | 93 | /* Elements */ |
229 | hr { | 94 | hr { |
230 | background: var(--text-color); | 95 | background: var(--text-color); |
231 | border: 0; | 96 | border: 0; |
232 | height: 1px; | 97 | height: 1px; |
233 | margin: 4rem 0; | 98 | margin: 4rem 0; |
234 | } | 99 | } |
235 | 100 | ||
236 | img { | 101 | img { max-width: 100%; } |
237 | max-width: 100%; | ||
238 | } | ||
239 | 102 | ||
240 | figure { | 103 | figure { |
241 | border: 1px solid var(--primary-color); | 104 | border: 1px solid var(--primary-color); |
242 | display: inline-block; | 105 | display: inline-block; |
243 | padding: 1rem; | 106 | padding: 1rem; |
244 | width: auto; | 107 | width: auto; |
245 | } | ||
246 | figure img { | ||
247 | margin: 0; | ||
248 | } | ||
249 | figure figcaption { | ||
250 | font-size: 80%; | ||
251 | } | 108 | } |
109 | figure img { margin: 0; } | ||
110 | figure figcaption { font-size: 80%; } | ||
252 | 111 | ||
253 | ul, | 112 | ul, ol { margin: 2rem 0; padding: 0 0 0 4rem; } |
254 | ol { | ||
255 | margin: 2rem 0; | ||
256 | padding: 0 0 0 4rem; | ||
257 | } | ||
258 | 113 | ||
259 | dl dd { | 114 | dl dd { padding-left: 2rem; } |
260 | padding-left: 2rem; | ||
261 | } | ||
262 | 115 | ||
263 | table { | 116 | table { |
264 | border: 1px solid var(--primary-color); | 117 | border: 1px solid var(--primary-color); |
265 | border-collapse: collapse; | 118 | border-collapse: collapse; |
266 | table-layout: fixed; | 119 | table-layout: fixed; |
267 | width: 100%; | 120 | width: 100%; |
268 | } | ||
269 | table caption { | ||
270 | margin: 2rem 0; | ||
271 | } | ||
272 | table thead { | ||
273 | text-align: center; | ||
274 | } | ||
275 | table tbody { | ||
276 | text-align: right; | ||
277 | } | ||
278 | table tr { | ||
279 | border-bottom: 1px solid var(--primary-color); | ||
280 | } | ||
281 | table tbody tr:nth-child(even) { | ||
282 | background: var(--tertiary-color); | ||
283 | } | ||
284 | table th { | ||
285 | background: var(--secondary-color); | ||
286 | font-weight: bold; | ||
287 | } | ||
288 | table th, | ||
289 | table td { | ||
290 | padding: 1rem; | ||
291 | } | ||
292 | table th:not(last-of-type), | ||
293 | table td:not(last-of-type) { | ||
294 | border-right: 1px solid var(--primary-color); | ||
295 | } | 121 | } |
122 | table caption { margin: 2rem 0; } | ||
123 | table thead { text-align: center; } | ||
124 | table tbody { text-align: right; } | ||
125 | table tr { border-bottom: 1px solid var(--primary-color); } | ||
126 | table tbody tr:nth-child(even) { background: var(--tertiary-color); } | ||
127 | table th { background: var(--secondary-color); font-weight: bold; } | ||
128 | table th, table td { padding: 1rem; } | ||
129 | table th:not(last-of-type), table td:not(last-of-type) { border-right: 1px solid var(--primary-color); } | ||
130 | |||
131 | |||
296 | 132 | ||
297 | /* Mobile Styling */ | 133 | /* Mobile Styling */ |
298 | @media screen and (max-width: 50rem) { | 134 | @media screen and (max-width: 50rem) { |
299 | body { | 135 | body { |
300 | font: | 136 | font: var(--mobile-font-size) -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol" |
301 | var(--mobile-font-size) -apple-system, | 137 | } |
302 | BlinkMacSystemFont, | ||
303 | 'Segoe UI', | ||
304 | Roboto, | ||
305 | Helvetica, | ||
306 | Arial, | ||
307 | sans-serif, | ||
308 | 'Apple Color Emoji', | ||
309 | 'Segoe UI Emoji', | ||
310 | 'Segoe UI Symbol'; | ||
311 | } | ||
312 | } | 138 | } |