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

style(prose): update smol.css

   1From de5515cb05610bb2675955d20e35542f6d813ac9 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   |  10 +-
   9 prose/html/blog-default.partial.tmpl |  12 +-
  10 prose/html/post.page.tmpl            |   8 +-
  11 prose/public/main.css                |  12 ++
  12 prose/public/smol.css                | 298 +++++++++++++--------------
  13 6 files changed, 308 insertions(+), 330 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..3e3b71e 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 transform-none"><a href="{{.URL}}">{{.Title}}</a></span>
 657                 </div>
 658             </article>
 659         {{end}}
 660@@ -46,9 +46,9 @@
 661         <nav>
 662             <ul>
 663                 {{range .Header.Nav}}
 664-                <li><a href="{{.URL}}" class="text-md">{{.Text}}</a></li>
 665+                <li><a href="{{.URL}}" class="text-md transform-none">{{.Text}}</a></li>
 666                 {{end}}
 667-                <li><a href="{{.RSSURL}}" class="text-md">rss</a></li>
 668+                <li><a href="{{.RSSURL}}" class="text-md transform-none">rss</a></li>
 669             </ul>
 670         </nav>
 671     </aside>
 672diff --git a/prose/html/blog-default.partial.tmpl b/prose/html/blog-default.partial.tmpl
 673index d6bb676..34cba4f 100644
 674--- a/prose/html/blog-default.partial.tmpl
 675+++ b/prose/html/blog-default.partial.tmpl
 676@@ -1,12 +1,12 @@
 677 {{define "blog-default"}}
 678 <header class="text-center">
 679-    <h1 class="text-2xl font-bold">{{.Header.Title}}</h1>
 680-    {{if .Header.Bio}}<p class="text-lg">{{.Header.Bio}}</p>{{end}}
 681+    <h1 class="text-2xl font-bold mt-2">{{.Header.Title}}</h1>
 682+    {{if .Header.Bio}}<span>{{.Header.Bio}}</span>{{end}}
 683     <nav>
 684         {{range .Header.Nav}}
 685-        <a href="{{.URL}}" class="text-lg">{{.Text}}</a> |
 686+        <a href="{{.URL}}" class="text-lg transform-none">{{.Text}}</a> |
 687         {{end}}
 688-        <a href="{{.RSSURL}}" class="text-lg">rss</a>
 689+        <a href="{{.RSSURL}}" class="text-lg transform-none">rss</a>
 690     </nav>
 691     <hr />
 692 </header>
 693@@ -20,7 +20,7 @@
 694     </section>
 695     {{end}}
 696 
 697-    <section class="posts group mt">
 698+    <section class="posts group mt-2">
 699         {{if .HasFilter}}
 700             <a href={{.URL}}>clear filters</a>
 701         {{end}}
 702@@ -28,7 +28,7 @@
 703         <article>
 704             <div class="flex items-center">
 705                 <time datetime="{{.PublishAtISO}}" class="text-sm post-date">{{.PublishAt}}</time>
 706-                <span class="text-md flex-1"><a href="{{.URL}}">{{.Title}}</a></span>
 707+                <span class="text-md flex-1 m-0 transform-none"><a href="{{.URL}}">{{.Title}}</a></span>
 708             </div>
 709         </article>
 710         {{end}}
 711diff --git a/prose/html/post.page.tmpl b/prose/html/post.page.tmpl
 712index 53f9ff5..517b5d9 100644
 713--- a/prose/html/post.page.tmpl
 714+++ b/prose/html/post.page.tmpl
 715@@ -53,13 +53,15 @@
 716         {{if .Unlisted}} <code>unlisted</code>{{end}}
 717         <time datetime="{{.PublishAtISO}}">{{.PublishAt}}</time>
 718         <span>&middot;<span>
 719-        <a href="{{.BlogURL}}">{{.BlogName}}</a></p>
 720-    {{if .Description}}<blockquote class="font-italic">{{.Description}}</blockquote>{{end}}
 721+        <a href="{{.BlogURL}}">{{.BlogName}}</a>
 722+    </p>
 723+    {{if .Description}}<blockquote>{{.Description}}</blockquote>{{end}}
 724     <div class="tags">
 725     {{range .Tags}}
 726-        <a class="tag" href="{{$.BlogURL}}?tag={{.}}">#{{.}}</a>
 727+        <a class="link-alt tag" href="{{$.BlogURL}}?tag={{.}}">#{{.}}</a>
 728     {{end}}
 729     </div>
 730+    <hr />
 731 </header>
 732 <main>
 733     <article class="md">
 734diff --git a/prose/public/main.css b/prose/public/main.css
 735index bbd09b0..4fe44e2 100644
 736--- a/prose/public/main.css
 737+++ b/prose/public/main.css
 738@@ -12,6 +12,14 @@ table {
 739   border-collapse: separate;
 740 }
 741 
 742+header blockquote {
 743+  margin: var(--grid-height) 0;
 744+}
 745+
 746+.transform-none {
 747+  text-transform: none;
 748+}
 749+
 750 .post-date {
 751   width: 110px;
 752 }
 753@@ -28,6 +36,10 @@ table {
 754   border-radius: 5px;
 755 }
 756 
 757+.footnotes li p {
 758+  display: inline;
 759+}
 760+
 761 #readme {
 762   display: none;
 763 }
 764diff --git a/prose/public/smol.css b/prose/public/smol.css
 765index e9b59ec..37fa0ed 100644
 766--- a/prose/public/smol.css
 767+++ b/prose/public/smol.css
 768@@ -15,9 +15,13 @@
 769   box-shadow: none;
 770 }
 771 
 772+:root {
 773+  --line-height: 1.3rem;
 774+  --grid-height: 0.65rem;
 775+}
 776+
 777 @media (prefers-color-scheme: light) {
 778   :root {
 779-    --main-hue: 250;
 780     --white: #2e3f53;
 781     --white-light: #cfe0f4;
 782     --white-dark: #6c6a6a;
 783@@ -32,13 +36,11 @@
 784     --hover: #c11e7a;
 785     --grey: #ccc;
 786     --grey-light: #6a708e;
 787-    --shadow: #e8e8e8;
 788   }
 789 }
 790 
 791 @media (prefers-color-scheme: dark) {
 792   :root {
 793-    --main-hue: 250;
 794     --white: #f2f2f2;
 795     --white-light: #f2f2f2;
 796     --white-dark: #e8e8e8;
 797@@ -53,15 +55,14 @@
 798     --hover: #ff80bf;
 799     --grey: #414558;
 800     --grey-light: #6a708e;
 801-    --shadow: #252525;
 802   }
 803 }
 804 
 805 html {
 806   background-color: var(--bg-color);
 807   color: var(--text-color);
 808-  font-size: 18px;
 809-  line-height: 1.5;
 810+  font-size: 16px;
 811+  line-height: var(--line-height);
 812   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 813     Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
 814     sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 815@@ -89,8 +90,7 @@ code,
 816 kbd,
 817 samp,
 818 pre {
 819-  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
 820-    monospace;
 821+  font-family: monospace;
 822 }
 823 
 824 code,
 825@@ -103,19 +103,19 @@ pre > code {
 826   background-color: inherit;
 827   padding: 0;
 828   border: none;
 829+  border-radius: 0;
 830 }
 831 
 832 code {
 833   font-size: 90%;
 834   border-radius: 0.3rem;
 835-  padding: 0.1rem 0.3rem;
 836+  padding: 0.025rem 0.3rem;
 837 }
 838 
 839 pre {
 840-  font-size: 14px;
 841-  border-radius: 5px;
 842-  padding: 1rem;
 843-  margin: 1rem 0;
 844+  font-size: 0.8rem;
 845+  border-radius: 1px;
 846+  padding: var(--line-height);
 847   overflow-x: auto;
 848   background-color: var(--pre) !important;
 849 }
 850@@ -124,6 +124,16 @@ small {
 851   font-size: 0.8rem;
 852 }
 853 
 854+details {
 855+  border: 2px solid var(--grey-light);
 856+  padding: calc(var(--line-height) - 2px) 1ch;
 857+  margin-bottom: var(--line-height);
 858+}
 859+
 860+details[open] summary {
 861+  margin-bottom: var(--line-height);
 862+}
 863+
 864 summary {
 865   display: list-item;
 866   cursor: pointer;
 867@@ -134,7 +144,7 @@ h2,
 868 h3,
 869 h4 {
 870   margin: 0;
 871-  padding: 0.5rem 0 0 0;
 872+  padding: 0;
 873   border: 0;
 874   font-style: normal;
 875   font-weight: inherit;
 876@@ -149,11 +159,9 @@ path {
 877 hr {
 878   color: inherit;
 879   border: 0;
 880-  margin: 0;
 881   height: 2px;
 882   background: var(--grey);
 883-  margin: 1rem auto;
 884-  text-align: center;
 885+  margin: calc(var(--grid-height) - 2px) auto;
 886 }
 887 
 888 a {
 889@@ -164,22 +172,12 @@ a {
 890 a:hover,
 891 a:visited:hover {
 892   text-decoration: underline;
 893-  color: var(--hover);
 894 }
 895 
 896 a:visited {
 897   color: var(--visited);
 898 }
 899 
 900-a.link-grey {
 901-  text-decoration: underline;
 902-  color: var(--white);
 903-}
 904-
 905-a.link-grey:visited {
 906-  color: var(--white);
 907-}
 908-
 909 section {
 910   margin-bottom: 1.4rem;
 911 }
 912@@ -193,7 +191,8 @@ header {
 913 }
 914 
 915 p {
 916-  margin: 0.5rem 0;
 917+  margin-top: var(--line-height);
 918+  margin-bottom: var(--line-height);
 919 }
 920 
 921 article {
 922@@ -203,8 +202,8 @@ article {
 923 blockquote {
 924   border-left: 5px solid var(--blockquote);
 925   background-color: var(--blockquote-bg);
 926-  padding: 0.5rem 0.75rem;
 927-  margin: 0.5rem 0;
 928+  padding: var(--grid-height);
 929+  margin: var(--line-height) 0;
 930 }
 931 
 932 blockquote > p {
 933@@ -217,16 +216,28 @@ blockquote code {
 934 
 935 ul,
 936 ol {
 937-  padding: 0 0 0 1rem;
 938-  list-style-position: outside;
 939+  padding: 0 0 0 var(--line-height);
 940+  list-style-position: inside;
 941+  list-style-type: square;
 942+  margin: var(--line-height) 0;
 943 }
 944 
 945 ul[style*="list-style-type: none;"] {
 946   padding: 0;
 947 }
 948 
 949+ol ul, ol ol, ul ol, ul ul {
 950+  padding: 0 0 0 3ch;
 951+  margin: 0;
 952+}
 953+
 954 li {
 955-  margin: 0.5rem 0;
 956+  margin: 0;
 957+  padding: 0;
 958+}
 959+
 960+li::marker {
 961+  line-height: 0;
 962 }
 963 
 964 li > pre {
 965@@ -235,7 +246,7 @@ li > pre {
 966 
 967 footer {
 968   text-align: center;
 969-  margin-bottom: 4rem;
 970+  margin-bottom: calc(var(--line-height) * 3);
 971 }
 972 
 973 dt {
 974@@ -254,6 +265,10 @@ figure {
 975   margin: 0;
 976 }
 977 
 978+#toc {
 979+  margin-top: var(--line-height);
 980+}
 981+
 982 .container {
 983   max-width: 50em;
 984   width: 100%;
 985@@ -272,21 +287,7 @@ figure {
 986 }
 987 
 988 .mono {
 989-  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
 990-    monospace;
 991-}
 992-
 993-.link-alt-adj,
 994-.link-alt-adj:visited,
 995-.link-alt-adj:visited:hover,
 996-.link-alt-adj:hover {
 997-  color: var(--link-color);
 998-  text-decoration: none;
 999-}
1000-
1001-.link-alt-adj:visited:hover,
1002-.link-alt-adj:hover {
1003-  text-decoration: underline;
1004+  font-family: monospace;
1005 }
1006 
1007 .link-alt-hover,
1008@@ -315,36 +316,28 @@ figure {
1009   text-decoration: underline;
1010 }
1011 
1012-.text-3xl {
1013-  font-size: 2.5rem;
1014+.text-2xl code, .text-xl code, .text-lg code, .text-md code {
1015+  text-transform: none;
1016 }
1017 
1018 .text-2xl {
1019-  font-size: 1.9rem;
1020-  line-height: 1.15;
1021-}
1022-
1023-.text-xl {
1024-  font-size: 1.55rem;
1025-  line-height: 1.15;
1026-}
1027-
1028-.text-lg {
1029-  font-size: 1.35rem;
1030-  line-height: 1.15;
1031+  font-size: var(--line-height);
1032+  font-weight: bold;
1033+  line-height: var(--line-height);
1034+  margin-bottom: var(--grid-height);
1035+  text-transform: uppercase;
1036 }
1037 
1038-.text-md {
1039-  font-size: 1.15rem;
1040-  line-height: 1.15;
1041+.text-xl, .text-lg, .text-md {
1042+  font-size: 1rem;
1043+  font-weight: bold;
1044+  line-height: var(--line-height);
1045+  margin-bottom: var(--grid-height);
1046+  text-transform: uppercase;
1047 }
1048 
1049 .text-sm {
1050-  font-size: 0.875rem;
1051-}
1052-
1053-.text-xs {
1054-  font-size: 0.775rem;
1055+  font-size: 0.8rem;
1056 }
1057 
1058 .cursor-pointer {
1059@@ -372,19 +365,14 @@ figure {
1060 }
1061 
1062 .text-underline {
1063-  border-bottom: 3px solid var(--text-color);
1064-  padding-bottom: 3px;
1065+  text-decoration: underline;
1066+  text-decoration-thickness: 2px;
1067 }
1068 
1069 .text-hdr {
1070   color: var(--hover);
1071 }
1072 
1073-.text-underline-hdr {
1074-  border-bottom: 3px solid var(--hover);
1075-  padding-bottom: 3px;
1076-}
1077-
1078 .font-bold {
1079   font-weight: bold;
1080 }
1081@@ -429,40 +417,32 @@ figure {
1082   margin: 0;
1083 }
1084 
1085+.mt-0 {
1086+  margin-top: 0;
1087+}
1088+
1089 .mt {
1090-  margin-top: 0.5rem;
1091+  margin-top: var(--grid-height);
1092 }
1093 
1094 .mt-2 {
1095-  margin-top: 1rem;
1096+  margin-top: var(--line-height);
1097 }
1098 
1099 .mt-4 {
1100-  margin-top: 2rem;
1101-}
1102-
1103-.mt-8 {
1104-  margin-top: 4rem;
1105+  margin-top: calc(var(--line-height) * 2);
1106 }
1107 
1108 .mb {
1109-  margin-bottom: 0.5rem;
1110+  margin-bottom: var(--grid-height);
1111 }
1112 
1113 .mb-2 {
1114-  margin-bottom: 1rem;
1115+  margin-bottom: var(--line-height);
1116 }
1117 
1118 .mb-4 {
1119-  margin-bottom: 2rem;
1120-}
1121-
1122-.mb-8 {
1123-  margin-bottom: 4rem;
1124-}
1125-
1126-.mb-16 {
1127-  margin-bottom: 8rem;
1128+  margin-bottom: calc(var(--line-height) * 2);
1129 }
1130 
1131 .mr {
1132@@ -482,23 +462,18 @@ figure {
1133 }
1134 
1135 .my {
1136-  margin-top: 0.5rem;
1137-  margin-bottom: 0.5rem;
1138+  margin-top: var(--grid-height);
1139+  margin-bottom: var(--grid-height);
1140 }
1141 
1142 .my-2 {
1143-  margin-top: 1rem;
1144-  margin-bottom: 1rem;
1145+  margin-top: var(--line-height);
1146+  margin-bottom: var(--line-height);
1147 }
1148 
1149 .my-4 {
1150-  margin-top: 2rem;
1151-  margin-bottom: 2rem;
1152-}
1153-
1154-.my-8 {
1155-  margin-top: 4rem;
1156-  margin-bottom: 4rem;
1157+  margin-top: calc(var(--line-height) * 2);
1158+  margin-bottom: calc(var(--line-height) * 2);
1159 }
1160 
1161 .mx {
1162@@ -512,11 +487,11 @@ figure {
1163 }
1164 
1165 .m-1 {
1166-  margin: 0.5rem;
1167+  margin: var(--grid-height);
1168 }
1169 
1170 .p-1 {
1171-  padding: 0.5rem;
1172+  padding: var(--grid-height);
1173 }
1174 
1175 .p-0 {
1176@@ -534,23 +509,18 @@ figure {
1177 }
1178 
1179 .py {
1180-  padding-top: 0.5rem;
1181-  padding-bottom: 0.5rem;
1182+  padding-top: var(--grid-height);
1183+  padding-bottom: var(--grid-height);
1184 }
1185 
1186 .py-2 {
1187-  padding-top: 1rem;
1188-  padding-bottom: 1rem;
1189+  padding-top: var(--line-height);
1190+  padding-bottom: var(--line-height);
1191 }
1192 
1193 .py-4 {
1194-  padding-top: 2rem;
1195-  padding-bottom: 2rem;
1196-}
1197-
1198-.py-8 {
1199-  padding-top: 4rem;
1200-  padding-bottom: 4rem;
1201+  padding-top: calc(var(--line-height) * 2);
1202+  padding-bottom: calc(var(--line-height) * 2);
1203 }
1204 
1205 .justify-between {
1206@@ -562,28 +532,28 @@ figure {
1207 }
1208 
1209 .gap {
1210-  gap: 0.5rem;
1211+  gap: var(--grid-height);
1212 }
1213 
1214 .gap-2 {
1215-  gap: 1rem;
1216+  gap: var(--line-height);
1217 }
1218 
1219 .group {
1220   display: flex;
1221   flex-direction: column;
1222-  gap: 0.5rem;
1223+  gap: var(--grid-height);
1224 }
1225 
1226 .group-2 {
1227   display: flex;
1228   flex-direction: column;
1229-  gap: 1rem;
1230+  gap: var(--line-height);
1231 }
1232 
1233 .group-h {
1234   display: flex;
1235-  gap: 0.5rem;
1236+  gap: var(--grid-height);
1237   align-items: center;
1238 }
1239 
1240@@ -622,7 +592,8 @@ figure {
1241 .md h3,
1242 .md h4 {
1243   padding: 0;
1244-  margin: 1.5rem 0 0.9rem 0;
1245+  margin: 0;
1246+  /* margin: 1.5rem 0 0.9rem 0; */
1247   font-weight: bold;
1248 }
1249 
1250@@ -634,26 +605,24 @@ figure {
1251   text-decoration: none;
1252 }
1253 
1254-.md h1 {
1255-  font-size: 1.6rem;
1256-  line-height: 1.15;
1257-  border-bottom: 2px solid var(--grey);
1258-  padding-bottom: 0.7rem;
1259-}
1260-
1261-.md h2 {
1262-  font-size: 1.3rem;
1263-  line-height: 1.15;
1264-  color: var(--white-dark);
1265+h1 code, h2 code, h3 code, h4 code {
1266+  text-transform: none;
1267 }
1268 
1269-.md h3 {
1270-  font-size: 1.2rem;
1271-  color: var(--white-dark);
1272+.md h1 {
1273+  font-size: 1rem;
1274+  line-height: var(--line-height);
1275+  margin-top: calc(var(--line-height) * 2);
1276+  margin-bottom: var(--grid-height);
1277+  text-transform: uppercase;
1278 }
1279 
1280-.md h4 {
1281+.md h2, .md h3, .md h4 {
1282   font-size: 1rem;
1283+  line-height: var(--line-height);
1284+  margin-top: calc(var(--line-height) * 2);
1285+  margin-bottom: var(--line-height);
1286+  text-transform: uppercase;
1287   color: var(--white-dark);
1288 }
1289 
1290@@ -669,8 +638,8 @@ figure {
1291   border: 3px solid #FF79C6;
1292   padding: 8px 10px 10px 10px;
1293   border-radius: 10px;
1294-  box-shadow: 0px 5px 0px 0px var(--shadow);
1295   background-size: 100%;
1296+  margin: 0:
1297   -webkit-background-clip: text;
1298   -moz-background-clip: text;
1299   -webkit-text-fill-color: transparent;
1300@@ -689,47 +658,40 @@ figure {
1301 .btn-link:visited {
1302   border: 2px solid var(--link-color);
1303   color: var(--link-color);
1304-  padding: 0.4rem 1rem;
1305+  padding: var(--grid-height) 1rem;
1306   text-decoration: none;
1307   font-weight: bold;
1308   display: inline-block;
1309 }
1310 
1311-.btn-link:visited:hover,
1312-.btn-link:hover {
1313-  border: 2px solid var(--hover);
1314-}
1315-
1316-.btn-link-alt,
1317-.btn-link-alt:visited {
1318-  border: 2px solid var(--white);
1319-  color: var(--white);
1320-}
1321-
1322 .box {
1323   border: 2px solid var(--grey-light);
1324-  padding: 0.5rem 0.75rem;
1325+  padding: var(--line-height);
1326 }
1327 
1328 .box-sm {
1329   border: 2px solid var(--grey-light);
1330-  padding: 0.15rem 0.35rem;
1331+  padding: var(--grid-height);
1332 }
1333 
1334 .box-alert {
1335   border: 2px solid var(--hover);
1336-  padding: 0.5rem 0.75rem;
1337+  padding: var(--line-height);
1338 }
1339 
1340 .box-sm-alert {
1341   border: 2px solid var(--hover);
1342-  padding: 0.15rem 0.35rem;
1343+  padding: var(--grid-height);
1344 }
1345 
1346 .list-none {
1347   list-style-type: none;
1348 }
1349 
1350+.list-square {
1351+  list-style-type: square;
1352+}
1353+
1354 .list-disc {
1355   list-style-type: disc;
1356 }
1357@@ -766,3 +728,23 @@ figure {
1358     flex-direction: column;
1359   }
1360 }
1361+
1362+#debug {
1363+  position: relative;
1364+}
1365+
1366+#debug .debug-grid {
1367+  width: 100%;
1368+  height: 100%;
1369+  position: absolute;
1370+  top: 0;
1371+  left: 0;
1372+  right: 0;
1373+  bottom: 0;
1374+  z-index: -1;
1375+  background-image:
1376+    repeating-linear-gradient(var(--code) 0 1px, transparent 1px 100%),
1377+    repeating-linear-gradient(90deg, var(--code) 0 1px, transparent 1px 100%);
1378+  background-size: 1ch var(--grid-height);
1379+  margin: 0;
1380+}
1381-- 
13822.45.2
1383