vibed/quotesdb/.beans/quotesdb-wlpv--write-srcbinuistylecss-full-stylesheet-for-all-ui.md

title	status	type	priority	created_at	updated_at	blocked_by
Write src/bin/ui/style.css — full stylesheet for all UI pages and components	completed	task	normal	2026-03-10T23:32:05Z	2026-03-10T23:32:12Z	quotesdb-wvb8

CSS approach resolved in triage 5e3e37: **plain CSS** — a single `src/bin/ui/style.css` file linked from `index.html` via ``.

All UI component tickets use BEM-style class names defined in this file. No CSS-in-Rust crates, no CDN Tailwind.

Write `src/bin/ui/style.css` covering all pages and components in the Yew UI. BEM-style semantic class names. Blocks and elements use lowercase hyphenated names.

Component / Page	Block class	Notable element classes
Global	body, main, nav	—
Navigation	nav	nav__link, nav__brand
QuoteCard	quote-card	quote-card__text, quote-card__author, quote-card__meta, quote-card__tags, quote-card__tag
Home page	page-home	page-home__random, page-home__cta
Browse page	page-browse	page-browse__filters, page-browse__list
Quote detail page	page-quote	page-quote__actions
Author page	page-author	page-author__header
Submit page	page-submit	page-submit__form, page-submit__success
Pagination	pagination	pagination__btn, pagination__info
Tag filter	tag-filter	tag-filter__input, tag-filter__list, tag-filter__tag
Auth modal	auth-modal	auth-modal__overlay, auth-modal__dialog, auth-modal__input, auth-modal__actions
Error display	error-display	error-display__message
Form elements	form	form__field, form__label, form__input, form__textarea, form__error
Buttons	btn	btn--primary, btn--secondary, btn--danger
Auth code reveal	auth-reveal	auth-reveal__code, auth-reveal__note
Loading	loading	—
Empty state	empty-state	empty-state__message

- Clean, minimal typography-focused design appropriate for a quotes site. - Readable body font (system-ui or serif stack for quote text). - Max-width container centered on page: ~720px for readability. - Accessible colour contrast (WCAG AA minimum). - Responsive: readable on mobile without horizontal scroll. - No external font imports — use system fonts. - Light theme only (no dark mode required). In Yew components, use class names as string literals:

html! {
    <div class="quote-card">
        <blockquote class="quote-card__text">{ &quote.text }</blockquote>
        <cite class="quote-card__author">{ &quote.author }</cite>
    </div>
}

For conditional classes use the classes! macro:

html! {
    <button class={classes!("btn", "btn--primary", disabled.then_some("btn--disabled"))}>
        { "Submit" }
    </button>
}

After writing the CSS, verify it is picked up by Trunk:

trunk build

Inspect the generated dist/ directory to confirm the CSS file is bundled.

`style(quotesdb): add UI stylesheet with BEM component classes`