pico / style(prose): update smol.css #24

style(prose): update smol.css

   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>&middot;<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