Archived
austin
ec61b40b12
TYPOGRAPHY, taken from the lockup and walked down to something you can read a paragraph in. "The Vine" in LeJour Script over COFFEEHOUSE + BAKERY in AdBhashitha is the whole brand voice, so: the script stays in the wordmark and nowhere else (it is unreadable at length); AdBhashitha carries h1–h4 and the price, and keeps the wordmark's 0.01em letter-spacing so a heading sits on the same rhythm as the logo above it; `eyebrow` and `label` are the hinge — sans, but letterspaced like the tagline — and then plain Raleway. Sizes are declared once in type.css instead of being re-chosen per template, and none of the type classes set a colour, because the same heading appears in sage on cream and in cream on sage. BUTTONS AND SURFACES have names now. `panel` is the white box that was "bg-white rounded-3xl shadow-xs" written out in nine places (which is how two of them end up with different corners); `panel-lift` is one that reacts. `pill` is one shape in four colourways, which exist because this site puts buttons on cream AND on sage and they cannot be the same colour on both. `chip`/`chip-on` are the products filter. RHYTHM: `section` (py-16 md:py-24) and `band` (py-14 md:py-20, tighter because a coloured strip is already doing the separating) replace nine hand-picked paddings. FOCUS: one visible ring for everything reachable by keyboard, as an outline rather than a shadow so it works on cream, on white and on the sage bands, at zero specificity so a utility can still win. Z-INDEX: written down in base.css, all two of it — 40 the sticky header, 30 the mobile panel, which is a child of the header and so can only ever sit under the bar. Everything else stacks in document order. The point of the comment is that a third layer doesn't get invented at 9999. DROPDOWNS: the admin's category selects were drawing the platform's own arrow in the platform's grey; they get the site's chevron and room for it. 53 tests green. Every class used across all nine pages — five public, four admin — resolves in the compiled stylesheet, so nothing here is styled by a name that doesn't exist.
30 lines
1.1 KiB
HTML
30 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<!--/*
|
|
Anything that isn't a 404: the site's own page rather than Boot's white error screen, which shows a
|
|
stack-trace-shaped block of text to whoever happens to be standing in the shop.
|
|
|
|
It deliberately says nothing about what broke. The person reading it can't act on that; the phone
|
|
number is the thing they can use, and the log has the details.
|
|
*/-->
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org"
|
|
th:replace="~{fragments/page :: page(
|
|
'Something went wrong · The Vine Coffeehouse + Bakery',
|
|
'Something went wrong on our side. Call The Vine on (309) 701-0660.',
|
|
'/', ~{::content})}">
|
|
<body>
|
|
<div th:fragment="content" class="bg-bakery-50">
|
|
<div class="container mx-auto px-4 py-24 md:py-32 text-center">
|
|
<h1 class="h1 text-bakery-900 mb-6">Something went wrong</h1>
|
|
<p class="text-bakery-800 mb-10">
|
|
That is our fault, not yours. Try again in a moment, or call us on
|
|
<a href="tel:+13097010660" class="underline underline-offset-4">(309) 701-0660</a>.
|
|
</p>
|
|
<a href="/"
|
|
class="pill-sage">
|
|
Back home
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|