From 93e598b8936902646559930b591d6ee8f8270955 Mon Sep 17 00:00:00 2001 From: Kyler Ramsey Date: Thu, 24 Sep 2026 11:27:52 -0700 Subject: [PATCH] Site: the hero shows the mod's own panel, not a wood cabinet The top of the Storage Allocation panel as it looks in game (title, summary, a card per good with its stock bar), drawn with the replica's classes. The split buttons still redraw it with the mod's rounding. The mod is never drawn in wood; the design records say so. Co-Authored-By: Claude Opus 5.5 --- .impeccable/design.json | 54 +++++++++------------ .impeccable/surfaces/docs-index-html.md | 4 +- CLAUDE.md | 29 +++++------ DESIGN.md | 47 ++++++++---------- docs/assets/cabinet.js | 64 ------------------------- docs/assets/hero-panel.js | 45 +++++++++++++++++ docs/assets/style.css | 45 +++++------------ docs/index.html | 20 ++++---- 8 files changed, 129 insertions(+), 179 deletions(-) delete mode 100644 docs/assets/cabinet.js create mode 100644 docs/assets/hero-panel.js diff --git a/.impeccable/design.json b/.impeccable/design.json index ced26f8..41770ee 100644 --- a/.impeccable/design.json +++ b/.impeccable/design.json @@ -476,7 +476,7 @@ "name": "walnut", "file": "docs/assets/textures/walnut.webp", "size": "720x180", - "use": "background-size 720px auto; tiles both ways; per-drawer background-position offsets so neighbours don't repeat grain; fallback #3a2416 (carcass) / #5d3c28 (drawer)." + "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", @@ -494,13 +494,13 @@ "name": "holder", "file": "docs/assets/textures/holder.png", "size": "112x56", - "use": "nine-slice: border-image-slice 16, stretch; border-width 11px 14px (holder), 8px 9px (steps), 7px 9px (toc); background-clip padding-box over kraft." + "use": "nine-slice: border-image-slice 16, stretch; border-width 8px 9px (steps), 7px 9px (toc); background-clip padding-box over kraft." }, { "name": "pull", "file": "docs/assets/textures/pull.png", "size": "96x40", - "use": "single image, contain; 60x25 on drawers, 38x16 on accordions." + "use": "single image, contain; 38x16 on accordions." }, { "name": "generator", @@ -515,14 +515,9 @@ "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": "cabinet-cast", - "value": "inset 0 0 0 2px #2e1c12, inset 0 0 0 999px rgba(28,16,8,.38), 0 26px 44px -26px rgba(0,0,0,.85)", - "purpose": "The cabinet carcass: edge, darkening wash, cast shadow." - }, - { - "name": "drawer-recess", - "value": "inset 0 0 0 2px #2e1c12, inset 0 -14px 18px -14px rgba(0,0,0,.55)", - "purpose": "Each drawer front." + "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", @@ -531,8 +526,8 @@ }, { "name": "hardware-drop", - "value": "drop-shadow(0 3px 3px rgba(0,0,0,.4))", - "purpose": "Label holders (pulls: drop-shadow(0 2px 2px rgba(0,0,0,.45))); follows image alpha." + "value": "drop-shadow(0 2px 2px rgba(0,0,0,.45))", + "purpose": "Brass pulls; follows image alpha." }, { "name": "frame-rings", @@ -546,11 +541,6 @@ } ], "motion": [ - { - "name": "drawer-ease", - "value": "flex-grow .6s cubic-bezier(.2,.8,.2,1), padding-bottom .6s cubic-bezier(.2,.8,.2,1), opacity .45s", - "purpose": "Drawers re-proportion, open from nothing and close to nothing." - }, { "name": "plate-press", "value": "transform .15s cubic-bezier(.2,.7,.2,1), background .15s", @@ -564,7 +554,7 @@ { "name": "reduced-motion", "value": "transition: none !important; scroll-behavior: auto", - "purpose": "Everything off under prefers-reduced-motion; leaving drawers removed at once." + "purpose": "Everything off under prefers-reduced-motion." } ], "breakpoints": [ @@ -586,9 +576,10 @@ "name": "In-game panel replica", "files": [ "docs/assets/game-panel.css", - "docs/assets/demo.js" + "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. Not site style: don't reuse it 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 shows its top (title, summary, cards) with the same classes. Not site style: don't reuse it elsewhere or restyle it." } ], "browserChrome": { @@ -597,7 +588,7 @@ }, "carcassFill": { "value": "#3a2416", - "purpose": "The fill under the walnut texture on the cabinet carcass (.cab) and the scale folio mini cabinets (.mini-cab); drawers use walnut-2 #5d3c28." + "purpose": "The fill under the walnut texture on the scale folio mini cabinets (.mini-cab); their drawers use walnut-2 #5d3c28." } }, "components": [ @@ -658,12 +649,12 @@ "css": ".ds-qa{background:var(--paper,#eef1ea);border:1.5px solid var(--line,#aab5ab);border-radius:4px;max-width:860px;font:17px/1.62 system-ui,sans-serif;color:var(--ink,#1d2320)}.ds-qa[open]{border-color:#6e4a32}.ds-qa>summary{position:relative;list-style:none;cursor:pointer;min-height:52px;padding:14px 64px 14px 18px;font-weight:650;font-size:1.05rem;line-height:1.4}.ds-qa>summary::-webkit-details-marker{display:none}.ds-qa>summary::after{content:\"\";position:absolute;right:14px;top:50%;width:38px;height:16px;margin-top:-8px;background:url(https://timbermods.github.io/MixedStorage/assets/textures/pull.png) center/contain no-repeat;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4));transition:transform .2s}.ds-qa[open]>summary::after{transform:translateY(3px)}.ds-qa>summary:hover{color:var(--link,#1f5a50)}.ds-qa>summary:focus-visible{outline:3px solid #c19a4b;outline-offset:3px}.ds-qa>div{padding:0 18px 16px;max-width:72ch}@media (prefers-reduced-motion:reduce){.ds-qa>summary::after{transition:none}}" }, { - "name": "Cabinet Drawer with Label Holder", + "name": "Hero Panel (the mod's panel, top)", "kind": "custom", - "refersTo": "drawer", - "description": "Signature: a walnut drawer whose height is its share, carrying a kraft card in a brass holder and a brass cup pull.", - "html": "
Large Warehouse1,200
Carrots60050%
Gears60050%
", - "css": ".ds-cab{padding:18px 18px 22px;border-radius:6px;background:#3a2416 url(https://timbermods.github.io/MixedStorage/assets/textures/walnut.webp) 0 0/720px auto;box-shadow:inset 0 0 0 2px #2e1c12,inset 0 0 0 999px rgba(28,16,8,.38),0 26px 44px -26px rgba(0,0,0,.85)}.ds-crest{display:flex;justify-content:space-between;margin:2px 6px 14px;color:#d8c29b;font:700 1.35rem/1.1 \"Alegreya SC\",\"Palatino Linotype\",Georgia,serif}.ds-crest span{color:#e0c27e;font-size:1.05rem;font-variant-numeric:tabular-nums}.ds-body{display:flex;flex-direction:column;gap:8px;height:320px}.ds-drawer{position:relative;flex:1 1 0;min-height:0;display:grid;place-items:center;padding-bottom:26px;overflow:hidden;border-radius:4px;background:#5d3c28 url(https://timbermods.github.io/MixedStorage/assets/textures/walnut.webp) 0 0/720px auto;box-shadow:inset 0 0 0 2px #2e1c12,inset 0 -14px 18px -14px rgba(0,0,0,.55);transition:flex-grow .6s cubic-bezier(.2,.8,.2,1),padding-bottom .6s cubic-bezier(.2,.8,.2,1)}.ds-holder{display:flex;align-items:center;gap:10px;min-width:min(78%,300px);padding:3px 10px;color:#231a12;border-style:solid;border-width:11px 14px;border-image:url(https://timbermods.github.io/MixedStorage/assets/textures/holder.png) 16/11px 14px/0 stretch;background:#d8c29b url(https://timbermods.github.io/MixedStorage/assets/textures/kraft.webp) 0 0/200px;background-clip:padding-box;filter:drop-shadow(0 3px 3px rgba(0,0,0,.4));font:700 1.1rem/1.1 \"Alegreya SC\",\"Palatino Linotype\",Georgia,serif}.ds-name{flex:1}.ds-count{text-align:right;font-variant-numeric:tabular-nums}.ds-count small{display:block;font:600 .78rem/1.2 system-ui,sans-serif;color:#5a4632}.ds-pull{position:absolute;bottom:6px;left:50%;width:60px;height:25px;margin-left:-30px;background:url(https://timbermods.github.io/MixedStorage/assets/textures/pull.png) center/contain no-repeat;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}@media (prefers-reduced-motion:reduce){.ds-drawer{transition:none}}" + "refersTo": "hero-panel", + "description": "The top of the mod's Storage Allocation panel in the game's look: title, summary, one card per good with its stock bar. Part of the replica exception.", + "html": "

Storage Allocation

1200 / 1200 items · 2 goods allocated

Carrots50% allocated600 / 600stored / limit
Gears50% allocated600 / 600stored / limit
", + "css": ".ds-ig{max-width:440px;background:#436452;color:#fbfffc;border:2px solid #ffffb5;box-shadow:inset 0 0 0 1px #5c574c;border-radius:4px;padding:10px 11px 9px;font:400 13px/1.362 \"Noto Sans\",\"Segoe UI\",system-ui,sans-serif}.ds-ig p{margin:0}.ds-ig-t{font-size:16px;font-weight:700;text-transform:uppercase;color:#fff}.ds-ig-s{font-size:16px;font-weight:700;color:#fff;margin-bottom:4px}.ds-ig-c{background:#3b5468;border:1px solid #2a3d4d;border-radius:3px;padding:5px 7px;margin-bottom:4px}.ds-ig-l{display:flex;justify-content:space-between;font-size:14px}.ds-ig-l b{display:block;font-size:16px;color:#fff}.ds-ig-n{text-align:right;font-size:12px}.ds-ig-n b{font-size:19px}.ds-ig-c i{display:block;height:4px;margin-top:4px;background:#ffa60f}" }, { "name": "Numbered Step", @@ -676,9 +667,9 @@ ], "narrative": { "northStar": "The Apothecary Drawer Cabinet", - "overview": "The site is one walnut cabinet standing against a painted wall. Every drawer is a good, and each drawer's height is that good's share of the building. Brass label holders carry kraft cards, brass cup pulls sit under them, and the goods keep the game's own icons. The idea is literal: the hero cabinet redraws its drawers with the mod's own rounding, and the rules section draws the same share at three capacities at true scale, with a leader line and a dimension bracket, like a measured folio drawing.\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 drawer face and 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 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.", "keyCharacteristics": [ - "One metaphor, used to the letter: capacity is a cabinet, a share is a drawer's height.", + "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.", "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.", @@ -707,7 +698,7 @@ }, { "name": "The Counter Rule", - "body": "Every count, capacity and percentage uses tabular figures, so numbers hold still when the drawers redraw.", + "body": "Every count, capacity and percentage uses tabular figures, so numbers hold still when the split buttons redraw them.", "section": "typography" }, { @@ -724,12 +715,13 @@ "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 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 drawers and accordions alike.", + "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.", "Do keep controls at least 44px tall, show focus as a 3px brass outline 3px out, and turn off every transition and smooth scrolling under prefers-reduced-motion.", "Do keep materials identical in both modes. Only the wall, paper, ink, rules, link and orange change for lamplight." ], "donts": [ + "Don't draw the mod in wood. Any picture of the mod itself (the hero, the demo) is the in-game panel replica. Walnut, brass and kraft never stand in for the mod's UI: readers must not think the mod looks like wood (Kyler, 2026-09-24).", "Don't imitate wood, brass or paper with CSS gradients or bevels. If a material needs a new form, produce it in `make_textures.py`.", "Don't put small labels or kickers above headings. The heading is the label.", "Don't build stat rows of big numbers, or grids of icon tiles. Use ledger rows, measured drawings and the goods' own icons.", diff --git a/.impeccable/surfaces/docs-index-html.md b/.impeccable/surfaces/docs-index-html.md index f04ccc2..c8a8029 100644 --- a/.impeccable/surfaces/docs-index-html.md +++ b/.impeccable/surfaces/docs-index-html.md @@ -17,8 +17,8 @@ OWN-WORLD: Painted-cabinet ground (deep verdigris #18221f at night, sage-limewas STORY: One look: one building, several goods, each a share by percentage; percentages reserve space, haulers still bring the goods. Then how the rules work (100%, whole items, stock is never deleted), the panel in the game, try it, install right, co-op, status, help. -FIRST VIEWPORT: Left, the name in brass-label lettering, the one-line pitch, the mechanism line, a brass Download plate and an Install guide link, a one-line meta row (Timberborn 1.1.2.4 · Harmony 2.4.1+ · co-op optional). Right, a walnut cabinet front labelled "Large Warehouse · 1,200" with two drawers at 50/50, each with a brass label holder carrying a kraft card (goods icon, Carrots, 600, 50%) and a brass pull; split buttons under it re-proportion the drawers. +FIRST VIEWPORT: Left, the name in brass-label lettering, the one-line pitch, the mechanism line, a brass Download plate and an Install guide link, a one-line meta row (Timberborn 1.1.2.4 · Harmony 2.4.1+ · co-op optional). Right, the top of the mod's own Storage Allocation panel in the game's look (title, "1200 / 1200 items · 2 goods allocated", a card per good at 50/50 with its stock bar); split buttons under it redraw the cards. Any picture of the mod itself (the hero, the demo) is the in-game panel replica. Walnut, brass and kraft never stand in for the mod's UI: readers must not think the mod looks like wood (Kyler, 2026-09-24). -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 re-proportion the drawers with counts that follow the mod's rounding (split.js). Motion: drawers ease to their new heights, off under reduced motion. +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). 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 e9b3f8d..f274f29 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -40,7 +40,7 @@ text and the player docs follows these rules. ## Website -- **Where:** `docs/`: `index.html` (features, cabinet, demo), `install.html`, `troubleshooting.html`, `faq.html`, +- **Where:** `docs/`: `index.html` (features, hero panel, demo), `install.html`, `troubleshooting.html`, `faq.html`, `404.html`, plus `robots.txt`, `sitemap.xml`, `.nojekyll`. Live at https://timbermods.github.io/MixedStorage/. - **Published:** GitHub Pages serves `main:/docs`, like every other timbermods site, so merging to main publishes; a build takes about a minute. (The old `gh-pages` branch and `deploy-site.ps1` are retired.) @@ -49,9 +49,10 @@ text and the player docs follows these rules. `data-release="version|tag|asset-name"` fallback text and the README lines ending in `` to the new version, runs the site checks and commits to main. Pre-releases change nothing. Descriptions, status lists and FAQs stay manual (the checklist below). Dry run: Actions → Latest release → Run workflow. -- **Look:** "The Apothecary Drawer Cabinet". The site is one walnut cabinet on a painted wall: every drawer is a good, - and its height is that good's share, with brass label holders, kraft cards and brass cup pulls. The look is fixed: - updates extend it and never restyle it. +- **Look:** "The Apothecary Drawer Cabinet". The site is a walnut cabinet on a painted wall, with brass plates, kraft + cards and brass cup pulls. The look is fixed: updates extend it and never restyle it. +- **The mod is never drawn in wood.** Any picture of the mod itself (the hero, the demo) is the in-game panel replica, + so readers see how the mod really looks (Kyler, 2026-09-24). - **Design records (read these before any site change):** - `PRODUCT.md`: the facts, voice, and every site contract. - `DESIGN.md`: the visual system and its named rules, the source of truth for the look. @@ -70,7 +71,7 @@ text and the player docs follows these rules. - **Names-Not-Sentences**: Alegreya SC is for names, headings, labels, buttons and figures. Questions, captions, notes and prose use the system face. - **Counter**: every count, capacity and percentage uses tabular figures; proportions are drawn at true share. -- **Mounted-or-Set-In**: paper panels are set in (1.5px rule border, no shadow); the cabinet, frames, plates and +- **Mounted-or-Set-In**: paper panels are set in (1.5px rule border, no shadow); frames, plates and hardware are mounted (one soft shadow downward). Nothing floats or glows. - **Rail**: header and footer meet the page with a 3px tarnished-brass (`#8a6a2c`) rail. - Tokens live in `docs/assets/style.css` `:root`; night values in `@media (prefers-color-scheme: dark)`. Day / night: @@ -91,13 +92,14 @@ text and the player docs follows these rules. - Themes: light and dark follow the OS (`prefers-color-scheme`) only. There is no toggle and no storage key. Check both. - Phones: no horizontal scroll at 390px, and tap targets ≥ 44px (buttons 48, small 44, toc 46, accordions 52). Breakpoints 900 / 760 (brass Menu button) / 600px. -- Motion: the cabinet's drawers ease `flex-grow` and `padding-bottom` over 0.6s cubic-bezier(.2,.8,.2,1) when a split - button redraws them (`cabinet.js` with `split.js`, the mod's rounding); plates lift 1px; an accordion's pull drops - 3px. Everything is off under `prefers-reduced-motion`. -- The in-game panel replica (`game-panel.css`, `demo.js`, `goods.js`, `split.js`) must keep matching the mod's real - Storage Allocation panel (the 0.5.7-era native look; `docs/assets/panel.webp` is the in-game screenshot). It reads only - `--ink`, `--muted`, `--edge`, `--orange`. Don't restyle it toward the cabinet or reuse its parts elsewhere. Update - `split.js` / `demo.js` when the mod's rounding (`AllocationPlan.Capacities`) or messages (`StorageView`) change. +- Motion: plates lift 1px; an accordion's pull drops 3px. The hero panel's split buttons redraw its cards at once, as + the game does (`hero-panel.js` with `split.js`, the mod's rounding). Everything is off under + `prefers-reduced-motion`. +- The in-game panel replica (`game-panel.css`, `demo.js`, `hero-panel.js`, `goods.js`, `split.js`) must keep matching + the mod's real Storage Allocation panel (the 0.5.7-era native look; `docs/assets/panel.webp` is the in-game + screenshot). It reads only `--ink`, `--muted`, `--edge`, `--orange`. Don't restyle it toward the cabinet or use its + parts outside the replica and the hero panel. Update `split.js`, `demo.js` and `hero-panel.js` when the mod's + rounding (`AllocationPlan.Capacities`) or messages (`StorageView`) change. - Don't: imitate wood, brass or paper with CSS gradients or bevels; put kickers or small labels above headings; build stat rows or icon-tile grids; use hard zero-blur offset shadows; set sentences in Alegreya SC; add a second accent fill; use official Timberborn logos or key art (the goods icons in `docs/assets/goods/` are allowed and credited). @@ -160,8 +162,7 @@ When asked to "update the website for the latest release, consistent with the de `"$(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 drawers' `padding-bottom` (the signature motion) and the replica's fill bar; - two `nested-cards` on index (the cabinet's drawers and the replica's sections nest by design); Noto Sans, + line; `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 fb0e7ec..0f6081d 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -1,6 +1,6 @@ --- name: MixedStorage -description: The MixedStorage mod site as an apothecary drawer cabinet; each drawer's height is its good's share of the building. +description: The MixedStorage mod site as an apothecary drawer cabinet around the mod's own in-game panel. colors: sage-limewash: "#dfe4da" sage-deep: "#d0d8cc" @@ -78,7 +78,6 @@ rounded: hairline: "2px" sm: "3px" md: "4px" - cabinet: "6px" medallion: "50%" spacing: gutter: "clamp(16px, 4vw, 40px)" @@ -134,14 +133,11 @@ components: typography: "{typography.label}" padding: "0 12px" height: "46px" - cabinet: - backgroundColor: "#3a2416" - textColor: "{colors.kraft}" - rounded: "{rounded.cabinet}" - padding: "18px 18px 22px" - drawer: - backgroundColor: "{colors.walnut-2}" - rounded: "{rounded.md}" + hero-panel: + backgroundColor: "#436452" + textColor: "#fbfffc" + rounded: "4px" + padding: "10px 11px 9px" panel-note: backgroundColor: "{colors.paper-day}" textColor: "{colors.ink-day}" @@ -174,14 +170,14 @@ components: **Creative North Star: "The Apothecary Drawer Cabinet"** -The site is one walnut cabinet standing against a painted wall. Every drawer is a good, and each drawer's height is that good's share of the building. Brass label holders carry kraft cards, brass cup pulls sit under them, and the goods keep the game's own icons. The idea is literal: the hero cabinet redraws its drawers with the mod's own rounding, and the rules section draws the same share at three capacities at true scale, with a leader line and a dimension bracket, like a measured folio drawing. +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. -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 drawer face and 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). 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. -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`) is a contained exception. It reproduces the mod's panel in the game's own look and is not part of this system. +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, used to the letter: capacity is a cabinet, a share is a drawer's height. +- 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. - 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. @@ -239,13 +235,13 @@ A painted-wall ground with warm cabinet materials on it. Walnut is the structure ### Named Rules **The Names-Not-Sentences Rule.** Alegreya SC is for names, headings, labels and figures. Questions, captions, notes and anything longer than a label use the body face. -**The Counter Rule.** Every count, capacity and percentage uses tabular figures, so numbers hold still when the drawers redraw. +**The Counter Rule.** Every count, capacity and percentage uses tabular figures, so numbers hold still when the split buttons redraw them. ## Layout 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 cabinet on the right. They stack at 900px. The cabinet body is clamp(320px, 34vw, 400px) tall, 340px under 760px and 320px under 600px. +- **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). - **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. @@ -255,14 +251,13 @@ A single centred column, `min(1160px, 100% - 2 × gutter)`, with a fluid gutter ## Elevation & Depth -Depth is physical. Surfaces are either set into the wall (paper panels: flat, bordered, no shadow) or objects mounted on it (the cabinet, screenshots, plates, holders, pulls). Mounted objects cast one soft shadow from above. Recesses come from inset shadows over the texture. There is no ambient glow and no floating card. +Depth is physical. Surfaces are either set into the wall (paper panels: flat, bordered, no shadow) or objects mounted on it (screenshots, plates, holders, pulls). Mounted objects cast one soft shadow from above. Recesses come from inset shadows over the texture. There is no ambient glow and no floating card. ### 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. -- **Cabinet cast** (`0 26px 44px -26px rgba(0,0,0,.85)`) with a 2px walnut-edge inset and a `rgba(28,16,8,.38)` inset wash that darkens the carcass below the drawer fronts. -- **Drawer recess** (`inset 0 0 0 2px walnut-edge, inset 0 -14px 18px -14px rgba(0,0,0,.55)`): each drawer front, shaded toward its bottom edge. +- **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 3px 3px rgba(0,0,0,.4))` for holders, `0 2px 2px / .45` for pulls): follows the alpha of the brass images. +- **Hardware drop** (`drop-shadow(0 2px 2px rgba(0,0,0,.45))` for pulls): follows the alpha of the brass images. ### Named Rules **The Mounted-or-Set-In Rule.** A surface is either mounted (it casts a shadow downward) or set into the wall (a border, no shadow). Nothing floats and nothing glows. @@ -271,7 +266,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, drawers, panels, frames and accordions, 6px on the cabinet carcass, 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, 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. ## Components @@ -306,27 +301,27 @@ A numbered list. Each step is a row between 1px rules, and its number sits on a ### Accordions (questions and fixes) Drawers that pull open. Each is a paper panel with a 52px body-strong question and a 38 × 16px brass pull at the right edge. When it opens, the pull drops 3px (0.2s) and the border darkens to walnut-3. Hover turns the question to link colour. The body is capped at 72ch. -### The Cabinet (signature) -A walnut carcass (tiled walnut at 720px, darkened by an inset wash) with a crest line (the building name in kraft, the capacity in polished brass tabular figures), a column of drawers 8px apart, and two walnut feet. Each drawer's `flex-grow` is its share in hundredths of a percent, and its walnut texture is offset so neighbouring drawers don't repeat the grain. Every drawer carries a label holder: a kraft card in the brass nine-slice (holder.png, slice 16, 11px × 14px border) holding the goods icon on a walnut medallion, the good's name, and the count with its percentage under it. A brass cup pull (60 × 25px) sits 6px above the drawer's bottom edge, and the drawer keeps 26px of bottom padding so the holder never overlaps the pull. Split buttons under the cabinet redraw it using the mod's rounding (split.js). An aria-live caption states the new split in words. -- **Motion:** drawers ease `flex-grow` and `padding-bottom` over 0.6s cubic-bezier(.2,.8,.2,1). A drawer that joins opens from nothing and one that leaves closes to nothing (opacity 0.45s). Under reduced motion there are no transitions, and a leaving drawer is removed at once. +### 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. ### 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. Don't reuse its parts outside the replica, and don't restyle the replica toward the cabinet. +`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. ## 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** 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 drawers and accordions alike. +- **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. - **Do** keep controls at least 44px tall, show focus as a 3px brass outline 3px out, and turn off every transition and smooth scrolling under prefers-reduced-motion. - **Do** keep materials identical in both modes. Only the wall, paper, ink, rules, link and orange change for lamplight. ### Don't: +- **Don't** draw the mod in wood. Any picture of the mod itself (the hero, the demo) is the in-game panel replica. Walnut, brass and kraft never stand in for the mod's UI: readers must not think the mod looks like wood (Kyler, 2026-09-24). - **Don't** imitate wood, brass or paper with CSS gradients or bevels. If a material needs a new form, produce it in `make_textures.py`. - **Don't** put small labels or kickers above headings. The heading is the label. - **Don't** build stat rows of big numbers, or grids of icon tiles. Use ledger rows, measured drawings and the goods' own icons. diff --git a/docs/assets/cabinet.js b/docs/assets/cabinet.js deleted file mode 100644 index 813b813..0000000 --- a/docs/assets/cabinet.js +++ /dev/null @@ -1,64 +0,0 @@ -/* - * The hero's cabinet: one Large Warehouse (1,200) drawn as a cabinet whose drawers take the building's space by - * share. The split buttons re-proportion the drawers; the counts come from MixedStorageSplit.capacities (split.js), - * the same rounding the mod uses. The page ships with the 50 / 50 split already drawn, so this only enhances it. - */ -(function () { - 'use strict'; - var cab = document.querySelector('[data-cabinet]'); - var split = window.MixedStorageSplit; - if (!cab || !split) return; - - var CAPACITY = 1200; - var SPLITS = { - even: [['Carrot', 'Carrots', 'carrot', 5000], ['Gear', 'Gears', 'gear', 5000]], - bakery: [['Bread', 'Bread', 'bread', 2500], ['WheatFlour', 'Wheat flour', 'wheat-flour', 7500]], - thirds: [['Carrot', 'Carrots', 'carrot', 3334], ['Potato', 'Potatoes', 'potato', 3333], ['Berries', 'Berries', 'berries', 3333]] - }; - - var body = cab.querySelector('.cab__body'); - var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; - var said = document.querySelector('[data-cabinet-said]'); - var buttons = document.querySelectorAll('[data-split]'); - - function pct(units) { return (units / 100).toFixed(units % 100 ? 2 : 0) + '%'; } - - function draw(name) { - var goods = SPLITS[name]; - var limits = split.capacities(goods.map(function (g) { return { id: g[0], units: g[3] }; }), CAPACITY); - var drawers = Array.prototype.slice.call(body.querySelectorAll('.drawer:not(.is-leaving)')); - // A good that joins opens a new drawer from nothing; one that leaves closes to nothing and is taken out. - while (drawers.length < goods.length) { - var d = document.createElement('div'); - d.className = 'drawer is-entering'; - d.style.setProperty('--share', 0); - d.innerHTML = '' - + ''; - body.appendChild(d); - drawers.push(d); - } - drawers.slice(goods.length).forEach(function (d) { - d.style.setProperty('--share', 0); - d.classList.add('is-leaving'); - setTimeout(function () { if (d.parentNode) d.parentNode.removeChild(d); }, reduced ? 0 : 650); - }); - void body.offsetHeight; - // Every remaining drawer takes its new share and slides to its new height. - goods.forEach(function (g, i) { - drawers[i].classList.remove('is-entering'); - var d = drawers[i]; - d.style.setProperty('--share', g[3]); - d.querySelector('img').src = 'assets/goods/' + g[2] + '-60.png'; - d.querySelector('.name').textContent = g[1]; - d.querySelector('.count b').textContent = limits[i].toLocaleString('en-US'); - d.querySelector('.count small').textContent = pct(g[3]); - }); - if (said) said.textContent = goods.map(function (g, i) { return pct(g[3]) + ' ' + g[1].toLowerCase() + ': ' + limits[i].toLocaleString('en-US'); }).join(', ') + ', of 1,200.'; - Array.prototype.forEach.call(buttons, function (b) { b.setAttribute('aria-pressed', b.getAttribute('data-split') === name ? 'true' : 'false'); }); - } - - Array.prototype.forEach.call(buttons, function (b) { - b.hidden = false; - b.addEventListener('click', function () { draw(b.getAttribute('data-split')); }); - }); -})(); diff --git a/docs/assets/hero-panel.js b/docs/assets/hero-panel.js new file mode 100644 index 0000000..c86b41f --- /dev/null +++ b/docs/assets/hero-panel.js @@ -0,0 +1,45 @@ +/* + * The hero's panel: the top of the mod's Storage Allocation panel for a full Large Warehouse (1200). The split + * buttons redraw its cards; the limits come from MixedStorageSplit.capacities (split.js), the same rounding the mod + * uses, and the labels are the mod's own (StorageView). The page ships with the 50 / 50 split drawn, so this only + * enhances it. + */ +(function () { + 'use strict'; + var panel = document.querySelector('[data-hero-panel]'); + var split = window.MixedStorageSplit; + if (!panel || !split) return; + + var CAPACITY = 1200; + var SPLITS = { + even: [['Carrot', 'Carrots', 'carrot', 5000], ['Gear', 'Gears', 'gear', 5000]], + bakery: [['Bread', 'Bread', 'bread', 2500], ['WheatFlour', 'Wheat flour', 'wheat-flour', 7500]], + thirds: [['Carrot', 'Carrots', 'carrot', 3334], ['Potato', 'Potatoes', 'potato', 3333], ['Berries', 'Berries', 'berries', 3333]] + }; + + var summary = panel.querySelector('[data-hero-summary]'); + var cards = panel.querySelector('[data-hero-cards]'); + var said = document.querySelector('[data-hero-said]'); + var buttons = document.querySelectorAll('[data-split]'); + + function pct(units) { return String(units / 100); } + + function draw(name) { + var goods = SPLITS[name]; + var limits = split.capacities(goods.map(function (g) { return { id: g[0], units: g[3] }; }), CAPACITY); + summary.textContent = CAPACITY + ' / ' + CAPACITY + ' items · ' + goods.length + ' goods allocated'; + cards.innerHTML = goods.map(function (g, i) { + return '
' + + '' + g[1] + '' + pct(g[3]) + '% allocated' + + '' + limits[i] + ' / ' + limits[i] + 'stored / limit
' + + '
'; + }).join(''); + if (said) said.textContent = goods.map(function (g, i) { return pct(g[3]) + '% ' + g[1].toLowerCase() + ': ' + limits[i]; }).join(', ') + ', of 1200.'; + Array.prototype.forEach.call(buttons, function (b) { b.setAttribute('aria-pressed', b.getAttribute('data-split') === name ? 'true' : 'false'); }); + } + + Array.prototype.forEach.call(buttons, function (b) { + b.hidden = false; + b.addEventListener('click', function () { draw(b.getAttribute('data-split')); }); + }); +})(); diff --git a/docs/assets/style.css b/docs/assets/style.css index a94f356..64cf47e 100644 --- a/docs/assets/style.css +++ b/docs/assets/style.css @@ -1,6 +1,6 @@ /* - * MixedStorage: the project website. An apothecary drawer cabinet: one walnut cabinet, many labelled drawers, each - * drawer's height its share. Brass label holders carry kraft cards; the game's goods icons stay the game's. + * MixedStorage: the project website. An apothecary drawer cabinet: walnut, brass plates and kraft cards on a painted + * wall; the game's goods icons stay the game's. The mod itself is only ever shown as it looks in game (game-panel.css). * Display lettering is Alegreya SC (SIL OFL, fonts/OFL-Alegreya.txt), body text the system face. * game-panel.css (the in-game panel replica) reads --ink, --muted, --edge and --orange from here. */ @@ -147,36 +147,18 @@ a.btn.btn--primary, a.btn.btn--primary:hover { color: var(--kraft-ink); } .hero__meta li:not(:last-child)::after { content: "\00b7"; margin-left: 16px; } .hero__status { margin: 14px 0 0; font-size: .95rem; color: var(--muted); max-width: 52ch; } -/* ---------- the cabinet ---------- */ -/* Walnut, brass and kraft are produced textures (textures/make_textures.py): the wood tiles, so drawers of any - height keep their grain; the holder frame is a nine-slice; the pull is one image on every drawer face. */ -.cabinet { margin: 0; } -.cab { position: relative; padding: 18px 18px 22px; border-radius: 6px; 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), 0 26px 44px -26px rgba(0, 0, 0, .85); } -.cab__crest { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 2px 6px 14px; color: var(--kraft); } -.cab__crest b { font: 700 1.35rem/1.1 var(--display); letter-spacing: .02em; } -.cab__crest span { font: 700 1.05rem/1 var(--display); color: var(--brass-hi); font-variant-numeric: tabular-nums; } -.cab__body { display: flex; flex-direction: column; gap: 8px; height: clamp(320px, 34vw, 400px); } -.drawer { - position: relative; flex: var(--share, 1) 1 0; min-height: 0; display: grid; place-items: center; padding-bottom: 26px; overflow: hidden; - border-radius: 4px; background: #5d3c28 url(textures/walnut.webp) 0 0 / 720px auto; - box-shadow: inset 0 0 0 2px var(--walnut-edge), inset 0 -14px 18px -14px rgba(0, 0, 0, .55); - transition: flex-grow .6s cubic-bezier(.2, .8, .2, 1), padding-bottom .6s cubic-bezier(.2, .8, .2, 1), opacity .45s; -} -.drawer:nth-child(2) { background-position: -210px -60px; } -.drawer:nth-child(3) { background-position: -430px -120px; } -.drawer.is-entering, .drawer.is-leaving { opacity: 0; padding-bottom: 0; } -.holder { display: flex; align-items: center; gap: 10px; min-width: min(78%, 300px); padding: 3px 10px 3px 4px; color: var(--kraft-ink); border-style: solid; border-width: 11px 14px; border-image: url(textures/holder.png) 16 / 11px 14px / 0 stretch; background: var(--kraft) url(textures/kraft.webp) 0 0 / 200px; background-clip: padding-box; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .4)); } -.holder img { width: 34px; height: 34px; flex: none; padding: 3px; border-radius: 50%; background: var(--walnut-2); box-shadow: inset 0 0 0 1.5px var(--walnut-edge); } -.holder .name { font: 700 1.1rem/1.1 var(--display); flex: 1; } -.holder .count { font: 700 1.05rem/1 var(--display); font-variant-numeric: tabular-nums; text-align: right; } -.holder .count small { display: block; font: 600 .78rem/1.2 var(--font); color: var(--kraft-soft); } -.pull { position: absolute; bottom: 6px; left: 50%; width: 60px; height: 25px; margin-left: -30px; background: url(textures/pull.png) center / contain no-repeat; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); } -.cab__feet { display: flex; justify-content: space-between; padding: 0 20px; } -.cab__feet i { width: 26px; height: 12px; background: var(--walnut-edge); border-radius: 0 0 4px 4px; } +/* ---------- the hero panel ---------- */ +/* The top of the mod's Storage Allocation panel, drawn with the replica's own styles (game-panel.css) so the first + 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 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; } .splits .btn[aria-pressed="true"] { color: var(--kraft-ink); background: var(--kraft) url(textures/kraft.webp) 0 0 / 200px; border-color: var(--brass-deep); } -.cabinet figcaption { margin-top: 12px; font-size: .95rem; color: var(--muted); } -@media (prefers-reduced-motion: reduce) { .drawer { transition: none; } } +.hero-panel figcaption { margin-top: 12px; font-size: .95rem; color: var(--muted); max-width: 46ch; } /* ---------- the rules, measured ---------- */ .rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 36px; } @@ -309,14 +291,11 @@ pre code { background: none; border: 0; padding: 0; font-size: inherit; } body { font-size: 16.5px; } .ledger li { grid-template-columns: minmax(0, 1fr); } .scale { grid-template-columns: minmax(0, 1fr); } - .cab__body { height: 340px; } .grid-2, .footer__grid { grid-template-columns: minmax(0, 1fr); } .steps > li { padding-left: 62px; } .steps > li::before { width: 46px; height: 46px; font-size: 1.3rem; } .btn-row .btn { flex: 1 1 100%; } .qa > summary { font-size: 1.1rem; } - .cab__body { height: 320px; } - .holder { min-width: 0; width: 88%; } .hero__meta { flex-direction: column; gap: 2px; } .hero__meta li:not(:last-child)::after { content: none; } /* tables become stacked rows */ diff --git a/docs/index.html b/docs/index.html index a813671..cb05270 100644 --- a/docs/index.html +++ b/docs/index.html @@ -73,21 +73,23 @@

MixedStorage

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

-
-
-
Large Warehouse1,200
-
-
Carrots60050%
-
Gears60050%
+
+
+
+

Storage Allocation

+

1200 / 1200 items · 2 goods allocated

+
+
Carrots50% allocated600 / 600stored / limit
+
Gears50% allocated600 / 600stored / limit
+
-
-
50% carrots: 600, 50% gears: 600, of 1,200. An illustration; the real panel is further down.
+
A Large Warehouse full, as the mod shows it in game. Try the whole panel further down.
@@ -327,6 +329,6 @@

Project

- +