sulthan/mangaBookmark
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

chore: pre-flight baseline for novel-support plan

Browse Source 
- .gitignore: drop .superpowers/ and local go.work
- AGENTS.md, docs/design-system.md, backend/AGENTS.md, userscript/AGENTS.md
- login-art.png: 2.8MB design asset, picked up by //go:embed
This commit is contained in:
Sulthan Zaki
2026-08-06 02:43:29 +07:00
parent c445762244
commit 3149dc0c26
6 changed files with 163 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/design-system.md
+15 -12
View File
@@ -10,7 +10,7 @@ Implemented in:
| Surface | Files |
| --- | --- |
| Web UI (login, list, card, empty, errors) | `backend/static/style.css`, `backend/templates/{app,card,list,login,chrome,icons}.html`, `backend/static/filter.js` |
| Web UI (login, list, card, empty, errors) | `backend/internal/web/static/style.css`, `backend/internal/web/templates/{app,card,list,login,chrome,icons}.html`, `backend/internal/web/static/filter.js` |
| Userscript panel (Shadow DOM) | `userscript/manga-bookmark.user.js` — `TEMPLATE` and `CSS` at the bottom of the IIFE |
## 1. The one idea
@@ -41,7 +41,7 @@ Corollaries:
## 2. Tokens
Defined once in `backend/static/style.css` `:root`, mirrored in the userscript's
Defined once in `backend/internal/web/static/style.css` `:root`, mirrored in the userscript's
`:host`. **Never hardcode a hex outside those two blocks.**
| Token | Dark | Light | Use |
@@ -77,6 +77,8 @@ Defined once in `backend/static/style.css` `:root`, mirrored in the userscript's
| `--fav-line` | `#332b14` | `#e3d3a4` | desktop cell border, favourite when on |
| `--asura` | `#7d93a5` | `#4f6b80` | site tag |
| `--demonic` | `#a98a78` | `#8a6a55` | site tag |
| `--comix` | `#8a9a7d` | `#5f7250` | site tag |
| `--kagane` | `#9a8aa5` | `#6f5f7d` | site tag |
| `--hatch` / `--hatch-dim` | 135° 5px stripe | paper stripe | missing-cover slot |
`--slate`/`--moss`/`--clay`/`--brass` are held at the same weight deliberately:
@@ -95,7 +97,7 @@ dark, the hues are re-tuned.
| Sans | `DM Sans` → system UI | system UI |
The web UI **self-hosts** all three: five latin-subset woff2 files in
`backend/static/fonts/` (~120 KB total), declared by the `@font-face` block at
`backend/internal/web/static/fonts/` (~120 KB total), declared by the `@font-face` block at
the top of `style.css` and embedded in the binary by the existing
`//go:embed static`. There is no request to Google — this UI needs to survive
on a LAN with no internet route. `staticHandler()` in `web.go` registers the
@@ -141,18 +143,19 @@ Recurring specs (copy these rather than inventing sizes):
**Brand mark**: an inline `<svg class="mark">` (`viewBox="0 0 200 172"`),
defined once in `chrome.html`'s `mark` template and reused by `app.html` and
`login.html` so it takes the page's `--ink`/`currentColor`/`--ember` rather
than shipping as a static asset. The blade at its centre strokes
`var(--logo-blade, var(--ember))` — override that custom property, don't
duplicate the SVG, if a surface ever needs a different blade colour. Drawn at
a 5px stroke on a 200-unit grid; at brand size that thins out, so `.brand .mark
g` nudges `stroke-width` up to `6.5` rather than scaling the artwork down.
than shipping as a static asset. The blade at its centre strokes `var(--ember)`,
so a surface that needs a different blade colour re-points that token rather
than duplicating the SVG. Drawn at a 5px stroke on a 200-unit grid; at brand
size that thins out, so `.brand .mark g` nudges `stroke-width` up to `6.5`
rather than scaling the artwork down.
**Action key** (`.keyrow`): one permanent line under the tabs naming what
every icon in `.actions` does — Read / Fav / Chapter / Archive / Done /
Delete — so the icon strip on a card is never a guess. On a phone each pair
stacks icon-over-word (`flex-direction: column`) so the word gets the full
cell width and can stay in long form; ≥720px it lays out icon-beside-word and
switches the `.short`/`.full` label pair. `.pair.brass` and `.pair.trash`
Delete — so the icon strip on a card is never a guess. The key follows the tab,
not the row: Archive becomes Restore under Archived and Finished, and Finished
drops Done. On a phone each pair stacks icon-over-word
(`flex-direction: column`) so the word gets the full cell width; ≥720px it lays
out icon-beside-word at the same wording. `.pair.brass` and `.pair.trash`
carry their icon's resting accent so the key itself teaches the colour
vocabulary in §1/§2.