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