TheVine/itsthevine
Archived
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Photographs hold still, and every page opens the same way

Browse Source 
HOVER IS OFF THE IMAGES. The product cards lifted, the homepage's three cards lifted and zoomed their
photo 5% on the way. None of those cards is a link, so the lift was promising a click that isn't there,
and a photograph of a cake does not benefit from moving. `panel-lift` is still defined for the day
something IS clickable; nothing on the public site uses it.

EVERY PAGE NOW OPENS THE SAME: a small-caps line, the title in the display face, one sentence saying what
this is. Two dresses for it — `photographed` for the pages that sell or tell (catering, the story), where a
blurred photo under the sage wash does what the homepage hero does; `plain` for the pages you arrive at
already knowing what you want, where a photograph would be in front of the thing you came for. It was four
pieces of markup that happened to look similar; it is one fragment with two variants. Products and Contact
gained the eyebrow they were missing ("From the counter", "Say hello").

THE HOMEPAGE'S ORDER was hero → what people come in for → story → catering → visit: two cream sections
butted together at the end, with the one block that sells something buried between them. Now hero →
what people come in for → catering (on the deeper cream, so two light sections still read as two) → story
→ visit. Dark, light, light-but-different, dark, light.

TWO BUGS THE SCREENSHOTS FOUND, both invisible at the width I had been checking:
- Between 1024 and about 1200 the wordmark, the nav gaps AND the open-now line all stepped up at once, so
  the script overflowed its box and painted over the branch mark. They step up at xl now, separately.
- The open-now fragment hardcoded `inline-flex` while the header passed `hidden lg:…`, which is two rules
  for one property — the winner decided by Tailwind's output order rather than by the markup, which is why
  "hidden" wasn't hiding it. The caller owns display now.

Checked at 390, 800, 900, 1000, 1024, 1100, 1200, 1280 and 1440. 60 tests green.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
This commit is contained in:
austin
2026-07-26 20:00:59 -05:00
co-authored by Claude Opus 5
parent 398233dba4
commit d9df211694
9 changed files with 109 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/templates/fragments/opening.html
+44
View File
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<!--/*
How a page begins. Every page, the same three things in the same order: a small-caps line, the title in
the display face, and one sentence saying what this is.
Two dresses for it. `photographed` is for the pages that are selling or telling — catering and the story
— where a blurred photo under the sage wash does the work the homepage hero does. `plain` is for the
pages you arrive at already knowing what you want, where a photograph would be in the way of the thing
you came for: the catalogue, the contact form.
Before this the four openings were four different pieces of markup that happened to look similar.
*/-->
<section th:fragment="photographed(eyebrow, title, lede, image)"
class="band relative flex items-center bg-bakery-900 text-white overflow-hidden">
<img th:src="${photos.of(image)}" alt=""
class="absolute inset-0 w-full h-full object-cover blur-[3px] scale-110">
<!--/* Sage wash rather than a neutral black scrim — the tint is the identity. */-->
<div class="absolute inset-0 bg-bakery-900/80"></div>
<div class="absolute inset-0 bg-gradient-to-t from-bakery-900 via-bakery-800/60 to-bakery-900/80"></div>
<div class="relative container w-full min-w-0">
<div class="measure text-center">
<p class="eyebrow text-bakery-200" th:text="${eyebrow}">Order ahead</p>
<h1 class="h1 mt-3 text-bakery-50" th:text="${title}">Goodie boxes &amp; catering</h1>
<p class="lede mt-5 text-bakery-100" th:text="${lede}">One line about the page.</p>
</div>
</div>
</section>
<header th:fragment="plain(eyebrow, title, lede)" class="page-head">
<p class="eyebrow text-bakery-500" th:text="${eyebrow}">From the counter</p>
<h1 class="h1 mt-3 text-bakery-900" th:text="${title}">Our products</h1>
<p class="lede mt-4 measure text-bakery-800" th:text="${lede}">One line about the page.</p>
</header>
<!--/* The branch from the wordmark, between one part of a page and the next. */-->
<div th:fragment="divider" class="flex justify-center" aria-hidden="true">
<span class="mark mark-r w-12 h-12 text-bakery-400"></span>
</div>
</body>
</html>