dashboard / pico / refactor(pgs): use httputil rev proxy to external service #24 rss

accepted · opened on 2024-10-14T02:29:12Z by erock
Help 
# add changes to patch request
git format-patch main --stdout | ssh pr.pico.sh pr add 24
# add review to patch request
git format-patch main --stdout | ssh pr.pico.sh pr add --review 24
# remove patchset
ssh pr.pico.sh ps rm ps-x
# checkout all patches
ssh pr.pico.sh pr print 24 | git am -3
# print a diff between the last two patches in a patch request
ssh pr.pico.sh pr diff 24
# accept PR
ssh pr.pico.sh pr accept 24
# close PR
ssh pr.pico.sh pr close 24

Logs

erock created pr with ps-41 on 2024-09-03T02:15:28Z
erock changed status on 2024-09-16T02:53:05Z {"status":"closed"}
erock changed status on 2024-11-06T15:04:55Z {"status":"accepted"}

Patchsets

ps-41 by erock on 2024-09-03T02:15:28Z

Patchset ps-41

style(prose): update smol.css

Eric Bower
2024-09-03T02:14:52Z
pastes/public/smol.css
+140 -158
prose/html/blog-aside.partial.tmpl
+3 -3
prose/html/blog-default.partial.tmpl
+4 -4
prose/html/post.page.tmpl
+4 -2
prose/public/main.css
+4 -0
prose/public/smol.css
+140 -158
Back to top

style(prose): update smol.css

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