rootiest/fish-config
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(docs): restore toc on index, hide it on section pages via JS, fix full-page bg

Browse Source
This commit is contained in:
Rootiest
2026-06-08 11:45:06 -04:00
parent 9320e462f7
commit eb124a7337
2 changed files with 171 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitea/workflows/html-docs.yml
+1 -1
View File
@@ -26,7 +26,7 @@ jobs:
- name: Generate chunked HTML docs - name: Generate chunked HTML docs
run: | run: |
rm -rf docs/html/ 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 \ --include-in-header docs/html-style.html \
docs/fish-config.md \ docs/fish-config.md \
-o docs/html/ -o docs/html/
docs/html-style.html
+170 -54
View File
@@ -1,19 +1,24 @@
<style> <style>
/* Catppuccin Latte (light) / Mocha (dark) — auto via prefers-color-scheme */ /* ── Catppuccin Latte (light) / Mocha (dark) ─────────────────── */
:root { :root {
color-scheme: light dark;
--bg: #eff1f5; --bg: #eff1f5;
--surface: #e6e9ef; --surface: #e6e9ef;
--overlay: #ccd0da; --overlay: #ccd0da;
--text: #4c4f69; --text: #4c4f69;
--subtext: #6c6f85; --sub1: #6c6f85;
--sub0: #8c8fa1;
--blue: #1e66f5; --blue: #1e66f5;
--lavender: #7287fd; --lavender: #7287fd;
--sapphire: #209fb5;
--green: #40a02b; --green: #40a02b;
--red: #d20f39;
--yellow: #df8e1d; --yellow: #df8e1d;
--peach: #fe640b; --peach: #fe640b;
--mauve: #8839ef;
--code-bg: #dce0e8; --code-bg: #dce0e8;
--border: #bcc0cc; --border: #bcc0cc;
--glow1: rgba(30, 102, 245, 0.05);
--glow2: rgba(136, 57, 239, 0.04);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@@ -22,47 +27,96 @@
--surface: #313244; --surface: #313244;
--overlay: #45475a; --overlay: #45475a;
--text: #cdd6f4; --text: #cdd6f4;
--subtext: #a6adc8; --sub1: #bac2de;
--sub0: #a6adc8;
--blue: #89b4fa; --blue: #89b4fa;
--lavender: #b4befe; --lavender: #b4befe;
--sapphire: #74c7ec;
--green: #a6e3a1; --green: #a6e3a1;
--red: #f38ba8;
--yellow: #f9e2af; --yellow: #f9e2af;
--peach: #fab387; --peach: #fab387;
--mauve: #cba6f7;
--code-bg: #181825; --code-bg: #181825;
--border: #45475a; --border: #45475a;
--glow1: rgba(137, 180, 250, 0.06);
--glow2: rgba(203, 166, 247, 0.05);
} }
} }
*, *::before, *::after { box-sizing: border-box; } *, *::before, *::after { box-sizing: border-box; }
body { html {
background-color: var(--bg); 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); 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; font-size: 16px;
line-height: 1.7; line-height: 1.75;
max-width: 900px; max-width: 880px;
margin: 0 auto; margin: 0 auto;
padding: 1.5rem 2rem 4rem; padding: 2rem 2.5rem 5rem;
min-height: 100vh;
} }
a { color: var(--blue); text-decoration: none; } /* ── Links ─────────────────────────────────────────────────── */
a:hover { color: var(--lavender); text-decoration: underline; } a { color: var(--blue); text-decoration: none; }
a:visited { color: var(--lavender); } a:hover { color: var(--lavender); text-decoration: underline; }
a:visited { color: var(--lavender); }
/* ── Headings ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
color: var(--lavender); color: var(--lavender);
margin-top: 1.8em;
margin-bottom: 0.4em;
line-height: 1.3; 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; } h1 {
h2 { font-size: 1.5em; border-bottom: 1px solid var(--border); padding-bottom: 0.2em; } font-size: 1.9rem;
h3 { font-size: 1.2em; } 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 { code {
font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace; font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
background: var(--code-bg); background: var(--code-bg);
@@ -72,83 +126,145 @@ code {
font-size: 0.875em; font-size: 0.875em;
} }
/* ── Code blocks ───────────────────────────────────────────── */
pre { pre {
background: var(--code-bg); background: var(--code-bg);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 8px; border-left: 3px solid var(--sapphire);
padding: 1em 1.25em; border-radius: 0 8px 8px 0;
padding: 1.1em 1.4em;
overflow-x: auto; overflow-x: auto;
line-height: 1.5; line-height: 1.55;
margin: 1.2em 0;
} }
pre code { pre code {
background: none; background: none;
color: var(--text); color: var(--text);
padding: 0; padding: 0;
font-size: 0.9em; font-size: 0.88em;
} }
/* ── Blockquotes ───────────────────────────────────────────── */
blockquote { blockquote {
border-left: 3px solid var(--blue); border-left: 3px solid var(--yellow);
margin: 1.2em 0; margin: 1.5em 0;
padding: 0.6em 1.2em; padding: 0.75em 1.25em;
background: var(--surface); background: var(--surface);
color: var(--subtext); color: var(--sub1);
border-radius: 0 6px 6px 0; border-radius: 0 6px 6px 0;
} }
blockquote p { margin: 0; } blockquote p { margin: 0.3em 0; }
/* ── Tables ────────────────────────────────────────────────── */
table { table {
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
margin: 1.2em 0; margin: 1.4em 0;
font-size: 0.95em; font-size: 0.93em;
} }
th, td { th, td {
border: 1px solid var(--border); border: 1px solid var(--border);
padding: 0.5em 0.85em; padding: 0.55em 0.9em;
text-align: left; 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: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; } /* ── Lists ─────────────────────────────────────────────────── */
li { margin: 0.3em 0; } ul, ol { padding-left: 1.6em; }
li { margin: 0.35em 0; }
/* ── Chunk navigation (prev / up / next) ──────────────────────── */ /* ── Chunk navigation bar (prev / up / next) ───────────────── */
nav { nav:not(#TOC):not([role="doc-toc"]) {
display: flex; display: flex;
align-items: center; align-items: stretch;
gap: 0.75em;
background: var(--surface); background: var(--surface);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 8px; border-radius: 8px;
padding: 0.6em 1em;
margin: 1.5em 0; margin: 1.5em 0;
font-size: 0.9em; font-size: 0.875em;
flex-wrap: wrap; 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); color: var(--blue);
white-space: nowrap; 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) ──────────────────────────── */ /* ── Table of contents panel ───────────────────────────────── */
nav#toc, nav[role="doc-toc"] { nav#TOC, nav[role="doc-toc"] {
display: block; display: block;
background: var(--surface); background: var(--surface);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 8px; border-left: 3px solid var(--lavender);
padding: 1em 1.5em; border-radius: 0 8px 8px 0;
padding: 1.2em 1.5em;
margin: 1.5em 0;
} }
nav#toc ul, nav[role="doc-toc"] ul { nav#TOC > h2,
padding-left: 1.2em; nav[role="doc-toc"] > h2 {
margin: 0.4em 0; 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 { nav#TOC ul, nav[role="doc-toc"] ul {
margin: 0.2em 0; 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> </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>