Add prev/next pagination and tighten mobile UX

## Pagination

`partials/pagination.hbs` used to be gated on an opt-in
`:pagination:` page attribute that nothing set, so prev/next never
rendered. Rewrite it as a plain `page.previous`/`page.next` check so
every page that is listed in `nav.adoc` now gets a Prev/Next block at
the bottom. Antora skips same-page anchor entries automatically, so a
page like `phoenix/index.adoc` advances to LiveView rather than to one
of its own sub-sections.

The new markup is a two-card `<nav class="pagination">` — each card has
a small uppercase "Previous" / "Next" overline and the destination
page's title, so readers see *where* they're going before tapping. On
mobile the two cards stack (single-column grid); on `sm+` they sit
side by side. Cards have a subtle border, a 4rem minimum height, and a
tactile hover state so they read as links rather than inline text.

## Mobile UX

iPhone-width audit surfaced four real problems; fixed each:

- **Page overflowed horizontally.** AsciiDoc emits a `<div class="title">`
  above every listing block containing the file path (e.g.
  `lib/demo_web/controllers/product_html/show.html.heex`). In mono +
  0.15em tracking that string is ~430px wide and would not wrap, pushing
  the whole document past the viewport. Added
  `overflow-wrap: anywhere` to `.title` so it breaks on mobile.

- **Nav overlay had no escape.** `.nav-container.is-active` covers the
  whole viewport at z-20, which hid the hamburger toggle underneath it
  with no way to close. The toggle is now promoted to
  `position: fixed; z-index: 30` when `is-active` and switches to an X
  icon, so it always floats in the top-right corner of the overlay.

- **Hamburger tap target was 32×32 with a hard-coded dark icon.** Upped
  the button to 44×44 (Apple HIG), replaced the `<img src>` with a CSS
  mask so the icon inherits `currentColor` and stays visible in both
  light and dark mode, and added `aria-label`/`aria-expanded` to the
  partial.

- **Padding and type felt cramped.** Trimmed body gutters from `px-6` to
  `px-4` on mobile (keeps `sm:px-8` at 640px+), dropped the 17px pad on
  the content wrapper, shrunk code blocks from 14px @ p-5 to 13px @ p-4
  on mobile (restored at sm+), and narrowed the admonition icon column
  from `w-28` to `w-20` on mobile. Wide tables now scroll horizontally
  via a `.tableblock { overflow-x: auto }` wrapper instead of shoving
  the layout sideways.

Verified at 390×844 by loading each page into a 390px-wide iframe: no
horizontal scroll, pagination stacks, overlay opens and closes cleanly.

Author: wintermeyer

ui-bundle/src/css/site.css

@@ -77,7 +77,7 @@ body.article {
 }
 
 body.article > .body {
-  @apply mx-auto flex w-full max-w-[88rem] flex-1 gap-8 px-6 sm:px-8 lg:gap-12 lg:px-10;
+  @apply mx-auto flex w-full max-w-[88rem] flex-1 gap-8 px-4 sm:px-8 lg:gap-12 lg:px-10;
 }
 
 /* ---------------------------------------------------------------------------
@@ -170,10 +170,42 @@ body.article > .body {
 }
 
 .nav-toggle {
-  @apply h-8 w-8 shrink-0 cursor-pointer border-0 bg-neutral-100 bg-center bg-no-repeat lg:hidden dark:bg-neutral-900;
-  background-image: url("../img/menu.svg");
-  background-size: 1rem;
-  border-radius: 4px;
+  @apply relative h-11 w-11 shrink-0 cursor-pointer rounded border-0 bg-neutral-100 text-neutral-900 lg:hidden dark:bg-neutral-900 dark:text-neutral-100;
+}
+
+.nav-toggle::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 1.125rem;
+  height: 1.125rem;
+  background-color: currentColor;
+  mask: url("../img/menu.svg") center / contain no-repeat;
+  -webkit-mask: url("../img/menu.svg") center / contain no-repeat;
+}
+
+/* When the nav overlay is open on mobile, the toggle floats above the
+   overlay so the user can always reach it to close. */
+.nav-toggle.is-active {
+  position: fixed;
+  top: 0.75rem;
+  right: 0.75rem;
+  z-index: 30;
+  background-color: #fafafa;
+  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08);
+}
+
+.nav-toggle.is-active::before {
+  mask: url("../img/close.svg") center / contain no-repeat;
+  -webkit-mask: url("../img/close.svg") center / contain no-repeat;
+}
+
+@media (prefers-color-scheme: dark) {
+  .nav-toggle.is-active {
+    background-color: #131313;
+    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
+  }
 }
 
 /* ---------------------------------------------------------------------------
@@ -185,7 +217,7 @@ main.article {
 }
 
 main.article > .content {
-  @apply flex min-w-0 flex-1 flex-col gap-10 px-4 pt-8 sm:px-6 lg:flex-row lg:items-start lg:px-2;
+  @apply flex min-w-0 flex-1 flex-col gap-10 px-0 pt-6 sm:px-6 sm:pt-8 lg:flex-row lg:items-start lg:px-2;
 }
 
 .doc {
@@ -265,6 +297,17 @@ main.article > .content {
   @apply my-6;
 }
 
+/* AsciiDoc wraps every table in `<div class="tableblock">`; let wide
+   tables scroll horizontally instead of breaking the page layout on
+   narrow screens. */
+.doc .tableblock {
+  @apply -mx-4 overflow-x-auto px-4 sm:mx-0 sm:px-0;
+}
+
+.doc .tableblock > table {
+  @apply min-w-full;
+}
+
 .doc th {
   @apply border-b-2 border-neutral-300 px-3 py-2 text-left font-mono text-[11px] tracking-[0.15em] text-neutral-600 uppercase dark:border-neutral-700 dark:text-neutral-400;
   font-weight: 500;
@@ -286,7 +329,7 @@ main.article > .content {
 }
 
 .doc pre {
-  @apply my-6 overflow-x-auto rounded-sm bg-neutral-900 p-5 font-mono text-[14px] leading-[1.6] text-neutral-100 ring-1 ring-neutral-200 dark:bg-[#131313] dark:ring-neutral-800;
+  @apply my-6 overflow-x-auto rounded-sm bg-neutral-900 p-4 font-mono text-[13px] leading-[1.6] text-neutral-100 ring-1 ring-neutral-200 sm:p-5 sm:text-[14px] dark:bg-[#131313] dark:ring-neutral-800;
 }
 
 .doc pre code {
@@ -302,6 +345,7 @@ main.article > .content {
 .doc .imageblock > .title,
 .doc .tableblock > caption {
   @apply mb-2 font-mono text-[11px] tracking-[0.15em] text-neutral-500 uppercase dark:text-neutral-400;
+  overflow-wrap: anywhere;
 }
 
 .doc .source-toolbox {
@@ -347,7 +391,7 @@ main.article > .content {
 }
 
 .doc .admonitionblock .icon {
-  @apply w-28 pt-5 pl-5 align-top;
+  @apply w-20 pt-5 pl-4 align-top sm:w-28 sm:pl-5;
 }
 
 .doc .admonitionblock .icon i {
@@ -374,7 +418,7 @@ main.article > .content {
 .doc .admonitionblock.important .icon i::before { @apply text-rose-600 dark:text-rose-400; }
 
 .doc .admonitionblock td.content {
-  @apply pt-4 pr-5 pb-4 pl-0;
+  @apply pt-4 pr-4 pb-4 pl-0 sm:pr-5;
 }
 
 .doc .admonitionblock td.content > .title {
@@ -451,26 +495,36 @@ main.article > .content {
 
 /* ---------------------------------------------------------------------------
    Pagination (prev/next at the bottom of each page).
+
+   Mobile-first: two stacked full-width cards. From sm up they sit
+   side-by-side. Each card has a muted overline ("Previous"/"Next") and
+   the page title below it, so the reader sees *where* each link goes
+   before tapping.
 --------------------------------------------------------------------------- */
 
 .pagination {
-  @apply mx-auto mt-14 flex max-w-[78ch] justify-between gap-4 border-t border-neutral-200 pt-6 font-mono text-[12px] tracking-[0.15em] uppercase dark:border-neutral-800;
+  @apply mt-14 grid gap-3 border-t border-neutral-200 pt-6 sm:grid-cols-2 dark:border-neutral-800;
 }
 
-.pagination .prev::before {
-  content: "← ";
+.pagination a {
+  @apply flex min-h-[4rem] flex-col justify-center rounded-sm border border-neutral-200 px-4 py-3 text-neutral-700 no-underline transition hover:border-[#65a30d] hover:text-[#65a30d] dark:border-neutral-800 dark:text-neutral-300 dark:hover:border-[#c8f55a] dark:hover:text-[#c8f55a];
 }
 
 .pagination .next {
-  @apply ml-auto;
+  @apply sm:col-start-2 sm:text-right;
 }
 
-.pagination .next::after {
-  content: " →";
+/* First page has no previous — push the next link into its column. */
+.pagination:not(:has(.prev)) .next {
+  @apply col-start-1 sm:col-start-2;
 }
 
-.pagination a {
-  @apply text-neutral-600 no-underline hover:text-[#65a30d] dark:text-neutral-400 dark:hover:text-[#c8f55a];
+.pagination .pagination-label {
+  @apply font-mono text-[11px] tracking-[0.2em] text-neutral-500 uppercase dark:text-neutral-400;
+}
+
+.pagination .pagination-title {
+  @apply mt-1 font-serif text-[17px] leading-snug;
 }
 
 /* ---------------------------------------------------------------------------

ui-bundle/src/img/close.svg

@@ -1 +1 @@
-<button class="nav-toggle"></button>
+<button class="nav-toggle" type="button" aria-label="Toggle navigation" aria-expanded="false"></button>

ui-bundle/src/partials/nav-toggle.hbs

@@ -1,16 +1,16 @@
-{{#unless (eq page.attributes.pagination undefined)}}
 {{#if (or page.previous page.next)}}
-<nav class="pagination">
-  {{#if (ne page.attributes.pagination 'next')}}
+<nav class="pagination" aria-label="Page navigation">
   {{#with page.previous}}
-  <span class="prev"><a href="{{{relativize ./url}}}">{{{./content}}}</a></span>
+  <a class="prev" href="{{{relativize ./url}}}" rel="prev">
+    <span class="pagination-label">← Previous</span>
+    <span class="pagination-title">{{{./content}}}</span>
+  </a>
   {{/with}}
-  {{/if}}
-  {{#if (ne page.attributes.pagination 'prev')}}
   {{#with page.next}}
-  <span class="next"><a href="{{{relativize ./url}}}">{{{./content}}}</a></span>
+  <a class="next" href="{{{relativize ./url}}}" rel="next">
+    <span class="pagination-label">Next →</span>
+    <span class="pagination-title">{{{./content}}}</span>
+  </a>
   {{/with}}
-  {{/if}}
 </nav>
 {{/if}}
-{{/unless}}