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