simple.css (12847B)
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 border-color: var(--accent);
294 color: var(--accent);
295 cursor: pointer;
296 }
297
298 /* Reduce nav side on mobile */
299 @media only screen and (max-width: 720px) {
300 header > nav a {
301 border: none;
302 padding: 0;
303 text-decoration: underline;
304 line-height: 1;
305 }
306 }
307
308 /* Consolidate box styling */
309 aside, details, pre, progress {
310 background-color: var(--accent-bg);
311 border: 1px solid var(--border);
312 border-radius: var(--standard-border-radius);
313 margin-bottom: 1rem;
314 }
315
316 aside {
317 font-size: 1rem;
318 width: 30%;
319 padding: 0 15px;
320 margin-inline-start: 15px;
321 float: right;
322 }
323 *[dir="rtl"] aside {
324 float: left;
325 }
326
327 /* Make aside full-width on mobile */
328 @media only screen and (max-width: 720px) {
329 aside {
330 width: 100%;
331 float: none;
332 margin-inline-start: 0;
333 }
334 }
335
336 article, fieldset, dialog {
337 border: 1px solid var(--border);
338 padding: 1rem;
339 border-radius: var(--standard-border-radius);
340 margin-bottom: 1rem;
341 }
342
343 article h2:first-child,
344 section h2:first-child,
345 article h3:first-child,
346 section h3:first-child {
347 margin-top: 1rem;
348 }
349
350 section {
351 border-top: 1px solid var(--border);
352 border-bottom: 1px solid var(--border);
353 padding: 2rem 1rem;
354 margin: 3rem 0;
355 }
356
357 /* Don't double separators when chaining sections */
358 section + section,
359 section:first-child {
360 border-top: 0;
361 padding-top: 0;
362 }
363
364 section + section {
365 margin-top: 0;
366 }
367
368 section:last-child {
369 border-bottom: 0;
370 padding-bottom: 0;
371 }
372
373 details {
374 padding: 0.7rem 1rem;
375 }
376
377 summary {
378 cursor: pointer;
379 font-weight: bold;
380 padding: 0.7rem 1rem;
381 margin: -0.7rem -1rem;
382 word-break: break-all;
383 }
384
385 details[open] > summary + * {
386 margin-top: 0;
387 }
388
389 details[open] > summary {
390 margin-bottom: 0.5rem;
391 }
392
393 details[open] > :last-child {
394 margin-bottom: 0;
395 }
396
397 /* Format tables */
398 table {
399 border-collapse: collapse;
400 margin: 1.5rem 0;
401 }
402
403 figure > table {
404 width: max-content;
405 margin: 0;
406 }
407
408 td,
409 th {
410 border: 1px solid var(--border);
411 text-align: start;
412 padding: 0.5rem;
413 }
414
415 th {
416 background-color: var(--accent-bg);
417 font-weight: bold;
418 }
419
420 tr:nth-child(even) {
421 /* Set every other cell slightly darker. Improves readability. */
422 background-color: var(--accent-bg);
423 }
424
425 table caption {
426 font-weight: bold;
427 margin-bottom: 0.5rem;
428 }
429
430 /* Format forms */
431 textarea,
432 select,
433 input,
434 button,
435 .button {
436 font-size: inherit;
437 font-family: inherit;
438 padding: 0.5rem;
439 margin-bottom: 0.5rem;
440 border-radius: var(--standard-border-radius);
441 box-shadow: none;
442 max-width: 100%;
443 display: inline-block;
444 }
445 textarea,
446 select,
447 input {
448 color: var(--text);
449 background-color: var(--bg);
450 border: 1px solid var(--border);
451 }
452 label {
453 display: block;
454 }
455 textarea:not([cols]) {
456 width: 100%;
457 }
458
459 /* Add arrow to drop-down */
460 select:not([multiple]) {
461 background-image: linear-gradient(45deg, transparent 49%, var(--text) 51%),
462 linear-gradient(135deg, var(--text) 51%, transparent 49%);
463 background-position: calc(100% - 15px), calc(100% - 10px);
464 background-size: 5px 5px, 5px 5px;
465 background-repeat: no-repeat;
466 padding-inline-end: 25px;
467 }
468 *[dir="rtl"] select:not([multiple]) {
469 background-position: 10px, 15px;
470 }
471
472 /* checkbox and radio button style */
473 input[type="checkbox"],
474 input[type="radio"] {
475 vertical-align: middle;
476 position: relative;
477 width: min-content;
478 }
479
480 input[type="checkbox"] + label,
481 input[type="radio"] + label {
482 display: inline-block;
483 }
484
485 input[type="radio"] {
486 border-radius: 100%;
487 }
488
489 input[type="checkbox"]:checked,
490 input[type="radio"]:checked {
491 background-color: var(--accent);
492 }
493
494 input[type="checkbox"]:checked::after {
495 /* Creates a rectangle with colored right and bottom borders which is rotated to look like a check mark */
496 content: " ";
497 width: 0.18em;
498 height: 0.32em;
499 border-radius: 0;
500 position: absolute;
501 top: 0.05em;
502 left: 0.17em;
503 background-color: transparent;
504 border-right: solid var(--bg) 0.08em;
505 border-bottom: solid var(--bg) 0.08em;
506 font-size: 1.8em;
507 transform: rotate(45deg);
508 }
509 input[type="radio"]:checked::after {
510 /* creates a colored circle for the checked radio button */
511 content: " ";
512 width: 0.25em;
513 height: 0.25em;
514 border-radius: 100%;
515 position: absolute;
516 top: 0.125em;
517 background-color: var(--bg);
518 left: 0.125em;
519 font-size: 32px;
520 }
521
522 /* Makes input fields wider on smaller screens */
523 @media only screen and (max-width: 720px) {
524 textarea,
525 select,
526 input {
527 width: 100%;
528 }
529 }
530
531 /* Set a height for color input */
532 input[type="color"] {
533 height: 2.5rem;
534 padding: 0.2rem;
535 }
536
537 /* do not show border around file selector button */
538 input[type="file"] {
539 border: 0;
540 }
541
542 /* Misc body elements */
543 hr {
544 border: none;
545 height: 1px;
546 background: var(--border);
547 margin: 1rem auto;
548 }
549
550 mark {
551 padding: 2px 5px;
552 border-radius: var(--standard-border-radius);
553 background-color: var(--marked);
554 color: black;
555 }
556
557 mark a {
558 color: #0d47a1;
559 }
560
561 img,
562 video {
563 max-width: 100%;
564 height: auto;
565 border-radius: var(--standard-border-radius);
566 }
567
568 figure {
569 margin: 0;
570 display: block;
571 overflow-x: auto;
572 }
573
574 figure > img,
575 figure > picture > img {
576 display: block;
577 margin-inline: auto;
578 }
579
580 figcaption {
581 text-align: center;
582 font-size: 0.9rem;
583 color: var(--text-light);
584 margin-block: 1rem;
585 }
586
587 blockquote {
588 margin-inline-start: 2rem;
589 margin-inline-end: 0;
590 margin-block: 2rem;
591 padding: 0.4rem 0.8rem;
592 border-inline-start: 0.35rem solid var(--accent);
593 color: var(--text-light);
594 font-style: italic;
595 }
596
597 cite {
598 font-size: 0.9rem;
599 color: var(--text-light);
600 font-style: normal;
601 }
602
603 dt {
604 color: var(--text-light);
605 }
606
607 /* Use mono font for code elements */
608 code,
609 pre,
610 pre span,
611 kbd,
612 samp {
613 font-family: var(--mono-font);
614 color: var(--code);
615 }
616
617 kbd {
618 color: var(--preformatted);
619 border: 1px solid var(--preformatted);
620 border-bottom: 3px solid var(--preformatted);
621 border-radius: var(--standard-border-radius);
622 padding: 0.1rem 0.4rem;
623 }
624
625 pre {
626 padding: 1rem 1.4rem;
627 max-width: 100%;
628 overflow: auto;
629 color: var(--preformatted);
630 }
631
632 /* Fix embedded code within pre */
633 pre code {
634 color: var(--preformatted);
635 background: none;
636 margin: 0;
637 padding: 0;
638 }
639
640 /* Progress bars */
641 /* Declarations are repeated because you */
642 /* cannot combine vendor-specific selectors */
643 progress {
644 width: 100%;
645 }
646
647 progress:indeterminate {
648 background-color: var(--accent-bg);
649 }
650
651 progress::-webkit-progress-bar {
652 border-radius: var(--standard-border-radius);
653 background-color: var(--accent-bg);
654 }
655
656 progress::-webkit-progress-value {
657 border-radius: var(--standard-border-radius);
658 background-color: var(--accent);
659 }
660
661 progress::-moz-progress-bar {
662 border-radius: var(--standard-border-radius);
663 background-color: var(--accent);
664 transition-property: width;
665 transition-duration: 0.3s;
666 }
667
668 progress:indeterminate::-moz-progress-bar {
669 background-color: var(--accent-bg);
670 }
671
672 dialog {
673 max-width: 40rem;
674 margin: auto;
675 }
676
677 dialog::backdrop {
678 background-color: var(--bg);
679 opacity: 0.8;
680 }
681
682 @media only screen and (max-width: 720px) {
683 dialog {
684 max-width: 100%;
685 margin: auto 1em;
686 }
687 }
688
689 /* Superscript & Subscript */
690 /* Prevent scripts from affecting line-height. */
691 sup, sub {
692 vertical-align: baseline;
693 position: relative;
694 }
695
696 sup {
697 top: -0.4em;
698 }
699
700 sub {
701 top: 0.3em;
702 }
703
704 /* Classes for notices */
705 .notice {
706 background: var(--accent-bg);
707 border: 2px solid var(--border);
708 border-radius: var(--standard-border-radius);
709 padding: 1.5rem;
710 margin: 2rem 0;
711 }
