reworking layout

content/toc.typ

@@ -1,15 +0,0 @@
-#import "/docs.typ": docs-page, note, tip, warn
-
-#show: docs-page.with(
-  route: "/toc/",
-  title: [Contents],
-)
-
-#context for doc in query(document) {
-  let target = selector(heading).within(doc.location())
-
-  show outline.entry: it => {
-  }
-
-  outline(depth: 1, target: target, title: link(doc.location(), doc.title))
-}

docs.typ

@@ -15,36 +15,72 @@
         html.title(context title)
       })
       html.body({
-        html.header(context {
+        html.a(href: "#main", [Skip to content])
+
+        // html.header([header])
+
+        html.nav(aria-label: "Table of Contents", context {
+          html.ul({
+            for doc in query(document) {
+              html.li({
+                html.details(open: doc == query(selector(document).before(here())).last(), {
+                  html.summary(link(doc.location(), doc.title))
+                  html.ul(context for sec in query(selector(heading.where(level: 1)).within(doc.location())) {
+                    html.li(link(
+                      sec.location(),
+                      [#counter(heading).display(at: sec.location()) #sec.body],
+                    ))
+                  })
+                })
+              })
+            }
+          })
+        })
+
+        html.nav(aria-label: "Outline", context {
+          let doc = query(selector(document).before(here())).last()
+          show html.elem.where(tag: "nav"): it => it.body
+          show html.elem.where(tag: "ol"): it => html.elem("ul", it.body)
+          outline(title: none, depth: 2, target: selector(heading).within(doc.location()))
+        })
+
+        html.main(id: "main", {
           html.h1(title)
-        })
+          content
-      })
-      html.main(content)
 
-      html.footer(context {
+          html.nav(aria-label: "Page Navigation", context {
-        let prev = query(selector(document).before(here()))
+            let prevs = query(selector(document).before(here()))
-        let next = query(selector(document).after(here()))
+            let nexts = query(selector(document).after(here()))
 
-        html.nav(class: "panel", {
+            html.ul({
-          if (prev.len() > 1) {
+              if (prevs.len() > 1) {
-            link(prev.at(-2).location(), html.span(class: "go-prev", prev.at(-2).title))
+                let prev = prevs.at(-2)
-          }
+                html.li(
-          if (next.len() > 0) {
+                  aria-label: "Prev Page",
-            link(next.at(0).location(), html.span(class: "go-next", next.at(0).title))
+                  link(prev.location(), prev.title),
-          }
+                )
+              }
+
+              if (nexts.len() > 0) {
+                show html.elem.where(tag: "a"): it => it
+                let next = nexts.at(0)
+                html.li(
+                  aria-label: "Next Page",
+                  link(next.location(), next.title),
+                )
+              }
+            })
+          })
         })
 
-        // html.nav(class: "panel", {
+        // html.footer([footer])
-        //   let main = query(selector(document).before(<home>)).last()
-        //   link(main.location(), html.span(class: "go-home", main.title))
-        // })
       })
     }),
   )
 }
 
-#let callout(kind: str, body) = html.div(class: "callout " + kind, body)
+#let callout(kind: str, body) = html.aside(aria-label: kind, body)
 
 #let note = callout.with(kind: "note")
-#let warn = callout.with(kind: "caution")
+#let warn = callout.with(kind: "warn")
 #let tip = callout.with(kind: "tip")

index.typ

@@ -13,9 +13,8 @@ Welcome! Here, we will talk about Entity ID based wireless redstone (EID Wireles
   Until version 26.2, this only works on multiplayer servers. See @singleplayer.
 ]
 
-#html.nav(
+```python
-  context for doc in query(document) {
+def foo():
-    html.h3(link(doc.location(), doc.title))
+    pass
-    // outline(title: none, depth: 1, target: selector(heading).within(doc.location()))
+```
-  },
+
-)

main.typ

@@ -2,7 +2,6 @@
 
 #include "static/index.typ"
 #include "index.typ"
-#include "content/toc.typ"
 
 #include "content/core.typ"
 #include "content/interference.typ"
@@ -11,4 +10,3 @@
 #include "content/transport.typ"
 #include "content/bulk.typ"
 #include "content/network.typ"
-

static/style.bak.css

@@ -0,0 +1,156 @@
+@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, 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;
+}
+
+math {
+    font-family: "Libertinus Math", math;
+}
+
+main, header, footer {
+    max-width: 80ch;
+    margin-inline: auto;
+}
+
+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;
+    padding-inline: 2ch;
+    padding-block: 1ch;
+    border-radius: 4pt;
+    border-width: 1pt;
+    border-style: solid;
+}
+
+.callout {
+    display: block;
+    padding-inline: 2ch;
+    padding-block: 1ch;
+    border-width: 1pt 0;
+    border-style: solid;
+
+    margin-inline: -2ch;
+    margin-block: 1em;
+}
+
+.callout::before {
+    content: var(--mode-name);
+    padding-inline-end: 1ch;
+    font-family: "Mojangles", "monospace";
+    display: inline-block;
+    float: left;
+}
+
+.callout > p:first-child {
+    display: inline;
+}
+
+.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";
+}
+

static/style.css

@@ -1,156 +1,213 @@
-@media (prefers-color-scheme: dark) {
 :root {
-    --mode-note: cyan;
+    font-family: "Libertinus Serif", serif;
-    --mode-caution: coral;
+    line-height: 1.3em;
-    --mode-tip: springgreen;
-
-    --bg: #111;
-    --fg: #eee;
-    --fg-dim: #aaa;
-}
 }
 
 @media (prefers-color-scheme: light) {
-:root {
+    :root {
-    --mode-note: mediumblue;
+        --fg: black;
-    --mode-caution: brown;
+        --bg: white;
-    --mode-tip: forestgreen;
+    }
 
-    --bg: #eee;
+    [aria-label="note"] {
-    --fg: #111;
+        --fg: mediumblue;
-    --fg-dim: #555;
+    }
-}
+
+    [aria-label="warn"] {
+        --fg: brown;
+    }
+
+    [aria-label="tip"] {
+        --fg: forestgreen;
+    }
 }
 
-html {
+@media (prefers-color-scheme: dark) {
-    font-family: "Libertinus Serif", serif;
+    :root {
-    font-size: 18pt;
+        --fg: rgb(240 240 240);
-    line-height: 1.5em;
+        --bg: rgb(30 30 30);
-    background: var(--background);
+    }
+
+    [aria-label="note"] {
+        --fg: cyan;
+    }
+
+    [aria-label="warn"] {
+        --fg: coral;
+    }
+
+    [aria-label="tip"] {
+        --fg: springgreen;
+    }
 }
 
-h1, h2, h3, h4, h5, h6, nav li {
+nav, h1, h2, h3, h4, h5, h6 {
     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;
-}
-
 math {
     font-family: "Libertinus Math", math;
 }
 
-main, header, footer {
+code {
-    max-width: 80ch;
+    font-family: "Libertinus Mono", monospace;
+}
+
+nav a {
+    text-decoration: none;
+}
+
+nav a:hover {
+    text-decoration: underline;
+}
+
+a {
+    color: var(--fg);
+}
+
+nav ul {
+    list-style-type: none;
+    padding-inline: 2ch;
+}
+
+nav > ul {
+    padding-inline: 0;
+}
+
+nav summary {
+    display: block;
+}
+
+nav details summary:hover::after {
+    content: "⮞";
+    float: right;
+}
+
+nav details[open] summary::after {
+    content: "⮟";
+    float: right;
+}
+
+html {
+    display: flex;
+    justify-content: center;
+    min-height: 100%;
+    min-width: 100%;
+}
+
+body {
+    display: grid;
+    grid-template-columns: 20ch 80ch 20ch;
+    grid-template-rows: auto auto 1fr auto;
+    grid-gap: 4ch;
+    width: auto;
+    min-height: 100%;
     margin-inline: auto;
 }
 
-li > * {
+body > a[href="#main"] {
-    margin-block: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
 }
 
-footer > nav > * ,
+body > a[href="#main"]:not(:focus) {
-.callout {
+    transform: translateY(-2em);
-    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 > * {
+body > header {
+    grid-column: 1 / 3;
+    grid-row: 1;
+}
+
+nav[aria-label="Table of Contents"] {
+    grid-column: 1;
+    grid-row: 2;
+}
+
+nav[aria-label="Outline"] {
+    grid-column: 3;
+    grid-row: 2;
+}
+
+nav[aria-label="Outline"]:before {
+    content: "On this Page";
     display: block;
-    padding-inline: 2ch;
-    padding-block: 1ch;
-    border-radius: 4pt;
-    border-width: 1pt;
-    border-style: solid;
-}
-
-.callout {
-    display: block;
-    padding-inline: 2ch;
-    padding-block: 1ch;
-    border-width: 1pt 0;
-    border-style: solid;
-
-    margin-inline: -2ch;
     margin-block: 1em;
 }
 
-.callout::before {
+nav[aria-label="Page Navigation"] > ul {
-    content: var(--mode-name);
+    grid-column: 2;
-    padding-inline-end: 1ch;
+    grid-row: 3;
-    font-family: "Mojangles", "monospace";
+    display: grid;
-    display: inline-block;
+    grid-template-columns: 1fr 1fr;
-    float: left;
+    gap: 4pt;
 }
 
-.callout > p:first-child {
+nav[aria-label="Page Navigation"] > ul > li > a {
-    display: inline;
+    display: block;
+    text-align: center;
+    padding: 1em;
+
+    background: rgb(from var(--fg) r g b / 15%);
+    border: 1pt solid rgb(from var(--fg) r g b / 50%);
+    border-radius: 3pt;
 }
 
-.note {
+li[aria-label="Next Page"] {
-    --mode-color: var(--mode-note);
+    grid-column: 2;
-    --mode-name: "Note";
 }
 
-.caution {
+li[aria-label="Prev Page"] {
-    --mode-color: var(--mode-caution);
+    grid-column: 1;
-    --mode-name: "Caution";
 }
 
-.tip {
+li[aria-label="Next Page"] > a:after {
-    --mode-color: var(--mode-tip);
+    content: "Next Page";
-    --mode-name: "Tip";
+    display: block;
+    font-size: small;
 }
 
+li[aria-label="Prev Page"] > a:after {
+    content: "Previous Page";
+    display: block;
+    font-size: small;
+}
+
+body > main {
+    grid-column: 2;
+    grid-row: 2;
+}
+
+body > footer {
+    grid-column: 1 / 4;
+    grid-row: 4;
+}
+
+aside {
+    border-block: 1pt solid rgba(from var(--fg) r g b / 50%);
+    background: rgba(from var(--fg) r g b / 15%);
+    color: var(--fg);
+    margin-block: 1em;
+    padding-block: 1ch;
+    padding-inline: 1em;
+    margin-inline: -1em;
+}
+
+aside[aria-label="note"]:before {
+    content: "Note:";
+    margin-inline-end: 1ch;
+    font-family: "Mojangles", monospace;
+}
+
+aside[aria-label="warn"]:before {
+    content: "Caution:";
+    margin-inline-end: 1ch;
+    font-family: "Mojangles", monospace;
+}
+
+aside[aria-label="tip"]:before {
+    content: "Tip:";
+    margin-inline-end: 1ch;
+    font-family: "Mojangles", monospace;
+}