theme/static/styles.css
564 lines · 9136 bytes
1/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2
3/* Document
4 ========================================================================== */
5
6/**
7 * 1. Correct the line height in all browsers.
8 * 2. Prevent adjustments of font size after orientation changes in iOS.
9 */
10
11html {
12 line-height: 1.15; /* 1 */
13 -webkit-text-size-adjust: 100%; /* 2 */
14}
15
16/* Sections
17 ========================================================================== */
18
19/**
20 * Render the `main` element consistently in IE.
21 */
22
23main {
24 display: block;
25}
26
27/**
28 * Correct the font size and margin on `h1` elements within `section` and
29 * `article` contexts in Chrome, Firefox, and Safari.
30 */
31
32h1 {
33 font-size: 2em;
34 margin: 0.67em 0;
35}
36
37/* Grouping content
38 ========================================================================== */
39
40/**
41 * 1. Add the correct box sizing in Firefox.
42 * 2. Show the overflow in Edge and IE.
43 */
44
45hr {
46 box-sizing: content-box; /* 1 */
47 height: 0; /* 1 */
48 overflow: visible; /* 2 */
49}
50
51/* Text-level semantics
52 ========================================================================== */
53
54/**
55 * Remove the gray background on active links in IE 10.
56 */
57
58a {
59 background-color: transparent;
60}
61
62/**
63 * 1. Remove the bottom border in Chrome 57-
64 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
65 */
66
67abbr[title] {
68 border-bottom: none; /* 1 */
69 text-decoration: underline; /* 2 */
70 text-decoration: underline dotted; /* 2 */
71}
72
73/**
74 * Add the correct font weight in Chrome, Edge, and Safari.
75 */
76
77b,
78strong {
79 font-weight: bolder;
80}
81
82/**
83 * Add the correct font size in all browsers.
84 */
85
86small {
87 font-size: 80%;
88}
89
90/**
91 * Prevent `sub` and `sup` elements from affecting the line height in
92 * all browsers.
93 */
94
95sub,
96sup {
97 font-size: 75%;
98 line-height: 0;
99 position: relative;
100 vertical-align: baseline;
101}
102
103sub {
104 bottom: -0.25em;
105}
106
107sup {
108 top: -0.5em;
109}
110
111/* Forms
112 ========================================================================== */
113
114/**
115 * 1. Change the font styles in all browsers.
116 * 2. Remove the margin in Firefox and Safari.
117 */
118
119button,
120input,
121optgroup,
122select,
123textarea {
124 font-family: inherit; /* 1 */
125 font-size: 100%; /* 1 */
126 line-height: 1.15; /* 1 */
127 margin: 0; /* 2 */
128}
129
130/**
131 * Show the overflow in IE.
132 * 1. Show the overflow in Edge.
133 */
134
135button,
136input {
137 /* 1 */
138 overflow: visible;
139}
140
141/**
142 * Remove the inheritance of text transform in Edge, Firefox, and IE.
143 * 1. Remove the inheritance of text transform in Firefox.
144 */
145
146button,
147select {
148 /* 1 */
149 text-transform: none;
150}
151
152/**
153 * Correct the inability to style clickable types in iOS and Safari.
154 */
155
156button,
157[type="button"],
158[type="reset"],
159[type="submit"] {
160 -webkit-appearance: button;
161}
162
163/**
164 * Remove the inner border and padding in Firefox.
165 */
166
167button::-moz-focus-inner,
168[type="button"]::-moz-focus-inner,
169[type="reset"]::-moz-focus-inner,
170[type="submit"]::-moz-focus-inner {
171 border-style: none;
172 padding: 0;
173}
174
175/**
176 * Restore the focus styles unset by the previous rule.
177 */
178
179button:-moz-focusring,
180[type="button"]:-moz-focusring,
181[type="reset"]:-moz-focusring,
182[type="submit"]:-moz-focusring {
183 outline: 1px dotted ButtonText;
184}
185
186/**
187 * Correct the padding in Firefox.
188 */
189
190fieldset {
191 padding: 0.35em 0.75em 0.625em;
192}
193
194/**
195 * 1. Correct the text wrapping in Edge and IE.
196 * 2. Correct the color inheritance from `fieldset` elements in IE.
197 * 3. Remove the padding so developers are not caught out when they zero out
198 * `fieldset` elements in all browsers.
199 */
200
201legend {
202 box-sizing: border-box; /* 1 */
203 color: inherit; /* 2 */
204 display: table; /* 1 */
205 max-width: 100%; /* 1 */
206 padding: 0; /* 3 */
207 white-space: normal; /* 1 */
208}
209
210/**
211 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
212 */
213
214progress {
215 vertical-align: baseline;
216}
217
218/**
219 * Remove the default vertical scrollbar in IE 10+.
220 */
221
222textarea {
223 overflow: auto;
224}
225
226/**
227 * 1. Add the correct box sizing in IE 10.
228 * 2. Remove the padding in IE 10.
229 */
230
231[type="checkbox"],
232[type="radio"] {
233 box-sizing: border-box; /* 1 */
234 padding: 0; /* 2 */
235}
236
237/**
238 * Correct the cursor style of increment and decrement buttons in Chrome.
239 */
240
241[type="number"]::-webkit-inner-spin-button,
242[type="number"]::-webkit-outer-spin-button {
243 height: auto;
244}
245
246/**
247 * 1. Correct the odd appearance in Chrome and Safari.
248 * 2. Correct the outline style in Safari.
249 */
250
251[type="search"] {
252 -webkit-appearance: textfield; /* 1 */
253 outline-offset: -2px; /* 2 */
254}
255
256/**
257 * Remove the inner padding in Chrome and Safari on macOS.
258 */
259
260[type="search"]::-webkit-search-decoration {
261 -webkit-appearance: none;
262}
263
264/**
265 * 1. Correct the inability to style clickable types in iOS and Safari.
266 * 2. Change font properties to `inherit` in Safari.
267 */
268
269::-webkit-file-upload-button {
270 -webkit-appearance: button; /* 1 */
271 font: inherit; /* 2 */
272}
273
274/* Misc
275 ========================================================================== */
276
277/**
278 * Add the correct display in IE 10+.
279 */
280
281template {
282 display: none;
283}
284
285/**
286 * Add the correct display in IE 10.
287 */
288
289[hidden] {
290 display: none;
291}
292
293/* CUSTOM CSS */
294:root {
295 --bg: #fff;
296 --bg-bright: #eee;
297 --fg: #111;
298 --link: #00f;
299 --code: #f00;
300 --border: #ccc;
301}
302
303@media (prefers-reduced-motion: no-preference) {
304 :root {
305 scroll-behavior: smooth;
306 }
307}
308
309body {
310 background-color: var(--bg);
311 color: var(--fg);
312 font-family:
313 Menlo,
314 Consolas,
315 Monaco,
316 Liberation Mono,
317 Lucida Console,
318 monospace;
319 font-size: 0.9rem;
320 line-height: 1.5;
321 max-width: 50em;
322 margin: 0 auto;
323 padding: 0 1rem;
324}
325
326.site-nav,
327footer {
328 border-color: var(--fg);
329}
330
331footer {
332 border-top: 1px dotted;
333 padding-top: 1rem;
334 margin: 1rem 0;
335}
336
337footer p {
338 margin: 0;
339}
340
341ul {
342 list-style-type: "- ";
343}
344
345.site-nav {
346 border-bottom: 1px dotted;
347}
348
349.site-nav ul {
350 list-style-type: none;
351 display: flex;
352 align-items: center;
353 padding: 0;
354}
355
356.site-nav ul li {
357 margin-right: 0.5rem;
358}
359
360h1,
361h2,
362h3,
363h4 {
364 color: var(--fg);
365}
366
367a,
368a:visited {
369 color: var(--link);
370 text-decoration: none;
371}
372
373a:hover {
374 background: var(--link);
375 color: var(--bg);
376 text-decoration: none;
377}
378
379img {
380 border-style: none;
381 width: 100%;
382}
383
384table {
385 border: 1px solid var(--border);
386 border-collapse: collapse;
387 color: var(--fg);
388 border-color: var(--bg-bright);
389 font-family:
390 Menlo,
391 Consolas,
392 Monaco,
393 Liberation Mono,
394 Lucida Console,
395 monospace;
396 font-size: 0.9rem;
397 width: 100%;
398}
399
400thead,
401th,
402tr,
403td {
404 border: 1px solid var(--border);
405 padding: 0.25rem;
406}
407
408pre,
409pre > code,
410time,
411code {
412 font-family:
413 Menlo,
414 Consolas,
415 Monaco,
416 Liberation Mono,
417 Lucida Console,
418 monospace;
419 font-size: inherit;
420}
421
422pre {
423 background-color: var(--bg-bright) !important;
424 margin: 0.5rem 0;
425 padding: 0.5rem;
426 overflow-x: auto;
427}
428
429:not(pre) > code {
430 color: var(--code);
431 font-family: inherit;
432}
433
434aside {
435 background-color: var(--bg-bright);
436 padding: 1rem;
437}
438
439blockquote {
440 background-color: var(--bg-bright);
441 border-left: 5px solid var(--link);
442 margin: 1rem 0;
443 padding: 0.5rem 1rem;
444}
445
446blockquote p {
447 margin: 0;
448}
449
450.post,
451.wiki-post {
452 display: flex;
453}
454
455.post time {
456 flex-shrink: 0;
457 margin-right: 0.5rem;
458}
459
460.wiki-post {
461 justify-content: space-between;
462}
463
464.wiki-post:first-of-type {
465 border-bottom: 1px dotted var(--fg);
466 margin-bottom: 1rem;
467}
468
469.wiki-post p {
470 margin: 0;
471}
472
473.post-metadata {
474 border: 1px dotted var(--fg);
475 border-top: none;
476 padding: 1rem;
477}
478
479.post-metadata h1 {
480 margin: 0;
481}
482
483.post-metadata p {
484 margin: 0;
485}
486
487details {
488 display: block;
489 margin-top: 1rem;
490}
491
492summary {
493 display: list-item;
494 font-weight: bold;
495}
496
497span.tag::before {
498 content: "#";
499}
500
501.footnote-definition {
502 display: flex;
503 justify-content: flex-start;
504 align-items: top;
505 margin: 1rem 0;
506}
507
508.footnote-definition sup {
509 font-size: inherit;
510 top: 0;
511 line-height: inherit;
512 padding-right: 0.5rem;
513}
514
515.footnote-definition sup::after {
516 content: ".";
517}
518
519.footnote-definition p {
520 display: inline-block;
521 margin: 0;
522}
523
524.hidden {
525 display: none;
526}
527
528.post {
529 display: flex;
530 flex-direction: row;
531 margin-bottom: 1rem;
532}
533
534.post-content {
535 display: flex;
536 flex-direction: column;
537}
538
539.post-tags {
540 font-size: 0.75rem;
541 color: #999;
542 margin-top: 0.1rem;
543}
544
545.tag {
546 margin-right: 0.3rem;
547 font-style: normal;
548 opacity: 0.8;
549}
550
551.tag::before {
552 content: "#";
553}
554
555@media (prefers-color-scheme: dark) {
556 :root {
557 --bg: #141617;
558 --bg-bright: #191c1d;
559 --fg: #b2aea9;
560 --link: gold;
561 --code: red;
562 --border: #333;
563 }
564}