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