luxick/datascape
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP Redesign

Browse Source
This commit is contained in:
luxick
2026-04-17 10:54:06 +02:00
parent ec94580ab5
commit 268ffcdd27
11 changed files with 174 additions and 505 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
CLAUDE.md
View File

@@ -54,8 +54,20 @@ Prefer separate, human-readable `.html` files over inlined HTML strings in Go. E
- Do not inline JS in templates or merge unrelated features into one file
- `ALT+SHIFT` is the modifier for all keyboard shortcuts — do not introduce others
- Editor toolbar buttons use `data-action` + `data-key`; adding `data-key` auto-registers the shortcut
- Prefer generic, descriptive CSS classes (`btn`, `btn-small`, `muted`, `danger`) over element-specific names (`save-button`, `cancel-button`, `form-name-input`). Use a modifier + base class pattern (`btn btn-small`) rather than one-off classes that duplicate shared styles.
- Where possible, re-use existing CSS classes
### CSS / HTML — Pico CSS
[Pico CSS](https://picocss.com) is the styling framework. Strictly stay within it.
- Do not add other CSS frameworks, utility libraries, or icon fonts.
- Prefer pico's **class-less semantic HTML**: `<button>`, `<section>`, `<hgroup>`, `<header>`, `<nav><ul></ul></nav>`, `<details>`, etc. — let the element itself carry the styling.
- Use `<section>` for thematic blocks. Do **not** use `<article>` (project convention — always reach for `<section>` instead).
- Buttons: native `<button>` or `<a role="button">`. For variants use pico's modifiers (`.secondary`, `.contrast`, `.outline`) — do not invent new button classes. For button groups use `role="group"`.
- Layout: wrap top-level blocks in `.container` for the centered viewport. Use pico's `.grid` when a simple responsive grid is needed.
- Forms: rely on pico's default `<input>`/`<textarea>`/`<select>` styling; use `aria-invalid` for validation states.
- Custom CSS belongs in `style.css` and must only cover what pico does not provide. Reference pico's CSS custom properties (`var(--pico-border-color)`, `var(--pico-muted-color)`, `var(--pico-spacing)`, `var(--pico-card-background-color)`, etc.) — never hardcode colors or spacing.
- Prefer generic descriptive class names (`muted`, `danger`, `listing`, `diary-section`) over element-specific ones. Re-use existing classes before creating new ones.
- `pico.min.css` is the served stylesheet; keep `pico.css` around only as the unminified reference.
## Development Priorities