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