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