diff --git a/.impeccable/design.json b/.impeccable/design.json index 41770ee..a105b50 100644 --- a/.impeccable/design.json +++ b/.impeccable/design.json @@ -72,7 +72,7 @@ "role": "neutral", "displayName": "Muted Ink", "canonical": "#4c5751", - "purpose": "Secondary text, leader line, dimension bracket by day (--muted, --edge).", + "purpose": "Secondary text by day (--muted, --edge).", "tonalRamp": [ "#1d211e", "#343c38", @@ -264,7 +264,7 @@ "role": "secondary", "displayName": "Walnut", "canonical": "#4a2f1f", - "purpose": "Header, footer, cabinet carcass, screenshot ring.", + "purpose": "Header, footer, screenshot ring.", "tonalRamp": [ "#2b1b12", "#4f3221", @@ -280,7 +280,7 @@ "role": "secondary", "displayName": "Walnut Front", "canonical": "#5d3c28", - "purpose": "Drawer fronts, walnut plates, goods medallions, nav hover.", + "purpose": "Walnut plates, nav hover.", "tonalRamp": [ "#2b1c12", "#4e3322", @@ -312,7 +312,7 @@ "role": "secondary", "displayName": "Walnut Edge", "canonical": "#2e1c12", - "purpose": "Inset edges of cabinet and drawers; cabinet feet.", + "purpose": "Kept as a token; nothing on the site draws with it now.", "tonalRamp": [ "#2c1b11", "#513120", @@ -452,7 +452,7 @@ }, "label": { "displayName": "Label", - "purpose": "Buttons, nav, holder names and counts, crest, leader and dimension figures, pills, toc cards. Tabular figures." + "purpose": "Buttons, nav, pills, toc cards. Tabular figures." }, "lead": { "displayName": "Lead", @@ -472,12 +472,6 @@ } }, "materials": [ - { - "name": "walnut", - "file": "docs/assets/textures/walnut.webp", - "size": "720x180", - "use": "background-size 720px auto; tiles both ways; offset on the mini cabinets' drawers so they don't repeat the carcass grain; fallback #3a2416 (carcass) / #5d3c28 (drawer)." - }, { "name": "kraft", "file": "docs/assets/textures/kraft.webp", @@ -505,7 +499,7 @@ { "name": "generator", "file": "docs/assets/textures/make_textures.py", - "use": "numpy + Pillow, fixed seed 1200, no source images, no generative model." + "use": "numpy + Pillow, fixed seed 1200, no source images, no generative model. It still draws the old walnut grain, unsaved, so the other textures' random numbers stay the same." } ], "shadows": [ @@ -514,11 +508,6 @@ "value": "0 1px 0 rgba(20,14,8,.35), 0 12px 22px -14px rgba(20,14,8,.7)", "purpose": "Screenshots in their walnut and brass frame. Night: 0 1px 0 rgba(0,0,0,.55), 0 14px 24px -14px rgba(0,0,0,.9)." }, - { - "name": "carcass-wash", - "value": "inset 0 0 0 2px #2e1c12, inset 0 0 0 999px rgba(28,16,8,.38)", - "purpose": "The scale folio's mini cabinets: edge and darkening wash." - }, { "name": "plate-lift", "value": "0 8px 16px -10px rgba(20,14,8,.75)", @@ -579,16 +568,12 @@ "docs/assets/demo.js", "docs/assets/hero-panel.js" ], - "note": "Reproduces the mod's panel in the game's colours, frames and Noto Sans; reads only --ink, --muted, --edge and --orange from the site. The hero shows its top (title, summary, cards) with the same classes. Not site style: don't reuse it elsewhere or restyle it." + "note": "Reproduces the mod's panel in the game's colours, frames and Noto Sans; reads only --ink, --muted, --edge and --orange from the site. The hero and the three sizes show its top (title, summary, cards) with the same classes. Not site style: don't reuse it elsewhere or restyle it." } ], "browserChrome": { "theme-color": "#16231c", "purpose": " on every page, one value for both modes (a green-black near the night ground); not a palette token." - }, - "carcassFill": { - "value": "#3a2416", - "purpose": "The fill under the walnut texture on the scale folio mini cabinets (.mini-cab); their drawers use walnut-2 #5d3c28." } }, "components": [ @@ -667,9 +652,9 @@ ], "narrative": { "northStar": "The Apothecary Drawer Cabinet", - "overview": "The site is a walnut cabinet standing against a painted wall: walnut header and footer, brass plates, kraft cards, brass cup pulls on every accordion, and the goods keep the game's own icons. The rules section draws the same share at three capacities at true scale, as mini cabinets whose drawers are shares, with a leader line and a dimension bracket, like a measured folio drawing. The mod itself is never drawn in wood: the hero shows the top of the mod's real Storage Allocation panel, in the game's look, redrawn with the mod's own rounding.\n\nMaterials are real and made, not faked. Walnut, brass and kraft are procedural textures (`docs/assets/textures/make_textures.py`, fixed seed, no source images, no generative model). Walnut tiles so a drawer of any height keeps its grain, the brass label holder is a nine-slice border image, and the pull is one image used on every accordion. CSS supplies only edge lines, recesses and cast shadows over those textures. The wall behind the cabinet is plain paint: sage limewash by day, deep verdigris by lamplight. Walnut, brass and kraft keep their values in both modes, because they are materials, not themes.\n\nDensity is calm and reading-first. Type is split by job. Alegreya SC, engraved brass-label small caps, names things: the wordmark, headings, labels, buttons, counts. The system face carries every sentence. The in-game panel replica (`game-panel.css`, `demo.js`) is a contained exception. It reproduces the mod's panel in the game's own look and is not part of this system.", + "overview": "The site is a walnut cabinet standing against a painted wall: walnut header and footer, brass plates, kraft cards, brass cup pulls on every accordion, and the goods keep the game's own icons. The rules section shows the same share in three sizes of warehouse, as three small copies of the mod's own panel. The mod itself is never drawn in wood: the hero shows the top of the mod's real Storage Allocation panel, in the game's look, redrawn with the mod's own rounding.\n\nMaterials are real and made, not faked. Walnut, brass and kraft are procedural textures (`docs/assets/textures/make_textures.py`, fixed seed, no source images, no generative model). Kraft tiles, the brass label holder is a nine-slice border image, and the pull is one image used on every accordion. CSS supplies only edge lines, recesses and cast shadows over those textures. The wall behind the cabinet is plain paint: sage limewash by day, deep verdigris by lamplight. Walnut, brass and kraft keep their values in both modes, because they are materials, not themes.\n\nDensity is calm and reading-first. Type is split by job. Alegreya SC, engraved brass-label small caps, names things: the wordmark, headings, labels, buttons, counts. The system face carries every sentence. The in-game panel replica (`game-panel.css`, `demo.js`) is a contained exception. It reproduces the mod's panel in the game's own look and is not part of this system.", "keyCharacteristics": [ - "One metaphor for the site: capacity is a cabinet, a share is a drawer's height. The mod's own UI is always shown as it looks in game.", + "One setting for the site: an apothecary cabinet's materials (walnut, brass, kraft). The mod's own UI is always shown as it looks in game.", "Produced material textures (walnut, brass, kraft), tiled or nine-sliced, never imitated with gradients.", "Small-caps display face for names and figures; system sans for prose.", "Exact numbers in tabular figures.", @@ -713,7 +698,7 @@ } ], "dos": [ - "Do take walnut, brass and kraft from the produced textures in `docs/assets/textures/` (regenerate with `make_textures.py`). Tile walnut at 720px, kraft at 200px, and fit brass to the element's height.", + "Do take walnut, brass and kraft from the produced textures in `docs/assets/textures/` (regenerate with `make_textures.py`). Tile kraft at 200px, and fit brass to the element's height.", "Do frame kraft cards with the brass holder nine-slice (`border-image: url(textures/holder.png) 16`) and `background-clip: padding-box`. Scale the border width to the element (7–11px vertical).", "Do use the brass cup pull as the one \"this opens\" sign, on accordions.", "Do set every count, capacity and percentage in tabular figures, and draw proportions at true share.", diff --git a/.impeccable/surfaces/docs-index-html.md b/.impeccable/surfaces/docs-index-html.md index c8a8029..fb0136d 100644 --- a/.impeccable/surfaces/docs-index-html.md +++ b/.impeccable/surfaces/docs-index-html.md @@ -21,4 +21,6 @@ FIRST VIEWPORT: Left, the name in brass-label lettering, the one-line pitch, the FORM: Apothecary Drawer Cabinet, candidate 7 of 7 (seed 4fa92011). Raises: exact counts in fixed-width figures (nixie counter); the same split drawn at the same scale for 30, 200 and 1,200 capacity (botanical folio); rules annotated as measured callouts, "exactly 100%" (uniform-code annotations). Signature interaction: the split buttons redraw the hero panel with counts that follow the mod's rounding (split.js). +AMENDMENT (2026-09-24, Kyler): no picture of the mod is drawn in wood. The hero and the three sizes (30, 200, 1200) are copies of the top of the mod's in-game panel; the cabinet lives on only as the site's materials (walnut header and footer, brass plates, kraft cards, brass pulls on accordions). + FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, DESIGN.md, and every shipping raster carrying its provenance diff --git a/CLAUDE.md b/CLAUDE.md index f274f29..d9a5131 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -77,14 +77,14 @@ text and the player docs follows these rules. - Tokens live in `docs/assets/style.css` `:root`; night values in `@media (prefers-color-scheme: dark)`. Day / night: ground `--bg` #dfe4da / #18221f, tint `--bg-deep` #d0d8cc / #111916, `--paper` #eef1ea / #1f2b27, `--ink` #1d2320 / #ece6d8, `--muted` #4c5751 / #b8b09d, `--line` #aab5ab / #34423c, `--link` #1f5a50 / #8fd0c2, `--orange` #b35c10 / - #ffa60f. Fixed: walnut #4a2f1f, #5d3c28, #6e4a32, edge #2e1c12, carcass fill #3a2416; brass #c19a4b, hi #e0c27e, + #ffa60f. Fixed: walnut #4a2f1f, #5d3c28, #6e4a32, edge #2e1c12; brass #c19a4b, hi #e0c27e, deep #8a6a2c; kraft #d8c29b. Two literals with no custom property: pale kraft `#d9ccb3` (footer text) and every page's `` (one value for both modes). The legacy classes `panel--blue` / `panel--maroon` in install and troubleshooting just map to paper; leave them. - Fonts: Alegreya SC 500 and 700, self-hosted in `docs/assets/fonts/` (`OFL-Alegreya.txt`); body is the system-ui stack; mono is ui-monospace. Noto Sans 400/700 (`OFL.txt`) belongs to the panel replica only. No other webfonts, nothing from a CDN at runtime. -- Textures: `walnut.webp` (tile 720px), `kraft.webp` (tile 200px), `brass.webp` (fit to height), `holder.png` +- Textures: `kraft.webp` (tile 200px), `brass.webp` (fit to height), `holder.png` (nine-slice, `border-image: url(textures/holder.png) 16`), `pull.png` (the one "this opens" sign, on drawers and accordions), made by `docs/assets/textures/make_textures.py` (numpy + Pillow, seed 1200; run it from that folder). Change the script and re-run it rather than editing images. Every shipping raster carries provenance (a @@ -161,8 +161,7 @@ When asked to "update the website for the latest release, consistent with the de 6. Optional but recommended: run the detector, `"$(ls -d ~/.claude/plugins/cache/impeccable/impeccable/*/skills/impeccable | tail -1)/scripts/impeccable" detect --json docs` (parse from the first `[`). Known false positives: cramped-padding on the four main pages and flat-type-hierarchy on - 404 (ignored in config); `side-tab` on the 3px walnut rules (`.page-head`, `.rules li`) and the scale folio's leader - line; `layout-transition` on the replica's fill bar; Noto Sans, + 404 (ignored in config); `side-tab` on the 3px walnut rules (`.page-head`, `.rules li`); `layout-transition` on the replica's fill bar; Noto Sans, off-ramp sizes and colours in the replica; `flat-type-hierarchy` from footer headings; `gpt-thin-border-wide-shadow` on mounted frames and plates; the "could not read /MixedStorage/assets/style.css" note. 7. If the look changed (a new component or layout), update DESIGN.md and `.impeccable/design.json`. diff --git a/DESIGN.md b/DESIGN.md index 0f6081d..bd297e6 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -78,7 +78,6 @@ rounded: hairline: "2px" sm: "3px" md: "4px" - medallion: "50%" spacing: gutter: "clamp(16px, 4vw, 40px)" wrap: "1160px" @@ -170,14 +169,14 @@ components: **Creative North Star: "The Apothecary Drawer Cabinet"** -The site is a walnut cabinet standing against a painted wall: walnut header and footer, brass plates, kraft cards, brass cup pulls on every accordion, and the goods keep the game's own icons. The rules section draws the same share at three capacities at true scale, as mini cabinets whose drawers are shares, with a leader line and a dimension bracket, like a measured folio drawing. The mod itself is never drawn in wood: the hero shows the top of the mod's real Storage Allocation panel, in the game's look, redrawn with the mod's own rounding. +The site is a walnut cabinet standing against a painted wall: walnut header and footer, brass plates, kraft cards, brass cup pulls on every accordion, and the goods keep the game's own icons. The rules section shows the same share in three sizes of warehouse, as three small copies of the mod's own panel. The mod itself is never drawn in wood: the hero shows the top of the mod's real Storage Allocation panel, in the game's look, redrawn with the mod's own rounding. -Materials are real and made, not faked. Walnut, brass and kraft are procedural textures (`docs/assets/textures/make_textures.py`, fixed seed, no source images, no generative model). Walnut tiles so a drawer of any height keeps its grain, the brass label holder is a nine-slice border image, and the pull is one image used on every accordion. CSS supplies only edge lines, recesses and cast shadows over those textures. The wall behind the cabinet is plain paint: sage limewash by day, deep verdigris by lamplight. Walnut, brass and kraft keep their values in both modes, because they are materials, not themes. +Materials are real and made, not faked. Walnut, brass and kraft are procedural textures (`docs/assets/textures/make_textures.py`, fixed seed, no source images, no generative model). Kraft tiles, the brass label holder is a nine-slice border image, and the pull is one image used on every accordion. CSS supplies only edge lines, recesses and cast shadows over those textures. The wall behind the cabinet is plain paint: sage limewash by day, deep verdigris by lamplight. Walnut, brass and kraft keep their values in both modes, because they are materials, not themes. Density is calm and reading-first. Type is split by job. Alegreya SC, engraved brass-label small caps, names things: the wordmark, headings, labels, buttons, counts. The system face carries every sentence. The in-game panel replica (`game-panel.css`, `demo.js`, and its top in the hero, `hero-panel.js`) is a contained exception. It reproduces the mod's panel in the game's own look and is not part of this system. **Key Characteristics:** -- One metaphor for the site: capacity is a cabinet, a share is a drawer's height. The mod's own UI is always shown as it looks in game. +- One setting for the site: an apothecary cabinet's materials (walnut, brass, kraft). The mod's own UI is always shown as it looks in game. - Produced material textures (walnut, brass, kraft), tiled or nine-sliced, never imitated with gradients. - Small-caps display face for names and figures; system sans for prose. - Exact numbers in tabular figures. @@ -189,11 +188,11 @@ A painted-wall ground with warm cabinet materials on it. Walnut is the structure ### Primary - **Label Brass** (brass): the Download plate (over the brass texture), label-holder frames, pulls, the focus ring, text selection, and the note tab. It is the only metal in the world and the only fill that says "act here". -- **Polished Brass** (brass-hi): hover on the brass plate, and the brass-coloured figures on walnut (the cabinet's capacity, footer headings). +- **Polished Brass** (brass-hi): hover on the brass plate, and the brass-coloured figures on walnut (footer headings). - **Tarnished Brass** (brass-deep): plate borders, the header's bottom rail and the footer's top rail. ### Secondary -- **Walnut** (walnut, walnut-2, walnut-3, walnut-edge): the header, the footer, the cabinet and its drawers, walnut plates (secondary buttons), the rules' top rules (walnut-3) and the frame around in-game screenshots. walnut-edge draws every drawer's and cabinet's inset edge and the cabinet feet. The cabinet carcass and the scale folio's mini cabinets sit on a darker `#3a2416` fill under the walnut texture; drawers sit on walnut-2. +- **Walnut** (walnut, walnut-2, walnut-3, walnut-edge): the header, the footer, walnut plates (secondary buttons), the rules' top rules (walnut-3) and the frame around in-game screenshots. ### Tertiary - **Kraft Card** (kraft) with **Kraft Ink** (kraft-ink) and **Faded Ink** (kraft-soft): label cards in holders, step numbers, table-of-contents cards, pills, the pressed split button. Text on kraft is always kraft-ink; kraft-soft is only for the percentage under a count. **Pale Kraft** (kraft-pale) is the footer's body text on walnut. It ships as a literal `#d9ccb3` in `style.css` (`.site-footer p`, `.footer__fine`); there is no `--kraft-pale` custom property. @@ -203,7 +202,7 @@ A painted-wall ground with warm cabinet materials on it. Walnut is the structure - **Sage Limewash** (sage-limewash) / **Deep Verdigris** (verdigris): the page ground, day and night. - **Sage Shadow** (sage-deep) / **Verdigris Shadow** (verdigris-deep): alternating tinted sections. - **Wall Paper** (paper-day / paper-night): panels, notes, tables, code, accordions. -- **Ink** (ink-day / ink-night), **Muted Ink** (muted-day / muted-night): text and secondary text. Muted also draws the leader line and the dimension bracket. +- **Ink** (ink-day / ink-night), **Muted Ink** (muted-day / muted-night): text and secondary text. - **Rule** (line-day / line-night): 1px row rules and 1.5px panel borders. - **Verdigris Link** (link-day / link-night): inline links, underlined with a 3px offset that thickens to 2px on hover. - **Browser chrome:** every page sets ``, one value for both modes (a green-black near the night ground). It is not a palette token. @@ -227,7 +226,7 @@ A painted-wall ground with warm cabinet materials on it. Walnut is the structure - **Display** (700, clamp(2.6rem, 6vw, 4.4rem), 1.08): the wordmark h1 on the home page. Guide page heads use clamp(2.3rem, 5vw, 3.5rem). - **Headline** (700, clamp(1.9rem, 3.8vw, 2.7rem), 1.08, balanced wrap): section h2. Group titles on the guide pages use clamp(1.6rem, 3vw, 2.1rem). - **Title** (700, 1.4rem, 1.15): h3. Rules and steps use 1.3rem, notes 1.2rem. -- **Label** (700, 1.0–1.12rem, 0.02em tracking, tabular figures): buttons, nav, holder names and counts, cabinet crest, leader and dimension figures, pills, toc cards, footer headings. +- **Label** (700, 1.0–1.12rem, 0.02em tracking, tabular figures): buttons, nav, pills, toc cards, footer headings. - **Lead** (400, clamp(1.1rem, 1.8vw, 1.28rem), muted, 60ch max): the sentence under a section heading. The hero pitch is clamp(1.25rem, 2.3vw, 1.55rem) at 1.4, 30ch. - **Body** (400, 17px, 1.62; 16.5px under 600px): all running text. Measures: 68–72ch for prose, accordion bodies and step text. - **Body strong** (650): accordion questions, ledger names, table heads and first cells. These are sentences or phrases, so they stay in the body face. @@ -242,7 +241,7 @@ A painted-wall ground with warm cabinet materials on it. Walnut is the structure A single centred column, `min(1160px, 100% - 2 × gutter)`, with a fluid gutter (16–40px). Full-width sections pad clamp(56px, 8vw, 104px) top and bottom and alternate between the plain ground and the deeper tint. Headers and footers are full-bleed walnut. - **Hero:** two columns (1fr : 1.05fr) with name, pitch, mechanism line, a Download + Install guide button row, a dot-separated meta line and a status line on the left, and the hero panel on the right. They stack at 900px. The panel is at most 460px wide, scaled 1.2x (CSS `zoom`, like the game's UI scale) at 1200px and wider. -- **Rules:** three columns, each item under a 3px walnut rule. The scale folio sits under it as three columns (one under 600px). +- **Rules:** three columns, each item under a 3px walnut rule. The three sizes sit under it as three columns (one under 600px). - **Screenshots:** 0.7fr : 1.3fr, stacked at 900px. - **Ledger:** two columns of rows (name 11rem, text), one column at 900px, name above text at 600px. - **Guide pages:** a page head with a 3px walnut rule under it, a row of kraft toc cards, then sections 56px apart. Accordions are capped at 860px. @@ -255,7 +254,6 @@ Depth is physical. Surfaces are either set into the wall (paper panels: flat, bo ### Shadow Vocabulary - **Mount** (`0 1px 0 rgba(20,14,8,.35), 0 12px 22px -14px rgba(20,14,8,.7)`, deeper at night): screenshots in their walnut and brass frame. -- **Carcass wash** (`inset 0 0 0 2px walnut-edge, inset 0 0 0 999px rgba(28,16,8,.38)`): the scale folio's mini cabinets, darkened below their drawers. - **Plate lift** (`0 8px 16px -10px rgba(20,14,8,.75)`): buttons. - **Hardware drop** (`drop-shadow(0 2px 2px rgba(0,0,0,.45))` for pulls): follows the alpha of the brass images. @@ -266,7 +264,7 @@ Depth is physical. Surfaces are either set into the wall (paper panels: flat, bo ## Shapes -Crisp, lightly eased cabinetry. Corners are 4px on plates, mini cabinets, panels, frames and accordions, 3px on nav links, pills and the focus ring, and 2px on the thin mini-drawers and note tabs. The one round shape is the walnut medallion behind each goods icon (50%). Borders are 1.5px on paper surfaces and plates, and 1px for row rules. Structural rules (under page heads and over rules items) are 3px walnut. The holder's rivets and rounded corners come from its image, not from CSS radius. +Crisp, lightly eased cabinetry. Corners are 4px on plates, panels, frames and accordions, 3px on nav links, pills and the focus ring, and 2px on note tabs. Borders are 1.5px on paper surfaces and plates, and 1px for row rules. Structural rules (under page heads and over rules items) are 3px walnut. The holder's rivets and rounded corners come from its image, not from CSS radius. ## Components @@ -304,8 +302,8 @@ Drawers that pull open. Each is a paper panel with a 52px body-strong question a ### The Hero Panel The top of the mod's Storage Allocation panel for a full Large Warehouse: the "Storage Allocation" title, the summary line ("1200 / 1200 items · 2 goods allocated") and one card per good (icon, name, "50% allocated", "600 / 600" over "stored / limit", and the orange stock bar). It is drawn with the replica's own classes from `game-panel.css`, so it looks as the mod does in game. Split buttons under it (walnut plates; the pressed one is a kraft card) redraw it using the mod's rounding (`hero-panel.js` with `split.js`), and a visually hidden aria-live line states the new split in words. The caption says it is the mod as it shows in game and links to the full panel in Try it. No motion: the game redraws its cards at once. -### The Scale Folio (signature) -The same small share drawn at three capacities, at true share. Each is a mini cabinet 160px tall whose 1% drawer is a bare brass sliver (at least 3px). The sliver's count hangs above on a leader line (2px muted rule down to a label with the goods icon), and a dimension bracket (2px muted, open on the left) on the right measures the whole building ("= 1,200"). The caption names the building in Alegreya SC. +### The Three Sizes +The same shares, 1% carrots and 99% gears, in a Small (30), Medium (200) and Large (1200) Warehouse, each drawn as the top of the mod's panel with the replica's classes (`.ig.ig-mini`): the title, a full building's summary, and the two cards with their counts and bars. The small warehouse's panel also shows the mod's own rounding warning in its error colour ("1 allocated good(s) round to 0 items. …"). A caption above each names the building in Alegreya SC and says what 1% comes to. Three columns, one under 600px. ### Exception: the in-game panel replica `game-panel.css` and `demo.js` reproduce the mod's Storage Allocation panel in the game's own colours, frames and Noto Sans (OFL). The replica is proof of fit, not site style. It reads only `--ink`, `--muted`, `--edge` and `--orange` from this system. Its parts are used only for the replica and the hero panel. Don't restyle either toward the cabinet. @@ -313,7 +311,7 @@ The same small share drawn at three capacities, at true share. Each is a mini ca ## Do's and Don'ts ### Do: -- **Do** take walnut, brass and kraft from the produced textures in `docs/assets/textures/` (regenerate with `make_textures.py`). Tile walnut at 720px, kraft at 200px, and fit brass to the element's height. +- **Do** take walnut, brass and kraft from the produced textures in `docs/assets/textures/` (regenerate with `make_textures.py`). Tile kraft at 200px, and fit brass to the element's height. - **Do** frame kraft cards with the brass holder nine-slice (`border-image: url(textures/holder.png) 16`) and `background-clip: padding-box`. Scale the border width to the element (7–11px vertical). - **Do** use the brass cup pull as the one "this opens" sign on accordions. - **Do** set every count, capacity and percentage in tabular figures, and draw proportions at true share. diff --git a/docs/assets/style.css b/docs/assets/style.css index 64cf47e..f3264ed 100644 --- a/docs/assets/style.css +++ b/docs/assets/style.css @@ -152,8 +152,9 @@ a.btn.btn--primary, a.btn.btn--primary:hover { color: var(--kraft-ink); } picture of the mod is how it looks in game. Only the split buttons and the caption are site style. */ .hero-panel { margin: 0; } .hero-panel .ig { max-width: 460px; margin-inline: 0; } -.hero-panel .ig-alloc { padding: 10px 11px 9px; } -.hero-panel .ig-cards { margin-bottom: 0; } +/* the top of the mod's panel on its own (the hero, the three sizes): the replica's classes, a little tighter */ +.ig-mini .ig-alloc { padding: 10px 11px 9px; } +.ig-mini .ig-cards { margin-bottom: 0; } /* the game's UI scale turned up where the column has room for it */ @media (min-width: 1200px) { .hero-panel .ig { zoom: 1.2; } } .splits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } @@ -166,21 +167,12 @@ a.btn.btn--primary, a.btn.btn--primary:hover { color: var(--kraft-ink); } .rules h3 { font-size: 1.3rem; margin-bottom: .35em; } .rules p { margin: 0; color: var(--muted); } -/* the same small share at three capacities, drawn at true share: the 1% drawer is a sliver, its count hangs on a - leader line, and a bracket measures the whole building */ -.scale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 44px; align-items: end; } +/* the same small share at three capacities: three copies of the top of the mod's panel, as it shows each building */ +.scale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 44px; align-items: start; } .scale figure { margin: 0; } -.leader { display: flex; align-items: center; gap: 8px; margin: 0 0 0 18px; padding: 0 0 10px 12px; border-left: 2px solid var(--muted); font: 700 1.05rem/1.2 var(--display); font-variant-numeric: tabular-nums; } -.leader img { width: 26px; height: 26px; padding: 2px; border-radius: 50%; background: var(--walnut-2); } -.scale-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; } -.mini-cab { display: flex; flex-direction: column; gap: 3px; height: 160px; padding: 7px; border-radius: 4px; background: #3a2416 url(textures/walnut.webp) 0 0 / 720px auto; box-shadow: inset 0 0 0 2px var(--walnut-edge), inset 0 0 0 999px rgba(28, 16, 8, .38); } -.mini-cab span { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 0; padding: 0 10px; border-radius: 2px; background: #5d3c28 url(textures/walnut.webp) -300px -40px / 720px auto; box-shadow: inset 0 0 0 1.5px var(--walnut-edge); color: var(--kraft); font: 700 1.02rem/1 var(--display); font-variant-numeric: tabular-nums; overflow: hidden; } -.mini-cab .sliver { flex: 1 1 0; min-height: 3px; padding: 0; background: var(--brass); box-shadow: none; } -.mini-cab img { width: 22px; height: 22px; } -.dim { position: relative; width: 78px; display: flex; align-items: center; font: 700 1.1rem/1.1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; } -.dim::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 9px; border: solid var(--muted); border-width: 2px 2px 2px 0; } -.dim b { padding-left: 16px; } -.scale figcaption { margin-top: 10px; font-size: .95rem; color: var(--muted); } +.scale .ig { max-width: none; box-shadow: inset 0 0 0 1px var(--ig-dark), 0 12px 24px -12px rgba(0, 0, 0, .5); } +.scale .ig-round { font-size: 12px; margin-top: 6px; } +.scale figcaption { margin: 0 0 10px; font-size: .95rem; color: var(--muted); } .scale figcaption b { color: var(--ink); font-family: var(--display); font-size: 1.1rem; } /* ---------- shots from the game ---------- */ diff --git a/docs/assets/textures/make_textures.py b/docs/assets/textures/make_textures.py index 8d73186..9921cbf 100644 --- a/docs/assets/textures/make_textures.py +++ b/docs/assets/textures/make_textures.py @@ -1,6 +1,6 @@ -"""Makes the cabinet's material textures for the MixedStorage site. Procedural: no source images, no generative model. +"""Makes the site's material textures for the MixedStorage site. Procedural: no source images, no generative model. Run from this folder with Python 3, numpy and Pillow: python make_textures.py -Every texture tiles (walnut and brushed brass horizontally and vertically, kraft both ways); the holder frame is a +Every texture tiles (brushed brass horizontally and vertically, kraft both ways); the holder frame is a nine-slice for CSS border-image and the pull is a single image.""" import numpy as np from PIL import Image, ImageDraw, ImageFilter @@ -35,7 +35,8 @@ def save(arr, name, quality=82): light, dark = np.array([112, 76, 51]), np.array([66, 41, 26]) t = (.55 * rings ** 3 + .25 * fine + .2 * tone)[..., None] walnut = dark + (light - dark) * (1 - t) - pores[..., None] * 38 -save(walnut, "walnut.webp") +# The site no longer uses walnut.webp (the mod is shown as it looks in game, Kyler 2026-09-24). The grain is still +# drawn, unsaved, so the random numbers, and so the textures below, stay exactly the same. # kraft: pale brown card with paper tooth and a few long fibres h = w = 200 @@ -116,4 +117,4 @@ def brass_fill(size, hi=1.0): d.ellipse([cx - 3, 1, cx + 3, 7], fill=(120, 88, 32, 255)) d.line([cx - 2, 4, cx + 2, 4], fill=(240, 214, 150, 255)) im.save("pull.png", optimize=True) -print("made walnut.webp kraft.webp brass.webp holder.png pull.png") +print("made kraft.webp brass.webp holder.png pull.png") diff --git a/docs/assets/textures/walnut.webp b/docs/assets/textures/walnut.webp deleted file mode 100644 index 838e1d4..0000000 Binary files a/docs/assets/textures/walnut.webp and /dev/null differ diff --git a/docs/assets/textures/walnut.webp.json b/docs/assets/textures/walnut.webp.json deleted file mode 100644 index 119f759..0000000 --- a/docs/assets/textures/walnut.webp.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "prompt": "Origin: procedural texture produced by site/assets/textures/make_textures.py with numpy and Pillow, fixed seed 1200; no source images and no generative model.", - "createdAt": "2026-09-23T18:55:06.596Z" -} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index cb05270..4299c41 100644 --- a/docs/index.html +++ b/docs/index.html @@ -74,7 +74,7 @@

MixedStorage

If the button opens GitHub, pick the MixedStorage zip under Assets, not Source code.

-
+

Storage Allocation

1200 / 1200 items · 2 goods allocated

@@ -104,9 +104,31 @@

How the percentages work

  • Lowering a limit never deletes stock

    Extra goods are marked as excess and leave the normal way. Deliveries on their way count too. If a lower limit clashes with them, Apply refuses it until they arrive.

    • -

    Carrots 0

    = 30
    Small Warehouse 1% carrots rounds to 0 of 30
    -

    Carrots 2

    = 200
    Medium Warehouse 1% carrots is 2 of 200
    -

    Carrots 12

    = 1,200
    Large Warehouse 1% carrots is 12 of 1,200
    +
    +
    Small Warehouse 1% carrots rounds to 0 of 30
    +
    +

    Storage Allocation

    +

    30 / 30 items · 2 goods allocated

    +
    Carrots1% allocated0 / 0stored / limit
    Gears99% allocated30 / 30stored / limit
    +

    1 allocated good(s) round to 0 items. Increase their shares or use larger storage.

    +
    +
    +
    +
    Medium Warehouse 1% carrots is 2 of 200
    +
    +

    Storage Allocation

    +

    200 / 200 items · 2 goods allocated

    +
    Carrots1% allocated2 / 2stored / limit
    Gears99% allocated198 / 198stored / limit
    +
    +
    +
    +
    Large Warehouse 1% carrots is 12 of 1,200
    +
    +

    Storage Allocation

    +

    1200 / 1200 items · 2 goods allocated

    +
    Carrots1% allocated12 / 12stored / limit
    Gears99% allocated1188 / 1188stored / limit
    +
    +

    The same shares, 1% carrots and 99% gears, in three sizes. In the small warehouse, the 1% rounds to 0.