You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
3.2 KiB
Markdown
94 lines
3.2 KiB
Markdown
---
|
|
# 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">{ "e.text }</blockquote>
|
|
<cite class="quote-card__author">{ "e.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>
|