|
1 | | -# PLOTFLOW · design system + homepage |
| 1 | +# PLOTFLOW — plotflow.io |
2 | 2 |
|
3 | | -Avant-garde pen-plotter art house. Muted ground, bold white grotesque, Japanese, halftone + asterisk, with an interactive **Live Plot** hero that draws each mobile-suit plot as one continuous line. |
| 3 | +Static website for PlotFlow, an avant-garde pen-plotter art house. No build step, no framework — plain HTML/CSS/JS served via GitHub Pages. |
4 | 4 |
|
5 | | -## Quick start |
6 | | - |
7 | | -No build step or dependencies — it's static HTML/CSS/JS with the data inlined in a script. |
| 5 | +## Run locally |
8 | 6 |
|
9 | 7 | ```bash |
10 | | -# just open it… |
11 | | -open index.html # works from file:// |
12 | | - |
13 | | -# …or serve it (recommended) |
14 | | -python3 -m http.server 8000 # then visit http://localhost:8000 |
| 8 | +python3 -m http.server 8000 |
| 9 | +# visit http://localhost:8000 |
15 | 10 | ``` |
16 | 11 |
|
17 | | -`preview.html` is a single-file, fully-inlined version of the same page (handy for a quick look or to drop into a CMS). |
| 12 | +## Deploy |
18 | 13 |
|
19 | | -## Structure |
| 14 | +Push to `main`. GitHub Pages serves from the repo root automatically. |
20 | 15 |
|
| 16 | +```bash |
| 17 | +git add -A && git commit -m "update site" && git push |
21 | 18 | ``` |
22 | | -plotflow-design-system/ |
23 | | -├─ index.html # the homepage (links the css + scripts below) |
24 | | -├─ preview.html # single-file build of the same page |
25 | | -├─ tokens.json # machine-readable design tokens |
26 | | -├─ styles/ |
27 | | -│ ├─ tokens.css # ← colors, fonts, spacing. EDIT BRAND HERE. |
28 | | -│ └─ styles.css # base + all component styles |
29 | | -├─ scripts/ |
30 | | -│ ├─ plotter.js # Live Plot component (window.PlotflowPlotter) |
31 | | -│ └─ shop.js # builds the editions grid |
32 | | -├─ data/ |
33 | | -│ └─ editions.js # window.PLOTFLOW = { suits, orders } (AUTO-GENERATED) |
34 | | -├─ assets/plots/ # the 8 recolorable plot SVGs (source art) |
35 | | -├─ tools/ |
36 | | -│ ├─ prep_plots.py # normalize raw plotter.vision exports → assets/plots |
37 | | -│ └─ build_data.py # regenerate data/editions.js from assets/plots |
38 | | -└─ docs/ |
39 | | - └─ DESIGN_SYSTEM.md # tokens, components, rules — start here |
40 | | -``` |
41 | | - |
42 | | -## Common edits |
43 | 19 |
|
44 | | -**Change the palette / type** → edit `styles/tokens.css` (and mirror in `tokens.json`). Everything reads those variables. |
45 | | - |
46 | | -**Add or change an edition** |
47 | | -1. Drop the new clean SVG in `assets/plots/` (run `python tools/prep_plots.py raw/` if it's a fresh plotter.vision export). |
48 | | -2. Add a row to `META` (and the order arrays) in `tools/build_data.py`. |
49 | | -3. `python tools/build_data.py` → regenerates `data/editions.js`. Done; the shop + plotter pick it up. |
50 | | - |
51 | | -**Plot legibility** — keep the cardinal rule: show plots large with a thin stroke; don't scale a plot up to fill a small card (it fuses the lines). Stroke widths are set in CSS (`.hero #ppath`, `.card .cover .art path`). |
| 20 | +## Structure |
52 | 21 |
|
53 | | -See `docs/DESIGN_SYSTEM.md` for the full spec and `CLAUDE.md` for working in this repo with Claude Code. |
| 22 | +``` |
| 23 | +├─ index.html # homepage |
| 24 | +├─ styles/ # tokens.css (design tokens) + styles.css |
| 25 | +├─ scripts/ # plotter.js (live plot) + shop.js (edition grid) |
| 26 | +├─ data/editions.js # SVG path data for all editions (auto-generated) |
| 27 | +├─ assets/plots/ # source SVG files |
| 28 | +├─ tools/ # Python scripts to regenerate data from SVGs |
| 29 | +├─ CNAME # custom domain config (plotflow.io) |
| 30 | +└─ .nojekyll # disables Jekyll processing |
| 31 | +``` |
0 commit comments