- commit
- 4f3e0b2
- parent
- c28d738
- author
- Eric Bower
- date
- 2024-10-18 16:25:07 -0400 EDT
chore: update smol
3 files changed,
+6,
-632
M
Makefile
+0,
-1
1@@ -29,5 +29,4 @@ bp: bp-setup
2
3 smol:
4 curl https://pico.sh/smol.css -o ./static/smol.css
5- cat patches/smol.diff | git apply
6 .PHONY: smol
+0,
-625
1@@ -1,625 +0,0 @@
2-diff --git a/patches/smol.diff b/patches/smol.diff
3-index ae2df55..e69de29 100644
4---- a/patches/smol.diff
5-+++ b/patches/smol.diff
6-@@ -1,53 +0,0 @@
7--diff --git a/static/smol.css b/static/smol.css
8--index e9b59ec..9e9d925 100644
9----- a/static/smol.css
10--+++ b/static/smol.css
11--@@ -15,48 +15,6 @@
12-- box-shadow: none;
13-- }
14--
15---@media (prefers-color-scheme: light) {
16--- :root {
17--- --main-hue: 250;
18--- --white: #2e3f53;
19--- --white-light: #cfe0f4;
20--- --white-dark: #6c6a6a;
21--- --code: #52576f;
22--- --pre: #e1e7ee;
23--- --bg-color: #f4f4f4;
24--- --text-color: #24292f;
25--- --link-color: #005cc5;
26--- --visited: #6f42c1;
27--- --blockquote: #005cc5;
28--- --blockquote-bg: #cfe0f4;
29--- --hover: #c11e7a;
30--- --grey: #ccc;
31--- --grey-light: #6a708e;
32--- --shadow: #e8e8e8;
33--- }
34---}
35---
36---@media (prefers-color-scheme: dark) {
37--- :root {
38--- --main-hue: 250;
39--- --white: #f2f2f2;
40--- --white-light: #f2f2f2;
41--- --white-dark: #e8e8e8;
42--- --code: #414558;
43--- --pre: #252525;
44--- --bg-color: #282a36;
45--- --text-color: #f2f2f2;
46--- --link-color: #8be9fd;
47--- --visited: #bd93f9;
48--- --blockquote: #bd93f9;
49--- --blockquote-bg: #353548;
50--- --hover: #ff80bf;
51--- --grey: #414558;
52--- --grey-light: #6a708e;
53--- --shadow: #252525;
54--- }
55---}
56---
57-- html {
58-- background-color: var(--bg-color);
59-- color: var(--text-color);
60-diff --git a/static/smol.css b/static/smol.css
61-index 9e9d925..2ea9e0d 100644
62---- a/static/smol.css
63-+++ b/static/smol.css
64-@@ -15,11 +15,16 @@
65- box-shadow: none;
66- }
67-
68-+:root {
69-+ --line-height: 1.3rem;
70-+ --grid-height: 0.65rem;
71-+}
72-+
73- html {
74- background-color: var(--bg-color);
75- color: var(--text-color);
76-- font-size: 18px;
77-- line-height: 1.5;
78-+ font-size: 16px;
79-+ line-height: var(--line-height);
80- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
81- Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
82- sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
83-@@ -47,8 +52,7 @@ code,
84- kbd,
85- samp,
86- pre {
87-- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
88-- monospace;
89-+ font-family: monospace;
90- }
91-
92- code,
93-@@ -61,19 +65,19 @@ pre > code {
94- background-color: inherit;
95- padding: 0;
96- border: none;
97-+ border-radius: 0;
98- }
99-
100- code {
101- font-size: 90%;
102- border-radius: 0.3rem;
103-- padding: 0.1rem 0.3rem;
104-+ padding: 0.025rem 0.3rem;
105- }
106-
107- pre {
108-- font-size: 14px;
109-- border-radius: 5px;
110-- padding: 1rem;
111-- margin: 1rem 0;
112-+ font-size: 0.8rem;
113-+ border-radius: 1px;
114-+ padding: var(--line-height);
115- overflow-x: auto;
116- background-color: var(--pre) !important;
117- }
118-@@ -92,7 +96,7 @@ h2,
119- h3,
120- h4 {
121- margin: 0;
122-- padding: 0.5rem 0 0 0;
123-+ padding: 0;
124- border: 0;
125- font-style: normal;
126- font-weight: inherit;
127-@@ -107,11 +111,9 @@ path {
128- hr {
129- color: inherit;
130- border: 0;
131-- margin: 0;
132- height: 2px;
133- background: var(--grey);
134-- margin: 1rem auto;
135-- text-align: center;
136-+ margin: calc(var(--grid-height) - 2px) auto;
137- }
138-
139- a {
140-@@ -122,22 +124,12 @@ a {
141- a:hover,
142- a:visited:hover {
143- text-decoration: underline;
144-- color: var(--hover);
145- }
146-
147- a:visited {
148- color: var(--visited);
149- }
150-
151--a.link-grey {
152-- text-decoration: underline;
153-- color: var(--white);
154--}
155--
156--a.link-grey:visited {
157-- color: var(--white);
158--}
159--
160- section {
161- margin-bottom: 1.4rem;
162- }
163-@@ -151,7 +143,8 @@ header {
164- }
165-
166- p {
167-- margin: 0.5rem 0;
168-+ margin-top: var(--line-height);
169-+ margin-bottom: var(--line-height);
170- }
171-
172- article {
173-@@ -161,8 +154,8 @@ article {
174- blockquote {
175- border-left: 5px solid var(--blockquote);
176- background-color: var(--blockquote-bg);
177-- padding: 0.5rem 0.75rem;
178-- margin: 0.5rem 0;
179-+ padding: var(--grid-height);
180-+ margin: var(--line-height) 0;
181- }
182-
183- blockquote > p {
184-@@ -175,8 +168,10 @@ blockquote code {
185-
186- ul,
187- ol {
188-- padding: 0 0 0 1rem;
189-- list-style-position: outside;
190-+ padding: 0 0 0 var(--line-height);
191-+ list-style-position: inside;
192-+ list-style-type: square;
193-+ margin: 0;
194- }
195-
196- ul[style*="list-style-type: none;"] {
197-@@ -184,7 +179,12 @@ ul[style*="list-style-type: none;"] {
198- }
199-
200- li {
201-- margin: 0.5rem 0;
202-+ margin: 0;
203-+ padding: 0;
204-+}
205-+
206-+li::marker {
207-+ line-height: 0;
208- }
209-
210- li > pre {
211-@@ -193,7 +193,7 @@ li > pre {
212-
213- footer {
214- text-align: center;
215-- margin-bottom: 4rem;
216-+ margin-bottom: calc(var(--line-height) * 3);
217- }
218-
219- dt {
220-@@ -212,6 +212,10 @@ figure {
221- margin: 0;
222- }
223-
224-+#toc {
225-+ margin-top: var(--line-height);
226-+}
227-+
228- .container {
229- max-width: 50em;
230- width: 100%;
231-@@ -230,21 +234,7 @@ figure {
232- }
233-
234- .mono {
235-- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
236-- monospace;
237--}
238--
239--.link-alt-adj,
240--.link-alt-adj:visited,
241--.link-alt-adj:visited:hover,
242--.link-alt-adj:hover {
243-- color: var(--link-color);
244-- text-decoration: none;
245--}
246--
247--.link-alt-adj:visited:hover,
248--.link-alt-adj:hover {
249-- text-decoration: underline;
250-+ font-family: monospace;
251- }
252-
253- .link-alt-hover,
254-@@ -273,36 +263,28 @@ figure {
255- text-decoration: underline;
256- }
257-
258--.text-3xl {
259-- font-size: 2.5rem;
260-+.text-2xl code, .text-xl code, .text-lg code, .text-md code {
261-+ text-transform: none;
262- }
263-
264- .text-2xl {
265-- font-size: 1.9rem;
266-- line-height: 1.15;
267--}
268--
269--.text-xl {
270-- font-size: 1.55rem;
271-- line-height: 1.15;
272--}
273--
274--.text-lg {
275-- font-size: 1.35rem;
276-- line-height: 1.15;
277-+ font-size: var(--line-height);
278-+ font-weight: bold;
279-+ line-height: var(--line-height);
280-+ margin-bottom: var(--grid-height);
281-+ text-transform: uppercase;
282- }
283-
284--.text-md {
285-- font-size: 1.15rem;
286-- line-height: 1.15;
287-+.text-xl, .text-lg, .text-md {
288-+ font-size: 1rem;
289-+ font-weight: bold;
290-+ line-height: var(--line-height);
291-+ margin-bottom: var(--grid-height);
292-+ text-transform: uppercase;
293- }
294-
295- .text-sm {
296-- font-size: 0.875rem;
297--}
298--
299--.text-xs {
300-- font-size: 0.775rem;
301-+ font-size: 0.8rem;
302- }
303-
304- .cursor-pointer {
305-@@ -330,19 +312,14 @@ figure {
306- }
307-
308- .text-underline {
309-- border-bottom: 3px solid var(--text-color);
310-- padding-bottom: 3px;
311-+ text-decoration: underline;
312-+ text-decoration-thickness: 2px;
313- }
314-
315- .text-hdr {
316- color: var(--hover);
317- }
318-
319--.text-underline-hdr {
320-- border-bottom: 3px solid var(--hover);
321-- padding-bottom: 3px;
322--}
323--
324- .font-bold {
325- font-weight: bold;
326- }
327-@@ -387,40 +364,32 @@ figure {
328- margin: 0;
329- }
330-
331-+.mt-0 {
332-+ margin-top: 0;
333-+}
334-+
335- .mt {
336-- margin-top: 0.5rem;
337-+ margin-top: var(--grid-height);
338- }
339-
340- .mt-2 {
341-- margin-top: 1rem;
342-+ margin-top: var(--line-height);
343- }
344-
345- .mt-4 {
346-- margin-top: 2rem;
347--}
348--
349--.mt-8 {
350-- margin-top: 4rem;
351-+ margin-top: calc(var(--line-height) * 2);
352- }
353-
354- .mb {
355-- margin-bottom: 0.5rem;
356-+ margin-bottom: var(--grid-height);
357- }
358-
359- .mb-2 {
360-- margin-bottom: 1rem;
361-+ margin-bottom: var(--line-height);
362- }
363-
364- .mb-4 {
365-- margin-bottom: 2rem;
366--}
367--
368--.mb-8 {
369-- margin-bottom: 4rem;
370--}
371--
372--.mb-16 {
373-- margin-bottom: 8rem;
374-+ margin-bottom: calc(var(--line-height) * 2);
375- }
376-
377- .mr {
378-@@ -440,23 +409,18 @@ figure {
379- }
380-
381- .my {
382-- margin-top: 0.5rem;
383-- margin-bottom: 0.5rem;
384-+ margin-top: var(--grid-height);
385-+ margin-bottom: var(--grid-height);
386- }
387-
388- .my-2 {
389-- margin-top: 1rem;
390-- margin-bottom: 1rem;
391-+ margin-top: var(--line-height);
392-+ margin-bottom: var(--line-height);
393- }
394-
395- .my-4 {
396-- margin-top: 2rem;
397-- margin-bottom: 2rem;
398--}
399--
400--.my-8 {
401-- margin-top: 4rem;
402-- margin-bottom: 4rem;
403-+ margin-top: calc(var(--line-height) * 2);
404-+ margin-bottom: calc(var(--line-height) * 2);
405- }
406-
407- .mx {
408-@@ -470,11 +434,11 @@ figure {
409- }
410-
411- .m-1 {
412-- margin: 0.5rem;
413-+ margin: var(--grid-height);
414- }
415-
416- .p-1 {
417-- padding: 0.5rem;
418-+ padding: var(--grid-height);
419- }
420-
421- .p-0 {
422-@@ -492,23 +456,18 @@ figure {
423- }
424-
425- .py {
426-- padding-top: 0.5rem;
427-- padding-bottom: 0.5rem;
428-+ padding-top: var(--grid-height);
429-+ padding-bottom: var(--grid-height);
430- }
431-
432- .py-2 {
433-- padding-top: 1rem;
434-- padding-bottom: 1rem;
435-+ padding-top: var(--line-height);
436-+ padding-bottom: var(--line-height);
437- }
438-
439- .py-4 {
440-- padding-top: 2rem;
441-- padding-bottom: 2rem;
442--}
443--
444--.py-8 {
445-- padding-top: 4rem;
446-- padding-bottom: 4rem;
447-+ padding-top: calc(var(--line-height) * 2);
448-+ padding-bottom: calc(var(--line-height) * 2);
449- }
450-
451- .justify-between {
452-@@ -520,28 +479,28 @@ figure {
453- }
454-
455- .gap {
456-- gap: 0.5rem;
457-+ gap: var(--grid-height);
458- }
459-
460- .gap-2 {
461-- gap: 1rem;
462-+ gap: var(--line-height);
463- }
464-
465- .group {
466- display: flex;
467- flex-direction: column;
468-- gap: 0.5rem;
469-+ gap: var(--grid-height);
470- }
471-
472- .group-2 {
473- display: flex;
474- flex-direction: column;
475-- gap: 1rem;
476-+ gap: var(--line-height);
477- }
478-
479- .group-h {
480- display: flex;
481-- gap: 0.5rem;
482-+ gap: var(--grid-height);
483- align-items: center;
484- }
485-
486-@@ -580,7 +539,8 @@ figure {
487- .md h3,
488- .md h4 {
489- padding: 0;
490-- margin: 1.5rem 0 0.9rem 0;
491-+ margin: 0;
492-+ /* margin: 1.5rem 0 0.9rem 0; */
493- font-weight: bold;
494- }
495-
496-@@ -592,26 +552,24 @@ figure {
497- text-decoration: none;
498- }
499-
500--.md h1 {
501-- font-size: 1.6rem;
502-- line-height: 1.15;
503-- border-bottom: 2px solid var(--grey);
504-- padding-bottom: 0.7rem;
505--}
506--
507--.md h2 {
508-- font-size: 1.3rem;
509-- line-height: 1.15;
510-- color: var(--white-dark);
511-+h1 code, h2 code, h3 code, h4 code {
512-+ text-transform: none;
513- }
514-
515--.md h3 {
516-- font-size: 1.2rem;
517-- color: var(--white-dark);
518-+.md h1 {
519-+ font-size: 1rem;
520-+ line-height: var(--line-height);
521-+ margin-top: calc(var(--line-height) * 2);
522-+ margin-bottom: var(--grid-height);
523-+ text-transform: uppercase;
524- }
525-
526--.md h4 {
527-+.md h2, .md h3, .md h4 {
528- font-size: 1rem;
529-+ line-height: var(--line-height);
530-+ margin-top: calc(var(--line-height) * 2);
531-+ margin-bottom: var(--line-height);
532-+ text-transform: uppercase;
533- color: var(--white-dark);
534- }
535-
536-@@ -627,8 +585,8 @@ figure {
537- border: 3px solid #FF79C6;
538- padding: 8px 10px 10px 10px;
539- border-radius: 10px;
540-- box-shadow: 0px 5px 0px 0px var(--shadow);
541- background-size: 100%;
542-+ margin: 0:
543- -webkit-background-clip: text;
544- -moz-background-clip: text;
545- -webkit-text-fill-color: transparent;
546-@@ -647,47 +605,40 @@ figure {
547- .btn-link:visited {
548- border: 2px solid var(--link-color);
549- color: var(--link-color);
550-- padding: 0.4rem 1rem;
551-+ padding: var(--grid-height) 1rem;
552- text-decoration: none;
553- font-weight: bold;
554- display: inline-block;
555- }
556-
557--.btn-link:visited:hover,
558--.btn-link:hover {
559-- border: 2px solid var(--hover);
560--}
561--
562--.btn-link-alt,
563--.btn-link-alt:visited {
564-- border: 2px solid var(--white);
565-- color: var(--white);
566--}
567--
568- .box {
569- border: 2px solid var(--grey-light);
570-- padding: 0.5rem 0.75rem;
571-+ padding: var(--line-height);
572- }
573-
574- .box-sm {
575- border: 2px solid var(--grey-light);
576-- padding: 0.15rem 0.35rem;
577-+ padding: var(--grid-height);
578- }
579-
580- .box-alert {
581- border: 2px solid var(--hover);
582-- padding: 0.5rem 0.75rem;
583-+ padding: var(--line-height);
584- }
585-
586- .box-sm-alert {
587- border: 2px solid var(--hover);
588-- padding: 0.15rem 0.35rem;
589-+ padding: var(--grid-height);
590- }
591-
592- .list-none {
593- list-style-type: none;
594- }
595-
596-+.list-square {
597-+ list-style-type: square;
598-+}
599-+
600- .list-disc {
601- list-style-type: disc;
602- }
603-@@ -724,3 +675,23 @@ figure {
604- flex-direction: column;
605- }
606- }
607-+
608-+#debug {
609-+ position: relative;
610-+}
611-+
612-+#debug .debug-grid {
613-+ width: 100%;
614-+ height: 100%;
615-+ position: absolute;
616-+ top: 0;
617-+ left: 0;
618-+ right: 0;
619-+ bottom: 0;
620-+ z-index: -1;
621-+ background-image:
622-+ repeating-linear-gradient(var(--code) 0 1px, transparent 1px 100%),
623-+ repeating-linear-gradient(90deg, var(--code) 0 1px, transparent 1px 100%);
624-+ background-size: 1ch var(--grid-height);
625-+ margin: 0;
626-+}
+6,
-6
1@@ -88,12 +88,12 @@ small {
2
3 details {
4 border: 2px solid var(--grey-light);
5- padding: calc(var(--line-height) - 2px) 1ch;
6- margin-bottom: var(--line-height);
7+ padding: calc(var(--grid-height) - 2px) 1ch;
8+ margin-bottom: var(--grid-height);
9 }
10
11 details[open] summary {
12- margin-bottom: var(--line-height);
13+ margin-bottom: var(--grid-height);
14 }
15
16 summary {
17@@ -601,7 +601,7 @@ h1 code, h2 code, h3 code, h4 code {
18 padding: 8px 10px 10px 10px;
19 border-radius: 10px;
20 background-size: 100%;
21- margin: 0:
22+ margin: 0;
23 -webkit-background-clip: text;
24 -moz-background-clip: text;
25 -webkit-text-fill-color: transparent;
26@@ -620,7 +620,7 @@ h1 code, h2 code, h3 code, h4 code {
27 .btn-link:visited {
28 border: 2px solid var(--link-color);
29 color: var(--link-color);
30- padding: var(--grid-height) 1rem;
31+ padding: var(--grid-height);
32 text-decoration: none;
33 font-weight: bold;
34 display: inline-block;
35@@ -628,7 +628,7 @@ h1 code, h2 code, h3 code, h4 code {
36
37 .box {
38 border: 2px solid var(--grey-light);
39- padding: var(--line-height);
40+ padding: var(--grid-height);
41 }
42
43 .box-sm {