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