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