Move remaining static inline styles into dashboard.css, bump Now Playing text size
Three inline style="..." attributes were pure styling with no per-request data behind them (a hero-block spacing tweak, a trailing note's margin, a gap between two stacked rows) — moved each into dashboard.css as a scoped structural selector so future adjustments happen in one place instead of being split between the template and the stylesheet. Also bumped .stream-title/.stream-user/.stream-icon in the Now Playing card one step up the existing --fs-* scale (13px->15px, 12px->13px, 15px->18px) rather than introducing a one-off size. Documented the "styles belong in CSS, not inline" rule in CLAUDE.md, with the actual exception: per-request computed values (a meter's width, a threshold colour) and JS-toggled initial visibility still can't live in a static stylesheet and are fine to stay inline. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
parent
1cc5a247cf
commit
326ab6cee5
3 changed files with 26 additions and 6 deletions
11
CLAUDE.md
11
CLAUDE.md
|
|
@ -42,6 +42,17 @@ the user's Unraid home server. Server-side project directory is still named
|
|||
`SCRIPT_NAME` subpath. Server-rendered config (timezone, script root)
|
||||
reaches JS through `<body data-*>`, never string-interpolated into a
|
||||
script block.
|
||||
- **No `style="..."` attributes for anything static.** A one-off tweak
|
||||
(button height, a margin, a font size) belongs in the matching
|
||||
`static/css/*.css` file, scoped with a structural selector (an
|
||||
adjacent-sibling or `:last-child` rule tied to the surrounding markup)
|
||||
or a small modifier class — not inline on the element. The only
|
||||
legitimate inline `style=` left in `dashboard.html` are per-request
|
||||
computed values Jinja has to interpolate (a meter's `width: {{ pct
|
||||
}}%`, a colour chosen by threshold) and JS-toggled initial visibility
|
||||
(`display:none` on something `dashboard.js` reveals) — those can't
|
||||
live in a static stylesheet. Everything else should read as a class
|
||||
name, not a value.
|
||||
- **`static/css/base.css`** — the single source of truth for the design
|
||||
tokens, shared by all three templates: surfaces, a 6-step `--fs-*` type
|
||||
scale, semantic colours, and `--tap: 44px` for minimum touch targets.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue