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