main
1:root {
2 ---font-sans: sans-serif;
3 ---font-mono: monospace;
4 ---tx-1: #000000;
5 ---tx-2: #1A1A1A;
6 ---tx-3: #666666;
7 ---tx-4: #999999;
8 ---bg-1: #FFFFFF;
9 ---bg-2: #F6F8FA;
10 ---bg-3: #E5E7EB;
11 ---lk-1: #0070F3;
12 ---lk-2: #0366D6;
13 ---lk-tx: #FFFFFF;
14 ---ac-1: #79FFE1;
15 ---ac-tx: #0C4047;
16
17 --content-box-padding: 0.5rem;
18 --aside-width: 12.5rem;
19}
20
21@media (prefers-color-scheme: dark) {
22 :root {
23 ---tx-1: #ffffff;
24 ---tx-2: #eeeeee;
25 ---tx-3: #cccccc;
26 ---tx-4: #aaaaaa;
27 ---bg-1: #000000;
28 ---bg-2: #111111;
29 ---bg-3: #222222;
30 ---lk-1: #3291FF;
31 ---lk-2: #0070F3;
32 ---lk-tx: #FFFFFF;
33 ---ac-1: #7928CA;
34 ---ac-tx: #FFFFFF;
35 }
36}
37
38* {
39 /* Reset margins and padding */
40 margin: 0;
41 padding: 0;
42}
43
44address,
45area,
46article,
47aside,
48audio,
49blockquote,
50datalist,
51details,
52dl,
53fieldset,
54figure,
55form,
56input,
57iframe,
58img,
59meter,
60nav,
61ol,
62optgroup,
63option,
64output,
65p,
66pre,
67progress,
68ruby,
69section,
70table,
71textarea,
72ul,
73video {
74 /* Margins for most elements */
75 margin-bottom: 1rem;
76}
77
78html,input,select,button {
79 /* Set body font family and some finicky elements */
80 font-family: var(---font-sans);
81}
82
83body {
84 /* Center body in page */
85 margin: 0 auto;
86 max-width: 70rem;
87 padding: 2rem;
88 border-radius: 6px;
89 overflow-x: hidden;
90 word-break: break-word;
91 overflow-wrap: break-word;
92 background: var(---bg-1);
93
94 /* Main body text */
95 color: var(---tx-2);
96 font-size: 1.03rem;
97 line-height: 1.5;
98}
99
100::selection {
101 /* Set background color for selected text */
102 background: var(---ac-1);
103 color: var(---ac-tx);
104}
105
106h1,h2,h3,h4,h5,h6 {
107 line-height: 1;
108 color: var(---tx-1);
109 padding-top: .875rem;
110}
111
112h1,
113h2,
114h3 {
115 color: var(---tx-1);
116 padding-bottom: 2px;
117 margin-bottom: 8px;
118 border-bottom: 1px solid var(---bg-2);
119}
120
121h4,
122h5,
123h6 {
124 margin-bottom: .3rem;
125}
126
127h1 {
128 font-size: 2.25rem;
129}
130
131h2 {
132 font-size: 1.85rem;
133}
134
135h3 {
136 font-size: 1.55rem;
137}
138
139h4 {
140 font-size: 1.25rem;
141}
142
143h5 {
144 font-size: 1rem;
145}
146
147h6 {
148 font-size: .875rem;
149}
150
151a {
152 color: var(---lk-1);
153}
154
155a:hover {
156 color: var(---lk-2);
157}
158
159abbr:hover {
160 /* Set the '?' cursor while hovering an abbreviation */
161 cursor: help;
162}
163
164blockquote {
165 padding: 1.5rem;
166 background: var(---bg-2);
167 border-left: 5px solid var(---bg-3);
168}
169
170abbr {
171 cursor: help;
172}
173
174blockquote *:last-child {
175 padding-bottom: 0;
176 margin-bottom: 0;
177}
178
179header {
180 background: var(---bg-2);
181 border-bottom: 1px solid var(---bg-3);
182 padding: 1rem 1.5rem;
183
184 /* This sets the right and left margins to cancel out the body's margins. It's width is still the same, but the background stretches across the page's width. */
185
186 margin: -2rem calc(0px - (50vw - 50%)) 2rem;
187
188 /* Shorthand for:
189
190 margin-top: -2rem;
191 margin-bottom: 2rem;
192
193 margin-left: calc(0px - (50vw - 50%));
194 margin-right: calc(0px - (50vw - 50%)); */
195
196 padding-left: calc(50vw - 50%);
197 padding-right: calc(50vw - 50%);
198}
199
200header img#sitelogo {
201 margin-bottom: 0;
202 margin-right: 1em;
203}
204
205header h1,
206header h2,
207header h3 {
208 padding-bottom: 0;
209 border-bottom: 0;
210}
211
212header > *:first-child {
213 margin-top: 0;
214 padding-top: 0;
215}
216
217header > *:last-child {
218 margin-bottom: 0;
219}
220
221main header {
222 background: var(---bg-3);
223}
224
225a button,
226button,
227input[type="submit"],
228input[type="reset"],
229input[type="button"] {
230 font-size: 1rem;
231 display: inline-block;
232 padding: 6px 12px;
233 text-align: center;
234 text-decoration: none;
235 white-space: nowrap;
236 background: var(---lk-1);
237 color: var(---lk-tx);
238 border: 0;
239 border-radius: 4px;
240 box-sizing: border-box;
241 cursor: pointer;
242 color: var(---lk-tx);
243}
244
245a button[disabled],
246button[disabled],
247input[type="submit"][disabled],
248input[type="reset"][disabled],
249input[type="button"][disabled] {
250 cursor: default;
251 opacity: .5;
252
253 /* Set the [X] cursor while hovering a disabled link */
254 cursor: not-allowed;
255}
256
257.button:focus,
258.button:hover,
259button:focus,
260button:hover,
261input[type="submit"]:focus,
262input[type="submit"]:hover,
263input[type="reset"]:focus,
264input[type="reset"]:hover,
265input[type="button"]:focus,
266input[type="button"]:hover {
267 background: var(---lk-2);
268}
269
270code,
271pre,
272kbd,
273samp {
274 /* Set the font family for monospaced elements */
275 font-family: var(---font-mono);
276}
277
278code,
279samp,
280kbd,
281pre {
282 /* The main preformatted style. This is changed slightly across different cases. */
283 background: var(---bg-2);
284 border: 1px solid var(---bg-3);
285 border-radius: 4px;
286 padding: 3px 6px;
287}
288
289kbd {
290 /* Makes the kbd element look like a keyboard key */
291 border-bottom: 3px solid var(---bg-3);
292}
293
294pre {
295 padding: 1rem 1.4rem;
296 max-width: 100%;
297 overflow: auto;
298}
299
300pre.src {
301 position: relative;
302}
303pre.src:before {
304 /*display: none;*/
305 position: absolute;
306 background-color: var(---bg-3);
307 /*color: #f3f4f4;*/
308 top: 0;
309 right: 0;
310 padding: 0.2rem 0.5rem;
311}
312
313pre code {
314 /* When <code> is in a <pre>, reset it's formatting to blend in */
315 background: inherit;
316 font-size: inherit;
317 color: inherit;
318 border: 0;
319 padding: 0;
320 margin: 0;
321}
322
323code pre {
324 /* When <pre> is in a <code>, reset it's formatting to blend in */
325 display: inline;
326 background: inherit;
327 font-size: inherit;
328 color: inherit;
329 border: 0;
330 padding: 0;
331 margin: 0;
332}
333
334details {
335 /* Make the <details> look more "clickable" */
336 padding: .6rem 1rem;
337 background: var(---bg-2);
338 border: 1px solid var(---bg-3);
339 border-radius: 4px;
340}
341
342summary {
343 /* Makes the <summary> look more like a "clickable" link with the pointer cursor */
344 cursor: pointer;
345 font-weight: bold;
346}
347
348details[open] {
349 /* Adjust the <details> padding while open */
350 padding-bottom: .75rem;
351}
352
353details[open] summary {
354 /* Adjust the <details> padding while open */
355 margin-bottom: 6px;
356}
357
358details[open]>*:last-child {
359 /* Resets the bottom margin of the last element in the <details> while <details> is opened. This prevents double margins/paddings. */
360 margin-bottom: 0;
361}
362
363dt {
364 font-weight: bold;
365}
366
367dd::before {
368 /* Add an arrow to data table definitions */
369 content: '→ ';
370}
371
372hr {
373 /* Reset the border of the <hr> separator, then set a better line */
374 border: 0;
375 border-bottom: 1px solid var(---bg-3);
376 margin: 1rem auto;
377}
378
379fieldset {
380 margin-top: 1rem;
381 padding: 2rem;
382 border: 1px solid var(---bg-3);
383 border-radius: 4px;
384}
385
386legend {
387 padding: auto .5rem;
388}
389
390table {
391 /* border-collapse sets the table's elements to share borders, rather than floating as separate "boxes". */
392 border-collapse: collapse;
393 width: 100%
394}
395
396td,
397th {
398 border: 1px solid var(---bg-3);
399 text-align: left;
400 padding: .5rem;
401}
402
403th {
404 background: var(---bg-2);
405}
406
407tr:nth-child(even) {
408 /* Set every other cell slightly darker. Improves readability. */
409 background: var(---bg-2);
410}
411
412table caption {
413 font-weight: bold;
414 margin-bottom: .5rem;
415}
416
417textarea {
418 /* Don't let the <textarea> extend off the screen naturally or when dragged by the user */
419 max-width: 100%;
420}
421
422ol,
423ul {
424 /* Replace the browser default padding */
425 padding-left: 2rem;
426}
427
428li {
429 margin-top: .4rem;
430}
431
432ul ul,
433ol ul,
434ul ol,
435ol ol {
436 margin-bottom: 0;
437}
438
439mark {
440 padding: 3px 6px;
441 background: var(---ac-1);
442 color: var(---ac-tx);
443}
444
445textarea,
446select,
447input {
448 padding: 6px 12px;
449 margin-bottom: .5rem;
450 background: var(---bg-2);
451 color: var(---tx-2);
452 border: 1px solid var(---bg-3);
453 border-radius: 4px;
454 box-shadow: none;
455 box-sizing: border-box;
456}
457
458img {
459 max-width: 100%;
460}
461
462aside {
463 --aside-offset: 1rem;
464 --aside-offset-lineheight: 1.5rem;
465 background-color: var(---bg-2);
466 padding: calc(var(--content-box-padding) * 0.5) calc(var(--content-box-padding) * 2);
467 padding-top: 1em;
468 margin-bottom: 0em;
469 float: right;
470 width: var(--aside-width);
471 font-size: 0.9rem;
472 line-height: 1.25rem;
473 border: 1px solid var(--bg-3);
474}
475
476figure figcaption {
477 text-align: center;
478 color: var(---tx-2);
479 font-style: italic;
480 margin: 0 2rem;
481}
482
483footer {
484 text-align: center;
485 color: var(---tx-4);
486}
487
488footer a {
489 color: var(---tx-3);
490}
491
492section img {
493 display: block;
494 margin-left: auto;
495 margin-right: auto;
496}
497
498section img.shadow {
499 box-shadow: 0 28px 50px rgba(0,0,0,0.16);
500}
501
502div.drawer:before {
503 content: "";
504 position: absolute;
505 top: 0;
506 bottom: 0;
507 left: 4.4rem;
508 width: 1px;
509 background-color: #555;
510}
511
512div.drawer {
513 display: flex;
514 padding: 0;
515 margin: 1rem;
516 padding-top: 1rem;
517 position: relative;
518 color: #555;
519}
520
521div.drawer h6 {
522 box-sizing: border-box;
523 font-style: italic;
524 flex: 0 0 5rem;
525 margin:0;
526 padding:0;
527 align-self: center;
528 text-align: right;
529 padding-right: 1.2rem;
530}
531
532div.drawer.info:before {
533 background-color: #00529B;
534}
535div.drawer.info {
536 color: #00529B;
537}
538
539div.drawer.note:before {
540 background-color: #9F6000;
541}
542div.drawer.note {
543 color: #9F6000;
544}
545div.drawer.tip:before {
546 background-color: #4F8A10;
547}
548div.drawer.tip {
549 color: #4F8A10;
550}
551div.drawer.warning:before {
552 background-color: #D8000C;
553}
554div.drawer.warning {
555 color: #D8000C;
556}
557div.drawer.results:before {
558 background-color: black;
559}
560div.drawer.results {
561 font-family:monospace,monospace;
562 font-family: var(---font-mono);
563 color: black;
564 width: 100% !important;
565}
566div.drawer.results p {
567 display: block;
568 unicode-bidi: embed;
569 white-space: pre;
570 margin-top: 0;
571}
572div.drawer.results pre {
573 background-color: inherit;
574 border: 0;
575}
576div.drawer.results pre.src:before {
577 background-color: #eee;
578 color: #555;
579}
580
581.tag {
582 font-family:var(---font-mono);
583 font-size: 1rem;
584}
585.tag span {
586 padding:.3em;
587 float:right;
588 margin-right:.5em;
589 border:1px solid #bbb;
590 border-radius:3px;
591 background-clip:padding-box;
592 color:#333;
593 background-color:#eee;
594 line-height:1rem;
595}
596
597.todo {
598 font-family: monospace; color: red;
599}
600.done {
601 font-family: monospace; color: green;
602}
603.priority { font-family: monospace; color: orange; }
604.timestamp { color: #bebebe; }
605.timestamp-kwd { color: #5f9ea0; }