Eric Bower
·
2025-05-03
smol.css
1*,
2::before,
3::after {
4 box-sizing: border-box;
5}
6
7::-moz-focus-inner {
8 border-style: none;
9 padding: 0;
10}
11:-moz-focusring {
12 outline: 1px dotted ButtonText;
13}
14:-moz-ui-invalid {
15 box-shadow: none;
16}
17
18:root {
19 --line-height: 1.3rem;
20 --grid-height: 0.65rem;
21}
22
23@media (prefers-color-scheme: light) {
24 :root {
25 --white: #2e3f53;
26 --white-light: #cfe0f4;
27 --white-dark: #6c6a6a;
28 --code: #52576f;
29 --pre: #e1e7ee;
30 --bg-color: #f4f4f4;
31 --text-color: #24292f;
32 --link-color: #005cc5;
33 --visited: #6f42c1;
34 --blockquote: #005cc5;
35 --blockquote-bg: #cfe0f4;
36 --hover: #c11e7a;
37 --grey: #ccc;
38 --grey-light: #6a708e;
39 }
40}
41
42@media (prefers-color-scheme: dark) {
43 :root {
44 --white: #f2f2f2;
45 --white-light: #f2f2f2;
46 --white-dark: #e8e8e8;
47 --code: #414558;
48 --pre: #252525;
49 --bg-color: #282a36;
50 --text-color: #f2f2f2;
51 --link-color: #8be9fd;
52 --visited: #bd93f9;
53 --blockquote: #bd93f9;
54 --blockquote-bg: #353548;
55 --hover: #ff80bf;
56 --grey: #414558;
57 --grey-light: #6a708e;
58 }
59}
60
61html {
62 background-color: var(--bg-color);
63 color: var(--text-color);
64 font-size: 16px;
65 line-height: var(--line-height);
66 font-family:
67 -apple-system,
68 BlinkMacSystemFont,
69 "Segoe UI",
70 Roboto,
71 Oxygen,
72 Ubuntu,
73 Cantarell,
74 "Fira Sans",
75 "Droid Sans",
76 "Helvetica Neue",
77 Arial,
78 sans-serif,
79 "Apple Color Emoji",
80 "Segoe UI Emoji",
81 "Segoe UI Symbol";
82 -webkit-text-size-adjust: 100%;
83 -moz-tab-size: 4;
84 -o-tab-size: 4;
85 tab-size: 4;
86}
87
88body {
89 margin: 0 auto;
90}
91
92img {
93 max-width: 100%;
94 height: auto;
95}
96
97b,
98strong {
99 font-weight: bold;
100}
101
102code,
103kbd,
104samp,
105pre {
106 font-family: monospace;
107}
108
109code,
110kbd,
111samp {
112 border: 2px solid var(--code);
113}
114
115pre > code {
116 background-color: inherit;
117 padding: 0;
118 border: none;
119 border-radius: 0;
120}
121
122code {
123 font-size: 90%;
124 border-radius: 0.3rem;
125 padding: 0.025rem 0.3rem;
126}
127
128pre {
129 font-size: 0.8rem;
130 border-radius: 1px;
131 padding: var(--line-height);
132 overflow-x: auto;
133 background-color: var(--pre) !important;
134}
135
136small {
137 font-size: 0.8rem;
138}
139
140details {
141 border: 2px solid var(--grey-light);
142 padding: calc(var(--grid-height) - 2px) 1ch;
143 margin-bottom: var(--grid-height);
144}
145
146details[open] summary {
147 margin-bottom: var(--grid-height);
148}
149
150summary {
151 display: list-item;
152 cursor: pointer;
153}
154
155h1,
156h2,
157h3,
158h4 {
159 margin: 0;
160 padding: 0;
161 border: 0;
162 font-style: normal;
163 font-weight: inherit;
164 font-size: inherit;
165}
166
167path {
168 fill: var(--text-color);
169 stroke: var(--text-color);
170}
171
172hr {
173 color: inherit;
174 border: 0;
175 height: 2px;
176 background: var(--grey);
177 margin: calc(var(--grid-height) - 2px) auto;
178}
179
180a {
181 text-decoration: none;
182 color: var(--link-color);
183}
184
185a:hover,
186a:visited:hover {
187 text-decoration: underline;
188}
189
190a:visited {
191 color: var(--visited);
192}
193
194section {
195 margin-bottom: 1.4rem;
196}
197
198section:last-child {
199 margin-bottom: 0;
200}
201
202header {
203 margin: 1rem auto;
204}
205
206p {
207 margin-top: var(--line-height);
208 margin-bottom: var(--line-height);
209}
210
211article {
212 overflow-wrap: break-word;
213}
214
215blockquote {
216 border-left: 5px solid var(--blockquote);
217 background-color: var(--blockquote-bg);
218 padding: var(--grid-height);
219 margin: var(--line-height) 0;
220}
221
222blockquote > p {
223 margin: 0;
224}
225
226blockquote code {
227 border: 1px solid var(--blockquote);
228}
229
230ul {
231 padding: 0 0 0 var(--line-height);
232 list-style-position: inside;
233 list-style-type: square;
234 margin: var(--line-height) 0;
235}
236
237ul[style*="list-style-type: none;"] {
238 padding: 0;
239}
240
241ol {
242 padding: 0 0 0 var(--line-height);
243 list-style-type: decimal;
244 margin: var(--line-height) 0;
245}
246
247ol[style*="list-style-type: none;"] {
248 padding: 0;
249}
250
251ol ul, ol ol, ul ol, ul ul {
252 padding: 0 0 0 3ch;
253 margin: 0;
254}
255
256li {
257 margin: 0;
258 padding: 0;
259}
260
261li::marker {
262 line-height: 0;
263}
264
265footer {
266 text-align: center;
267 margin-bottom: calc(var(--line-height) * 3);
268}
269
270dt {
271 font-weight: bold;
272}
273
274dd {
275 margin-left: 0;
276}
277
278dd:not(:last-child) {
279 margin-bottom: 0.5rem;
280}
281
282figure {
283 margin: 0;
284}
285
286sup {
287 line-height: 0;
288}
289
290#toc {
291 margin-top: var(--line-height);
292}
293
294.container {
295 max-width: 50em;
296 width: 100%;
297}
298
299.container-sm {
300 max-width: 40em;
301 width: 100%;
302}
303
304.mono {
305 font-family: monospace;
306}
307
308.link-alt-hover,
309.link-alt-hover:visited,
310.link-alt-hover:visited:hover,
311.link-alt-hover:hover {
312 color: var(--hover);
313 text-decoration: none;
314}
315
316.link-alt-hover:visited:hover,
317.link-alt-hover:hover {
318 text-decoration: underline;
319}
320
321.link-alt,
322.link-alt:visited,
323.link-alt:visited:hover,
324.link-alt:hover {
325 color: var(--white);
326 text-decoration: none;
327}
328
329.link-alt:visited:hover,
330.link-alt:hover {
331 text-decoration: underline;
332}
333
334.text-2xl code, .text-xl code, .text-lg code, .text-md code {
335 text-transform: none;
336}
337
338.text-2xl {
339 font-size: var(--line-height);
340 font-weight: bold;
341 line-height: var(--line-height);
342 margin-bottom: var(--grid-height);
343 text-transform: uppercase;
344}
345
346.text-xl, .text-lg, .text-md {
347 font-size: 1rem;
348 font-weight: bold;
349 line-height: var(--line-height);
350 margin-bottom: var(--grid-height);
351 text-transform: uppercase;
352}
353
354.text-sm {
355 font-size: 0.8rem;
356}
357
358.w-full {
359 width: 100%;
360}
361
362.border {
363 border: 2px solid var(--grey-light);
364}
365
366.text-left {
367 text-align: left;
368}
369
370.text-center {
371 text-align: center;
372}
373
374.text-underline {
375 text-decoration: underline;
376 text-decoration-thickness: 2px;
377}
378
379.text-hdr {
380 color: var(--hover);
381}
382
383.font-bold {
384 font-weight: bold;
385}
386
387.font-italic {
388 font-style: italic;
389}
390
391.inline {
392 display: inline;
393}
394
395.inline-block {
396 display: inline-block;
397}
398
399.max-w-half {
400 max-width: 50%;
401}
402
403.flex {
404 display: flex;
405}
406
407.flex-col {
408 flex-direction: column;
409}
410
411.flex-wrap {
412 flex-wrap: wrap;
413}
414
415.items-center {
416 align-items: center;
417}
418
419.m-0 {
420 margin: 0;
421}
422
423.mt-0 {
424 margin-top: 0;
425}
426
427.mt {
428 margin-top: var(--grid-height);
429}
430
431.mt-2 {
432 margin-top: var(--line-height);
433}
434
435.mt-4 {
436 margin-top: calc(var(--line-height) * 2);
437}
438
439.mb {
440 margin-bottom: var(--grid-height);
441}
442
443.mb-2 {
444 margin-bottom: var(--line-height);
445}
446
447.mb-4 {
448 margin-bottom: calc(var(--line-height) * 2);
449}
450
451.mr {
452 margin-right: 0.5rem;
453}
454
455.ml {
456 margin-left: 0.5rem;
457}
458
459.my {
460 margin-top: var(--grid-height);
461 margin-bottom: var(--grid-height);
462}
463
464.my-2 {
465 margin-top: var(--line-height);
466 margin-bottom: var(--line-height);
467}
468
469.my-4 {
470 margin-top: calc(var(--line-height) * 2);
471 margin-bottom: calc(var(--line-height) * 2);
472}
473
474.p-0 {
475 padding: 0;
476}
477
478.px {
479 padding-left: 0.5rem;
480 padding-right: 0.5rem;
481}
482
483.px-4 {
484 padding-left: 2rem;
485 padding-right: 2rem;
486}
487
488.py {
489 padding-top: var(--grid-height);
490 padding-bottom: var(--grid-height);
491}
492
493.py-4 {
494 padding-top: calc(var(--line-height) * 2);
495 padding-bottom: calc(var(--line-height) * 2);
496}
497
498.justify-between {
499 justify-content: space-between;
500}
501
502.justify-center {
503 justify-content: center;
504}
505
506.gap {
507 gap: var(--grid-height);
508}
509
510.gap-2 {
511 gap: var(--line-height);
512}
513
514.group {
515 display: flex;
516 flex-direction: column;
517 gap: var(--grid-height);
518}
519
520.group-2 {
521 display: flex;
522 flex-direction: column;
523 gap: var(--line-height);
524}
525
526.group-h {
527 display: flex;
528 gap: var(--grid-height);
529 align-items: center;
530}
531
532.flex-1 {
533 flex: 1;
534}
535
536.items-end {
537 align-items: end;
538}
539
540.items-start {
541 align-items: start;
542}
543
544.justify-end {
545 justify-content: end;
546}
547
548.font-grey-light {
549 color: var(--grey-light);
550}
551
552.hidden {
553 display: none;
554}
555
556.align-right {
557 text-align: right;
558}
559
560.text-transform-none {
561 text-transform: none;
562}
563
564/* ==== MARKDOWN ==== */
565
566.md h1,
567.md h2,
568.md h3,
569.md h4 {
570 padding: 0;
571 margin: 0;
572 /* margin: 1.5rem 0 0.9rem 0; */
573 font-weight: bold;
574}
575
576.md h1 a,
577.md h2 a,
578.md h3 a,
579.md h4 a {
580 color: var(--grey-light);
581 text-decoration: none;
582}
583
584h1 code, h2 code, h3 code, h4 code {
585 text-transform: none;
586}
587
588.md h1 {
589 font-size: 1rem;
590 line-height: var(--line-height);
591 margin-top: calc(var(--line-height) * 2);
592 margin-bottom: var(--grid-height);
593 text-transform: uppercase;
594}
595
596.md h2, .md h3, .md h4 {
597 font-size: 1rem;
598 line-height: var(--line-height);
599 margin-top: calc(var(--line-height) * 2);
600 margin-bottom: var(--line-height);
601 text-transform: uppercase;
602 color: var(--white-dark);
603}
604
605/* ==== HELPERS ==== */
606
607.logo-header {
608 line-height: 1;
609 display: inline-block;
610 background-color: #ff79c6;
611 background-image: linear-gradient(to right, #ff5555, #ff79c6, #f8f859);
612 color: transparent;
613 background-clip: text;
614 border: 3px solid #ff79c6;
615 padding: 8px 10px 10px 10px;
616 border-radius: 10px;
617 background-size: 100%;
618 margin: 0;
619 -webkit-background-clip: text;
620 -moz-background-clip: text;
621 -webkit-text-fill-color: transparent;
622 -moz-text-fill-color: transparent;
623}
624
625.btn {
626 border: 2px solid var(--link-color);
627 color: var(--link-color);
628 padding: 0.4rem 1rem;
629 font-weight: bold;
630 display: inline-block;
631}
632
633.btn-link,
634.btn-link:visited {
635 border: 2px solid var(--link-color);
636 color: var(--link-color);
637 padding: var(--grid-height);
638 text-decoration: none;
639 font-weight: bold;
640 display: inline-block;
641}
642
643.box {
644 border: 2px solid var(--grey-light);
645 padding: var(--grid-height);
646}
647
648.box-sm {
649 border: 2px solid var(--grey-light);
650 padding: var(--grid-height);
651}
652
653.box-alert {
654 border: 2px solid var(--hover);
655 padding: var(--line-height);
656}
657
658.box-sm-alert {
659 border: 2px solid var(--hover);
660 padding: var(--grid-height);
661}
662
663.list-none {
664 list-style-type: none;
665}
666
667.list-square {
668 list-style-type: square;
669}
670
671.list-disc {
672 list-style-type: disc;
673}
674
675.list-decimal {
676 list-style-type: decimal;
677}
678
679.pill {
680 border: 1px solid var(--link-color);
681 color: var(--link-color);
682}
683
684.pill-alert {
685 border: 1px solid var(--hover);
686 color: var(--hover);
687}
688
689.pill-info {
690 border: 1px solid var(--visited);
691 color: var(--visited);
692}
693
694@media only screen and (max-width: 40em) {
695 body {
696 padding: 0 1rem;
697 }
698
699 header {
700 margin: 0;
701 }
702
703 .flex-collapse {
704 flex-direction: column;
705 }
706}
707
708#debug {
709 position: relative;
710}
711
712#debug .debug-grid {
713 width: 100%;
714 height: 100%;
715 position: absolute;
716 top: 0;
717 left: 0;
718 right: 0;
719 bottom: 0;
720 z-index: -1;
721 background-image:
722 repeating-linear-gradient(var(--code) 0 1px, transparent 1px 100%),
723 repeating-linear-gradient(90deg, var(--code) 0 1px, transparent 1px 100%);
724 background-size: 1ch var(--grid-height);
725 margin: 0;
726}