Logs
erockmKua
created pr with ps-41
on erockmKua
changed status
on {"status":"closed"}
Patchsets
Diff ↕
style(prose): update smol.css
Eric Bower <me@erock.io>
pastes/public/smol.css | 298 +++++++++++++-------------- prose/html/blog-aside.partial.tmpl | 6 +- prose/html/blog-default.partial.tmpl | 8 +- prose/html/post.page.tmpl | 6 +- prose/public/main.css | 4 + prose/public/smol.css | 298 +++++++++++++-------------- 6 files changed, 295 insertions(+), 325 deletions(-)
1From feaf5f98c1ac934d67f83eab51efd6525d46890c Mon Sep 17 00:00:00 2001
2From: Eric Bower <me@erock.io>
3Date: Mon, 2 Sep 2024 22:14:52 -0400
4Subject: [PATCH] style(prose): update smol.css
5
6---
7 pastes/public/smol.css | 298 +++++++++++++--------------
8 prose/html/blog-aside.partial.tmpl | 6 +-
9 prose/html/blog-default.partial.tmpl | 8 +-
10 prose/html/post.page.tmpl | 6 +-
11 prose/public/main.css | 4 +
12 prose/public/smol.css | 298 +++++++++++++--------------
13 6 files changed, 295 insertions(+), 325 deletions(-)
14
15diff --git a/pastes/public/smol.css b/pastes/public/smol.css
16index e9b59ec..37fa0ed 100644
17--- a/pastes/public/smol.css
18+++ b/pastes/public/smol.css
19@@ -15,9 +15,13 @@
20 box-shadow: none;
21 }
22
23+:root {
24+ --line-height: 1.3rem;
25+ --grid-height: 0.65rem;
26+}
27+
28 @media (prefers-color-scheme: light) {
29 :root {
30- --main-hue: 250;
31 --white: #2e3f53;
32 --white-light: #cfe0f4;
33 --white-dark: #6c6a6a;
34@@ -32,13 +36,11 @@
35 --hover: #c11e7a;
36 --grey: #ccc;
37 --grey-light: #6a708e;
38- --shadow: #e8e8e8;
39 }
40 }
41
42 @media (prefers-color-scheme: dark) {
43 :root {
44- --main-hue: 250;
45 --white: #f2f2f2;
46 --white-light: #f2f2f2;
47 --white-dark: #e8e8e8;
48@@ -53,15 +55,14 @@
49 --hover: #ff80bf;
50 --grey: #414558;
51 --grey-light: #6a708e;
52- --shadow: #252525;
53 }
54 }
55
56 html {
57 background-color: var(--bg-color);
58 color: var(--text-color);
59- font-size: 18px;
60- line-height: 1.5;
61+ font-size: 16px;
62+ line-height: var(--line-height);
63 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
64 Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
65 sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
66@@ -89,8 +90,7 @@ code,
67 kbd,
68 samp,
69 pre {
70- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
71- monospace;
72+ font-family: monospace;
73 }
74
75 code,
76@@ -103,19 +103,19 @@ pre > code {
77 background-color: inherit;
78 padding: 0;
79 border: none;
80+ border-radius: 0;
81 }
82
83 code {
84 font-size: 90%;
85 border-radius: 0.3rem;
86- padding: 0.1rem 0.3rem;
87+ padding: 0.025rem 0.3rem;
88 }
89
90 pre {
91- font-size: 14px;
92- border-radius: 5px;
93- padding: 1rem;
94- margin: 1rem 0;
95+ font-size: 0.8rem;
96+ border-radius: 1px;
97+ padding: var(--line-height);
98 overflow-x: auto;
99 background-color: var(--pre) !important;
100 }
101@@ -124,6 +124,16 @@ small {
102 font-size: 0.8rem;
103 }
104
105+details {
106+ border: 2px solid var(--grey-light);
107+ padding: calc(var(--line-height) - 2px) 1ch;
108+ margin-bottom: var(--line-height);
109+}
110+
111+details[open] summary {
112+ margin-bottom: var(--line-height);
113+}
114+
115 summary {
116 display: list-item;
117 cursor: pointer;
118@@ -134,7 +144,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@@ -149,11 +159,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@@ -164,22 +172,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@@ -193,7 +191,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@@ -203,8 +202,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@@ -217,16 +216,28 @@ 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: var(--line-height) 0;
194 }
195
196 ul[style*="list-style-type: none;"] {
197 padding: 0;
198 }
199
200+ol ul, ol ol, ul ol, ul ul {
201+ padding: 0 0 0 3ch;
202+ margin: 0;
203+}
204+
205 li {
206- margin: 0.5rem 0;
207+ margin: 0;
208+ padding: 0;
209+}
210+
211+li::marker {
212+ line-height: 0;
213 }
214
215 li > pre {
216@@ -235,7 +246,7 @@ li > pre {
217
218 footer {
219 text-align: center;
220- margin-bottom: 4rem;
221+ margin-bottom: calc(var(--line-height) * 3);
222 }
223
224 dt {
225@@ -254,6 +265,10 @@ figure {
226 margin: 0;
227 }
228
229+#toc {
230+ margin-top: var(--line-height);
231+}
232+
233 .container {
234 max-width: 50em;
235 width: 100%;
236@@ -272,21 +287,7 @@ figure {
237 }
238
239 .mono {
240- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
241- monospace;
242-}
243-
244-.link-alt-adj,
245-.link-alt-adj:visited,
246-.link-alt-adj:visited:hover,
247-.link-alt-adj:hover {
248- color: var(--link-color);
249- text-decoration: none;
250-}
251-
252-.link-alt-adj:visited:hover,
253-.link-alt-adj:hover {
254- text-decoration: underline;
255+ font-family: monospace;
256 }
257
258 .link-alt-hover,
259@@ -315,36 +316,28 @@ figure {
260 text-decoration: underline;
261 }
262
263-.text-3xl {
264- font-size: 2.5rem;
265+.text-2xl code, .text-xl code, .text-lg code, .text-md code {
266+ text-transform: none;
267 }
268
269 .text-2xl {
270- font-size: 1.9rem;
271- line-height: 1.15;
272-}
273-
274-.text-xl {
275- font-size: 1.55rem;
276- line-height: 1.15;
277-}
278-
279-.text-lg {
280- font-size: 1.35rem;
281- line-height: 1.15;
282+ font-size: var(--line-height);
283+ font-weight: bold;
284+ line-height: var(--line-height);
285+ margin-bottom: var(--grid-height);
286+ text-transform: uppercase;
287 }
288
289-.text-md {
290- font-size: 1.15rem;
291- line-height: 1.15;
292+.text-xl, .text-lg, .text-md {
293+ font-size: 1rem;
294+ font-weight: bold;
295+ line-height: var(--line-height);
296+ margin-bottom: var(--grid-height);
297+ text-transform: uppercase;
298 }
299
300 .text-sm {
301- font-size: 0.875rem;
302-}
303-
304-.text-xs {
305- font-size: 0.775rem;
306+ font-size: 0.8rem;
307 }
308
309 .cursor-pointer {
310@@ -372,19 +365,14 @@ figure {
311 }
312
313 .text-underline {
314- border-bottom: 3px solid var(--text-color);
315- padding-bottom: 3px;
316+ text-decoration: underline;
317+ text-decoration-thickness: 2px;
318 }
319
320 .text-hdr {
321 color: var(--hover);
322 }
323
324-.text-underline-hdr {
325- border-bottom: 3px solid var(--hover);
326- padding-bottom: 3px;
327-}
328-
329 .font-bold {
330 font-weight: bold;
331 }
332@@ -429,40 +417,32 @@ figure {
333 margin: 0;
334 }
335
336+.mt-0 {
337+ margin-top: 0;
338+}
339+
340 .mt {
341- margin-top: 0.5rem;
342+ margin-top: var(--grid-height);
343 }
344
345 .mt-2 {
346- margin-top: 1rem;
347+ margin-top: var(--line-height);
348 }
349
350 .mt-4 {
351- margin-top: 2rem;
352-}
353-
354-.mt-8 {
355- margin-top: 4rem;
356+ margin-top: calc(var(--line-height) * 2);
357 }
358
359 .mb {
360- margin-bottom: 0.5rem;
361+ margin-bottom: var(--grid-height);
362 }
363
364 .mb-2 {
365- margin-bottom: 1rem;
366+ margin-bottom: var(--line-height);
367 }
368
369 .mb-4 {
370- margin-bottom: 2rem;
371-}
372-
373-.mb-8 {
374- margin-bottom: 4rem;
375-}
376-
377-.mb-16 {
378- margin-bottom: 8rem;
379+ margin-bottom: calc(var(--line-height) * 2);
380 }
381
382 .mr {
383@@ -482,23 +462,18 @@ figure {
384 }
385
386 .my {
387- margin-top: 0.5rem;
388- margin-bottom: 0.5rem;
389+ margin-top: var(--grid-height);
390+ margin-bottom: var(--grid-height);
391 }
392
393 .my-2 {
394- margin-top: 1rem;
395- margin-bottom: 1rem;
396+ margin-top: var(--line-height);
397+ margin-bottom: var(--line-height);
398 }
399
400 .my-4 {
401- margin-top: 2rem;
402- margin-bottom: 2rem;
403-}
404-
405-.my-8 {
406- margin-top: 4rem;
407- margin-bottom: 4rem;
408+ margin-top: calc(var(--line-height) * 2);
409+ margin-bottom: calc(var(--line-height) * 2);
410 }
411
412 .mx {
413@@ -512,11 +487,11 @@ figure {
414 }
415
416 .m-1 {
417- margin: 0.5rem;
418+ margin: var(--grid-height);
419 }
420
421 .p-1 {
422- padding: 0.5rem;
423+ padding: var(--grid-height);
424 }
425
426 .p-0 {
427@@ -534,23 +509,18 @@ figure {
428 }
429
430 .py {
431- padding-top: 0.5rem;
432- padding-bottom: 0.5rem;
433+ padding-top: var(--grid-height);
434+ padding-bottom: var(--grid-height);
435 }
436
437 .py-2 {
438- padding-top: 1rem;
439- padding-bottom: 1rem;
440+ padding-top: var(--line-height);
441+ padding-bottom: var(--line-height);
442 }
443
444 .py-4 {
445- padding-top: 2rem;
446- padding-bottom: 2rem;
447-}
448-
449-.py-8 {
450- padding-top: 4rem;
451- padding-bottom: 4rem;
452+ padding-top: calc(var(--line-height) * 2);
453+ padding-bottom: calc(var(--line-height) * 2);
454 }
455
456 .justify-between {
457@@ -562,28 +532,28 @@ figure {
458 }
459
460 .gap {
461- gap: 0.5rem;
462+ gap: var(--grid-height);
463 }
464
465 .gap-2 {
466- gap: 1rem;
467+ gap: var(--line-height);
468 }
469
470 .group {
471 display: flex;
472 flex-direction: column;
473- gap: 0.5rem;
474+ gap: var(--grid-height);
475 }
476
477 .group-2 {
478 display: flex;
479 flex-direction: column;
480- gap: 1rem;
481+ gap: var(--line-height);
482 }
483
484 .group-h {
485 display: flex;
486- gap: 0.5rem;
487+ gap: var(--grid-height);
488 align-items: center;
489 }
490
491@@ -622,7 +592,8 @@ figure {
492 .md h3,
493 .md h4 {
494 padding: 0;
495- margin: 1.5rem 0 0.9rem 0;
496+ margin: 0;
497+ /* margin: 1.5rem 0 0.9rem 0; */
498 font-weight: bold;
499 }
500
501@@ -634,26 +605,24 @@ figure {
502 text-decoration: none;
503 }
504
505-.md h1 {
506- font-size: 1.6rem;
507- line-height: 1.15;
508- border-bottom: 2px solid var(--grey);
509- padding-bottom: 0.7rem;
510-}
511-
512-.md h2 {
513- font-size: 1.3rem;
514- line-height: 1.15;
515- color: var(--white-dark);
516+h1 code, h2 code, h3 code, h4 code {
517+ text-transform: none;
518 }
519
520-.md h3 {
521- font-size: 1.2rem;
522- color: var(--white-dark);
523+.md h1 {
524+ font-size: 1rem;
525+ line-height: var(--line-height);
526+ margin-top: calc(var(--line-height) * 2);
527+ margin-bottom: var(--grid-height);
528+ text-transform: uppercase;
529 }
530
531-.md h4 {
532+.md h2, .md h3, .md h4 {
533 font-size: 1rem;
534+ line-height: var(--line-height);
535+ margin-top: calc(var(--line-height) * 2);
536+ margin-bottom: var(--line-height);
537+ text-transform: uppercase;
538 color: var(--white-dark);
539 }
540
541@@ -669,8 +638,8 @@ figure {
542 border: 3px solid #FF79C6;
543 padding: 8px 10px 10px 10px;
544 border-radius: 10px;
545- box-shadow: 0px 5px 0px 0px var(--shadow);
546 background-size: 100%;
547+ margin: 0:
548 -webkit-background-clip: text;
549 -moz-background-clip: text;
550 -webkit-text-fill-color: transparent;
551@@ -689,47 +658,40 @@ figure {
552 .btn-link:visited {
553 border: 2px solid var(--link-color);
554 color: var(--link-color);
555- padding: 0.4rem 1rem;
556+ padding: var(--grid-height) 1rem;
557 text-decoration: none;
558 font-weight: bold;
559 display: inline-block;
560 }
561
562-.btn-link:visited:hover,
563-.btn-link:hover {
564- border: 2px solid var(--hover);
565-}
566-
567-.btn-link-alt,
568-.btn-link-alt:visited {
569- border: 2px solid var(--white);
570- color: var(--white);
571-}
572-
573 .box {
574 border: 2px solid var(--grey-light);
575- padding: 0.5rem 0.75rem;
576+ padding: var(--line-height);
577 }
578
579 .box-sm {
580 border: 2px solid var(--grey-light);
581- padding: 0.15rem 0.35rem;
582+ padding: var(--grid-height);
583 }
584
585 .box-alert {
586 border: 2px solid var(--hover);
587- padding: 0.5rem 0.75rem;
588+ padding: var(--line-height);
589 }
590
591 .box-sm-alert {
592 border: 2px solid var(--hover);
593- padding: 0.15rem 0.35rem;
594+ padding: var(--grid-height);
595 }
596
597 .list-none {
598 list-style-type: none;
599 }
600
601+.list-square {
602+ list-style-type: square;
603+}
604+
605 .list-disc {
606 list-style-type: disc;
607 }
608@@ -766,3 +728,23 @@ figure {
609 flex-direction: column;
610 }
611 }
612+
613+#debug {
614+ position: relative;
615+}
616+
617+#debug .debug-grid {
618+ width: 100%;
619+ height: 100%;
620+ position: absolute;
621+ top: 0;
622+ left: 0;
623+ right: 0;
624+ bottom: 0;
625+ z-index: -1;
626+ background-image:
627+ repeating-linear-gradient(var(--code) 0 1px, transparent 1px 100%),
628+ repeating-linear-gradient(90deg, var(--code) 0 1px, transparent 1px 100%);
629+ background-size: 1ch var(--grid-height);
630+ margin: 0;
631+}
632diff --git a/prose/html/blog-aside.partial.tmpl b/prose/html/blog-aside.partial.tmpl
633index b7b48b8..095700f 100644
634--- a/prose/html/blog-aside.partial.tmpl
635+++ b/prose/html/blog-aside.partial.tmpl
636@@ -2,7 +2,7 @@
637 <main class="flex">
638 <section class="flex-1 mr">
639 <div>
640- <h1 class="text-2xl font-bold">{{.Header.Title}}</h1>
641+ <h1 class="text-2xl font-bold mt-2">{{.Header.Title}}</h1>
642 {{if .Header.Bio}}<span>{{.Header.Bio}}</span>{{end}}
643 </div>
644
645@@ -25,12 +25,12 @@
646 <a href={{.URL}}>clear filters</a>
647 {{end}}
648
649- <div class="posts group mt">
650+ <div class="posts group mt-2">
651 {{range .Posts}}
652 <article>
653 <div class="flex items-center">
654 <time datetime="{{.PublishAtISO}}" class="text-sm post-date">{{.PublishAt}}</time>
655- <span class="text-md flex-1"><a href="{{.URL}}">{{.Title}}</a></span>
656+ <span class="text-md flex-1 m-0"><a href="{{.URL}}">{{.Title}}</a></span>
657 </div>
658 </article>
659 {{end}}
660diff --git a/prose/html/blog-default.partial.tmpl b/prose/html/blog-default.partial.tmpl
661index d6bb676..b32e451 100644
662--- a/prose/html/blog-default.partial.tmpl
663+++ b/prose/html/blog-default.partial.tmpl
664@@ -1,7 +1,7 @@
665 {{define "blog-default"}}
666 <header class="text-center">
667- <h1 class="text-2xl font-bold">{{.Header.Title}}</h1>
668- {{if .Header.Bio}}<p class="text-lg">{{.Header.Bio}}</p>{{end}}
669+ <h1 class="text-2xl font-bold mt-2">{{.Header.Title}}</h1>
670+ {{if .Header.Bio}}<span>{{.Header.Bio}}</span>{{end}}
671 <nav>
672 {{range .Header.Nav}}
673 <a href="{{.URL}}" class="text-lg">{{.Text}}</a> |
674@@ -20,7 +20,7 @@
675 </section>
676 {{end}}
677
678- <section class="posts group mt">
679+ <section class="posts group mt-2">
680 {{if .HasFilter}}
681 <a href={{.URL}}>clear filters</a>
682 {{end}}
683@@ -28,7 +28,7 @@
684 <article>
685 <div class="flex items-center">
686 <time datetime="{{.PublishAtISO}}" class="text-sm post-date">{{.PublishAt}}</time>
687- <span class="text-md flex-1"><a href="{{.URL}}">{{.Title}}</a></span>
688+ <span class="text-md flex-1 m-0"><a href="{{.URL}}">{{.Title}}</a></span>
689 </div>
690 </article>
691 {{end}}
692diff --git a/prose/html/post.page.tmpl b/prose/html/post.page.tmpl
693index e667978..58cce0e 100644
694--- a/prose/html/post.page.tmpl
695+++ b/prose/html/post.page.tmpl
696@@ -53,13 +53,15 @@
697 {{if .Unlisted}} <code>unlisted</code>{{end}}
698 <time datetime="{{.PublishAtISO}}">{{.PublishAt}}</time>
699 <span>·<span>
700- <a href="{{.BlogURL}}">{{.BlogName}}</a></p>
701- {{if .Description}}<blockquote class="font-italic">{{.Description}}</blockquote>{{end}}
702+ <a href="{{.BlogURL}}">{{.BlogName}}</a>
703+ </p>
704+ {{if .Description}}<blockquote>{{.Description}}</blockquote>{{end}}
705 <div class="tags">
706 {{range .Tags}}
707 <a class="tag" href="{{$.BlogURL}}?tag={{.}}">#{{.}}</a>
708 {{end}}
709 </div>
710+ <hr />
711 </header>
712 <main>
713 {{if .Diff}}
714diff --git a/prose/public/main.css b/prose/public/main.css
715index bbd09b0..478c1db 100644
716--- a/prose/public/main.css
717+++ b/prose/public/main.css
718@@ -12,6 +12,10 @@ table {
719 border-collapse: separate;
720 }
721
722+header blockquote {
723+ margin: var(--grid-height) 0;
724+}
725+
726 .post-date {
727 width: 110px;
728 }
729diff --git a/prose/public/smol.css b/prose/public/smol.css
730index e9b59ec..37fa0ed 100644
731--- a/prose/public/smol.css
732+++ b/prose/public/smol.css
733@@ -15,9 +15,13 @@
734 box-shadow: none;
735 }
736
737+:root {
738+ --line-height: 1.3rem;
739+ --grid-height: 0.65rem;
740+}
741+
742 @media (prefers-color-scheme: light) {
743 :root {
744- --main-hue: 250;
745 --white: #2e3f53;
746 --white-light: #cfe0f4;
747 --white-dark: #6c6a6a;
748@@ -32,13 +36,11 @@
749 --hover: #c11e7a;
750 --grey: #ccc;
751 --grey-light: #6a708e;
752- --shadow: #e8e8e8;
753 }
754 }
755
756 @media (prefers-color-scheme: dark) {
757 :root {
758- --main-hue: 250;
759 --white: #f2f2f2;
760 --white-light: #f2f2f2;
761 --white-dark: #e8e8e8;
762@@ -53,15 +55,14 @@
763 --hover: #ff80bf;
764 --grey: #414558;
765 --grey-light: #6a708e;
766- --shadow: #252525;
767 }
768 }
769
770 html {
771 background-color: var(--bg-color);
772 color: var(--text-color);
773- font-size: 18px;
774- line-height: 1.5;
775+ font-size: 16px;
776+ line-height: var(--line-height);
777 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
778 Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
779 sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
780@@ -89,8 +90,7 @@ code,
781 kbd,
782 samp,
783 pre {
784- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
785- monospace;
786+ font-family: monospace;
787 }
788
789 code,
790@@ -103,19 +103,19 @@ pre > code {
791 background-color: inherit;
792 padding: 0;
793 border: none;
794+ border-radius: 0;
795 }
796
797 code {
798 font-size: 90%;
799 border-radius: 0.3rem;
800- padding: 0.1rem 0.3rem;
801+ padding: 0.025rem 0.3rem;
802 }
803
804 pre {
805- font-size: 14px;
806- border-radius: 5px;
807- padding: 1rem;
808- margin: 1rem 0;
809+ font-size: 0.8rem;
810+ border-radius: 1px;
811+ padding: var(--line-height);
812 overflow-x: auto;
813 background-color: var(--pre) !important;
814 }
815@@ -124,6 +124,16 @@ small {
816 font-size: 0.8rem;
817 }
818
819+details {
820+ border: 2px solid var(--grey-light);
821+ padding: calc(var(--line-height) - 2px) 1ch;
822+ margin-bottom: var(--line-height);
823+}
824+
825+details[open] summary {
826+ margin-bottom: var(--line-height);
827+}
828+
829 summary {
830 display: list-item;
831 cursor: pointer;
832@@ -134,7 +144,7 @@ h2,
833 h3,
834 h4 {
835 margin: 0;
836- padding: 0.5rem 0 0 0;
837+ padding: 0;
838 border: 0;
839 font-style: normal;
840 font-weight: inherit;
841@@ -149,11 +159,9 @@ path {
842 hr {
843 color: inherit;
844 border: 0;
845- margin: 0;
846 height: 2px;
847 background: var(--grey);
848- margin: 1rem auto;
849- text-align: center;
850+ margin: calc(var(--grid-height) - 2px) auto;
851 }
852
853 a {
854@@ -164,22 +172,12 @@ a {
855 a:hover,
856 a:visited:hover {
857 text-decoration: underline;
858- color: var(--hover);
859 }
860
861 a:visited {
862 color: var(--visited);
863 }
864
865-a.link-grey {
866- text-decoration: underline;
867- color: var(--white);
868-}
869-
870-a.link-grey:visited {
871- color: var(--white);
872-}
873-
874 section {
875 margin-bottom: 1.4rem;
876 }
877@@ -193,7 +191,8 @@ header {
878 }
879
880 p {
881- margin: 0.5rem 0;
882+ margin-top: var(--line-height);
883+ margin-bottom: var(--line-height);
884 }
885
886 article {
887@@ -203,8 +202,8 @@ article {
888 blockquote {
889 border-left: 5px solid var(--blockquote);
890 background-color: var(--blockquote-bg);
891- padding: 0.5rem 0.75rem;
892- margin: 0.5rem 0;
893+ padding: var(--grid-height);
894+ margin: var(--line-height) 0;
895 }
896
897 blockquote > p {
898@@ -217,16 +216,28 @@ blockquote code {
899
900 ul,
901 ol {
902- padding: 0 0 0 1rem;
903- list-style-position: outside;
904+ padding: 0 0 0 var(--line-height);
905+ list-style-position: inside;
906+ list-style-type: square;
907+ margin: var(--line-height) 0;
908 }
909
910 ul[style*="list-style-type: none;"] {
911 padding: 0;
912 }
913
914+ol ul, ol ol, ul ol, ul ul {
915+ padding: 0 0 0 3ch;
916+ margin: 0;
917+}
918+
919 li {
920- margin: 0.5rem 0;
921+ margin: 0;
922+ padding: 0;
923+}
924+
925+li::marker {
926+ line-height: 0;
927 }
928
929 li > pre {
930@@ -235,7 +246,7 @@ li > pre {
931
932 footer {
933 text-align: center;
934- margin-bottom: 4rem;
935+ margin-bottom: calc(var(--line-height) * 3);
936 }
937
938 dt {
939@@ -254,6 +265,10 @@ figure {
940 margin: 0;
941 }
942
943+#toc {
944+ margin-top: var(--line-height);
945+}
946+
947 .container {
948 max-width: 50em;
949 width: 100%;
950@@ -272,21 +287,7 @@ figure {
951 }
952
953 .mono {
954- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
955- monospace;
956-}
957-
958-.link-alt-adj,
959-.link-alt-adj:visited,
960-.link-alt-adj:visited:hover,
961-.link-alt-adj:hover {
962- color: var(--link-color);
963- text-decoration: none;
964-}
965-
966-.link-alt-adj:visited:hover,
967-.link-alt-adj:hover {
968- text-decoration: underline;
969+ font-family: monospace;
970 }
971
972 .link-alt-hover,
973@@ -315,36 +316,28 @@ figure {
974 text-decoration: underline;
975 }
976
977-.text-3xl {
978- font-size: 2.5rem;
979+.text-2xl code, .text-xl code, .text-lg code, .text-md code {
980+ text-transform: none;
981 }
982
983 .text-2xl {
984- font-size: 1.9rem;
985- line-height: 1.15;
986-}
987-
988-.text-xl {
989- font-size: 1.55rem;
990- line-height: 1.15;
991-}
992-
993-.text-lg {
994- font-size: 1.35rem;
995- line-height: 1.15;
996+ font-size: var(--line-height);
997+ font-weight: bold;
998+ line-height: var(--line-height);
999+ margin-bottom: var(--grid-height);
1000+ text-transform: uppercase;
1001 }
1002
1003-.text-md {
1004- font-size: 1.15rem;
1005- line-height: 1.15;
1006+.text-xl, .text-lg, .text-md {
1007+ font-size: 1rem;
1008+ font-weight: bold;
1009+ line-height: var(--line-height);
1010+ margin-bottom: var(--grid-height);
1011+ text-transform: uppercase;
1012 }
1013
1014 .text-sm {
1015- font-size: 0.875rem;
1016-}
1017-
1018-.text-xs {
1019- font-size: 0.775rem;
1020+ font-size: 0.8rem;
1021 }
1022
1023 .cursor-pointer {
1024@@ -372,19 +365,14 @@ figure {
1025 }
1026
1027 .text-underline {
1028- border-bottom: 3px solid var(--text-color);
1029- padding-bottom: 3px;
1030+ text-decoration: underline;
1031+ text-decoration-thickness: 2px;
1032 }
1033
1034 .text-hdr {
1035 color: var(--hover);
1036 }
1037
1038-.text-underline-hdr {
1039- border-bottom: 3px solid var(--hover);
1040- padding-bottom: 3px;
1041-}
1042-
1043 .font-bold {
1044 font-weight: bold;
1045 }
1046@@ -429,40 +417,32 @@ figure {
1047 margin: 0;
1048 }
1049
1050+.mt-0 {
1051+ margin-top: 0;
1052+}
1053+
1054 .mt {
1055- margin-top: 0.5rem;
1056+ margin-top: var(--grid-height);
1057 }
1058
1059 .mt-2 {
1060- margin-top: 1rem;
1061+ margin-top: var(--line-height);
1062 }
1063
1064 .mt-4 {
1065- margin-top: 2rem;
1066-}
1067-
1068-.mt-8 {
1069- margin-top: 4rem;
1070+ margin-top: calc(var(--line-height) * 2);
1071 }
1072
1073 .mb {
1074- margin-bottom: 0.5rem;
1075+ margin-bottom: var(--grid-height);
1076 }
1077
1078 .mb-2 {
1079- margin-bottom: 1rem;
1080+ margin-bottom: var(--line-height);
1081 }
1082
1083 .mb-4 {
1084- margin-bottom: 2rem;
1085-}
1086-
1087-.mb-8 {
1088- margin-bottom: 4rem;
1089-}
1090-
1091-.mb-16 {
1092- margin-bottom: 8rem;
1093+ margin-bottom: calc(var(--line-height) * 2);
1094 }
1095
1096 .mr {
1097@@ -482,23 +462,18 @@ figure {
1098 }
1099
1100 .my {
1101- margin-top: 0.5rem;
1102- margin-bottom: 0.5rem;
1103+ margin-top: var(--grid-height);
1104+ margin-bottom: var(--grid-height);
1105 }
1106
1107 .my-2 {
1108- margin-top: 1rem;
1109- margin-bottom: 1rem;
1110+ margin-top: var(--line-height);
1111+ margin-bottom: var(--line-height);
1112 }
1113
1114 .my-4 {
1115- margin-top: 2rem;
1116- margin-bottom: 2rem;
1117-}
1118-
1119-.my-8 {
1120- margin-top: 4rem;
1121- margin-bottom: 4rem;
1122+ margin-top: calc(var(--line-height) * 2);
1123+ margin-bottom: calc(var(--line-height) * 2);
1124 }
1125
1126 .mx {
1127@@ -512,11 +487,11 @@ figure {
1128 }
1129
1130 .m-1 {
1131- margin: 0.5rem;
1132+ margin: var(--grid-height);
1133 }
1134
1135 .p-1 {
1136- padding: 0.5rem;
1137+ padding: var(--grid-height);
1138 }
1139
1140 .p-0 {
1141@@ -534,23 +509,18 @@ figure {
1142 }
1143
1144 .py {
1145- padding-top: 0.5rem;
1146- padding-bottom: 0.5rem;
1147+ padding-top: var(--grid-height);
1148+ padding-bottom: var(--grid-height);
1149 }
1150
1151 .py-2 {
1152- padding-top: 1rem;
1153- padding-bottom: 1rem;
1154+ padding-top: var(--line-height);
1155+ padding-bottom: var(--line-height);
1156 }
1157
1158 .py-4 {
1159- padding-top: 2rem;
1160- padding-bottom: 2rem;
1161-}
1162-
1163-.py-8 {
1164- padding-top: 4rem;
1165- padding-bottom: 4rem;
1166+ padding-top: calc(var(--line-height) * 2);
1167+ padding-bottom: calc(var(--line-height) * 2);
1168 }
1169
1170 .justify-between {
1171@@ -562,28 +532,28 @@ figure {
1172 }
1173
1174 .gap {
1175- gap: 0.5rem;
1176+ gap: var(--grid-height);
1177 }
1178
1179 .gap-2 {
1180- gap: 1rem;
1181+ gap: var(--line-height);
1182 }
1183
1184 .group {
1185 display: flex;
1186 flex-direction: column;
1187- gap: 0.5rem;
1188+ gap: var(--grid-height);
1189 }
1190
1191 .group-2 {
1192 display: flex;
1193 flex-direction: column;
1194- gap: 1rem;
1195+ gap: var(--line-height);
1196 }
1197
1198 .group-h {
1199 display: flex;
1200- gap: 0.5rem;
1201+ gap: var(--grid-height);
1202 align-items: center;
1203 }
1204
1205@@ -622,7 +592,8 @@ figure {
1206 .md h3,
1207 .md h4 {
1208 padding: 0;
1209- margin: 1.5rem 0 0.9rem 0;
1210+ margin: 0;
1211+ /* margin: 1.5rem 0 0.9rem 0; */
1212 font-weight: bold;
1213 }
1214
1215@@ -634,26 +605,24 @@ figure {
1216 text-decoration: none;
1217 }
1218
1219-.md h1 {
1220- font-size: 1.6rem;
1221- line-height: 1.15;
1222- border-bottom: 2px solid var(--grey);
1223- padding-bottom: 0.7rem;
1224-}
1225-
1226-.md h2 {
1227- font-size: 1.3rem;
1228- line-height: 1.15;
1229- color: var(--white-dark);
1230+h1 code, h2 code, h3 code, h4 code {
1231+ text-transform: none;
1232 }
1233
1234-.md h3 {
1235- font-size: 1.2rem;
1236- color: var(--white-dark);
1237+.md h1 {
1238+ font-size: 1rem;
1239+ line-height: var(--line-height);
1240+ margin-top: calc(var(--line-height) * 2);
1241+ margin-bottom: var(--grid-height);
1242+ text-transform: uppercase;
1243 }
1244
1245-.md h4 {
1246+.md h2, .md h3, .md h4 {
1247 font-size: 1rem;
1248+ line-height: var(--line-height);
1249+ margin-top: calc(var(--line-height) * 2);
1250+ margin-bottom: var(--line-height);
1251+ text-transform: uppercase;
1252 color: var(--white-dark);
1253 }
1254
1255@@ -669,8 +638,8 @@ figure {
1256 border: 3px solid #FF79C6;
1257 padding: 8px 10px 10px 10px;
1258 border-radius: 10px;
1259- box-shadow: 0px 5px 0px 0px var(--shadow);
1260 background-size: 100%;
1261+ margin: 0:
1262 -webkit-background-clip: text;
1263 -moz-background-clip: text;
1264 -webkit-text-fill-color: transparent;
1265@@ -689,47 +658,40 @@ figure {
1266 .btn-link:visited {
1267 border: 2px solid var(--link-color);
1268 color: var(--link-color);
1269- padding: 0.4rem 1rem;
1270+ padding: var(--grid-height) 1rem;
1271 text-decoration: none;
1272 font-weight: bold;
1273 display: inline-block;
1274 }
1275
1276-.btn-link:visited:hover,
1277-.btn-link:hover {
1278- border: 2px solid var(--hover);
1279-}
1280-
1281-.btn-link-alt,
1282-.btn-link-alt:visited {
1283- border: 2px solid var(--white);
1284- color: var(--white);
1285-}
1286-
1287 .box {
1288 border: 2px solid var(--grey-light);
1289- padding: 0.5rem 0.75rem;
1290+ padding: var(--line-height);
1291 }
1292
1293 .box-sm {
1294 border: 2px solid var(--grey-light);
1295- padding: 0.15rem 0.35rem;
1296+ padding: var(--grid-height);
1297 }
1298
1299 .box-alert {
1300 border: 2px solid var(--hover);
1301- padding: 0.5rem 0.75rem;
1302+ padding: var(--line-height);
1303 }
1304
1305 .box-sm-alert {
1306 border: 2px solid var(--hover);
1307- padding: 0.15rem 0.35rem;
1308+ padding: var(--grid-height);
1309 }
1310
1311 .list-none {
1312 list-style-type: none;
1313 }
1314
1315+.list-square {
1316+ list-style-type: square;
1317+}
1318+
1319 .list-disc {
1320 list-style-type: disc;
1321 }
1322@@ -766,3 +728,23 @@ figure {
1323 flex-direction: column;
1324 }
1325 }
1326+
1327+#debug {
1328+ position: relative;
1329+}
1330+
1331+#debug .debug-grid {
1332+ width: 100%;
1333+ height: 100%;
1334+ position: absolute;
1335+ top: 0;
1336+ left: 0;
1337+ right: 0;
1338+ bottom: 0;
1339+ z-index: -1;
1340+ background-image:
1341+ repeating-linear-gradient(var(--code) 0 1px, transparent 1px 100%),
1342+ repeating-linear-gradient(90deg, var(--code) 0 1px, transparent 1px 100%);
1343+ background-size: 1ch var(--grid-height);
1344+ margin: 0;
1345+}
1346--
13472.45.2
1348
ps-41
by
erockmKua
on style(prose): update smol.css
Eric Bower <me@erock.io>
pastes/public/smol.css | 298 +++++++++++++-------------- prose/html/blog-aside.partial.tmpl | 6 +- prose/html/blog-default.partial.tmpl | 8 +- prose/html/post.page.tmpl | 6 +- prose/public/main.css | 4 + prose/public/smol.css | 298 +++++++++++++-------------- 6 files changed, 295 insertions(+), 325 deletions(-)
1From feaf5f98c1ac934d67f83eab51efd6525d46890c Mon Sep 17 00:00:00 2001
2From: Eric Bower <me@erock.io>
3Date: Mon, 2 Sep 2024 22:14:52 -0400
4Subject: [PATCH] style(prose): update smol.css
5
6---
7 pastes/public/smol.css | 298 +++++++++++++--------------
8 prose/html/blog-aside.partial.tmpl | 6 +-
9 prose/html/blog-default.partial.tmpl | 8 +-
10 prose/html/post.page.tmpl | 6 +-
11 prose/public/main.css | 4 +
12 prose/public/smol.css | 298 +++++++++++++--------------
13 6 files changed, 295 insertions(+), 325 deletions(-)
14
15diff --git a/pastes/public/smol.css b/pastes/public/smol.css
16index e9b59ec..37fa0ed 100644
17--- a/pastes/public/smol.css
18+++ b/pastes/public/smol.css
19@@ -15,9 +15,13 @@
20 box-shadow: none;
21 }
22
23+:root {
24+ --line-height: 1.3rem;
25+ --grid-height: 0.65rem;
26+}
27+
28 @media (prefers-color-scheme: light) {
29 :root {
30- --main-hue: 250;
31 --white: #2e3f53;
32 --white-light: #cfe0f4;
33 --white-dark: #6c6a6a;
34@@ -32,13 +36,11 @@
35 --hover: #c11e7a;
36 --grey: #ccc;
37 --grey-light: #6a708e;
38- --shadow: #e8e8e8;
39 }
40 }
41
42 @media (prefers-color-scheme: dark) {
43 :root {
44- --main-hue: 250;
45 --white: #f2f2f2;
46 --white-light: #f2f2f2;
47 --white-dark: #e8e8e8;
48@@ -53,15 +55,14 @@
49 --hover: #ff80bf;
50 --grey: #414558;
51 --grey-light: #6a708e;
52- --shadow: #252525;
53 }
54 }
55
56 html {
57 background-color: var(--bg-color);
58 color: var(--text-color);
59- font-size: 18px;
60- line-height: 1.5;
61+ font-size: 16px;
62+ line-height: var(--line-height);
63 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
64 Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
65 sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
66@@ -89,8 +90,7 @@ code,
67 kbd,
68 samp,
69 pre {
70- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
71- monospace;
72+ font-family: monospace;
73 }
74
75 code,
76@@ -103,19 +103,19 @@ pre > code {
77 background-color: inherit;
78 padding: 0;
79 border: none;
80+ border-radius: 0;
81 }
82
83 code {
84 font-size: 90%;
85 border-radius: 0.3rem;
86- padding: 0.1rem 0.3rem;
87+ padding: 0.025rem 0.3rem;
88 }
89
90 pre {
91- font-size: 14px;
92- border-radius: 5px;
93- padding: 1rem;
94- margin: 1rem 0;
95+ font-size: 0.8rem;
96+ border-radius: 1px;
97+ padding: var(--line-height);
98 overflow-x: auto;
99 background-color: var(--pre) !important;
100 }
101@@ -124,6 +124,16 @@ small {
102 font-size: 0.8rem;
103 }
104
105+details {
106+ border: 2px solid var(--grey-light);
107+ padding: calc(var(--line-height) - 2px) 1ch;
108+ margin-bottom: var(--line-height);
109+}
110+
111+details[open] summary {
112+ margin-bottom: var(--line-height);
113+}
114+
115 summary {
116 display: list-item;
117 cursor: pointer;
118@@ -134,7 +144,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@@ -149,11 +159,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@@ -164,22 +172,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@@ -193,7 +191,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@@ -203,8 +202,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@@ -217,16 +216,28 @@ 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: var(--line-height) 0;
194 }
195
196 ul[style*="list-style-type: none;"] {
197 padding: 0;
198 }
199
200+ol ul, ol ol, ul ol, ul ul {
201+ padding: 0 0 0 3ch;
202+ margin: 0;
203+}
204+
205 li {
206- margin: 0.5rem 0;
207+ margin: 0;
208+ padding: 0;
209+}
210+
211+li::marker {
212+ line-height: 0;
213 }
214
215 li > pre {
216@@ -235,7 +246,7 @@ li > pre {
217
218 footer {
219 text-align: center;
220- margin-bottom: 4rem;
221+ margin-bottom: calc(var(--line-height) * 3);
222 }
223
224 dt {
225@@ -254,6 +265,10 @@ figure {
226 margin: 0;
227 }
228
229+#toc {
230+ margin-top: var(--line-height);
231+}
232+
233 .container {
234 max-width: 50em;
235 width: 100%;
236@@ -272,21 +287,7 @@ figure {
237 }
238
239 .mono {
240- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
241- monospace;
242-}
243-
244-.link-alt-adj,
245-.link-alt-adj:visited,
246-.link-alt-adj:visited:hover,
247-.link-alt-adj:hover {
248- color: var(--link-color);
249- text-decoration: none;
250-}
251-
252-.link-alt-adj:visited:hover,
253-.link-alt-adj:hover {
254- text-decoration: underline;
255+ font-family: monospace;
256 }
257
258 .link-alt-hover,
259@@ -315,36 +316,28 @@ figure {
260 text-decoration: underline;
261 }
262
263-.text-3xl {
264- font-size: 2.5rem;
265+.text-2xl code, .text-xl code, .text-lg code, .text-md code {
266+ text-transform: none;
267 }
268
269 .text-2xl {
270- font-size: 1.9rem;
271- line-height: 1.15;
272-}
273-
274-.text-xl {
275- font-size: 1.55rem;
276- line-height: 1.15;
277-}
278-
279-.text-lg {
280- font-size: 1.35rem;
281- line-height: 1.15;
282+ font-size: var(--line-height);
283+ font-weight: bold;
284+ line-height: var(--line-height);
285+ margin-bottom: var(--grid-height);
286+ text-transform: uppercase;
287 }
288
289-.text-md {
290- font-size: 1.15rem;
291- line-height: 1.15;
292+.text-xl, .text-lg, .text-md {
293+ font-size: 1rem;
294+ font-weight: bold;
295+ line-height: var(--line-height);
296+ margin-bottom: var(--grid-height);
297+ text-transform: uppercase;
298 }
299
300 .text-sm {
301- font-size: 0.875rem;
302-}
303-
304-.text-xs {
305- font-size: 0.775rem;
306+ font-size: 0.8rem;
307 }
308
309 .cursor-pointer {
310@@ -372,19 +365,14 @@ figure {
311 }
312
313 .text-underline {
314- border-bottom: 3px solid var(--text-color);
315- padding-bottom: 3px;
316+ text-decoration: underline;
317+ text-decoration-thickness: 2px;
318 }
319
320 .text-hdr {
321 color: var(--hover);
322 }
323
324-.text-underline-hdr {
325- border-bottom: 3px solid var(--hover);
326- padding-bottom: 3px;
327-}
328-
329 .font-bold {
330 font-weight: bold;
331 }
332@@ -429,40 +417,32 @@ figure {
333 margin: 0;
334 }
335
336+.mt-0 {
337+ margin-top: 0;
338+}
339+
340 .mt {
341- margin-top: 0.5rem;
342+ margin-top: var(--grid-height);
343 }
344
345 .mt-2 {
346- margin-top: 1rem;
347+ margin-top: var(--line-height);
348 }
349
350 .mt-4 {
351- margin-top: 2rem;
352-}
353-
354-.mt-8 {
355- margin-top: 4rem;
356+ margin-top: calc(var(--line-height) * 2);
357 }
358
359 .mb {
360- margin-bottom: 0.5rem;
361+ margin-bottom: var(--grid-height);
362 }
363
364 .mb-2 {
365- margin-bottom: 1rem;
366+ margin-bottom: var(--line-height);
367 }
368
369 .mb-4 {
370- margin-bottom: 2rem;
371-}
372-
373-.mb-8 {
374- margin-bottom: 4rem;
375-}
376-
377-.mb-16 {
378- margin-bottom: 8rem;
379+ margin-bottom: calc(var(--line-height) * 2);
380 }
381
382 .mr {
383@@ -482,23 +462,18 @@ figure {
384 }
385
386 .my {
387- margin-top: 0.5rem;
388- margin-bottom: 0.5rem;
389+ margin-top: var(--grid-height);
390+ margin-bottom: var(--grid-height);
391 }
392
393 .my-2 {
394- margin-top: 1rem;
395- margin-bottom: 1rem;
396+ margin-top: var(--line-height);
397+ margin-bottom: var(--line-height);
398 }
399
400 .my-4 {
401- margin-top: 2rem;
402- margin-bottom: 2rem;
403-}
404-
405-.my-8 {
406- margin-top: 4rem;
407- margin-bottom: 4rem;
408+ margin-top: calc(var(--line-height) * 2);
409+ margin-bottom: calc(var(--line-height) * 2);
410 }
411
412 .mx {
413@@ -512,11 +487,11 @@ figure {
414 }
415
416 .m-1 {
417- margin: 0.5rem;
418+ margin: var(--grid-height);
419 }
420
421 .p-1 {
422- padding: 0.5rem;
423+ padding: var(--grid-height);
424 }
425
426 .p-0 {
427@@ -534,23 +509,18 @@ figure {
428 }
429
430 .py {
431- padding-top: 0.5rem;
432- padding-bottom: 0.5rem;
433+ padding-top: var(--grid-height);
434+ padding-bottom: var(--grid-height);
435 }
436
437 .py-2 {
438- padding-top: 1rem;
439- padding-bottom: 1rem;
440+ padding-top: var(--line-height);
441+ padding-bottom: var(--line-height);
442 }
443
444 .py-4 {
445- padding-top: 2rem;
446- padding-bottom: 2rem;
447-}
448-
449-.py-8 {
450- padding-top: 4rem;
451- padding-bottom: 4rem;
452+ padding-top: calc(var(--line-height) * 2);
453+ padding-bottom: calc(var(--line-height) * 2);
454 }
455
456 .justify-between {
457@@ -562,28 +532,28 @@ figure {
458 }
459
460 .gap {
461- gap: 0.5rem;
462+ gap: var(--grid-height);
463 }
464
465 .gap-2 {
466- gap: 1rem;
467+ gap: var(--line-height);
468 }
469
470 .group {
471 display: flex;
472 flex-direction: column;
473- gap: 0.5rem;
474+ gap: var(--grid-height);
475 }
476
477 .group-2 {
478 display: flex;
479 flex-direction: column;
480- gap: 1rem;
481+ gap: var(--line-height);
482 }
483
484 .group-h {
485 display: flex;
486- gap: 0.5rem;
487+ gap: var(--grid-height);
488 align-items: center;
489 }
490
491@@ -622,7 +592,8 @@ figure {
492 .md h3,
493 .md h4 {
494 padding: 0;
495- margin: 1.5rem 0 0.9rem 0;
496+ margin: 0;
497+ /* margin: 1.5rem 0 0.9rem 0; */
498 font-weight: bold;
499 }
500
501@@ -634,26 +605,24 @@ figure {
502 text-decoration: none;
503 }
504
505-.md h1 {
506- font-size: 1.6rem;
507- line-height: 1.15;
508- border-bottom: 2px solid var(--grey);
509- padding-bottom: 0.7rem;
510-}
511-
512-.md h2 {
513- font-size: 1.3rem;
514- line-height: 1.15;
515- color: var(--white-dark);
516+h1 code, h2 code, h3 code, h4 code {
517+ text-transform: none;
518 }
519
520-.md h3 {
521- font-size: 1.2rem;
522- color: var(--white-dark);
523+.md h1 {
524+ font-size: 1rem;
525+ line-height: var(--line-height);
526+ margin-top: calc(var(--line-height) * 2);
527+ margin-bottom: var(--grid-height);
528+ text-transform: uppercase;
529 }
530
531-.md h4 {
532+.md h2, .md h3, .md h4 {
533 font-size: 1rem;
534+ line-height: var(--line-height);
535+ margin-top: calc(var(--line-height) * 2);
536+ margin-bottom: var(--line-height);
537+ text-transform: uppercase;
538 color: var(--white-dark);
539 }
540
541@@ -669,8 +638,8 @@ figure {
542 border: 3px solid #FF79C6;
543 padding: 8px 10px 10px 10px;
544 border-radius: 10px;
545- box-shadow: 0px 5px 0px 0px var(--shadow);
546 background-size: 100%;
547+ margin: 0:
548 -webkit-background-clip: text;
549 -moz-background-clip: text;
550 -webkit-text-fill-color: transparent;
551@@ -689,47 +658,40 @@ figure {
552 .btn-link:visited {
553 border: 2px solid var(--link-color);
554 color: var(--link-color);
555- padding: 0.4rem 1rem;
556+ padding: var(--grid-height) 1rem;
557 text-decoration: none;
558 font-weight: bold;
559 display: inline-block;
560 }
561
562-.btn-link:visited:hover,
563-.btn-link:hover {
564- border: 2px solid var(--hover);
565-}
566-
567-.btn-link-alt,
568-.btn-link-alt:visited {
569- border: 2px solid var(--white);
570- color: var(--white);
571-}
572-
573 .box {
574 border: 2px solid var(--grey-light);
575- padding: 0.5rem 0.75rem;
576+ padding: var(--line-height);
577 }
578
579 .box-sm {
580 border: 2px solid var(--grey-light);
581- padding: 0.15rem 0.35rem;
582+ padding: var(--grid-height);
583 }
584
585 .box-alert {
586 border: 2px solid var(--hover);
587- padding: 0.5rem 0.75rem;
588+ padding: var(--line-height);
589 }
590
591 .box-sm-alert {
592 border: 2px solid var(--hover);
593- padding: 0.15rem 0.35rem;
594+ padding: var(--grid-height);
595 }
596
597 .list-none {
598 list-style-type: none;
599 }
600
601+.list-square {
602+ list-style-type: square;
603+}
604+
605 .list-disc {
606 list-style-type: disc;
607 }
608@@ -766,3 +728,23 @@ figure {
609 flex-direction: column;
610 }
611 }
612+
613+#debug {
614+ position: relative;
615+}
616+
617+#debug .debug-grid {
618+ width: 100%;
619+ height: 100%;
620+ position: absolute;
621+ top: 0;
622+ left: 0;
623+ right: 0;
624+ bottom: 0;
625+ z-index: -1;
626+ background-image:
627+ repeating-linear-gradient(var(--code) 0 1px, transparent 1px 100%),
628+ repeating-linear-gradient(90deg, var(--code) 0 1px, transparent 1px 100%);
629+ background-size: 1ch var(--grid-height);
630+ margin: 0;
631+}
632diff --git a/prose/html/blog-aside.partial.tmpl b/prose/html/blog-aside.partial.tmpl
633index b7b48b8..095700f 100644
634--- a/prose/html/blog-aside.partial.tmpl
635+++ b/prose/html/blog-aside.partial.tmpl
636@@ -2,7 +2,7 @@
637 <main class="flex">
638 <section class="flex-1 mr">
639 <div>
640- <h1 class="text-2xl font-bold">{{.Header.Title}}</h1>
641+ <h1 class="text-2xl font-bold mt-2">{{.Header.Title}}</h1>
642 {{if .Header.Bio}}<span>{{.Header.Bio}}</span>{{end}}
643 </div>
644
645@@ -25,12 +25,12 @@
646 <a href={{.URL}}>clear filters</a>
647 {{end}}
648
649- <div class="posts group mt">
650+ <div class="posts group mt-2">
651 {{range .Posts}}
652 <article>
653 <div class="flex items-center">
654 <time datetime="{{.PublishAtISO}}" class="text-sm post-date">{{.PublishAt}}</time>
655- <span class="text-md flex-1"><a href="{{.URL}}">{{.Title}}</a></span>
656+ <span class="text-md flex-1 m-0"><a href="{{.URL}}">{{.Title}}</a></span>
657 </div>
658 </article>
659 {{end}}
660diff --git a/prose/html/blog-default.partial.tmpl b/prose/html/blog-default.partial.tmpl
661index d6bb676..b32e451 100644
662--- a/prose/html/blog-default.partial.tmpl
663+++ b/prose/html/blog-default.partial.tmpl
664@@ -1,7 +1,7 @@
665 {{define "blog-default"}}
666 <header class="text-center">
667- <h1 class="text-2xl font-bold">{{.Header.Title}}</h1>
668- {{if .Header.Bio}}<p class="text-lg">{{.Header.Bio}}</p>{{end}}
669+ <h1 class="text-2xl font-bold mt-2">{{.Header.Title}}</h1>
670+ {{if .Header.Bio}}<span>{{.Header.Bio}}</span>{{end}}
671 <nav>
672 {{range .Header.Nav}}
673 <a href="{{.URL}}" class="text-lg">{{.Text}}</a> |
674@@ -20,7 +20,7 @@
675 </section>
676 {{end}}
677
678- <section class="posts group mt">
679+ <section class="posts group mt-2">
680 {{if .HasFilter}}
681 <a href={{.URL}}>clear filters</a>
682 {{end}}
683@@ -28,7 +28,7 @@
684 <article>
685 <div class="flex items-center">
686 <time datetime="{{.PublishAtISO}}" class="text-sm post-date">{{.PublishAt}}</time>
687- <span class="text-md flex-1"><a href="{{.URL}}">{{.Title}}</a></span>
688+ <span class="text-md flex-1 m-0"><a href="{{.URL}}">{{.Title}}</a></span>
689 </div>
690 </article>
691 {{end}}
692diff --git a/prose/html/post.page.tmpl b/prose/html/post.page.tmpl
693index e667978..58cce0e 100644
694--- a/prose/html/post.page.tmpl
695+++ b/prose/html/post.page.tmpl
696@@ -53,13 +53,15 @@
697 {{if .Unlisted}} <code>unlisted</code>{{end}}
698 <time datetime="{{.PublishAtISO}}">{{.PublishAt}}</time>
699 <span>·<span>
700- <a href="{{.BlogURL}}">{{.BlogName}}</a></p>
701- {{if .Description}}<blockquote class="font-italic">{{.Description}}</blockquote>{{end}}
702+ <a href="{{.BlogURL}}">{{.BlogName}}</a>
703+ </p>
704+ {{if .Description}}<blockquote>{{.Description}}</blockquote>{{end}}
705 <div class="tags">
706 {{range .Tags}}
707 <a class="tag" href="{{$.BlogURL}}?tag={{.}}">#{{.}}</a>
708 {{end}}
709 </div>
710+ <hr />
711 </header>
712 <main>
713 {{if .Diff}}
714diff --git a/prose/public/main.css b/prose/public/main.css
715index bbd09b0..478c1db 100644
716--- a/prose/public/main.css
717+++ b/prose/public/main.css
718@@ -12,6 +12,10 @@ table {
719 border-collapse: separate;
720 }
721
722+header blockquote {
723+ margin: var(--grid-height) 0;
724+}
725+
726 .post-date {
727 width: 110px;
728 }
729diff --git a/prose/public/smol.css b/prose/public/smol.css
730index e9b59ec..37fa0ed 100644
731--- a/prose/public/smol.css
732+++ b/prose/public/smol.css
733@@ -15,9 +15,13 @@
734 box-shadow: none;
735 }
736
737+:root {
738+ --line-height: 1.3rem;
739+ --grid-height: 0.65rem;
740+}
741+
742 @media (prefers-color-scheme: light) {
743 :root {
744- --main-hue: 250;
745 --white: #2e3f53;
746 --white-light: #cfe0f4;
747 --white-dark: #6c6a6a;
748@@ -32,13 +36,11 @@
749 --hover: #c11e7a;
750 --grey: #ccc;
751 --grey-light: #6a708e;
752- --shadow: #e8e8e8;
753 }
754 }
755
756 @media (prefers-color-scheme: dark) {
757 :root {
758- --main-hue: 250;
759 --white: #f2f2f2;
760 --white-light: #f2f2f2;
761 --white-dark: #e8e8e8;
762@@ -53,15 +55,14 @@
763 --hover: #ff80bf;
764 --grey: #414558;
765 --grey-light: #6a708e;
766- --shadow: #252525;
767 }
768 }
769
770 html {
771 background-color: var(--bg-color);
772 color: var(--text-color);
773- font-size: 18px;
774- line-height: 1.5;
775+ font-size: 16px;
776+ line-height: var(--line-height);
777 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
778 Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
779 sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
780@@ -89,8 +90,7 @@ code,
781 kbd,
782 samp,
783 pre {
784- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
785- monospace;
786+ font-family: monospace;
787 }
788
789 code,
790@@ -103,19 +103,19 @@ pre > code {
791 background-color: inherit;
792 padding: 0;
793 border: none;
794+ border-radius: 0;
795 }
796
797 code {
798 font-size: 90%;
799 border-radius: 0.3rem;
800- padding: 0.1rem 0.3rem;
801+ padding: 0.025rem 0.3rem;
802 }
803
804 pre {
805- font-size: 14px;
806- border-radius: 5px;
807- padding: 1rem;
808- margin: 1rem 0;
809+ font-size: 0.8rem;
810+ border-radius: 1px;
811+ padding: var(--line-height);
812 overflow-x: auto;
813 background-color: var(--pre) !important;
814 }
815@@ -124,6 +124,16 @@ small {
816 font-size: 0.8rem;
817 }
818
819+details {
820+ border: 2px solid var(--grey-light);
821+ padding: calc(var(--line-height) - 2px) 1ch;
822+ margin-bottom: var(--line-height);
823+}
824+
825+details[open] summary {
826+ margin-bottom: var(--line-height);
827+}
828+
829 summary {
830 display: list-item;
831 cursor: pointer;
832@@ -134,7 +144,7 @@ h2,
833 h3,
834 h4 {
835 margin: 0;
836- padding: 0.5rem 0 0 0;
837+ padding: 0;
838 border: 0;
839 font-style: normal;
840 font-weight: inherit;
841@@ -149,11 +159,9 @@ path {
842 hr {
843 color: inherit;
844 border: 0;
845- margin: 0;
846 height: 2px;
847 background: var(--grey);
848- margin: 1rem auto;
849- text-align: center;
850+ margin: calc(var(--grid-height) - 2px) auto;
851 }
852
853 a {
854@@ -164,22 +172,12 @@ a {
855 a:hover,
856 a:visited:hover {
857 text-decoration: underline;
858- color: var(--hover);
859 }
860
861 a:visited {
862 color: var(--visited);
863 }
864
865-a.link-grey {
866- text-decoration: underline;
867- color: var(--white);
868-}
869-
870-a.link-grey:visited {
871- color: var(--white);
872-}
873-
874 section {
875 margin-bottom: 1.4rem;
876 }
877@@ -193,7 +191,8 @@ header {
878 }
879
880 p {
881- margin: 0.5rem 0;
882+ margin-top: var(--line-height);
883+ margin-bottom: var(--line-height);
884 }
885
886 article {
887@@ -203,8 +202,8 @@ article {
888 blockquote {
889 border-left: 5px solid var(--blockquote);
890 background-color: var(--blockquote-bg);
891- padding: 0.5rem 0.75rem;
892- margin: 0.5rem 0;
893+ padding: var(--grid-height);
894+ margin: var(--line-height) 0;
895 }
896
897 blockquote > p {
898@@ -217,16 +216,28 @@ blockquote code {
899
900 ul,
901 ol {
902- padding: 0 0 0 1rem;
903- list-style-position: outside;
904+ padding: 0 0 0 var(--line-height);
905+ list-style-position: inside;
906+ list-style-type: square;
907+ margin: var(--line-height) 0;
908 }
909
910 ul[style*="list-style-type: none;"] {
911 padding: 0;
912 }
913
914+ol ul, ol ol, ul ol, ul ul {
915+ padding: 0 0 0 3ch;
916+ margin: 0;
917+}
918+
919 li {
920- margin: 0.5rem 0;
921+ margin: 0;
922+ padding: 0;
923+}
924+
925+li::marker {
926+ line-height: 0;
927 }
928
929 li > pre {
930@@ -235,7 +246,7 @@ li > pre {
931
932 footer {
933 text-align: center;
934- margin-bottom: 4rem;
935+ margin-bottom: calc(var(--line-height) * 3);
936 }
937
938 dt {
939@@ -254,6 +265,10 @@ figure {
940 margin: 0;
941 }
942
943+#toc {
944+ margin-top: var(--line-height);
945+}
946+
947 .container {
948 max-width: 50em;
949 width: 100%;
950@@ -272,21 +287,7 @@ figure {
951 }
952
953 .mono {
954- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
955- monospace;
956-}
957-
958-.link-alt-adj,
959-.link-alt-adj:visited,
960-.link-alt-adj:visited:hover,
961-.link-alt-adj:hover {
962- color: var(--link-color);
963- text-decoration: none;
964-}
965-
966-.link-alt-adj:visited:hover,
967-.link-alt-adj:hover {
968- text-decoration: underline;
969+ font-family: monospace;
970 }
971
972 .link-alt-hover,
973@@ -315,36 +316,28 @@ figure {
974 text-decoration: underline;
975 }
976
977-.text-3xl {
978- font-size: 2.5rem;
979+.text-2xl code, .text-xl code, .text-lg code, .text-md code {
980+ text-transform: none;
981 }
982
983 .text-2xl {
984- font-size: 1.9rem;
985- line-height: 1.15;
986-}
987-
988-.text-xl {
989- font-size: 1.55rem;
990- line-height: 1.15;
991-}
992-
993-.text-lg {
994- font-size: 1.35rem;
995- line-height: 1.15;
996+ font-size: var(--line-height);
997+ font-weight: bold;
998+ line-height: var(--line-height);
999+ margin-bottom: var(--grid-height);
1000+ text-transform: uppercase;
1001 }
1002
1003-.text-md {
1004- font-size: 1.15rem;
1005- line-height: 1.15;
1006+.text-xl, .text-lg, .text-md {
1007+ font-size: 1rem;
1008+ font-weight: bold;
1009+ line-height: var(--line-height);
1010+ margin-bottom: var(--grid-height);
1011+ text-transform: uppercase;
1012 }
1013
1014 .text-sm {
1015- font-size: 0.875rem;
1016-}
1017-
1018-.text-xs {
1019- font-size: 0.775rem;
1020+ font-size: 0.8rem;
1021 }
1022
1023 .cursor-pointer {
1024@@ -372,19 +365,14 @@ figure {
1025 }
1026
1027 .text-underline {
1028- border-bottom: 3px solid var(--text-color);
1029- padding-bottom: 3px;
1030+ text-decoration: underline;
1031+ text-decoration-thickness: 2px;
1032 }
1033
1034 .text-hdr {
1035 color: var(--hover);
1036 }
1037
1038-.text-underline-hdr {
1039- border-bottom: 3px solid var(--hover);
1040- padding-bottom: 3px;
1041-}
1042-
1043 .font-bold {
1044 font-weight: bold;
1045 }
1046@@ -429,40 +417,32 @@ figure {
1047 margin: 0;
1048 }
1049
1050+.mt-0 {
1051+ margin-top: 0;
1052+}
1053+
1054 .mt {
1055- margin-top: 0.5rem;
1056+ margin-top: var(--grid-height);
1057 }
1058
1059 .mt-2 {
1060- margin-top: 1rem;
1061+ margin-top: var(--line-height);
1062 }
1063
1064 .mt-4 {
1065- margin-top: 2rem;
1066-}
1067-
1068-.mt-8 {
1069- margin-top: 4rem;
1070+ margin-top: calc(var(--line-height) * 2);
1071 }
1072
1073 .mb {
1074- margin-bottom: 0.5rem;
1075+ margin-bottom: var(--grid-height);
1076 }
1077
1078 .mb-2 {
1079- margin-bottom: 1rem;
1080+ margin-bottom: var(--line-height);
1081 }
1082
1083 .mb-4 {
1084- margin-bottom: 2rem;
1085-}
1086-
1087-.mb-8 {
1088- margin-bottom: 4rem;
1089-}
1090-
1091-.mb-16 {
1092- margin-bottom: 8rem;
1093+ margin-bottom: calc(var(--line-height) * 2);
1094 }
1095
1096 .mr {
1097@@ -482,23 +462,18 @@ figure {
1098 }
1099
1100 .my {
1101- margin-top: 0.5rem;
1102- margin-bottom: 0.5rem;
1103+ margin-top: var(--grid-height);
1104+ margin-bottom: var(--grid-height);
1105 }
1106
1107 .my-2 {
1108- margin-top: 1rem;
1109- margin-bottom: 1rem;
1110+ margin-top: var(--line-height);
1111+ margin-bottom: var(--line-height);
1112 }
1113
1114 .my-4 {
1115- margin-top: 2rem;
1116- margin-bottom: 2rem;
1117-}
1118-
1119-.my-8 {
1120- margin-top: 4rem;
1121- margin-bottom: 4rem;
1122+ margin-top: calc(var(--line-height) * 2);
1123+ margin-bottom: calc(var(--line-height) * 2);
1124 }
1125
1126 .mx {
1127@@ -512,11 +487,11 @@ figure {
1128 }
1129
1130 .m-1 {
1131- margin: 0.5rem;
1132+ margin: var(--grid-height);
1133 }
1134
1135 .p-1 {
1136- padding: 0.5rem;
1137+ padding: var(--grid-height);
1138 }
1139
1140 .p-0 {
1141@@ -534,23 +509,18 @@ figure {
1142 }
1143
1144 .py {
1145- padding-top: 0.5rem;
1146- padding-bottom: 0.5rem;
1147+ padding-top: var(--grid-height);
1148+ padding-bottom: var(--grid-height);
1149 }
1150
1151 .py-2 {
1152- padding-top: 1rem;
1153- padding-bottom: 1rem;
1154+ padding-top: var(--line-height);
1155+ padding-bottom: var(--line-height);
1156 }
1157
1158 .py-4 {
1159- padding-top: 2rem;
1160- padding-bottom: 2rem;
1161-}
1162-
1163-.py-8 {
1164- padding-top: 4rem;
1165- padding-bottom: 4rem;
1166+ padding-top: calc(var(--line-height) * 2);
1167+ padding-bottom: calc(var(--line-height) * 2);
1168 }
1169
1170 .justify-between {
1171@@ -562,28 +532,28 @@ figure {
1172 }
1173
1174 .gap {
1175- gap: 0.5rem;
1176+ gap: var(--grid-height);
1177 }
1178
1179 .gap-2 {
1180- gap: 1rem;
1181+ gap: var(--line-height);
1182 }
1183
1184 .group {
1185 display: flex;
1186 flex-direction: column;
1187- gap: 0.5rem;
1188+ gap: var(--grid-height);
1189 }
1190
1191 .group-2 {
1192 display: flex;
1193 flex-direction: column;
1194- gap: 1rem;
1195+ gap: var(--line-height);
1196 }
1197
1198 .group-h {
1199 display: flex;
1200- gap: 0.5rem;
1201+ gap: var(--grid-height);
1202 align-items: center;
1203 }
1204
1205@@ -622,7 +592,8 @@ figure {
1206 .md h3,
1207 .md h4 {
1208 padding: 0;
1209- margin: 1.5rem 0 0.9rem 0;
1210+ margin: 0;
1211+ /* margin: 1.5rem 0 0.9rem 0; */
1212 font-weight: bold;
1213 }
1214
1215@@ -634,26 +605,24 @@ figure {
1216 text-decoration: none;
1217 }
1218
1219-.md h1 {
1220- font-size: 1.6rem;
1221- line-height: 1.15;
1222- border-bottom: 2px solid var(--grey);
1223- padding-bottom: 0.7rem;
1224-}
1225-
1226-.md h2 {
1227- font-size: 1.3rem;
1228- line-height: 1.15;
1229- color: var(--white-dark);
1230+h1 code, h2 code, h3 code, h4 code {
1231+ text-transform: none;
1232 }
1233
1234-.md h3 {
1235- font-size: 1.2rem;
1236- color: var(--white-dark);
1237+.md h1 {
1238+ font-size: 1rem;
1239+ line-height: var(--line-height);
1240+ margin-top: calc(var(--line-height) * 2);
1241+ margin-bottom: var(--grid-height);
1242+ text-transform: uppercase;
1243 }
1244
1245-.md h4 {
1246+.md h2, .md h3, .md h4 {
1247 font-size: 1rem;
1248+ line-height: var(--line-height);
1249+ margin-top: calc(var(--line-height) * 2);
1250+ margin-bottom: var(--line-height);
1251+ text-transform: uppercase;
1252 color: var(--white-dark);
1253 }
1254
1255@@ -669,8 +638,8 @@ figure {
1256 border: 3px solid #FF79C6;
1257 padding: 8px 10px 10px 10px;
1258 border-radius: 10px;
1259- box-shadow: 0px 5px 0px 0px var(--shadow);
1260 background-size: 100%;
1261+ margin: 0:
1262 -webkit-background-clip: text;
1263 -moz-background-clip: text;
1264 -webkit-text-fill-color: transparent;
1265@@ -689,47 +658,40 @@ figure {
1266 .btn-link:visited {
1267 border: 2px solid var(--link-color);
1268 color: var(--link-color);
1269- padding: 0.4rem 1rem;
1270+ padding: var(--grid-height) 1rem;
1271 text-decoration: none;
1272 font-weight: bold;
1273 display: inline-block;
1274 }
1275
1276-.btn-link:visited:hover,
1277-.btn-link:hover {
1278- border: 2px solid var(--hover);
1279-}
1280-
1281-.btn-link-alt,
1282-.btn-link-alt:visited {
1283- border: 2px solid var(--white);
1284- color: var(--white);
1285-}
1286-
1287 .box {
1288 border: 2px solid var(--grey-light);
1289- padding: 0.5rem 0.75rem;
1290+ padding: var(--line-height);
1291 }
1292
1293 .box-sm {
1294 border: 2px solid var(--grey-light);
1295- padding: 0.15rem 0.35rem;
1296+ padding: var(--grid-height);
1297 }
1298
1299 .box-alert {
1300 border: 2px solid var(--hover);
1301- padding: 0.5rem 0.75rem;
1302+ padding: var(--line-height);
1303 }
1304
1305 .box-sm-alert {
1306 border: 2px solid var(--hover);
1307- padding: 0.15rem 0.35rem;
1308+ padding: var(--grid-height);
1309 }
1310
1311 .list-none {
1312 list-style-type: none;
1313 }
1314
1315+.list-square {
1316+ list-style-type: square;
1317+}
1318+
1319 .list-disc {
1320 list-style-type: disc;
1321 }
1322@@ -766,3 +728,23 @@ figure {
1323 flex-direction: column;
1324 }
1325 }
1326+
1327+#debug {
1328+ position: relative;
1329+}
1330+
1331+#debug .debug-grid {
1332+ width: 100%;
1333+ height: 100%;
1334+ position: absolute;
1335+ top: 0;
1336+ left: 0;
1337+ right: 0;
1338+ bottom: 0;
1339+ z-index: -1;
1340+ background-image:
1341+ repeating-linear-gradient(var(--code) 0 1px, transparent 1px 100%),
1342+ repeating-linear-gradient(90deg, var(--code) 0 1px, transparent 1px 100%);
1343+ background-size: 1ch var(--grid-height);
1344+ margin: 0;
1345+}
1346--
13472.45.2
1348