Eric Bower
·
02 Oct 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(--line-height) - 2px) 1ch;
130 margin-bottom: var(--line-height);
131}
132
133details[open] summary {
134 margin-bottom: var(--line-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,
218ol {
219 padding: 0 0 0 var(--line-height);
220 list-style-position: inside;
221 list-style-type: square;
222 margin: var(--line-height) 0;
223}
224
225ul[style*="list-style-type: none;"] {
226 padding: 0;
227}
228
229ol ul, ol ol, ul ol, ul ul {
230 padding: 0 0 0 3ch;
231 margin: 0;
232}
233
234li {
235 margin: 0;
236 padding: 0;
237}
238
239li::marker {
240 line-height: 0;
241}
242
243li > pre {
244 padding: 0;
245}
246
247footer {
248 text-align: center;
249 margin-bottom: calc(var(--line-height) * 3);
250}
251
252dt {
253 font-weight: bold;
254}
255
256dd {
257 margin-left: 0;
258}
259
260dd:not(:last-child) {
261 margin-bottom: 0.5rem;
262}
263
264figure {
265 margin: 0;
266}
267
268#toc {
269 margin-top: var(--line-height);
270}
271
272.container {
273 max-width: 50em;
274 width: 100%;
275}
276
277.container-sm {
278 max-width: 40em;
279 width: 100%;
280}
281
282.container-center {
283 width: 100%;
284 height: 100%;
285 display: flex;
286 justify-content: center;
287}
288
289.mono {
290 font-family: monospace;
291}
292
293.link-alt-hover,
294.link-alt-hover:visited,
295.link-alt-hover:visited:hover,
296.link-alt-hover:hover {
297 color: var(--hover);
298 text-decoration: none;
299}
300
301.link-alt-hover:visited:hover,
302.link-alt-hover:hover {
303 text-decoration: underline;
304}
305
306.link-alt,
307.link-alt:visited,
308.link-alt:visited:hover,
309.link-alt:hover {
310 color: var(--white);
311 text-decoration: none;
312}
313
314.link-alt:visited:hover,
315.link-alt:hover {
316 text-decoration: underline;
317}
318
319.text-2xl code, .text-xl code, .text-lg code, .text-md code {
320 text-transform: none;
321}
322
323.text-2xl {
324 font-size: var(--line-height);
325 font-weight: bold;
326 line-height: var(--line-height);
327 margin-bottom: var(--grid-height);
328 text-transform: uppercase;
329}
330
331.text-xl, .text-lg, .text-md {
332 font-size: 1rem;
333 font-weight: bold;
334 line-height: var(--line-height);
335 margin-bottom: var(--grid-height);
336 text-transform: uppercase;
337}
338
339.text-sm {
340 font-size: 0.8rem;
341}
342
343.cursor-pointer {
344 cursor: pointer;
345}
346
347.w-full {
348 width: 100%;
349}
350
351.h-full {
352 height: 100%;
353}
354
355.border {
356 border: 2px solid var(--grey-light);
357}
358
359.text-left {
360 text-align: left;
361}
362
363.text-center {
364 text-align: center;
365}
366
367.text-underline {
368 text-decoration: underline;
369 text-decoration-thickness: 2px;
370}
371
372.text-hdr {
373 color: var(--hover);
374}
375
376.font-bold {
377 font-weight: bold;
378}
379
380.font-italic {
381 font-style: italic;
382}
383
384.inline {
385 display: inline;
386}
387
388.inline-block {
389 display: inline-block;
390}
391
392.max-w-half {
393 max-width: 50%;
394}
395
396.h-screen {
397 height: 100vh;
398}
399
400.w-screen {
401 width: 100vw;
402}
403
404.flex {
405 display: flex;
406}
407
408.flex-col {
409 flex-direction: column;
410}
411
412.items-center {
413 align-items: center;
414}
415
416.m-0 {
417 margin: 0;
418}
419
420.mt-0 {
421 margin-top: 0;
422}
423
424.mt {
425 margin-top: var(--grid-height);
426}
427
428.mt-2 {
429 margin-top: var(--line-height);
430}
431
432.mt-4 {
433 margin-top: calc(var(--line-height) * 2);
434}
435
436.mb {
437 margin-bottom: var(--grid-height);
438}
439
440.mb-2 {
441 margin-bottom: var(--line-height);
442}
443
444.mb-4 {
445 margin-bottom: calc(var(--line-height) * 2);
446}
447
448.mr {
449 margin-right: 0.5rem;
450}
451
452.ml-sm {
453 margin-left: 0.25rem;
454}
455
456.ml {
457 margin-left: 0.5rem;
458}
459
460.pt-0 {
461 padding-top: 0;
462}
463
464.my {
465 margin-top: var(--grid-height);
466 margin-bottom: var(--grid-height);
467}
468
469.my-2 {
470 margin-top: var(--line-height);
471 margin-bottom: var(--line-height);
472}
473
474.my-4 {
475 margin-top: calc(var(--line-height) * 2);
476 margin-bottom: calc(var(--line-height) * 2);
477}
478
479.mx {
480 margin-left: 0.5rem;
481 margin-right: 0.5rem;
482}
483
484.mx-2 {
485 margin-left: 1rem;
486 margin-right: 1rem;
487}
488
489.m-1 {
490 margin: var(--grid-height);
491}
492
493.p-1 {
494 padding: var(--grid-height);
495}
496
497.p-0 {
498 padding: 0;
499}
500
501.px-2 {
502 padding-left: 1rem;
503 padding-right: 1rem;
504}
505
506.px-4 {
507 padding-left: 2rem;
508 padding-right: 2rem;
509}
510
511.py {
512 padding-top: var(--grid-height);
513 padding-bottom: var(--grid-height);
514}
515
516.py-2 {
517 padding-top: var(--line-height);
518 padding-bottom: var(--line-height);
519}
520
521.py-4 {
522 padding-top: calc(var(--line-height) * 2);
523 padding-bottom: calc(var(--line-height) * 2);
524}
525
526.justify-between {
527 justify-content: space-between;
528}
529
530.justify-center {
531 justify-content: center;
532}
533
534.gap {
535 gap: var(--grid-height);
536}
537
538.gap-2 {
539 gap: var(--line-height);
540}
541
542.group {
543 display: flex;
544 flex-direction: column;
545 gap: var(--grid-height);
546}
547
548.group-2 {
549 display: flex;
550 flex-direction: column;
551 gap: var(--line-height);
552}
553
554.group-h {
555 display: flex;
556 gap: var(--grid-height);
557 align-items: center;
558}
559
560.flex-1 {
561 flex: 1;
562}
563
564.items-end {
565 align-items: end;
566}
567
568.items-start {
569 align-items: start;
570}
571
572.justify-end {
573 justify-content: end;
574}
575
576.font-grey-light {
577 color: var(--grey-light);
578}
579
580.hidden {
581 display: none;
582}
583
584.align-right {
585 text-align: right;
586}
587
588/* ==== MARKDOWN ==== */
589
590.md h1,
591.md h2,
592.md h3,
593.md h4 {
594 padding: 0;
595 margin: 0;
596 /* margin: 1.5rem 0 0.9rem 0; */
597 font-weight: bold;
598}
599
600.md h1 a,
601.md h2 a,
602.md h3 a,
603.md h4 a {
604 color: var(--grey-light);
605 text-decoration: none;
606}
607
608h1 code, h2 code, h3 code, h4 code {
609 text-transform: none;
610}
611
612.md h1 {
613 font-size: 1rem;
614 line-height: var(--line-height);
615 margin-top: calc(var(--line-height) * 2);
616 margin-bottom: var(--grid-height);
617 text-transform: uppercase;
618}
619
620.md h2, .md h3, .md h4 {
621 font-size: 1rem;
622 line-height: var(--line-height);
623 margin-top: calc(var(--line-height) * 2);
624 margin-bottom: var(--line-height);
625 text-transform: uppercase;
626 color: var(--white-dark);
627}
628
629/* ==== HELPERS ==== */
630
631.logo-header {
632 line-height: 1;
633 display: inline-block;
634 background-color: #FF79C6;
635 background-image: linear-gradient(to right, #FF5555, #FF79C6, #F8F859);
636 color: transparent;
637 background-clip: text;
638 border: 3px solid #FF79C6;
639 padding: 8px 10px 10px 10px;
640 border-radius: 10px;
641 background-size: 100%;
642 margin: 0;
643 -webkit-background-clip: text;
644 -moz-background-clip: text;
645 -webkit-text-fill-color: transparent;
646 -moz-text-fill-color: transparent;
647}
648
649.btn {
650 border: 2px solid var(--link-color);
651 color: var(--link-color);
652 padding: 0.4rem 1rem;
653 font-weight: bold;
654 display: inline-block;
655}
656
657.btn-link,
658.btn-link:visited {
659 border: 2px solid var(--link-color);
660 color: var(--link-color);
661 padding: var(--grid-height);
662 text-decoration: none;
663 font-weight: bold;
664 display: inline-block;
665}
666
667.box {
668 border: 2px solid var(--grey-light);
669 padding: var(--grid-height);
670}
671
672.box-sm {
673 border: 2px solid var(--grey-light);
674 padding: var(--grid-height);
675}
676
677.box-alert {
678 border: 2px solid var(--hover);
679 padding: var(--line-height);
680}
681
682.box-sm-alert {
683 border: 2px solid var(--hover);
684 padding: var(--grid-height);
685}
686
687.list-none {
688 list-style-type: none;
689}
690
691.list-square {
692 list-style-type: square;
693}
694
695.list-disc {
696 list-style-type: disc;
697}
698
699.list-decimal {
700 list-style-type: decimal;
701}
702
703.pill {
704 border: 1px solid var(--link-color);
705 color: var(--link-color);
706}
707
708.pill-alert {
709 border: 1px solid var(--hover);
710 color: var(--hover);
711}
712
713.pill-info {
714 border: 1px solid var(--visited);
715 color: var(--visited);
716}
717
718@media only screen and (max-width: 40em) {
719 body {
720 padding: 0 1rem;
721 }
722
723 header {
724 margin: 0;
725 }
726
727 .flex-collapse {
728 flex-direction: column;
729 }
730}
731
732#debug {
733 position: relative;
734}
735
736#debug .debug-grid {
737 width: 100%;
738 height: 100%;
739 position: absolute;
740 top: 0;
741 left: 0;
742 right: 0;
743 bottom: 0;
744 z-index: -1;
745 background-image:
746 repeating-linear-gradient(var(--code) 0 1px, transparent 1px 100%),
747 repeating-linear-gradient(90deg, var(--code) 0 1px, transparent 1px 100%);
748 background-size: 1ch var(--grid-height);
749 margin: 0;
750}