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