Skip to main content

max / makenotwork

Retire the --shadow-1/2/3 scale onto the elevation intent Wave 2 tier B5. The three were hard rgba-black offsets picked against parchment and then applied to all 31 themes a creator can select, which is the same defect the bevel trio was rewritten to undo; mnw-platinum phase 4 retargeted the bevels and never touched the blurred scale, so these survived. makeover 2.5.0 derives the elevation intent that replaces them. Ten consumers, not the nine the task counted. wizard.css carried a tenth that the style.css-only inventory missed. Eight are genuine floats and take --elevation-overlay from layout.css: the tab overflow menu, the toast, the docs search results, both suggestion dropdowns, the collection picker, the save badge on a discover card, and the context menu. One is not a float. .buy-page .buy-card is the whole content of its page rather than something laid over it, so by the intent's own scope rule it takes .raised, which carries the surface and the edge together; the local rule keeps only the geometry the generated primitive does not. Its fill moves --surface-overlay to --surface-raised, equal on the platform default, the same move .card made. The landing carousel keeps a local box-shadow because geometry is consumer-side: --elevation-overlay is calibrated for popovers a few hundred pixels across and its blur disappears on a full-width plate. It now composes two layers of var(--elevation) for that weight instead of a black literal. The rule stays scoped to .landing-showcase, but the reason is weaker than the comment used to claim: the technical argument was that the literal was only true on parchment, and that argument leaves with the literal. What remains is a look call for the F2 screenshot pass. Also adds --elevation to the default :root in style.css, which had drifted from `dump_intents makenotwork` since 2.5.0. Pages that inject no theme block (buy, landing, docs) read that block, and without this every one of the sites above would have resolved to nothing.
Author: Max Johnson <me@maxj.phd> · 2026-08-10 15:37 UTC
Signed with PGP, not checked
Commit: e62bb5430aa3409960d61e366ef84abfc32a1174
Parent: 2eb0851
3 files changed, +55 insertions, -40 deletions
@@ -182,6 +182,12 @@
182 182 --category-five: #a29bfe;
183 183 --category-six: #17a2b8;
184 184 --overlay: rgba(3, 1, 0, 0.5);
185 + /* What a surface floating over the page casts onto it. Same tone as the
186 + scrim above and pinned near-black on every theme, because a shadow is
187 + absence of light rather than a tint. layout.css composes the geometry
188 + into --elevation-overlay; a consumer that needs a different geometry
189 + builds its own from this token rather than from a literal. */
190 + --elevation: rgba(3, 1, 0, 0.18);
185 191
186 192 /* --------------------------------------------------------------------
187 193 APP-LOCAL CONSTANTS, not theme colors, not derivable from intents.
@@ -245,26 +251,29 @@
245 251 --z-banner: 80; /* page-level interruptions, above everything */
246 252 --z-skip-link: 90; /* the keyboard escape hatch outranks all of it */
247 253
248 - /* Shadow scale.
249 - --shadow-1/-2/-3 are blurred elevation (true floating: popovers,
250 - dropdowns, modals). --shadow-raised/-card/-inset are everyday depth,
251 - buttons feel pressable, cards feel layered, inputs feel recessed. Pick
252 - by role: blurred = floats over page, bevel = is part of page.
254 + /* Depth, and there are only two kinds of it.
253 255
254 - The three used to be hard offsets over two literal greys, #bbb and #ddd,
255 - picked against parchment and then applied to all 31 themes a creator can
256 - select; on nord they were a light smear on a dark panel. They now alias
257 - the bevel pair from layout.css, which makeover derives from each theme's
258 - own raised surface, so no literal survives and every consumer re-themes
259 - without being opened. --shadow-raised and --shadow-card collapse onto
260 - one value: a bevel is an edge rather than a distance, so there is no
261 - heavier and lighter version of it to pick between. */
256 + A surface IN the page takes a bevel: an edge, not a distance. That is
257 + --shadow-raised/-card/-inset, aliasing the pair layout.css derives from
258 + each theme's own raised surface. --shadow-raised and --shadow-card
259 + collapse onto one value because an edge has no heavier and lighter
260 + version to pick between.
261 +
262 + A surface floating OVER the page takes --elevation-overlay, also from
263 + layout.css, derived from the theme's page colour. Menus, toasts,
264 + popovers, dropdowns and pickers float. A card, a plate and a framed
265 + image do not; they are .raised.
266 +
267 + There used to be a third kind, --shadow-1/-2/-3, a blurred scale of
268 + rgba-black literals picked against parchment and then applied to all 31
269 + themes a creator can select. It was the same defect the bevel trio was
270 + rewritten to undo, one scale later, and the elevation intent is what
271 + replaced it. No literal survives here now, so every consumer re-themes
272 + without being opened. Geometry stays consumer-side: a site that needs a
273 + different blur composes it from var(--elevation), never from a literal. */
262 274 --shadow-raised: var(--bevel-raised);
263 275 --shadow-card: var(--bevel-raised);
264 276 --shadow-inset: var(--bevel-inset);
265 - --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.06);
266 - --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.10);
267 - --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.15);
268 277 }
269 278
270 279 /* Reset */
@@ -798,7 +807,7 @@
798 807 background: var(--surface-page);
799 808 border: 1px solid var(--border);
800 809 min-width: 180px;
801 - box-shadow: var(--shadow-2);
810 + box-shadow: var(--elevation-overlay);
802 811 }
803 812
804 813 .tab-overflow-menu .tab {
@@ -1428,13 +1437,15 @@
1428 1437 padding: var(--gap-page);
1429 1438 }
1430 1439
1440 + /* The one former --shadow-3 site that is not a float. The card is the whole
1441 + page's content rather than something laid over it, so it takes .raised
1442 + from layout.css for its surface and its edge, and keeps only the geometry
1443 + the generated primitive does not carry. */
1431 1444 .buy-page .buy-card {
1432 - background: var(--surface-overlay);
1433 1445 border-radius: var(--radius-panel);
1434 1446 padding: var(--gap-page);
1435 1447 max-width: 420px;
1436 1448 width: 100%;
1437 - box-shadow: var(--shadow-3);
1438 1449 }
1439 1450
1440 1451 .buy-page .cover,
@@ -4890,7 +4901,7 @@
4890 4901 padding: var(--gap-section);
4891 4902 font-family: var(--font-mono);
4892 4903 font-size: var(--text-note);
4893 - box-shadow: var(--shadow-3);
4904 + box-shadow: var(--elevation-overlay);
4894 4905 animation: toast-in 0.3s ease-out;
4895 4906 max-width: 300px;
4896 4907 display: flex;
@@ -6805,7 +6816,7 @@
6805 6816 max-height: 300px;
6806 6817 overflow-y: auto;
6807 6818 z-index: var(--z-dropdown);
6808 - box-shadow: var(--shadow-2);
6819 + box-shadow: var(--elevation-overlay);
6809 6820 }
6810 6821 .docs-search-result {
6811 6822 display: flex;
@@ -8034,7 +8045,7 @@
8034 8045 max-height: 200px;
8035 8046 overflow-y: auto;
8036 8047 z-index: var(--z-dropdown);
8037 - box-shadow: var(--shadow-2);
8048 + box-shadow: var(--elevation-overlay);
8038 8049 }
8039 8050
8040 8051 .suggestion-dropdown.open {
@@ -8149,7 +8160,7 @@
8149 8160 .collection-picker {
8150 8161 position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-picker);
8151 8162 background: var(--surface-page); border: 1px solid var(--border);
8152 - box-shadow: var(--shadow-2); min-width: 220px;
8163 + box-shadow: var(--elevation-overlay); min-width: 220px;
8153 8164 }
8154 8165 .collection-picker-list { max-height: 200px; overflow-y: auto; padding: var(--gap-bound) 0; }
8155 8166 .collection-picker-item {
@@ -8173,7 +8184,7 @@
8173 8184 .grid-card-save {
8174 8185 position: absolute; top: 0.4rem; right: 0.4rem; z-index: var(--z-raised);
8175 8186 background: var(--surface-page); border-radius: var(--radius-control); padding: var(--gap-bound) var(--gap-peer);
8176 - box-shadow: var(--shadow-1); opacity: 0;
8187 + box-shadow: var(--elevation-overlay); opacity: 0;
8177 8188 }
8178 8189 .grid-card:hover .grid-card-save { opacity: 0.7; }
8179 8190 .grid-card-save:hover { opacity: 1; }
@@ -8190,7 +8201,7 @@
8190 8201 .tag-suggest-list {
8191 8202 display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-picker);
8192 8203 background: var(--surface-page); border: 1px solid var(--border); border-top: none;
8193 - box-shadow: var(--shadow-3); max-height: 280px; overflow-y: auto;
8204 + box-shadow: var(--elevation-overlay); max-height: 280px; overflow-y: auto;
8194 8205 }
8195 8206 .suggestion-item {
8196 8207 display: flex; justify-content: space-between; align-items: center;
@@ -10845,7 +10856,7 @@
10845 10856 top: 100%;
10846 10857 background: var(--surface-overlay);
10847 10858 border: 1px solid var(--border);
10848 - box-shadow: var(--shadow-2);
10859 + box-shadow: var(--elevation-overlay);
10849 10860 min-width: 160px;
10850 10861 z-index: var(--z-context);
10851 10862 }
@@ -11572,19 +11583,23 @@
11572 11583 kind here by the scale's own rule at the top of this file: the frame reads as
11573 11584 something laid over the page rather than as part of it.
11574 11585
11575 - Scoped to .landing-showcase rather than applied to .carousel-img, and that is
11576 - the point rather than an inconsistency. The same widget carries creator
11577 - galleries on /u and /p, where a creator's chosen theme swaps every surface
11578 - token underneath it; a literal rgba-black offset picked against parchment and
11579 - pushed onto all 31 themes is the exact mistake --shadow-raised was rewritten
11580 - to undo. The landing page is brand-owned and always parchment, so the literal
11581 - is true everywhere it lands. If a themed surface ever wants this, it wants a
11582 - token derived from its own theme, not this rule widened. */
11586 + Still scoped to .landing-showcase rather than applied to .carousel-img, but
11587 + the reason has changed and is now weaker. It used to be a technical one: the
11588 + rgba-black literal here was picked against parchment, and the same widget
11589 + carries creator galleries on /u and /p where a chosen theme swaps every
11590 + surface token underneath it. That argument is gone with the literal. What is
11591 + left is a look call — the landing frames are screenshots of this site and
11592 + want lifting off their own ground, a creator's gallery images are the
11593 + creator's own — and it belongs to the F2 screenshot pass, not to this file.
11594 + Widening the selector is a one-line change if that pass says so. */
11583 11595 .landing-showcase .carousel-img {
11584 - /* Not --shadow-3. That scale is calibrated for popovers and dropdowns, a few
11585 - hundred pixels across; on a frame this wide a 12px blur disappears, which
11586 - was measured rather than assumed. The blur scales with the plate instead. */
11587 - box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
11596 + /* Geometry, not colour, is what is local here: --elevation-overlay is
11597 + calibrated for popovers and dropdowns a few hundred pixels across, and on
11598 + a frame this wide its 24px blur disappears, which was measured rather than
11599 + assumed. So the blur scales with the plate and the two layers stack for
11600 + the weight a full-width plate needs, both cast in the theme's own
11601 + --elevation rather than in black. */
11602 + box-shadow: 0 4px 10px var(--elevation), 0 14px 36px var(--elevation);
11588 11603 /* The shadow falls downward, so it does nothing for the top edge, which is
11589 11604 exactly where a parchment screenshot dissolves into a parchment page. The
11590 11605 border is what closes the other three sides. */
@@ -163,7 +163,7 @@
163 163 max-height: 200px;
164 164 overflow-y: auto;
165 165 z-index: var(--z-dropdown);
166 - box-shadow: var(--shadow-2);
166 + box-shadow: var(--elevation-overlay);
167 167 }
168 168
169 169 .suggestion-dropdown.open {
@@ -13,7 +13,7 @@
13 13 <link rel="stylesheet" href="/static/style.css">
14 14 </head>
15 15 <body class="buy-page">
16 - <div class="buy-card">
16 + <div class="raised buy-card">
17 17 {% if let Some(url) = item.cover_image_url %}
18 18 <img class="cover" src="{{ url }}" alt="{{ item.title }}">
19 19 {% else %}