mirror of
https://github.com/block/buzz.git
synced 2026-11-03 16:01:35 +00:00
e84f3fe8ed
Signed-off-by: npub19x6jnl6rhepymwyl2xlltz3ce7rfg2ktllle3g2vu59n3s490k8s9n40l3 <29b529ff43be424db89f51bff58a38cf86942acbffff98a14ce50b38c2a57d8f@sprout-oss.stage.blox.sqprod.co> Co-authored-by: npub19x6jnl6rhepymwyl2xlltz3ce7rfg2ktllle3g2vu59n3s490k8s9n40l3 <29b529ff43be424db89f51bff58a38cf86942acbffff98a14ce50b38c2a57d8f@sprout-oss.stage.blox.sqprod.co>
42 lines
1.9 KiB
CSS
42 lines
1.9 KiB
CSS
/*
|
||
* Baked nine-slice texture generated by
|
||
* desktop/scripts/texture-card/generate-card-texture.mjs.
|
||
*
|
||
* The source is 2×: 416 asset pixels = 208 CSS pixels. The image includes a
|
||
* 96 CSS-pixel transparent outer powder band. `border-image` keeps corners
|
||
* fixed and repeats edge texture while the white center fills any card size.
|
||
*/
|
||
.buzz-card-textured {
|
||
/*
|
||
* The asset has three zones, from outside in:
|
||
* 1. transparent powder bleed (outside the layout box, via outset)
|
||
* 2. feathered fade (inside the layout edge, white is NOT fully opaque)
|
||
* 3. solid white center (safe for content)
|
||
*
|
||
* `--buzz-card-textured-safe-inset` is the distance from the layout edge
|
||
* to zone 3. `Card variant="textured"` applies it as default padding so
|
||
* content always lands on solid fill. Features may add more padding,
|
||
* never less — and must never layer an opaque surface on top of the
|
||
* texture; the baked white center IS the surface.
|
||
*/
|
||
--buzz-card-textured-safe-inset: 5rem;
|
||
border: 0 solid transparent;
|
||
/*
|
||
* Each border-image band is 208px wide but extends 96px outside the layout
|
||
* box (outset), leaving 112px per edge inside it. Below 224px (2 × 112px)
|
||
* on either axis the opposing bands collapse into each other: the solid
|
||
* white center region disappears and the bands meet on a semi-transparent
|
||
* row of the fade, which shows the page background through as a thin seam
|
||
* line. Keep 224px as the default floor. Compact decorative cards may opt
|
||
* into a smaller height with `--buzz-card-textured-min-height` when the
|
||
* center seam is acceptable for that deliberately compressed surface.
|
||
*/
|
||
min-height: var(--buzz-card-textured-min-height, 224px);
|
||
min-width: 224px;
|
||
border-image-source: url("./assets/card-texture.png");
|
||
border-image-slice: 416 fill;
|
||
border-image-width: 208px;
|
||
border-image-outset: 96px;
|
||
border-image-repeat: repeat;
|
||
}
|