Skip to main content

max / makenotwork

Raise the landing carousel frames off the page The three frames are screenshots of this site, so they arrive with the same parchment ground the landing page is painted in, and a 1px --border between two identical grounds is not an edge anyone sees. A blurred shadow, not a bevel: by the scale's own rule at the top of the file, blurred means "floats over the page" and bevel means "is part of it", and a screenshot of the product is the former. --shadow-raised would also have done nothing here, since it resolves to an inset pair that renders behind an opaque image. Not --shadow-3 either. That scale is calibrated for popovers a few hundred pixels across; rendered against the real frame at full width, a 12px blur was invisible. The value is sized to the plate. The border moves to --border-strong in the same rule because the shadow falls downward and leaves the top edge, which is where the dissolve is worst. Scoped to .landing-showcase. The same widget carries creator galleries on /u and /p, where a creator's theme swaps every surface token underneath it, and pushing a black literal picked against parchment onto all 31 themes is the mistake --shadow-raised was rewritten to undo.
Co-Authored-By
Claude Opus 5 (1M context) <noreply@anthropic.com>
Author: Max Johnson <me@maxj.phd> · 2026-08-09 22:40 UTC
Signed with PGP, not checked
Commit: 2c18c659780b0d85fb1de37c3a5877ceb548382c
Parent: cdb8ba3
1 file changed, +27 insertions, -0 deletions
@@ -11564,6 +11564,33 @@
11564 11564 background: var(--surface-raised);
11565 11565 }
11566 11566
11567 + /* Landing showcase only: lift the frames off the page.
11568 +
11569 + The three landing frames are screenshots of this site, so the parchment they
11570 + were shot on is the parchment they sit on, and a 1px border between two
11571 + identical grounds is not an edge anyone sees. A blurred shadow is the right
11572 + kind here by the scale's own rule at the top of this file: the frame reads as
11573 + something laid over the page rather than as part of it.
11574 +
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. */
11583 + .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);
11588 + /* The shadow falls downward, so it does nothing for the top edge, which is
11589 + exactly where a parchment screenshot dissolves into a parchment page. The
11590 + border is what closes the other three sides. */
11591 + border-color: var(--border-strong);
11592 + }
11593 +
11567 11594 .carousel-caption {
11568 11595 margin-top: var(--gap-group);
11569 11596 font-family: var(--font-mono);