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