the home site for me: also iteration 3 or 4 of my site
dunkirk.sh
1:root,
2::backdrop {
3 /* set sans-serif & mono fonts */
4 --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
5 "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
6 "Helvetica Neue", sans-serif;
7 --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
8 --standard-border-radius: 5px;
9
10 /* default colors */
11 --bg: #eeeeee;
12 --bg-light: #cbcdcd;
13 --text: #41474e;
14 --text-light: #686764;
15 --accent: #58310ac5;
16 --accent-light: #e08f67;
17 --accent-text: var(--bg);
18 --border: #646868;
19 --link: #573819c5;
20}
21
22/* theme media queries */
23@media (prefers-color-scheme: dark) {
24 :root,
25 ::backdrop {
26 color-scheme: dark;
27 --bg: #222529;
28 --bg-light: #464949;
29 --text: #d6d6d6;
30 --text-light: #c5c0b7;
31 --accent: #78b6ad;
32 --accent-light: #87c9e5;
33 --accent-text: var(--bg);
34 --border: #dbd5bc;
35 --link: #e2c8a2;
36 }
37 img,
38 video {
39 opacity: 0.8;
40 }
41}
42
43@media (prefers-color-scheme: light) {
44 :root,
45 ::backdrop {
46 color-scheme: light;
47 --bg: #eeeeee;
48 --bg-light: #cbcdcd;
49 --text: #41474e;
50 --text-light: #686764;
51 --accent: #58310ac5;
52 --accent-light: #e08f67;
53 --accent-text: var(--bg);
54 --border: #646868;
55 --link: #573819c5;
56 }
57}
58
59[data-theme="light"] {
60 /* default (light) theme */
61 color-scheme: light;
62 --bg: #eeeeee;
63 --bg-light: #cbcdcd;
64 --text: #41474e;
65 --text-light: #686764;
66 --accent: #58310ac5;
67 --accent-light: #56412bc5;
68 --accent-text: var(--bg);
69 --border: #646868;
70 --link: #573819c5;
71}
72
73[data-theme="dark"] {
74 color-scheme: dark;
75 --bg: #222529;
76 --bg-light: #464949;
77 --text: #d6d6d6;
78 --text-light: #c5c0b7;
79 --accent: #78b4b6e3;
80 --accent-light: #c5edefe6;
81 --accent-text: var(--bg);
82 --border: #dbd5bc;
83 --link: #e2c8a2;
84}
85
86::selection,
87::-moz-selection {
88 color: var(--bg);
89 background: var(--accent);
90}
91
92/* chromium scrollbars */
93::-webkit-scrollbar {
94 width: 8px;
95 height: 8px;
96 overflow: visible;
97}
98::-webkit-scrollbar-thumb {
99 background: var(--accent);
100 width: 12px;
101}
102::-webkit-scrollbar-track {
103 background: var(--bg-light);
104}
105
106/* firefox scrollbars */
107* {
108 scrollbar-color: var(--accent) var(--bg-light);
109 scrollbar-width: thin;
110 scrollbar-height: thin;
111}
112
113html {
114 color-scheme: light dark;
115 font-family: var(--mono-font);
116 scroll-behavior: smooth;
117}
118
119body {
120 min-height: 100svh;
121 color: var(--text);
122 background-color: var(--bg);
123 font-size: 1rem;
124 display: grid;
125 grid-template-columns: 1fr min(45rem, 90%) 1fr;
126 grid-template-rows: auto 1fr auto;
127 grid-row-gap: 0.625rem;
128}
129body > * {
130 grid-column: 2;
131}
132
133body > footer {
134 color: var(--text-light);
135 font-size: 0.875;
136}
137
138/* Format headers */
139h1 {
140 font-size: 2rem;
141}
142h2 {
143 font-size: 1.75rem;
144}
145h3 {
146 font-size: 1.5rem;
147}
148h4 {
149 font-size: 1.25rem;
150}
151h5 {
152 font-size: 1rem;
153}
154h6 {
155 font-size: 0.75rem;
156}
157
158h1,
159h2,
160h3,
161h4,
162h5,
163h6 {
164 margin: 0.5em 0 0.5em 0;
165}
166
167/* Fix line height when title wraps */
168h1,
169h2,
170h3 {
171 line-height: 1.1;
172}
173
174h1::before,
175h2::before,
176h3::before,
177h4::before,
178h5::before,
179h6::before {
180 color: var(--accent);
181 content: "# ";
182}
183
184@media only screen and (max-width: 720px) {
185 h1 {
186 font-size: 1.5rem;
187 }
188 h2 {
189 font-size: 1.25rem;
190 }
191 h3 {
192 font-size: 1rem;
193 }
194 h4 {
195 font-size: 0.75rem;
196 }
197 h5 {
198 font-size: 0.5rem;
199 }
200 h6 {
201 font-size: 0.25rem;
202 }
203}
204
205p {
206 margin: 1rem 0;
207}
208
209/* format links */
210a,
211a:visited {
212 text-decoration: none;
213 font-weight: bold;
214 font-style: italic;
215 border-radius: 0.125rem;
216 color: var(--link);
217}
218
219a:hover {
220 background-color: var(--link);
221 color: var(--bg);
222}
223
224/* format lists */
225ul {
226 list-style: none;
227 margin-top: 0.25rem;
228 margin-bottom: 0.25rem;
229}
230
231ol {
232 list-style-type: decimal;
233 margin-top: 0.25rem;
234 margin-bottom: 0.25rem;
235}
236
237li {
238 margin-bottom: 0.125rem;
239}
240
241ul li::marker {
242 content: "» ";
243 color: var(--accent);
244}
245
246ul li:hover::marker {
247 content: "# ";
248 font-weight: 700;
249 color: var(--link);
250}
251
252ol li::marker {
253 color: var(--accent);
254}
255
256ol li:hover::marker {
257 font-weight: 700;
258 color: var(--link);
259}
260
261/* Use flexbox to allow items to wrap, as needed */
262header > nav ul,
263header > nav ol {
264 display: flex;
265 flex-direction: row;
266 flex-wrap: wrap;
267 align-content: space-around;
268 justify-content: right;
269 list-style-type: none;
270 margin: 0.5rem 0 0 0;
271 padding: 0;
272 gap: 1rem;
273}
274
275/* List items are inline elements, make them behave more like blocks */
276header > nav ul li,
277header > nav ol li {
278 display: inline-block;
279}
280
281/* Consolidate box styling */
282aside,
283details,
284progress {
285 background-color: var(--bg-light);
286 border-radius: var(--standard-border-radius);
287}
288
289aside {
290 font-size: 1rem;
291 width: 35%;
292 padding: 0 10px;
293 margin-inline-start: 10px;
294 float: right;
295}
296*[dir="rtl"] aside {
297 float: left;
298}
299
300/* make aside full-width on mobile */
301@media only screen and (max-width: 720px) {
302 aside {
303 width: 100%;
304 float: none;
305 margin-inline-start: 0;
306 }
307}
308
309details {
310 padding: 0.5rem;
311}
312
313summary {
314 cursor: pointer;
315 font-weight: bold;
316 word-break: break-all;
317}
318
319details[open] > summary + * {
320 margin-top: 0;
321}
322
323details[open] > summary {
324 margin-bottom: 0.5rem;
325}
326
327details[open] > :last-child {
328 margin-bottom: 0;
329}
330
331/* Format tables */
332table {
333 border-collapse: collapse;
334 margin: 1.5rem 0;
335 display: block;
336 overflow-x: auto;
337 white-space: nowrap;
338}
339
340td,
341th {
342 border: 1px solid var(--border);
343 text-align: start;
344 padding: 0.5rem;
345}
346
347th {
348 background-color: var(--bg-light);
349 font-weight: bold;
350}
351
352tr:nth-child(even) {
353 background-color: var(--bg-light);
354}
355
356table caption {
357 text-align: left;
358 font-weight: bold;
359 margin: 0 0 0.4rem 1rem;
360}
361
362/* format forms */
363fieldset {
364 border: 1px dashed var(--accent);
365 border-radius: var(--standard-border-radius);
366}
367
368fieldset > legend {
369 color: var(--accent);
370}
371
372textarea,
373select,
374input,
375button,
376.button {
377 font-size: inherit;
378 font-family: inherit;
379 padding: 0.25rem;
380 border-radius: var(--standard-border-radius);
381 box-shadow: none;
382 max-width: 100%;
383 display: inline-block;
384}
385
386textarea,
387select,
388input {
389 color: var(--text);
390 background-color: var(--bg);
391 border: 1px dashed var(--border);
392}
393
394label {
395 display: block;
396}
397
398fieldset label {
399 margin: 0 0 0.3rem 0;
400}
401
402textarea {
403 max-width: 43.5rem;
404 resize: both;
405}
406
407textarea:not([cols]) {
408 width: 100%;
409}
410
411@media only screen and (max-width: 720px) {
412 textarea,
413 select,
414 input {
415 width: 100%;
416 }
417}
418
419/* format buttons */
420button,
421.button,
422a.button,
423input[type="submit"],
424input[type="reset"],
425input[type="button"],
426label[type="button"] {
427 border: 1px solid var(--accent);
428 background-color: var(--accent);
429 color: var(--accent-text);
430 padding: 0.5rem 0.9rem;
431 text-decoration: none;
432 line-height: normal;
433}
434
435.button[aria-disabled="true"],
436input:disabled,
437textarea:disabled,
438select:disabled,
439button[disabled] {
440 cursor: not-allowed;
441 background-color: var(--bg-light);
442 border-color: var(--bg-light);
443 color: var(--text-light);
444}
445
446input[type="range"] {
447 padding: 0;
448 color: var(--accent);
449}
450
451abbr[title] {
452 cursor: help;
453 text-decoration-line: underline;
454 text-decoration-style: dotted;
455}
456
457button:enabled:hover,
458.button:not([aria-disabled="true"]):hover,
459input[type="submit"]:enabled:hover,
460input[type="reset"]:enabled:hover,
461input[type="button"]:enabled:hover,
462label[type="button"]:hover {
463 background-color: var(--accent-light);
464 border-color: var(--accent-light);
465 cursor: pointer;
466}
467
468.button:focus-visible,
469button:focus-visible:where(:enabled),
470input:enabled:focus-visible:where(
471 [type="submit"],
472 [type="reset"],
473 [type="button"]
474 ) {
475 outline: 2px solid var(--accent);
476 outline-offset: 1px;
477}
478
479/* checkbox and radio button style */
480input[type="checkbox"],
481input[type="radio"] {
482 vertical-align: middle;
483 position: relative;
484 width: min-content;
485 width: 14px;
486 height: 14px;
487}
488
489input[type="checkbox"] + label,
490input[type="radio"] + label {
491 display: inline-block;
492}
493
494input[type="radio"] {
495 border-radius: 100%;
496}
497
498input[type="checkbox"]:checked,
499input[type="radio"]:checked {
500 background-color: var(--accent);
501}
502
503@media only screen and (max-width: 720px) {
504 textarea,
505 select,
506 input {
507 width: 100%;
508 }
509}
510
511input[type="color"] {
512 height: 2.5rem;
513 padding: 0.2rem;
514}
515
516input[type="file"] {
517 border: 0;
518}
519
520/* misc body elements */
521hr {
522 border: 1px dashed var(--accent);
523 margin: 0.5rem 0 0.5rem 0;
524}
525
526mark {
527 padding: 0 0.25em 0 0.25em;
528 border-radius: var(--standard-border-radius);
529 background-color: var(--accent);
530 color: var(--bg);
531}
532
533mark a {
534 color: var(--link);
535}
536
537img,
538video,
539iframe[src^="https://www.youtube-nocookie.com"],
540iframe[src^="https://www.youtube.com"]
541{
542 max-width: 90%;
543 height: auto;
544 padding: 0.125rem;
545 border: dashed 2px var(--accent);
546 border-radius: 15px;
547}
548
549figure {
550 margin: 0;
551 display: block;
552 overflow-x: auto;
553}
554
555figcaption {
556 text-align: left;
557 font-size: 0.875rem;
558 color: var(--text-light);
559 margin: 0 0 1rem 1rem;
560}
561
562blockquote {
563 margin: 0 0 0 1.25rem;
564 padding: 0.5rem 0 0 0.5rem;
565 border-inline-start: 0.375rem solid var(--accent);
566 color: var(--text-light);
567 font-style: italic;
568}
569
570p:has(cite) {
571 text-align: right;
572 font-size: 0.875rem;
573 color: var(--text-light);
574 font-weight: 600;
575}
576
577cite::before {
578 content: "— ";
579}
580
581dt {
582 color: var(--text-light);
583}
584
585code,
586pre,
587pre span,
588kbd,
589samp {
590 font-family: var(--mono-font);
591}
592
593pre {
594 border: 1px solid var(--accent);
595 max-height: 30rem;
596 padding: 0.625rem;
597 overflow-x: auto;
598 font-style: monospace;
599}
600
601p code,
602li code,
603div code {
604 padding: 0 0.125rem 0 0.125rem;
605 border-radius: 3px;
606 color: var(--bg);
607 background-color: var(--text);
608 transition: background-color 0.3s ease;
609}
610
611pre code {
612 padding: 0;
613 border-radius: 0;
614 color: inherit;
615 background-color: inherit;
616}
617
618iframe {
619 max-width: 90%;
620}
621
622/* progress bars */
623progress {
624 width: 100%;
625}
626
627progress:indeterminate {
628 background-color: var(--bg-light);
629}
630
631progress::-webkit-progress-bar {
632 border-radius: var(--standard-border-radius);
633 background-color: var(--bg-light);
634}
635
636progress::-webkit-progress-value {
637 border-radius: var(--standard-border-radius);
638 background-color: var(--accent);
639}
640
641progress::-moz-progress-bar {
642 border-radius: var(--standard-border-radius);
643 background-color: var(--accent);
644 transition-property: width;
645 transition-duration: 0.3s;
646}
647
648progress:indeterminate::-moz-progress-bar {
649 background-color: var(--bg-light);
650}
651
652dialog {
653 max-width: 40rem;
654 margin: auto;
655}
656
657dialog::backdrop {
658 background-color: var(--bg);
659 opacity: 0.8;
660}
661
662@media only screen and (max-width: 720px) {
663 dialog {
664 max-width: 100%;
665 margin: auto 1em;
666 }
667}
668
669/* superscript & subscript */
670/* prevent scripts from affecting line-height. */
671sup,
672sub {
673 vertical-align: baseline;
674 position: relative;
675}
676
677sup {
678 top: -0.4em;
679}
680
681sub {
682 top: 0.3em;
683}