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.
97 lines
4.2 KiB
HTML
97 lines
4.2 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" class="min-h-screen bg-bakery-50">
|
|
|
|
<div th:replace="~{fragments/opening :: plain(
|
|
'Say hello',
|
|
'Contact us',
|
|
'Ask about a cake, a date, or an order for a crowd. We read everything that comes in.')}"></div>
|
|
|
|
<!--/*
|
|
The form, and beside it the things somebody on this page is usually actually after: when we are open,
|
|
where we are, and the phone number. They were on the homepage and in the footer but not here, which
|
|
made this page a form and nothing else.
|
|
*/-->
|
|
<div class="container pb-16 md:pb-24">
|
|
<div class="grid gap-8 lg:grid-cols-[1.4fr_1fr] measure-wide items-start">
|
|
<div class="panel p-8 md:p-10">
|
|
<h2 class="h3 text-bakery-900 mb-2">Get in touch</h2>
|
|
<p class="text-bakery-700 mb-8">
|
|
Or call us: <a href="tel:+13097010660" class="link-plain">(309) 701-0660</a>
|
|
</p>
|
|
|
|
<!--/*
|
|
A plain form post. The enquiry is validated, written down and mailed by the server, which then
|
|
renders this page again with the outcome — no fetch, no JSON, and nothing to go wrong between
|
|
pressing the button and the enquiry being recorded.
|
|
|
|
Spring Security's CSRF token is added to any th:action form automatically, which is what keeps
|
|
this working on a deployment that has an identity provider configured (there, an unaccompanied
|
|
POST is rejected).
|
|
*/-->
|
|
<!--/* th:unless, not th:if="${!sent}": the attribute is absent on a GET, and SpEL cannot negate
|
|
a null. */-->
|
|
<form th:action="@{/contact}" method="post" th:unless="${sent}">
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-bakery-800 mb-2" for="name">Name</label>
|
|
<input type="text" id="name" name="name" th:value="${name}" required
|
|
class="field">
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-bakery-800 mb-2" for="email">Email</label>
|
|
<input type="email" id="email" name="email" th:value="${email}" required
|
|
class="field">
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-bakery-800 mb-2" for="message">Message</label>
|
|
<textarea id="message" name="message" rows="5" required th:text="${message}"
|
|
class="field"></textarea>
|
|
</div>
|
|
<div class="flex flex-col items-center gap-4">
|
|
<button type="submit"
|
|
class="pill-sage">
|
|
Send message
|
|
</button>
|
|
|
|
<!--/* Never claim a success we did not get: say what happened and give them the phone number. */-->
|
|
<p th:if="${error}" role="alert" class="text-center text-red-700">
|
|
<span th:text="${error}">Could not send the message.</span>
|
|
Please call us on
|
|
<a href="tel:+13097010660" class="link-plain">(309) 701-0660</a>.
|
|
</p>
|
|
</div>
|
|
</form>
|
|
|
|
<p th:if="${sent}" role="status" class="text-bakery-700">
|
|
Thanks. Your message is on its way, and we will get back to you.
|
|
</p>
|
|
</div>
|
|
|
|
<aside class="space-y-6">
|
|
<div class="panel p-6 md:p-8">
|
|
<h2 class="h4 text-bakery-900">Our hours</h2>
|
|
<div class="mt-4 text-bakery-800"
|
|
th:replace="~{fragments/visit :: hours('text-bakery-800')}"></div>
|
|
</div>
|
|
<div class="panel p-6 md:p-8">
|
|
<h2 class="h4 text-bakery-900">Find us</h2>
|
|
<div class="mt-4 text-bakery-800"
|
|
th:replace="~{fragments/visit :: address('link-plain')}"></div>
|
|
</div>
|
|
<div class="rounded-panel border border-bakery-200 p-6 md:p-8">
|
|
<h2 class="h4 text-bakery-900">Ordering for a crowd?</h2>
|
|
<p class="mt-2 text-sm text-bakery-700 leading-relaxed">
|
|
Goodie boxes, party packages and wedding desserts have their own page, with sizes and prices.
|
|
</p>
|
|
<a href="/catering" class="link mt-4 inline-block font-medium">
|
|
Goodie boxes & catering
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|