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.
27 lines
1.1 KiB
CSS
27 lines
1.1 KiB
CSS
/*
|
|
* The site's one stylesheet, compiled by the Tailwind CLI into target/classes/static/css.
|
|
*
|
|
* It lives under src/main with the rest of the app's source, and it has to stay in the same directory as
|
|
* package.json: Tailwind resolves `@import "tailwindcss"` by walking up from the CSS file looking for
|
|
* node_modules. There is no bundler and no framework here — the site and the admin are both
|
|
* server-rendered HTML, and this is the whole of the asset pipeline.
|
|
*
|
|
* Imported in cascade order: names, then bare elements, then classes.
|
|
*/
|
|
@import "tailwindcss";
|
|
|
|
@import "./theme.css";
|
|
@import "./base.css";
|
|
@import "./type.css";
|
|
@import "./components.css";
|
|
@import "./admin.css";
|
|
|
|
/*
|
|
* Where Tailwind looks for class names. Every template, and gallery.js — the product-card arrows are
|
|
* created in script, so their classes are only written down there. A utility exists in the output only if
|
|
* Tailwind saw it in one of these files, which is why a class name must never be assembled from pieces at
|
|
* runtime.
|
|
*/
|
|
@source "../resources/templates";
|
|
@source "../resources/static/js";
|