working on toc

static/style.css

@@ -1,13 +1,88 @@
+@media (prefers-color-scheme: dark) {
+:root {
+    --mode-note: cyan;
+    --mode-caution: coral;
+    --mode-tip: springgreen;
+
+    --bg: #111;
+    --fg: #eee;
+    --fg-dim: #aaa;
+}
+}
+
+@media (prefers-color-scheme: light) {
+:root {
+    --mode-note: mediumblue;
+    --mode-caution: brown;
+    --mode-tip: forestgreen;
+
+    --bg: #eee;
+    --fg: #111;
+    --fg-dim: #555;
+}
+}
+
 html {
     font-family: "Libertinus Serif", serif;
     font-size: 18pt;
     line-height: 1.5em;
+    background: var(--background);
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1, h2, h3, h4, h5, h6, nav li {
     font-family: "Mojangles", "monospace";
 }
 
+nav > * {
+    margin-block: 0;
+}
+
+nav {
+    margin-block: 1em;
+}
+
+footer > nav {
+    display: flex;
+    flex-direction: row;
+    gap: 1ch;
+}
+
+footer > nav > *
+{
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+    text-align: center;
+    font-family: "Mojangles", "monospace";
+
+    text-decoration: none;
+
+    --mode-color: var(--fg-dim);
+}
+
+footer > nav > *:hover {
+    --mode-color: var(--fg);
+}
+
+
+.go-next::after {
+    display: block;
+    content: "Next page";
+    font-size: smaller;
+}
+
+.go-prev::after {
+    display: block;
+    content: "Previous page";
+    font-size: smaller;
+}
+
+.go-home::after {
+    display: block;
+    content: "Home page";
+    font-size: smaller;
+}
+
 code {
     font-family: "Libertinus Mono", monospace;
 }
@@ -25,18 +100,31 @@ li > * {
     margin-block: 0;
 }
 
+footer > nav > * ,
 .callout {
+    color: var(--mode-color);
+    border-color: rgba(from var(--mode-color) r g b);
+    background-color: rgba(from var(--mode-color) r g b / 5%);
+}
+
+footer > nav > * {
     display: block;
-    margin-inline: -2ch;
     padding-inline: 2ch;
     padding-block: 1ch;
     border-radius: 4pt;
     border-width: 1pt;
     border-style: solid;
+}
 
-    color: var(--mode-color);
-    border-color: rgba(from var(--mode-color) r g b);
-    background-color: rgba(from var(--mode-color) r g b / 5%);
+.callout {
+    display: block;
+    padding-inline: 2ch;
+    padding-block: 1ch;
+    border-width: 1pt 0;
+    border-style: solid;
+
+    margin-inline: -2ch;
+    margin-block: 1em;
 }
 
 .callout::before {
@@ -52,41 +140,17 @@ li > * {
 }
 
 .note {
+    --mode-color: var(--mode-note);
     --mode-name: "Note";
 }
 
 .caution {
+    --mode-color: var(--mode-caution);
     --mode-name: "Caution";
 }
 
 .tip {
+    --mode-color: var(--mode-tip);
     --mode-name: "Tip";
 }
 
-@media (prefers-color-scheme: dark) {
-    .note {
-        --mode-color: cyan;
-    }
-
-    .caution {
-        --mode-color: coral;
-    }
-
-    .tip {
-        --mode-color: springgreen;
-    }
-}
-
-@media (prefers-color-scheme: light) {
-    .note {
-        --mode-color: blue;
-    }
-
-    .caution {
-        --mode-color: orangered;
-    }
-
-    .tip {
-        --mode-color: seagreen;
-    }
-}