oleh/chart-sins
1
0
Fork 0
mirror of https://github.com/olehomelchenko/chart-sins.git synced 2026-08-08 02:22:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Give gallery tiles real gutters

Browse Source 
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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ULE5RRxdQE1ebwefEd2eCM
This commit is contained in:
Claude
2026-08-06 10:57:29 +00:00
parent 53e9803a61
commit b6140c75ea
1 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+5 -4
View File
@@ -334,9 +334,10 @@ code {
.gallery { .gallery {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
gap: 1px; /* tiles sit in a 1px grid of border color */ /* Real gutters, not hairlines: each tile is banded with a pictogram at the
background: var(--border-subtle); top, so a 1px rule left one card's footer touching the next card's banner
border: 1px solid var(--border-subtle); and the rows read as one continuous column. */
gap: var(--spacing-06);
margin-block: var(--spacing-09) var(--spacing-10); margin-block: var(--spacing-09) var(--spacing-10);
} }
/* ------------------------------------------------------------------ *\ /* ------------------------------------------------------------------ *\
@@ -389,7 +390,7 @@ code {
background: var(--layer-01); background: var(--layer-01);
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
border: 0; border: 1px solid var(--border-subtle);
position: relative; position: relative;
transition: background var(--dur-fast) var(--ease-productive); transition: background var(--dur-fast) var(--ease-productive);
} }