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

<context>
CSS approach resolved in triage 5e3e37: **plain CSS** — a single `src/bin/ui/style.css` file linked from `index.html` via `<link data-trunk rel="css" href="src/bin/ui/style.css"/>`.

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

<goal>
Write `src/bin/ui/style.css` covering all pages and components in the Yew UI.
</goal>

<naming-convention>
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` |

</naming-convention>

<design-notes>
- 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).
</design-notes>

<yew-usage>
In Yew components, use class names as string literals:

```rust
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:

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

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

```sh
trunk build
```

Inspect the generated `dist/` directory to confirm the CSS file is bundled.
</validation>

<commit>
`style(quotesdb): add UI stylesheet with BEM component classes`
</commit>