1/* modified from https://simplecss.org/ */
2/* Thanks to  Kev Quirk */
3/* Global variables. */
4:root,
5::backdrop {
6  /* Set sans-serif & mono fonts */
7  --sans-font: system-ui, Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
8  --mono-font: ui-monospace, "Julia Mono", "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
9  --standard-border-radius: 5px;
10
11  /* Default (light) theme */
12  --bg: __background__;
13  --accent-bg: __background_alt__;
14  --text: __text__;
15  --text-light: __text_neu__;
16  --border: __border__;
17  --accent: __text_alt__;
18  --code: __code__;
19  --preformatted: __preformatted__;
20  --marked: __highlight__;
21  --disabled: __disabled__;
22}
23
24/* Dark theme */
25@media (prefers-color-scheme: dark) {
26  :root,
27  ::backdrop {
28    color-scheme: dark;
29    --bg: __dark_background__;
30    --accent-bg: __dark_background_alt__;
31    --text: __dark_text__;
32    --text-light: __dark_text_neu__;
33    --accent: __dark_text_alt__;
34    --code: __dark_code__;
35    --preformatted: __dark_preformatted__;
36    --disabled: __dark_disabled__;
37  }
38  /* Add a bit of transparency so light media isn't so glaring in dark mode */
39  img,
40  video {
41    opacity: 0.8;
42  }
43}
44
45/* Reset box-sizing */
46*, *::before, *::after {
47  box-sizing: border-box;
48}
49
50/* Reset default appearance */
51textarea,
52select,
53input,
54progress {
55  appearance: none;
56  -webkit-appearance: none;
57  -moz-appearance: none;
58}
59
60html {
61  /* Set the font globally */
62  font-family: var(--sans-font);
63  scroll-behavior: smooth;
64}
65
66/* Make the body a nice central block */
67body {
68  color: var(--text);
69  background-color: var(--bg);
70  font-size: 1.15rem;
71  line-height: 1.5;
72  margin: 0;
73  /* modified */
74  /*
75  display: grid;
76  grid-template-columns: 1fr 100% 1fr;
77  */
78}
79/*
80body > * {
81  grid-column: 2;
82}
83*/
84
85/* Make the header bg full width, but the content inline with body */
86body > header {
87  background-color: var(--accent-bg);
88  border-bottom: 1px solid var(--border);
89  text-align: center;
90  padding: 0 0.5rem 2rem 0.5rem;
91  /* modified */
92  width: 100%;
93  /* grid-column: 1 / -1; modified */
94}
95
96body > header { width: 100%; }
97body > header h1 { margin: auto; }
98body > header p {
99	margin: 1rem auto;
100	max-width: __site_width__;
101}
102
103/* Add a little padding to ensure spacing is correct between content and header > nav */
104main {
105  padding: 1rem;
106  max-width: __site_width__;
107  margin: auto;
108}
109
110body > footer {
111  margin-top: 4rem;
112  padding: 2rem 1rem 1.5rem 1rem;
113  color: var(--text-light);
114  font-size: 0.9rem;
115  text-align: center;
116  border-top: 1px solid var(--border);
117}
118
119/* Format headers */
120h1 {
121  font-size: 3rem;
122}
123
124h2 {
125  font-size: 2.6rem;
126  margin-top: 3rem;
127}
128
129h3 {
130  font-size: 2rem;
131  margin-top: 3rem;
132}
133
134h4 {
135  font-size: 1.44rem;
136}
137
138h5 {
139  font-size: 1.15rem;
140}
141
142h6 {
143  font-size: 0.96rem;
144}
145
146p {
147  margin: 1.5rem 0;
148}
149
150/* Prevent long strings from overflowing container */
151p, h1, h2, h3, h4, h5, h6 {
152  overflow-wrap: break-word;
153}
154
155/* Fix line height when title wraps */
156h1,
157h2,
158h3 {
159  line-height: 1.1;
160}
161
162/* Reduce header size on mobile */
163@media only screen and (max-width: 720px) {
164  h1 {
165    font-size: 2.5rem;
166  }
167
168  h2 {
169    font-size: 2.1rem;
170  }
171
172  h3 {
173    font-size: 1.75rem;
174  }
175
176  h4 {
177    font-size: 1.25rem;
178  }
179}
180
181/* Format links & buttons */
182a,
183a:visited {
184  color: var(--accent);
185}
186
187a:hover {
188  text-decoration: none;
189}
190
191button,
192.button,
193a.button, /* extra specificity to override a */
194input[type="submit"],
195input[type="reset"],
196input[type="button"],
197label[type="button"] {
198  border: 1px solid var(--accent);
199  background-color: var(--accent);
200  color: var(--bg);
201  padding: 0.5rem 0.9rem;
202  text-decoration: none;
203  line-height: normal;
204}
205
206.button[aria-disabled="true"],
207input:disabled,
208textarea:disabled,
209select:disabled,
210button[disabled] {
211  cursor: not-allowed;
212  background-color: var(--disabled);
213  border-color: var(--disabled);
214  color: var(--text-light);
215}
216
217input[type="range"] {
218  padding: 0;
219}
220
221/* Set the cursor to '?' on an abbreviation and style the abbreviation to show that there is more information underneath */
222abbr[title] {
223  cursor: help;
224  text-decoration-line: underline;
225  text-decoration-style: dotted;
226}
227
228button:enabled:hover,
229.button:not([aria-disabled="true"]):hover,
230input[type="submit"]:enabled:hover,
231input[type="reset"]:enabled:hover,
232input[type="button"]:enabled:hover,
233label[type="button"]:hover {
234  filter: brightness(1.4);
235  cursor: pointer;
236}
237
238.button:focus-visible,
239button:focus-visible:where(:enabled),
240input:enabled:focus-visible:where(
241  [type="submit"],
242  [type="reset"],
243  [type="button"]
244) {
245  outline: 2px solid var(--accent);
246  outline-offset: 1px;
247}
248
249/* Format navigation */
250header > nav {
251  font-size: 1rem;
252  line-height: 2;
253  padding: 1rem 0 0 0;
254}
255
256/* Use flexbox to allow items to wrap, as needed */
257header > nav ul,
258header > nav ol {
259  align-content: space-around;
260  align-items: baseline; /* modified */
261  display: flex;
262  flex-direction: row;
263  flex-wrap: wrap;
264  justify-content: center;
265  list-style-type: none;
266  margin: 0;
267  padding: 0;
268}
269
270/* List items are inline elements, make them behave more like blocks */
271header > nav ul li,
272header > nav ol li {
273  display: inline-block;
274}
275
276header > nav a,
277header > nav a:visited {
278  margin: 0 0.5rem 1rem 0.5rem;
279  border: 1px solid var(--border);
280  border-radius: var(--standard-border-radius);
281  color: var(--text);
282  display: inline-block;
283  padding: 0.1rem 1rem;
284  text-decoration: none;
285}
286
287header > nav a:hover,
288header > nav a.current,
289header > nav a[aria-current="page"] {
290  border-color: var(--accent);
291  color: var(--accent);
292  cursor: pointer;
293}
294
295/* Reduce nav side on mobile */
296@media only screen and (max-width: 720px) {
297  header > nav a {
298    border: none;
299    padding: 0;
300    text-decoration: underline;
301    line-height: 1;
302  }
303}
304
305/* Consolidate box styling */
306aside, details, pre, progress {
307  background-color: var(--accent-bg);
308  border: 1px solid var(--border);
309  border-radius: var(--standard-border-radius);
310  margin-bottom: 1rem;
311}
312
313aside {
314  font-size: 1rem;
315  width: 30%;
316  padding: 0 15px;
317  margin-inline-start: 15px;
318  float: right;
319}
320*[dir="rtl"] aside {
321  float: left;
322}
323
324/* Make aside full-width on mobile */
325@media only screen and (max-width: 720px) {
326  aside {
327    width: 100%;
328    float: none;
329    margin-inline-start: 0;
330  }
331}
332
333article, fieldset, dialog {
334  border: 1px solid var(--border);
335  padding: 1rem;
336  border-radius: var(--standard-border-radius);
337  margin-bottom: 1rem;
338}
339
340article h2:first-child,
341section h2:first-child {
342  margin-top: 1rem;
343}
344
345section {
346  border-top: 1px solid var(--border);
347  border-bottom: 1px solid var(--border);
348  padding: 2rem 1rem;
349  margin: 3rem 0;
350}
351
352/* Don't double separators when chaining sections */
353section + section,
354section:first-child {
355  border-top: 0;
356  padding-top: 0;
357}
358
359section:last-child {
360  border-bottom: 0;
361  padding-bottom: 0;
362}
363
364details {
365  padding: 0.7rem 1rem;
366}
367
368summary {
369  cursor: pointer;
370  font-weight: bold;
371  padding: 0.7rem 1rem;
372  margin: -0.7rem -1rem;
373  word-break: break-all;
374}
375
376details[open] > summary + * {
377  margin-top: 0;
378}
379
380details[open] > summary {
381  margin-bottom: 0.5rem;
382}
383
384details[open] > :last-child {
385  margin-bottom: 0;
386}
387
388/* Format tables */
389table {
390  border-collapse: collapse;
391  margin: 1.5rem 0;
392}
393
394td,
395th {
396  border: 1px solid var(--border);
397  text-align: start;
398  padding: 0.5rem;
399}
400
401th {
402  background-color: var(--accent-bg);
403  font-weight: bold;
404}
405
406tr:nth-child(even) {
407  /* Set every other cell slightly darker. Improves readability. */
408  background-color: var(--accent-bg);
409}
410
411table caption {
412  font-weight: bold;
413  margin-bottom: 0.5rem;
414}
415
416/* Format forms */
417textarea,
418select,
419input,
420button,
421.button {
422  font-size: inherit;
423  font-family: inherit;
424  padding: 0.5rem;
425  border-radius: var(--standard-border-radius);
426  box-shadow: none;
427  max-width: 100%;
428  display: inline-block;
429}
430textarea,
431select,
432input {
433  color: var(--text);
434  background-color: var(--bg);
435  border: 1px solid var(--border);
436}
437label {
438  display: block;
439}
440textarea:not([cols]) {
441  width: 100%;
442}
443
444/* Add arrow to drop-down */
445select:not([multiple]) {
446  background-image: linear-gradient(45deg, transparent 49%, var(--text) 51%),
447    linear-gradient(135deg, var(--text) 51%, transparent 49%);
448  background-position: calc(100% - 15px), calc(100% - 10px);
449  background-size: 5px 5px, 5px 5px;
450  background-repeat: no-repeat;
451  padding-inline-end: 25px;
452}
453*[dir="rtl"] select:not([multiple]) {
454  background-position: 10px, 15px;
455}
456
457/* checkbox and radio button style */
458input[type="checkbox"],
459input[type="radio"] {
460  vertical-align: middle;
461  position: relative;
462  width: min-content;
463}
464
465input[type="checkbox"] + label,
466input[type="radio"] + label {
467  display: inline-block;
468}
469
470input[type="radio"] {
471  border-radius: 100%;
472}
473
474input[type="checkbox"]:checked,
475input[type="radio"]:checked {
476  background-color: var(--accent);
477}
478
479input[type="checkbox"]:checked::after {
480  /* Creates a rectangle with colored right and bottom borders which is rotated to look like a check mark */
481  content: " ";
482  width: 0.18em;
483  height: 0.32em;
484  border-radius: 0;
485  position: absolute;
486  top: 0.05em;
487  left: 0.17em;
488  background-color: transparent;
489  border-right: solid var(--bg) 0.08em;
490  border-bottom: solid var(--bg) 0.08em;
491  font-size: 1.8em;
492  transform: rotate(45deg);
493}
494input[type="radio"]:checked::after {
495  /* creates a colored circle for the checked radio button  */
496  content: " ";
497  width: 0.25em;
498  height: 0.25em;
499  border-radius: 100%;
500  position: absolute;
501  top: 0.125em;
502  background-color: var(--bg);
503  left: 0.125em;
504  font-size: 32px;
505}
506
507/* Makes input fields wider on smaller screens */
508@media only screen and (max-width: 720px) {
509  textarea,
510  select,
511  input {
512    width: 100%;
513  }
514}
515
516/* Set a height for color input */
517input[type="color"] {
518  height: 2.5rem;
519  padding:  0.2rem;
520}
521
522/* do not show border around file selector button */
523input[type="file"] {
524  border: 0;
525}
526
527/* Misc body elements */
528hr {
529  border: none;
530  height: 1px;
531  background: var(--border);
532  margin: 1rem auto;
533}
534
535mark {
536  padding: 2px 5px;
537  border-radius: var(--standard-border-radius);
538  background-color: var(--marked);
539  color: black;
540}
541
542mark a {
543  color: var(--accent);
544}
545
546img,
547video {
548  max-width: 100%;
549  height: auto;
550  border-radius: var(--standard-border-radius);
551}
552
553figure {
554  margin: 0;
555  display: block;
556  overflow-x: auto;
557}
558
559figcaption {
560  text-align: center;
561  font-size: 0.9rem;
562  color: var(--text-light);
563  margin-bottom: 1rem;
564}
565
566blockquote {
567  margin-inline-start: 2rem;
568  margin-inline-end: 0;
569  margin-block: 2rem;
570  padding: 0.4rem 0.8rem;
571  border-inline-start: 0.35rem solid var(--accent);
572  color: var(--text-light);
573  font-style: italic;
574}
575
576cite {
577  font-size: 0.9rem;
578  color: var(--text-light);
579  font-style: normal;
580}
581
582dt {
583    color: var(--text-light);
584}
585
586/* Use mono font for code elements */
587code,
588pre,
589pre span,
590kbd,
591samp {
592  font-family: var(--mono-font);
593  color: var(--code);
594}
595
596kbd {
597  color: var(--preformatted);
598  border: 1px solid var(--preformatted);
599  border-bottom: 3px solid var(--preformatted);
600  border-radius: var(--standard-border-radius);
601  padding: 0.1rem 0.4rem;
602}
603
604pre {
605  padding: 1rem 1.4rem;
606  font-size: 1rem;
607  max-width: 100%;
608  overflow: auto;
609  color: var(--preformatted);
610}
611
612/* Fix embedded code within pre */
613pre code {
614  color: var(--preformatted);
615  background: none;
616  margin: 0;
617  padding: 0;
618}
619
620/* Progress bars */
621/* Declarations are repeated because you */
622/* cannot combine vendor-specific selectors */
623progress {
624  width: 100%;
625}
626
627progress:indeterminate {
628  background-color: var(--accent-bg);
629}
630
631progress::-webkit-progress-bar {
632  border-radius: var(--standard-border-radius);
633  background-color: var(--accent-bg);
634}
635
636progress::-webkit-progress-value {
637  border-radius: var(--standard-border-radius);
638  background-color: var(--accent);
639}
640
641progress::-moz-progress-bar {
642  border-radius: var(--standard-border-radius);
643  background-color: var(--accent);
644  transition-property: width;
645  transition-duration: 0.3s;
646}
647
648progress:indeterminate::-moz-progress-bar {
649  background-color: var(--accent-bg);
650}
651
652dialog {
653  max-width: 40rem;
654  margin: auto;
655}
656
657dialog::backdrop {
658  background-color: var(--bg);
659  opacity: 0.8;
660}
661
662@media only screen and (max-width: 720px) {
663  dialog {
664    max-width: 100%;
665    margin: auto 1em;
666  }
667}
668
669/* Superscript & Subscript */
670/* Prevent scripts from affecting line-height. */
671sup, sub {
672  vertical-align: baseline;
673  position: relative;
674}
675
676sup {
677  top: -0.4em;
678}
679
680sub {
681  top: 0.3em;
682}
683
684/* Classes for notices */
685.notice {
686  background: var(--accent-bg);
687  border: 2px solid var(--border);
688  border-radius: 5px;
689  padding: 1.5rem;
690  margin: 2rem 0;
691}
692
693