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