Skip to main content

max / makenotwork

Let layout.css own the card's fill and depth First piece of the (a) convergence on task e8885ddb. The card was restating both halves of its own depth in style.css: the fill as --surface-overlay and the shadow as --shadow-card, which has aliased --bevel-raised since the token sweep, so the shadow line was pure duplication of the generated rule. Only the fill actually moves, --surface-overlay to --surface-raised. Those are equal on the platform default and a creator theme may set them apart. The :hover fill goes with it. The generated rule hovers to --hover-surface and scopes it to (hover: hover) and (pointer: fine), which is what the site wanted anyway; the local rule was unconditional and fired on touch. The mechanic is worth stating once, so the charter now does: style.css is unlayered and unlayered CSS beats the makeover layer whatever the specificity, so a restated fill takes ownership back silently. Deleting is the only lever. Tabs and badges are not in this commit. Both turned out to need a decision first, recorded on the task: the site's is-selected is a generic cross-component recipe where makeover's chosen is a per-component state, and the badge carries commercial and AI-disclosure vocabularies that makeover has no tone for.
Co-Authored-By
Claude Opus 5 (1M context) <noreply@anthropic.com>
Author: Max Johnson <me@maxj.phd> · 2026-08-06 14:39 UTC
Signed with PGP, not checked
Commit: 67ff1aeb1401b01c1017b2dccfacff8cede1e09e
Parent: 4acc984
2 files changed, +16 insertions, -6 deletions
@@ -81,6 +81,14 @@
81 81
82 82 ### Component primitives (reusable blocks)
83 83
84 + `.card`'s fill and depth are not defined here. They come from `layout.css`,
85 + generated by makeover-webview, which paints the card `--surface-raised` plus
86 + `--bevel-raised` and hovers it to `--hover-surface` on a fine pointer. Do not
87 + restate either in `style.css`: that file is unlayered and unlayered CSS beats
88 + the `makeover` layer whatever the specificity, so a restated fill silently takes
89 + ownership back. Everything else about the card — padding, border, margin — is
90 + the site's.
91 +
84 92 | Primitive | Canonical class | Variants | States |
85 93 |---|---|---|---|
86 94 | Page section box | `.content-section` | (none) | — |
@@ -1137,22 +1137,24 @@
1137 1137 No aliases. A template names the modifier it wants and adds its own
1138 1138 component class beside it; a recipe reached only through a per-page name is
1139 1139 a recipe nobody can find from the charter. */
1140 + /* Fill and depth come from layout.css, generated by makeover-webview: the card
1141 + is `--surface-raised` plus `--bevel-raised`, and `:hover` goes to
1142 + `--hover-surface` on a fine pointer only. Declaring either here would take
1143 + them back, since style.css is unlayered and unlayered beats the `makeover`
1144 + layer whatever the specificity. The box-shadow this used to carry was
1145 + `--shadow-card`, which already aliases `--bevel-raised`, so only the fill
1146 + actually moved: `--surface-overlay` to `--surface-raised`. Those are equal on
1147 + the platform default and a theme may set them apart. */
1140 1148 .card {
1141 - background: var(--surface-overlay);
1142 1149 padding: var(--gap-pane);
1143 1150 margin-bottom: var(--gap-section);
1144 1151 text-decoration: none;
1145 1152 color: var(--content);
1146 1153 display: block;
1147 1154 border: 1px solid var(--border);
1148 - box-shadow: var(--shadow-card);
1149 1155 transition: background 0.2s ease;
1150 1156 }
1151 1157
1152 - .card:hover {
1153 - background: var(--surface-sunken);
1154 - }
1155 -
1156 1158 /* Muted card primitive. */
1157 1159 .card-muted {
1158 1160 background: var(--surface-sunken);