cute nav buttons

main.typ

@@ -13,7 +13,29 @@
       html.link(rel: "stylesheet", href: "/src/components.css")
       html.script(type: "module", src: "/src/components.js")
     })
-    html.body(it)
+    html.body(context {
+      let prev = query(selector(heading.where(level: 1)).before(here())).at(-1, default: none)
+      let next = query(selector(heading.where(level: 1)).after(here())).at(1, default: none)
+      html.main(it)
+      html.footer({
+        html.nav({
+          html.ul({
+            if prev != none {
+              html.li(
+                link(prev.location(), [Prev: #prev.body]),
+                class: "btn",
+              )
+            }
+            if next != none {
+              html.li(
+                link(next.location(), [Next: #next.body]),
+                class: "btn",
+              )
+            }
+          })
+        })
+      })
+    })
   },
 ))
 
@@ -24,7 +46,7 @@
   doc("interference.html", include "content/interference.typ")
   doc("tilesets.html", include "content/tilesets.typ")
   doc("block-event-delay.html", include "content/block-event-delay.typ")
-  // doc("design-notes.html", include "content/design.typ")
+  // doc("design-notfirstes.html", include "content/design.typ")
   // doc("channel-selectors.html", include "content/channels.typ")
   // doc("bulk-transmission.html", include "content/bulk.typ")
   // doc("network-protocols.html", include "content/network.typ")

src/style.css

@@ -95,7 +95,8 @@ table {
 
 
 .btn {
-    padding: 0.5ch 2ch;
+    font-size: large;
+    padding: 0.5ch;
     display: inline-block;
     text-shadow: 1.20pt 1.20pt 0 #333;
     border-image-source: url("/assets/minecraft/textures/gui/sprites/widget/button.png");
@@ -103,9 +104,35 @@ table {
     border-image-slice: 2 2 3 2 fill;
     border-image-repeat: repeat;
     image-rendering: pixelated;
-    /*border-image-slice: calc(3 / 200 * 100%) calc(2 / 20 * 100%);*/
+
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    &:hover {
+        border-image-source: url("/assets/minecraft/textures/gui/sprites/widget/button_highlighted.png");
+    }
 }
 
-.btn:hover {
-    border-image-source: url("/assets/minecraft/textures/gui/sprites/widget/button_highlighted.png");
+
+footer nav ul {
+    list-style-type: none;
+    padding-inline: 0;
+    display: flex;
+    flex-direction: row;
+    gap: 1ch;
+
+    li {
+        text-align: center;
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: 0;
+
+        a {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+    }
 }