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