vibed

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.

3.2 KiB

Raw Blame History

+++ title = "Write src/bin/ui/style.css — full stylesheet for all UI pages and components" priority = 6 status = "done" ticket_type = "task" dependencies = ["dc3d2b"] +++

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`

3.2 KiB Raw Blame History

3.2 KiB

Raw Blame History