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