Eric Bower
·
10 May 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
18html {
19 background-color: var(--bg-color);
20 color: var(--text-color);
21 font-size: 18px;
22 line-height: 1.5;
23 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
24 Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
25 sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
26 -webkit-text-size-adjust: 100%;
27 -moz-tab-size: 4;
28 -o-tab-size: 4;
29 tab-size: 4;
30}
31
32body {
33 margin: 0 auto;
34}
35
36img {
37 max-width: 100%;
38 height: auto;
39}
40
41b,
42strong {
43 font-weight: bold;
44}
45
46code,
47kbd,
48samp,
49pre {
50 font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
51 monospace;
52}
53
54code,
55kbd,
56samp {
57 border: 2px solid var(--code);
58}
59
60pre > code {
61 background-color: inherit;
62 padding: 0;
63 border: none;
64}
65
66code {
67 font-size: 90%;
68 border-radius: 0.3rem;
69 padding: 0.15rem 0.3rem 0.05rem;
70}
71
72pre {
73 font-size: 14px;
74 border-radius: 5px;
75 padding: 1rem;
76 margin: 1rem 0;
77 overflow-x: auto;
78}
79
80small {
81 font-size: 0.8rem;
82}
83
84summary {
85 display: list-item;
86}
87
88h1,
89h2,
90h3 {
91 margin: 0;
92 padding: 0.6rem 0 0 0;
93 border: 0;
94 font-style: normal;
95 font-weight: inherit;
96 font-size: inherit;
97}
98
99path {
100 fill: var(--text-color);
101 stroke: var(--text-color);
102}
103
104hr {
105 color: inherit;
106 border: 0;
107 margin: 0;
108 height: 2px;
109 background: var(--grey);
110 margin: 1rem auto;
111 text-align: center;
112}
113
114a {
115 text-decoration: none;
116 color: var(--link-color);
117}
118
119a:hover,
120a:visited:hover {
121 text-decoration: underline;
122 color: var(--hover);
123}
124
125a:visited {
126 color: var(--visited);
127}
128
129section {
130 margin-bottom: 1.4rem;
131}
132
133section:last-child {
134 margin-bottom: 0;
135}
136
137header {
138 margin: 1rem auto;
139}
140
141p {
142 margin: 0.8rem 0;
143}
144
145article {
146 overflow-wrap: break-word;
147}
148
149ul,
150ol {
151 padding: 0 0 0 2rem;
152 list-style-position: outside;
153}
154
155ul[style*="list-style-type: none;"] {
156 padding: 0;
157}
158
159li {
160 margin: 0.5rem 0;
161}
162
163li > pre {
164 padding: 0;
165}
166
167footer {
168 text-align: center;
169 margin-bottom: 4rem;
170}
171
172dt {
173 font-weight: bold;
174}
175
176dd {
177 margin-left: 0;
178}
179
180dd:not(:last-child) {
181 margin-bottom: 0.5rem;
182}
183
184figure {
185 margin: 0;
186}
187
188.container {
189 max-width: 50em;
190 width: 100%;
191}
192
193.container-sm {
194 max-width: 40em;
195 width: 100%;
196}
197
198.container-center {
199 width: 100%;
200 height: 100%;
201 display: flex;
202 justify-content: center;
203}
204
205.mono {
206 font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
207 monospace;
208}
209
210.text-3xl {
211 font-size: 2.5rem;
212}
213
214.text-2xl {
215 font-size: 1.9rem;
216 line-height: 1.15;
217}
218
219.text-xl {
220 font-size: 1.55rem;
221 line-height: 1.15;
222}
223
224.text-lg {
225 font-size: 1.35rem;
226 line-height: 1.15;
227}
228
229.text-md {
230 font-size: 1.15rem;
231 line-height: 1.15;
232}
233
234.text-sm {
235 font-size: 0.875rem;
236}
237
238.text-xs {
239 font-size: 0.775rem;
240}
241
242.cursor-pointer {
243 cursor: pointer;
244}
245
246.w-full {
247 width: 100%;
248}
249
250.h-full {
251 height: 100%;
252}
253
254.border {
255 border: 2px solid var(--border);
256}
257
258.text-left {
259 text-align: left;
260}
261
262.text-center {
263 text-align: center;
264}
265
266.text-underline {
267 border-bottom: 3px solid var(--text-color);
268 padding-bottom: 3px;
269}
270
271.text-hdr {
272 color: var(--hover);
273}
274
275.text-underline-hdr {
276 border-bottom: 3px solid var(--hover);
277 padding-bottom: 3px;
278}
279
280.font-bold {
281 font-weight: bold;
282}
283
284.font-italic {
285 font-style: italic;
286}
287
288.inline {
289 display: inline;
290}
291
292.inline-block {
293 display: inline-block;
294}
295
296.max-w-half {
297 max-width: 50%;
298}
299
300.h-screen {
301 height: 100vh;
302}
303
304.w-screen {
305 width: 100vw;
306}
307
308.flex {
309 display: flex;
310}
311
312.flex-col {
313 flex-direction: column;
314}
315
316.items-center {
317 align-items: center;
318}
319
320.m-0 {
321 margin: 0;
322}
323
324.mt {
325 margin-top: 0.5rem;
326}
327
328.mt-2 {
329 margin-top: 1rem;
330}
331
332.mt-4 {
333 margin-top: 2rem;
334}
335
336.mt-8 {
337 margin-top: 4rem;
338}
339
340.mb {
341 margin-bottom: 0.5rem;
342}
343
344.mb-2 {
345 margin-bottom: 1rem;
346}
347
348.mb-4 {
349 margin-bottom: 2rem;
350}
351
352.mb-8 {
353 margin-bottom: 4rem;
354}
355
356.mb-16 {
357 margin-bottom: 8rem;
358}
359
360.mr {
361 margin-right: 0.5rem;
362}
363
364.ml-sm {
365 margin-left: 0.25rem;
366}
367
368.ml {
369 margin-left: 0.5rem;
370}
371
372.pt-0 {
373 padding-top: 0;
374}
375
376.my {
377 margin-top: 0.5rem;
378 margin-bottom: 0.5rem;
379}
380
381.my-2 {
382 margin-top: 1rem;
383 margin-bottom: 1rem;
384}
385
386.my-4 {
387 margin-top: 2rem;
388 margin-bottom: 2rem;
389}
390
391.my-8 {
392 margin-top: 4rem;
393 margin-bottom: 4rem;
394}
395
396.mx {
397 margin-left: 0.5rem;
398 margin-right: 0.5rem;
399}
400
401.mx-2 {
402 margin-left: 1rem;
403 margin-right: 1rem;
404}
405
406.m-1 {
407 margin: 0.5rem;
408}
409
410.p-1 {
411 padding: 0.5rem;
412}
413
414.p-0 {
415 padding: 0;
416}
417
418.py {
419 padding-top: 0.5rem;
420 padding-bottom: 0.5rem;
421}
422
423.py-2 {
424 padding-top: 1rem;
425 padding-bottom: 1rem;
426}
427
428.py-4 {
429 padding-top: 2rem;
430 padding-bottom: 2rem;
431}
432
433.py-8 {
434 padding-top: 4rem;
435 padding-bottom: 4rem;
436}
437
438.justify-between {
439 justify-content: space-between;
440}
441
442.justify-center {
443 justify-content: center;
444}
445
446.gap {
447 gap: 0.5rem;
448}
449
450.gap-2 {
451 gap: 1rem;
452}
453
454.group {
455 display: flex;
456 flex-direction: column;
457 gap: 0.5rem;
458}
459
460.group-2 {
461 display: flex;
462 flex-direction: column;
463 gap: 1rem;
464}
465
466.group-h {
467 display: flex;
468 gap: 0.5rem;
469 align-items: center;
470}
471
472.flex-1 {
473 flex: 1;
474}
475
476.items-end {
477 align-items: end;
478}
479
480.items-start {
481 align-items: start;
482}
483
484.justify-end {
485 justify-content: end;
486}
487
488.font-grey-light {
489 color: var(--grey-light);
490}
491
492.hidden {
493 display: none;
494}
495
496.align-right {
497 text-align: right;
498}
499
500.box {
501 border: 2px solid var(--grey-light);
502 padding: 0.5rem 0.75rem;
503}
504
505@media only screen and (max-width: 40em) {
506 body {
507 padding: 0 1rem;
508 }
509
510 header {
511 margin: 0;
512 }
513
514 .flex-collapse {
515 flex-direction: column;
516 }
517}