From b6140c75ea114957ce84967a77c6643b1f29a4c2 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 6 Aug 2026 10:57:29 +0000 Subject: [PATCH] Give gallery tiles real gutters The grid drew tiles as cells in a 1px hairline lattice, which worked while every tile was text. With a pictogram banner across the top of each one, a card's footer sat directly against the next card's banner and the rows read as a single continuous column. Tiles now carry their own border with a real gap between them. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01ULE5RRxdQE1ebwefEd2eCM --- src/styles/global.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/styles/global.css b/src/styles/global.css index 32bbaac..3bb24a0 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -334,9 +334,10 @@ code { .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); - gap: 1px; /* tiles sit in a 1px grid of border color */ - background: var(--border-subtle); - border: 1px solid var(--border-subtle); + /* Real gutters, not hairlines: each tile is banded with a pictogram at the + top, so a 1px rule left one card's footer touching the next card's banner + and the rows read as one continuous column. */ + gap: var(--spacing-06); margin-block: var(--spacing-09) var(--spacing-10); } /* ------------------------------------------------------------------ *\ @@ -389,7 +390,7 @@ code { background: var(--layer-01); color: inherit; text-decoration: none; - border: 0; + border: 1px solid var(--border-subtle); position: relative; transition: background var(--dur-fast) var(--ease-productive); }