main
1/*
2 2022.css is based on new.css (see https://newcss.net/)
3 with very small personal adjustements.
4*/
5:root {
6 ---font-sans: sans-serif;
7 ---font-mono: monospace;
8 ---tx-1: #000000;
9 ---tx-2: #1A1A1A;
10 ---tx-3: #666666;
11 ---tx-4: #999999;
12 ---bg-1: #FFFFFF;
13 ---bg-2: #F6F8FA;
14 ---bg-3: #E5E7EB;
15 ---lk-1: #0070F3;
16 ---lk-2: #0366D6;
17 ---lk-tx: #FFFFFF;
18 ---ac-1: #79FFE1;
19 ---ac-tx: #0C4047;
20
21 --content-box-padding: 0.5rem;
22 --aside-width: 12.5rem;
23}
24
25@media (prefers-color-scheme: dark) {
26 :root {
27 ---tx-1: #ffffff;
28 ---tx-2: #eeeeee;
29 ---tx-3: #cccccc;
30 ---tx-4: #aaaaaa;
31 ---bg-1: #000000;
32 ---bg-2: #111111;
33 ---bg-3: #222222;
34 ---lk-1: #3291FF;
35 ---lk-2: #0070F3;
36 ---lk-tx: #FFFFFF;
37 ---ac-1: #7928CA;
38 ---ac-tx: #FFFFFF;
39 }
40}
41
42* {
43 /* Reset margins and padding */
44 margin: 0;
45 padding: 0;
46}
47
48address,
49area,
50article,
51aside,
52audio,
53blockquote,
54datalist,
55details,
56dl,
57fieldset,
58figure,
59form,
60input,
61iframe,
62img,
63meter,
64nav,
65ol,
66optgroup,
67option,
68output,
69p,
70pre,
71progress,
72ruby,
73section,
74table,
75textarea,
76ul,
77video {
78 /* Margins for most elements */
79 margin-bottom: 1rem;
80}
81
82html,input,select,button {
83 /* Set body font family and some finicky elements */
84 font-family: var(---font-sans);
85}
86
87body {
88 /* Center body in page */
89 margin: 0 auto;
90 max-width: 70rem;
91 padding: 2rem;
92 border-radius: 6px;
93 overflow-x: hidden;
94 word-break: break-word;
95 overflow-wrap: break-word;
96 background: var(---bg-1);
97
98 /* Main body text */
99 color: var(---tx-2);
100 font-size: 1.03rem;
101 line-height: 1.5;
102}
103
104::selection {
105 /* Set background color for selected text */
106 background: var(---ac-1);
107 color: var(---ac-tx);
108}
109
110h1,h2,h3,h4,h5,h6 {
111 line-height: 1;
112 color: var(---tx-1);
113 padding-top: .875rem;
114}
115
116h1,
117h2,
118h3 {
119 color: var(---tx-1);
120 padding-bottom: 2px;
121 margin-bottom: 8px;
122 border-bottom: 1px solid var(---bg-2);
123}
124
125h4,
126h5,
127h6 {
128 margin-bottom: .3rem;
129}
130
131h1 {
132 font-size: 2.25rem;
133}
134
135h2 {
136 font-size: 1.85rem;
137}
138
139h3 {
140 font-size: 1.55rem;
141}
142
143h4 {
144 font-size: 1.25rem;
145}
146
147h5 {
148 font-size: 1rem;
149}
150
151h6 {
152 font-size: .875rem;
153}
154
155a {
156 color: var(---lk-1);
157}
158
159a:hover {
160 color: var(---lk-2);
161}
162
163abbr:hover {
164 /* Set the '?' cursor while hovering an abbreviation */
165 cursor: help;
166}
167
168blockquote {
169 padding: 1.5rem;
170 background: var(---bg-2);
171 border-left: 5px solid var(---bg-3);
172}
173
174abbr {
175 cursor: help;
176}
177
178blockquote *:last-child {
179 padding-bottom: 0;
180 margin-bottom: 0;
181}
182
183header {
184 background: var(---bg-2);
185 border-bottom: 1px solid var(---bg-3);
186 padding: 1rem 1.5rem;
187
188 /* 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. */
189
190 margin: -2rem calc(0px - (50vw - 50%)) 2rem;
191
192 /* Shorthand for:
193
194 margin-top: -2rem;
195 margin-bottom: 2rem;
196
197 margin-left: calc(0px - (50vw - 50%));
198 margin-right: calc(0px - (50vw - 50%)); */
199
200 padding-left: calc(50vw - 50%);
201 padding-right: calc(50vw - 50%);
202}
203
204header img#sitelogo {
205 margin-bottom: 0;
206 margin-right: 1em;
207}
208
209header h1,
210header h2,
211header h3 {
212 padding-bottom: 0;
213 border-bottom: 0;
214}
215
216header > *:first-child {
217 margin-top: 0;
218 padding-top: 0;
219}
220
221header > *:last-child {
222 margin-bottom: 0;
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
476aside code {
477 background: var(---bg-3);
478 border: 1px solid var(---bg-4);
479}
480
481figure figcaption {
482 text-align: center;
483 color: var(---tx-2);
484 font-style: italic;
485 margin: 0 2rem;
486}
487
488footer {
489 text-align: center;
490 color: var(---tx-4);
491}
492
493footer a {
494 color: var(---tx-3);
495}
496
497section img {
498 display: block;
499 margin-left: auto;
500 margin-right: auto;
501}
502
503section img.shadow {
504 box-shadow: 0 28px 50px rgba(0,0,0,0.16);
505}
506
507div.drawer:before {
508 content: "";
509 position: absolute;
510 top: 0;
511 bottom: 0;
512 left: 4.4rem;
513 width: 1px;
514 background-color: #555;
515}
516
517div.drawer {
518 display: flex;
519 padding: 0;
520 margin: 1rem;
521 padding-top: 1rem;
522 position: relative;
523 color: #555;
524}
525
526div.drawer h6 {
527 box-sizing: border-box;
528 font-style: italic;
529 flex: 0 0 5rem;
530 margin:0;
531 padding:0;
532 align-self: center;
533 text-align: right;
534 padding-right: 1.2rem;
535}
536
537div.drawer.info:before {
538 background-color: #00529B;
539}
540div.drawer.info {
541 color: #00529B;
542}
543
544div.drawer.note:before {
545 background-color: #9F6000;
546}
547div.drawer.note {
548 color: #9F6000;
549}
550div.drawer.tip:before {
551 background-color: #4F8A10;
552}
553div.drawer.tip {
554 color: #4F8A10;
555}
556div.drawer.warning:before {
557 background-color: #D8000C;
558}
559div.drawer.warning {
560 color: #D8000C;
561}
562div.drawer.results:before {
563 background-color: black;
564}
565div.drawer.results {
566 font-family:monospace,monospace;
567 font-family: var(---font-mono);
568 color: black;
569 width: 100% !important;
570}
571div.drawer.results p {
572 display: block;
573 unicode-bidi: embed;
574 white-space: pre;
575 margin-top: 0;
576}
577div.drawer.results pre {
578 background-color: inherit;
579 border: 0;
580}
581div.drawer.results pre.src:before {
582 background-color: #eee;
583 color: #555;
584}
585
586.tag {
587 font-family:var(---font-mono);
588 font-size: 1rem;
589}
590.tag span {
591 padding:.3em;
592 float:right;
593 margin-right:.5em;
594 border:1px solid #bbb;
595 border-radius:3px;
596 background-clip:padding-box;
597 color:#333;
598 background-color:#eee;
599 line-height:1rem;
600}
601
602.todo {
603 font-family: monospace; color: red;
604}
605.done {
606 font-family: monospace; color: green;
607}
608.priority { font-family: monospace; color: orange; }
609.timestamp { color: #bebebe; }
610.timestamp-kwd { color: #5f9ea0; }
611.underline { text-decoration: underline; }