From eb124a733765f87095f9a6405352c4f7e4f6ceb7 Mon Sep 17 00:00:00 2001
From: rootiest <chris@rootiest.com>
Date: Mon, 8 Jun 2026 11:45:06 -0400
Subject: [PATCH] fix(docs): restore toc on index, hide it on section pages via
 JS, fix full-page bg

---
 .gitea/workflows/html-docs.yml |   2 +-
 docs/html-style.html           | 224 +++++++++++++++++++++++++--------
 2 files changed, 171 insertions(+), 55 deletions(-)

diff --git a/.gitea/workflows/html-docs.yml b/.gitea/workflows/html-docs.yml
index c17f0aa..5e67c2e 100644
--- a/.gitea/workflows/html-docs.yml
+++ b/.gitea/workflows/html-docs.yml
@@ -26,7 +26,7 @@ jobs:
       - name: Generate chunked HTML docs
         run: |
           rm -rf docs/html/
-          pandoc -f gfm -t chunkedhtml --split-level=1 \
+          pandoc -f gfm -t chunkedhtml --split-level=1 --toc \
                  --include-in-header docs/html-style.html \
                  docs/fish-config.md \
                  -o docs/html/
diff --git a/docs/html-style.html b/docs/html-style.html
index a4cbda4..80138e5 100644
--- a/docs/html-style.html
+++ b/docs/html-style.html
@@ -1,19 +1,24 @@
 <style>
-/* Catppuccin Latte (light) / Mocha (dark) — auto via prefers-color-scheme */
+/* ── Catppuccin Latte (light) / Mocha (dark) ─────────────────── */
 :root {
+  color-scheme: light dark;
   --bg:       #eff1f5;
   --surface:  #e6e9ef;
   --overlay:  #ccd0da;
   --text:     #4c4f69;
-  --subtext:  #6c6f85;
+  --sub1:     #6c6f85;
+  --sub0:     #8c8fa1;
   --blue:     #1e66f5;
   --lavender: #7287fd;
+  --sapphire: #209fb5;
   --green:    #40a02b;
-  --red:      #d20f39;
   --yellow:   #df8e1d;
   --peach:    #fe640b;
+  --mauve:    #8839ef;
   --code-bg:  #dce0e8;
   --border:   #bcc0cc;
+  --glow1:    rgba(30, 102, 245, 0.05);
+  --glow2:    rgba(136, 57, 239, 0.04);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -22,47 +27,96 @@
     --surface:  #313244;
     --overlay:  #45475a;
     --text:     #cdd6f4;
-    --subtext:  #a6adc8;
+    --sub1:     #bac2de;
+    --sub0:     #a6adc8;
     --blue:     #89b4fa;
     --lavender: #b4befe;
+    --sapphire: #74c7ec;
     --green:    #a6e3a1;
-    --red:      #f38ba8;
     --yellow:   #f9e2af;
     --peach:    #fab387;
+    --mauve:    #cba6f7;
     --code-bg:  #181825;
     --border:   #45475a;
+    --glow1:    rgba(137, 180, 250, 0.06);
+    --glow2:    rgba(203, 166, 247, 0.05);
   }
 }
 
 *, *::before, *::after { box-sizing: border-box; }
 
-body {
+html {
   background-color: var(--bg);
+  background-image:
+    radial-gradient(ellipse 55% 40% at 10% 5%,  var(--glow1) 0%, transparent 100%),
+    radial-gradient(ellipse 45% 45% at 90% 95%, var(--glow2) 0%, transparent 100%);
+  min-height: 100%;
+}
+
+body {
   color: var(--text);
-  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  font-family: system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
   font-size: 16px;
-  line-height: 1.7;
-  max-width: 900px;
+  line-height: 1.75;
+  max-width: 880px;
   margin: 0 auto;
-  padding: 1.5rem 2rem 4rem;
+  padding: 2rem 2.5rem 5rem;
+  min-height: 100vh;
 }
 
-a            { color: var(--blue); text-decoration: none; }
-a:hover      { color: var(--lavender); text-decoration: underline; }
-a:visited    { color: var(--lavender); }
+/* ── Links ─────────────────────────────────────────────────── */
+a         { color: var(--blue); text-decoration: none; }
+a:hover   { color: var(--lavender); text-decoration: underline; }
+a:visited { color: var(--lavender); }
 
+/* ── Headings ──────────────────────────────────────────────── */
 h1, h2, h3, h4, h5, h6 {
+  font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
   color: var(--lavender);
-  margin-top: 1.8em;
-  margin-bottom: 0.4em;
   line-height: 1.3;
+  margin-top: 2em;
+  margin-bottom: 0.5em;
 }
-h1 { font-size: 2em;   border-bottom: 2px solid var(--border); padding-bottom: 0.3em; }
-h2 { font-size: 1.5em; border-bottom: 1px solid var(--border); padding-bottom: 0.2em; }
-h3 { font-size: 1.2em; }
+h1 {
+  font-size: 1.9rem;
+  color: var(--text);
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 0.4em;
+  margin-top: 1.2em;
+}
+h2 {
+  font-size: 1.35rem;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 0.2em;
+}
+h3 { font-size: 1.1rem;  color: var(--sapphire); }
+h4 { font-size: 0.95rem; color: var(--sub1); }
 
-p  { margin: 0.75em 0; }
+p { margin: 0.8em 0; }
 
+/* ── Title block (pandoc-generated cover) ──────────────────── */
+#title-block-header {
+  text-align: center;
+  padding: 2.5rem 0 2rem;
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid var(--border);
+}
+#title-block-header .title {
+  font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
+  font-size: 2.6rem;
+  letter-spacing: 0.12em;
+  color: var(--lavender);
+  border: none;
+  margin: 0 0 0.75rem;
+}
+#title-block-header .author,
+#title-block-header .date {
+  color: var(--sub0);
+  font-size: 0.875rem;
+  margin: 0.2rem 0;
+}
+
+/* ── Inline code ───────────────────────────────────────────── */
 code {
   font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
   background: var(--code-bg);
@@ -72,83 +126,145 @@ code {
   font-size: 0.875em;
 }
 
+/* ── Code blocks ───────────────────────────────────────────── */
 pre {
   background: var(--code-bg);
   border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 1em 1.25em;
+  border-left: 3px solid var(--sapphire);
+  border-radius: 0 8px 8px 0;
+  padding: 1.1em 1.4em;
   overflow-x: auto;
-  line-height: 1.5;
+  line-height: 1.55;
+  margin: 1.2em 0;
 }
 pre code {
   background: none;
   color: var(--text);
   padding: 0;
-  font-size: 0.9em;
+  font-size: 0.88em;
 }
 
+/* ── Blockquotes ───────────────────────────────────────────── */
 blockquote {
-  border-left: 3px solid var(--blue);
-  margin: 1.2em 0;
-  padding: 0.6em 1.2em;
+  border-left: 3px solid var(--yellow);
+  margin: 1.5em 0;
+  padding: 0.75em 1.25em;
   background: var(--surface);
-  color: var(--subtext);
+  color: var(--sub1);
   border-radius: 0 6px 6px 0;
 }
-blockquote p { margin: 0; }
+blockquote p { margin: 0.3em 0; }
 
+/* ── Tables ────────────────────────────────────────────────── */
 table {
   border-collapse: collapse;
   width: 100%;
-  margin: 1.2em 0;
-  font-size: 0.95em;
+  margin: 1.4em 0;
+  font-size: 0.93em;
 }
 th, td {
   border: 1px solid var(--border);
-  padding: 0.5em 0.85em;
+  padding: 0.55em 0.9em;
   text-align: left;
 }
-th { background: var(--surface); color: var(--lavender); font-weight: 600; }
+th {
+  background: var(--surface);
+  color: var(--lavender);
+  font-weight: 600;
+  font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
+  font-size: 0.82em;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
 tr:nth-child(even) { background: var(--surface); }
-tr:hover           { background: var(--overlay); }
+tr:hover { background: var(--overlay); }
 
-hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; }
+/* ── HR ────────────────────────────────────────────────────── */
+hr { border: none; border-top: 1px solid var(--border); margin: 2.5em 0; }
 
-ul, ol { padding-left: 1.5em; }
-li { margin: 0.3em 0; }
+/* ── Lists ─────────────────────────────────────────────────── */
+ul, ol { padding-left: 1.6em; }
+li { margin: 0.35em 0; }
 
-/* ── Chunk navigation (prev / up / next) ──────────────────────── */
-nav {
+/* ── Chunk navigation bar (prev / up / next) ───────────────── */
+nav:not(#TOC):not([role="doc-toc"]) {
   display: flex;
-  align-items: center;
-  gap: 0.75em;
+  align-items: stretch;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 8px;
-  padding: 0.6em 1em;
   margin: 1.5em 0;
-  font-size: 0.9em;
-  flex-wrap: wrap;
+  font-size: 0.875em;
+  overflow: hidden;
 }
-nav a {
+nav:not(#TOC):not([role="doc-toc"]) p {
+  margin: 0;
+  padding: 0.65em 1.2em;
+  display: flex;
+  gap: 1.75em;
+  flex-wrap: wrap;
+  align-items: center;
+  width: 100%;
+}
+nav:not(#TOC):not([role="doc-toc"]) a {
   color: var(--blue);
   white-space: nowrap;
 }
-nav a:hover { color: var(--lavender); }
+nav:not(#TOC):not([role="doc-toc"]) a:hover { color: var(--lavender); }
 
-/* ── Table of contents (index page) ──────────────────────────── */
-nav#toc, nav[role="doc-toc"] {
+/* ── Table of contents panel ───────────────────────────────── */
+nav#TOC, nav[role="doc-toc"] {
   display: block;
   background: var(--surface);
   border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 1em 1.5em;
+  border-left: 3px solid var(--lavender);
+  border-radius: 0 8px 8px 0;
+  padding: 1.2em 1.5em;
+  margin: 1.5em 0;
 }
-nav#toc ul, nav[role="doc-toc"] ul {
-  padding-left: 1.2em;
-  margin: 0.4em 0;
+nav#TOC > h2,
+nav[role="doc-toc"] > h2 {
+  font-size: 0.7rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--sub0);
+  border: none;
+  margin: 0 0 0.9em;
+  padding: 0;
 }
-nav#toc li, nav[role="doc-toc"] li {
-  margin: 0.2em 0;
+nav#TOC ul, nav[role="doc-toc"] ul {
+  list-style: none;
+  padding-left: 1em;
+  margin: 0.25em 0;
+}
+nav#TOC > ul, nav[role="doc-toc"] > ul { padding-left: 0; }
+nav#TOC li, nav[role="doc-toc"] li {
+  margin: 0.3em 0;
+  padding-left: 0.75em;
+  border-left: 1px solid transparent;
+  transition: border-color 0.12s;
+}
+nav#TOC li:hover, nav[role="doc-toc"] li:hover {
+  border-left-color: var(--lavender);
+}
+nav#TOC a, nav[role="doc-toc"] a {
+  color: var(--sub1);
+  font-size: 0.9em;
+}
+nav#TOC a:hover, nav[role="doc-toc"] a:hover {
+  color: var(--lavender);
+  text-decoration: none;
 }
 </style>
+<script>
+/* Hide the ToC on every page except index.html */
+document.addEventListener('DOMContentLoaded', function () {
+  var p = location.pathname;
+  var onIndex = p === '/' || p === '' || /\/index\.html(\?.*)?$/.test(p);
+  if (!onIndex) {
+    var toc = document.getElementById('TOC') ||
+              document.querySelector('[role="doc-toc"]');
+    if (toc) toc.remove();
+  }
+});
+</script>