Say where you are, let the keyboard past, and give the story pictures

THE NAV NEVER SAID WHICH PAGE YOU WERE ON. A four-page site gets away with that right up until somebody clicks Catering, lands on a page of prices, and cannot tell whether the click worked. The current page now carries aria-current for a screen reader and a sage rule under the word for everyone else — a rule rather than a darker colour, because the nav is already sage on cream and darkening it reads as a hover. The list is generated from one array now instead of four hand-written anchors, which is what makes the marking possible at all. THE KEYBOARD HAD NO WAY PAST THE NAV. Every page begins with a skip link — off-screen until it has focus, then a real button in the corner, which is the half of that pattern everyone forgets. THE STORY WAS FOUR BLOCKS OF TEXT. It has photographs between the sections now, captioned in small caps, and an opening paragraph set with a drop cap in the display face. Once, on that page: a drop cap on every page would be a costume rather than a voice. 60 tests. Two new ones, both on things that fail silently rather than loudly: the active link (a wrong model attribute would mark nothing, which looks exactly like a page with no active link) and the skip link's target existing. Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
2026-07-26 19:33:06 -05:00
parent a657600078
commit e2b9af56f1
5 changed files with 84 additions and 8 deletions
@@ -55,13 +55,18 @@
  </div>
 </header>

-<!--/* One list of links, worn two ways — so the phone and the desktop can't end up offering different
-       pages. */-->
+<!--/*
+  One list of links, worn two ways — so the phone and the desktop can't end up offering different pages.
+
+  The page you are on is marked: aria-current for a screen reader, and a sage rule under the word for
+  everyone else. A four-page site can get away without it, right up until someone clicks Catering, lands
+  on a page of prices, and has no idea whether the click worked.
+*/-->
 <th:block th:fragment="links(itemClass)">
-  <a href="/products" th:class="${itemClass}">Our Products</a>
-  <a href="/catering" th:class="${itemClass}">Catering</a>
-  <a href="/history" th:class="${itemClass}">Our Story</a>
-  <a href="/contact" th:class="${itemClass}">Contact</a>
+  <a th:each="item : ${ {{'/products','Our Products'},{'/catering','Catering'},{'/history','Our Story'},{'/contact','Contact'}} }"
+     th:href="${item[0]}" th:text="${item[1]}"
+     th:aria-current="${path == item[0] ? 'page' : null}"
+     th:class="${itemClass} + (${path == item[0]} ? ' is-here' : '')">Our Products</a>
 </th:block>
 </body>
 </html>
@@ -15,8 +15,11 @@
 <head th:replace="~{fragments/head :: head(${title}, ${description}, ${path})}"></head>
 <body>
  <div class="min-h-screen bg-bakery-50 flex flex-col">
+    <!--/* Hidden until it has focus: the first thing a keyboard reaches, so the nav isn't a toll gate on
+           every page. */-->
+    <a href="#content" class="skip-link">Skip to the page</a>
    <div th:replace="~{fragments/header :: header}"></div>
-    <main class="flex-grow">
+    <main id="content" class="flex-grow">
      <div th:replace="${content}"></div>
    </main>
    <div th:replace="~{fragments/footer :: footer}"></div>
@@ -26,7 +26,7 @@
    <div class="measure space-y-12">
      <section>
        <h2 class="h3 text-bakery-900 mb-4">How it started</h2>
-        <p class="text-bakery-800 leading-relaxed">
+        <p class="opening-para text-bakery-800 leading-relaxed">
          Morissa Bennett opened The Vine in 2024, at 215 E Main Street, in the middle of downtown
          Princeville. The plan was not complicated. Bake it ourselves, sell it ourselves, and keep
          enough tables that nobody feels rushed out the door.
@@ -42,6 +42,14 @@
        </p>
      </section>

+      <figure>
+        <img th:src="${photos.of('gallery/Cinnamon Rolls.webp')}"
+             alt="Cinnamon rolls, iced, on the counter at The Vine"
+             width="1200" height="800" loading="lazy"
+             class="photo w-full h-64 md:h-80 object-cover">
+        <figcaption class="mt-3 label text-bakery-500 text-center">The cinnamon rolls, most mornings</figcaption>
+      </figure>
+
      <section>
        <h2 class="h3 text-bakery-900 mb-4">The cakes are the fun part</h2>
        <p class="text-bakery-800 leading-relaxed">
@@ -53,6 +61,14 @@
        </p>
      </section>

+      <figure>
+        <img th:src="${photos.of('gallery/Cakes.webp')}"
+             alt="A decorated cake made to order at The Vine"
+             width="1200" height="800" loading="lazy"
+             class="photo w-full h-64 md:h-80 object-cover">
+        <figcaption class="mt-3 label text-bakery-500 text-center">Made to order, whatever the week is celebrating</figcaption>
+      </figure>
+
      <section>
        <h2 class="h3 text-bakery-900 mb-4">Around town</h2>
        <p class="text-bakery-800 leading-relaxed">