From e0b0120cf64c68bd4277009ba9e2480d0b7298f6 Mon Sep 17 00:00:00 2001 From: David Allemang Date: Fri, 31 Jul 2026 03:45:39 -0700 Subject: [PATCH] cute nav buttons --- main.typ | 26 ++++++++++++++++++++++++-- src/style.css | 35 +++++++++++++++++++++++++++++++---- 2 files changed, 55 insertions(+), 6 deletions(-) diff --git a/main.typ b/main.typ index f28026a5..16a6b5e5 100644 --- a/main.typ +++ b/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") diff --git a/src/style.css b/src/style.css index b5c8736b..f9ccafad 100644 --- a/src/style.css +++ b/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%; + } + } }