reworking layout

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)
-        })
-      })
-      html.main(content)
+          content
 
-      html.footer(context {
-        let prev = query(selector(document).before(here()))
-        let next = query(selector(document).after(here()))
+          html.nav(aria-label: "Page Navigation", context {
+            let prevs = query(selector(document).before(here()))
+            let nexts = query(selector(document).after(here()))
 
-        html.nav(class: "panel", {
-          if (prev.len() > 1) {
-            link(prev.at(-2).location(), html.span(class: "go-prev", prev.at(-2).title))
-          }
-          if (next.len() > 0) {
-            link(next.at(0).location(), html.span(class: "go-next", next.at(0).title))
-          }
+            html.ul({
+              if (prevs.len() > 1) {
+                let prev = prevs.at(-2)
+                html.li(
+                  aria-label: "Prev Page",
+                  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", {
-        //   let main = query(selector(document).before(<home>)).last()
-        //   link(main.location(), html.span(class: "go-home", main.title))
-        // })
+        // html.footer([footer])
       })
     }),
   )
 }
 
-#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")