diff --git a/README.md b/README.md index b9659d0..3e43021 100644 --- a/README.md +++ b/README.md @@ -38,8 +38,22 @@ wordmark's 0.01em letter-spacing so a heading sits on the same rhythm as the log read a paragraph of. None of the type classes set a colour — the same heading appears in sage on cream and cream on sage. -Write those class names in templates rather than the utilities behind them: a button is `pill-sage`, and -the four colourways exist because the site puts buttons on cream *and* on sage. +Write those class names in templates rather than the utilities behind them. The full vocabulary: + +| | | +|---|---| +| surfaces | `panel`, `panel-lift`, `panel-head`, `panel-mark`, `photo` | +| buttons | `pill-sage`, `pill-cream`, `pill-outline`, `pill-ghost`, `chip`/`chip-on` | +| links | `link`, `link-plain`, `link-on-dark` | +| type | `h1`–`h4`, `price`, `eyebrow`, `label`, `lede`, `wordmark` | +| layout | `container`, `measure`, `measure-wide`, `section`, `band`, `page-head` | +| forms | `field` — one input for the public form and the admin | + +Four colourways of one button exist because the site puts buttons on cream *and* on sage. Corners come +from `--radius-panel` (12px) and `--radius-field` (8px), so "how round is a card" is one decision. + +If you find yourself writing `bg-white rounded-… shadow-…` or `underline underline-offset-4` in a +template, there is already a name for it. ### Why server-rendered diff --git a/src/main/resources/templates/admin/catering.html b/src/main/resources/templates/admin/catering.html index 1184b0c..39941ec 100644 --- a/src/main/resources/templates/admin/catering.html +++ b/src/main/resources/templates/admin/catering.html @@ -28,7 +28,7 @@
Office

3 columns, diff --git a/src/main/resources/templates/admin/layout.html b/src/main/resources/templates/admin/layout.html index 6bc275f..e0fa461 100644 --- a/src/main/resources/templates/admin/layout.html +++ b/src/main/resources/templates/admin/layout.html @@ -26,8 +26,8 @@

The Vine

diff --git a/src/main/resources/templates/admin/table.html b/src/main/resources/templates/admin/table.html index 0d9cb0d..c538a03 100644 --- a/src/main/resources/templates/admin/table.html +++ b/src/main/resources/templates/admin/table.html @@ -21,7 +21,7 @@

This table

- All tables + All tables
diff --git a/src/main/resources/templates/catering.html b/src/main/resources/templates/catering.html index fd7077d..8094f13 100644 --- a/src/main/resources/templates/catering.html +++ b/src/main/resources/templates/catering.html @@ -14,7 +14,7 @@
-
+

Order ahead

Goodie boxes & catering

@@ -26,9 +26,9 @@
-
+
-

+

Every one of these is a starting point. Tell us the date, the number of people and what you had in mind, and we will bake to it.

@@ -54,7 +54,7 @@ alignment the aggregate guarantees. */-->
-
+

Office boxes

Mini pastries for a morning meeting. @@ -109,7 +109,7 @@ three cards led to the same place, since an enquiry is about the table rather than the size, and the label read "Ask about the 15–20 people" on the tables whose sizes are headcounts. */--> -

+

Good to know

    @@ -125,7 +125,7 @@

    Our catering list is being updated. Call us on - (309) 701-0660 and we will + (309) 701-0660 and we will talk it through.

@@ -135,8 +135,8 @@
-
-
+
+

Before you order

  • These are a guide rather than a menu.
    • diff --git a/src/main/resources/templates/contact.html b/src/main/resources/templates/contact.html index d56add2..88dc362 100644 --- a/src/main/resources/templates/contact.html +++ b/src/main/resources/templates/contact.html @@ -3,7 +3,7 @@
    -
    +

    Contact us

    Ask about a cake, a date, or an order for a crowd. We read everything that comes in. @@ -15,12 +15,12 @@ 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. */--> -

    -
    +
    +

    Get in touch

    - Or call us: (309) 701-0660 + Or call us: (309) 701-0660

    -
    +
    @@ -37,7 +37,7 @@
    -
    diff --git a/src/main/resources/templates/history.html b/src/main/resources/templates/history.html index e59c16b..1087c7d 100644 --- a/src/main/resources/templates/history.html +++ b/src/main/resources/templates/history.html @@ -9,7 +9,7 @@ class="absolute inset-0 w-full h-full object-cover object-bottom blur-[3px] scale-110">
    -
    +

    Since 2024

    Our story

    @@ -20,10 +20,10 @@
-
+
-
-
+
+

How it started

@@ -67,8 +67,8 @@

-
-
+
+

Come and see us

We open at 7:00am, Tuesday through Saturday. If you are after something for a date in the diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html index ce91e41..f10b913 100644 --- a/src/main/resources/templates/home.html +++ b/src/main/resources/templates/home.html @@ -15,7 +15,7 @@ -

+

@@ -37,7 +37,7 @@

-
+

What people come in for

-
+

Our story

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.

- + Read our story
@@ -75,11 +75,11 @@ the link is worth following. */-->
-
-
+
+
Iced sugar cookies from The Vine + class="photo w-full h-64 md:h-80 object-cover">

Ordering for a crowd?

@@ -97,7 +97,7 @@

-
+

Visit us

@@ -107,7 +107,7 @@

Find us

+ th:replace="~{fragments/visit :: address('link-plain')}">
diff --git a/src/main/resources/templates/products.html b/src/main/resources/templates/products.html index ba85208..0b5f7bf 100644 --- a/src/main/resources/templates/products.html +++ b/src/main/resources/templates/products.html @@ -3,15 +3,15 @@
-
+

Our products

-

+

What comes out of the kitchen on Main Street. Cakes and decorated cookies are made to order, so most of what follows started as somebody describing what they wanted.

-
+
-
-
+
+

Want one of these, or something else?

Cakes and decorated cookies are made to order. Tell us the date and roughly what you have in diff --git a/src/main/styles/admin.css b/src/main/styles/admin.css index b9b178f..07ef935 100644 --- a/src/main/styles/admin.css +++ b/src/main/styles/admin.css @@ -36,10 +36,7 @@ disabled:opacity-30 disabled:cursor-not-allowed; } -@utility field { - @apply w-full rounded-field border border-bakery-300 bg-white px-3 py-2 text-sm - focus:border-bakery-500 focus:outline-none focus:ring-1 focus:ring-bakery-500; -} +/* `field` is shared with the public form — see components.css. */ @utility card { @apply rounded-panel border border-bakery-200 bg-white p-4 shadow-sm; diff --git a/src/main/styles/components.css b/src/main/styles/components.css index 713e00c..058712a 100644 --- a/src/main/styles/components.css +++ b/src/main/styles/components.css @@ -7,15 +7,70 @@ * only a registered utility can take a variant (`hover:`, `md:`, `file:`). */ -/* The exception. In @layer components, matching the old site — and that ordering matters: a utility like - `px-4`, which the markup applies alongside `container` on nearly every section, has to win over this, - or every gutter on the site silently widens. */ +/* + * The page gutter, and the only plain class left in a layer. + * + * Every section used to write `container mx-auto px-4`, carried over from the React site: `mx-auto` twice + * and a px-4 that beat the responsive padding below, so the gutter was 16px at every width including a + * 27-inch screen. The markup now says `container` and nothing else, which is why this can stay in the + * components layer — there is no longer a utility next to it that has to win. + */ @layer components { .container { @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8; } } +/* + * MEASURES. Text you read wants a narrow column and a grid of cards wants a wide one; those two numbers + * were seven different max-w-* classes chosen a template at a time. + */ +@utility measure { + @apply max-w-2xl mx-auto; +} + +@utility measure-wide { + @apply max-w-5xl mx-auto; +} + +/* + * LINKS in running text. Underlined, offset so the line clears the descenders, and colour-shifting on + * hover — three variants because a link in a paragraph, a link on a sage band and a quiet one in small + * print are the same idea in different rooms. + */ +@utility link { + @apply underline underline-offset-4 text-bakery-700 hover:text-bakery-900 transition-colors; +} + +@utility link-on-dark { + @apply underline underline-offset-4 text-bakery-50 hover:text-white transition-colors; +} + +/* Inherits its colour: for a link inside a coloured paragraph that already sets one. */ +@utility link-plain { + @apply underline underline-offset-4 hover:text-bakery-600 transition-colors; +} + +/* + * FIELDS. One input, everywhere. The public form had its own (cream, ring-2, py-2.5) and the admin had + * another (white, ring-1, py-2, text-sm), which is what happens when a form gets written twice. + */ +@utility field { + @apply w-full rounded-field border border-bakery-300 bg-white px-3.5 py-2.5 text-sm + focus:border-bakery-500 focus:outline-none focus:ring-1 focus:ring-bakery-500; +} + +/* A photograph standing on the page rather than inside a card: same edge and shadow as one. */ +@utility photo { + @apply rounded-panel border border-bakery-200/70; + box-shadow: var(--shadow-card); +} + +/* The cream header at the top of a page that has no photographic band. */ +@utility page-head { + @apply container pt-14 pb-10 md:pt-20 md:pb-12 text-center; +} + /* * THE BRANCH MARKS of the wordmark, as masks rather than inline SVG. *