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