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