Archived
austin
606deee009
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.
124 lines
5.4 KiB
HTML
124 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="~{fragments/page :: page(${title}, ${description}, ${path}, ~{::content})}">
|
|
<body>
|
|
<div th:fragment="content">
|
|
|
|
<!--/*
|
|
Hero — centred lockup on a sage wash.
|
|
|
|
56svh, not 78: at 78 a laptop's first screen was the lockup and nothing else, so the page looked like
|
|
it had one thing on it. The floor is low enough now that the next section shows above the fold and
|
|
invites the scroll, and high enough that the lockup still has room to be the first thing you see. It
|
|
is a floor, not a height — the content wins on a short window.
|
|
*/-->
|
|
<section class="relative flex items-center min-h-[56svh] py-16 md:py-20 bg-bakery-900 text-white overflow-hidden">
|
|
<!--/* Softened on purpose: the storefront's own painted sign sits right behind the logo, so a sharp
|
|
photo makes you read the name twice. scale-110 hides the blur's feathered edges. */-->
|
|
<img th:src="${photos.of('gallery/Outside.webp')}" alt="" fetchpriority="high"
|
|
class="absolute inset-0 w-full h-full object-cover object-bottom 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>
|
|
|
|
<!--/* w-full/min-w-0 keep this flex item from sizing to its max-content width and blowing out the
|
|
page on narrow screens. */-->
|
|
<div class="relative container w-full min-w-0">
|
|
<div class="measure text-center">
|
|
<div th:replace="~{fragments/lockup :: large('text-bakery-50 mb-8')}"></div>
|
|
<p class="lede sm:text-xl text-bakery-100 mb-8">
|
|
A coffeehouse and bakery in downtown Princeville, Illinois.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-3 justify-center">
|
|
<a href="/products"
|
|
class="pill-cream">
|
|
See the menu
|
|
</a>
|
|
<a href="#visit"
|
|
class="pill-ghost">
|
|
Visit us
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!--/* What people come in for */-->
|
|
<section class="section bg-bakery-50">
|
|
<div class="container">
|
|
<h2 class="h2 text-center text-bakery-900 mb-12">What people come in for</h2>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 md:gap-8">
|
|
<div th:each="item : ${ {'Cinnamon Rolls', 'Sugar Cookies', 'Cakes'} }"
|
|
class="panel overflow-hidden text-center">
|
|
<!--/* The filenames carry the spaces in these names; SitePhotos encodes them. */-->
|
|
<img th:src="${photos.of('gallery/' + item + '.webp')}" th:alt="${item}" width="600" height="400" loading="lazy"
|
|
class="w-full h-56 object-cover">
|
|
<h3 class="panel-head border-b-0 border-t h4 md:text-2xl text-bakery-800 py-6" th:text="${item}">Cinnamon Rolls</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!--/*
|
|
Ordering ahead. The catering page exists and the homepage said nothing about it — a customer only
|
|
found it by reading the nav. Photo on one side, the offer on the other, and the three tables named so
|
|
the link is worth following.
|
|
*/-->
|
|
<section class="section bg-bakery-100">
|
|
<div class="container">
|
|
<div class="grid md:grid-cols-2 gap-8 md:gap-12 items-center measure-wide">
|
|
<img th:src="${photos.of('gallery/Sugar Cookies.webp')}" alt="Iced sugar cookies from The Vine"
|
|
width="800" height="600" loading="lazy"
|
|
class="photo w-full h-64 md:h-80 object-cover">
|
|
<div>
|
|
<h2 class="h2 text-bakery-900">Ordering for a crowd?</h2>
|
|
<p class="mt-4 text-bakery-800 leading-relaxed">
|
|
Goodie boxes for the office, packages for a party, and cakes and desserts for a wedding —
|
|
with prices, sizes and what each one includes, so you can see where to start.
|
|
</p>
|
|
<a href="/catering"
|
|
class="pill-sage mt-6">
|
|
Goodie boxes & catering
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!--/* Our story */-->
|
|
<section class="section bg-bakery-800 text-white">
|
|
<div class="container">
|
|
<div class="measure text-center">
|
|
<h2 class="h2 mb-8">Our story</h2>
|
|
<p class="lede text-bakery-100 mb-8">
|
|
Morissa Bennett opened The Vine in 2024. We bake in our own kitchen on Main Street:
|
|
cinnamon rolls, cookies, custom cakes, sandwiches, paninis, and coffee.
|
|
</p>
|
|
<a href="/history" class="link-on-dark font-semibold">
|
|
Read our story
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!--/* Visit us */-->
|
|
<section id="visit" class="section bg-bakery-50 scroll-mt-24">
|
|
<div class="container">
|
|
<h2 class="h2 text-center text-bakery-900 mb-12">Visit us</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 measure-wide">
|
|
<div class="panel p-6 md:p-8">
|
|
<h2 class="h3 text-bakery-900 mb-6">Our hours</h2>
|
|
<div th:replace="~{fragments/visit :: hours('text-bakery-800')}"></div>
|
|
</div>
|
|
<div class="panel p-6 md:p-8">
|
|
<h2 class="h3 text-bakery-900 mb-6">Find us</h2>
|
|
<div class="text-bakery-800"
|
|
th:replace="~{fragments/visit :: address('link-plain')}"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|