Web dashboard v2 step 2: Tailwind design system, theme toggle, reader pages
Replaces the hand-written stylesheet with a Tailwind CSS v4 source (src/web/tailwind.css) whose minified build is committed as src/web/static/app.css and still embedded with include_str!, so the binary and the test suite never need Node. package.json pins tailwindcss and @tailwindcss/cli to 4.3.3 and adds css, css:watch and css:check. Colours are semantic CSS variables swapped per theme and exposed to Tailwind through @theme inline, so templates write bg-paper/text-ink/border-rule once and both themes work. theme.js runs synchronously in <head> to set data-theme before paint; app.js cycles the toggle system -> light -> dark and persists the choice. Newsreader is self-hosted and served from web::static_asset with the same ETag/304 logic as the other assets. Every reader template is restyled: ears row, centred masthead with its rules, tracked section labels, the drop cap on The Brief, "Why it's here" with its accent bar, the segmented rating control, prev/next cards, and the colophon as a two-column definition grid. Dashboard templates are untouched (step 3). Also fixes a .block collision with Tailwind's display utility, the SVG `hidden` property that never toggled the theme icon, and points the dev seed's profile_path at ./dev so previewing cannot rewrite data/profile.md. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NHyYupFdBiR4VfoUM7NjSM
This commit is contained in:
@@ -111,6 +111,13 @@ cargo test # everything is offline; no keys needed
|
||||
sudo install -m0755 target/release/daily-epub /usr/local/bin/
|
||||
```
|
||||
|
||||
The web UI uses Tailwind CSS v4, but Node is only a development dependency: the
|
||||
compiled stylesheet is committed and embedded in the Rust binary. After editing
|
||||
`src/web/tailwind.css`, a web template, or `src/web/static/app.js`, run
|
||||
`npm install` once and then `npm run css`. Commit both the source changes and
|
||||
`src/web/static/app.css`; `npm run css:check` verifies that the committed output
|
||||
is current.
|
||||
|
||||
### Commands
|
||||
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user