summaryrefslogtreecommitdiffstats
path: root/public/css/vanilla.css
diff options
context:
space:
mode:
Diffstat (limited to 'public/css/vanilla.css')
-rw-r--r--public/css/vanilla.css366
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 */
2html, 2html, body, div, span, applet, object, iframe,
3body, 3h1, h2, h3, h4, h5, h6, p, blockquote, pre,
4div, 4a, abbr, acronym, address, big, cite, code,
5span, 5del, dfn, em, img, ins, kbd, q, s, samp,
6applet, 6small, strike, strong, sub, sup, tt, var,
7object, 7b, u, i, center,
8iframe, 8dl, dt, dd, ol, ul, li,
9h1, 9fieldset, form, label, legend,
10h2, 10table, caption, tbody, tfoot, thead, tr, th, td,
11h3, 11article, aside, canvas, details, embed,
12h4, 12figure, figcaption, footer, header, hgroup,
13h5, 13menu, nav, output, ruby, section, summary,
14h6, 14time, mark, audio, video {
15p, 15 margin: 0;
16blockquote, 16 padding: 0;
17pre, 17 border: 0;
18a, 18 font-size: 100%;
19abbr, 19 font: inherit;
20acronym, 20 vertical-align: baseline;
21address,
22big,
23cite,
24code,
25del,
26dfn,
27em,
28img,
29ins,
30kbd,
31q,
32s,
33samp,
34small,
35strike,
36strong,
37sub,
38sup,
39tt,
40var,
41b,
42u,
43i,
44center,
45dl,
46dt,
47dd,
48ol,
49ul,
50li,
51fieldset,
52form,
53label,
54legend,
55table,
56caption,
57tbody,
58tfoot,
59thead,
60tr,
61th,
62td,
63article,
64aside,
65canvas,
66details,
67embed,
68figure,
69figcaption,
70footer,
71header,
72hgroup,
73menu,
74nav,
75output,
76ruby,
77section,
78summary,
79time,
80mark,
81audio,
82video {
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 */
106body { 43body {
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
122h1, 49h1,h2,h3,h4,h5,h6,p,blockquote,dl,img,figure {
123h2, 50 margin: 2rem 0;
124h3,
125h4,
126h5,
127h6,
128p,
129blockquote,
130dl,
131img,
132figure {
133 margin: 2rem 0;
134} 51}
135 52
136h1, 53h1,h2,h3,h4,h5,h6 { font-weight: bold; }
137h2, 54h1 { font-size: 200%; }
138h3, 55h2 { font-size: 150%; }
139h4, 56h3 { font-size: 120%; }
140h5, 57h4,h5,h6 { font-size: 100%; }
141h6 { 58h5, h6 { text-transform: uppercase; }
142 font-weight: bold;
143}
144h1 {
145 font-size: 200%;
146}
147h2 {
148 font-size: 150%;
149}
150h3 {
151 font-size: 120%;
152}
153h4,
154h5,
155h6 {
156 font-size: 100%;
157}
158h5,
159h6 {
160 text-transform: uppercase;
161}
162 59
163header h1 { 60header h1 { border-bottom: 1px solid; }
164 border-bottom: 1px solid;
165}
166 61
167p { 62p { margin: 2rem 0; }
168 margin: 2rem 0;
169}
170 63
171a, 64a,a:visited { color: var(--link-color); }
172a:visited {
173 color: var(--link-color);
174}
175 65
176strong, 66strong, time, b { font-weight: bold; }
177time, 67em, dfn, i { font-style: italic; }
178b { 68sub { font-size: 60%; vertical-align: bottom; }
179 font-weight: bold; 69small { font-size: 80%; }
180}
181em,
182dfn,
183i {
184 font-style: italic;
185}
186sub {
187 font-size: 60%;
188 vertical-align: bottom;
189}
190small {
191 font-size: 80%;
192}
193 70
194blockquote, 71blockquote, q {
195q { 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}
201blockquote p:first-child {
202 margin-top: 0;
203} 76}
77blockquote p:first-child { margin-top: 0; }
204cite { 78cite {
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
210kbd, 84kbd,code,samp,pre,var { font-family: monospace; font-weight: bold; }
211code, 85code, pre {
212samp, 86 background: var(--tertiary-color);
213pre, 87 padding: 0.5rem 1rem;
214var {
215 font-family: monospace;
216 font-weight: bold;
217}
218code,
219pre {
220 background: var(--tertiary-color);
221 padding: 0.5rem 1rem;
222}
223code pre,
224pre code {
225 padding: 0;
226} 88}
89code pre , pre code { padding: 0; }
90
91
227 92
228/* Elements */ 93/* Elements */
229hr { 94hr {
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
236img { 101img { max-width: 100%; }
237 max-width: 100%;
238}
239 102
240figure { 103figure {
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}
246figure img {
247 margin: 0;
248}
249figure figcaption {
250 font-size: 80%;
251} 108}
109figure img { margin: 0; }
110figure figcaption { font-size: 80%; }
252 111
253ul, 112ul, ol { margin: 2rem 0; padding: 0 0 0 4rem; }
254ol {
255 margin: 2rem 0;
256 padding: 0 0 0 4rem;
257}
258 113
259dl dd { 114dl dd { padding-left: 2rem; }
260 padding-left: 2rem;
261}
262 115
263table { 116table {
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}
269table caption {
270 margin: 2rem 0;
271}
272table thead {
273 text-align: center;
274}
275table tbody {
276 text-align: right;
277}
278table tr {
279 border-bottom: 1px solid var(--primary-color);
280}
281table tbody tr:nth-child(even) {
282 background: var(--tertiary-color);
283}
284table th {
285 background: var(--secondary-color);
286 font-weight: bold;
287}
288table th,
289table td {
290 padding: 1rem;
291}
292table th:not(last-of-type),
293table td:not(last-of-type) {
294 border-right: 1px solid var(--primary-color);
295} 121}
122table caption { margin: 2rem 0; }
123table thead { text-align: center; }
124table tbody { text-align: right; }
125table tr { border-bottom: 1px solid var(--primary-color); }
126table tbody tr:nth-child(even) { background: var(--tertiary-color); }
127table th { background: var(--secondary-color); font-weight: bold; }
128table th, table td { padding: 1rem; }
129table 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}