diff options
| author | Adam Soltys <[email protected]> | 2026-10-22 10:07:34 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2026-10-22 10:07:34 -0700 |
| commit | e7979230cdddde45113a7bf282f00b4192d2ab0a (patch) | |
| tree | 9267ab2dc9605bdfac582e54013a469dcd9faf95 /src/style.css | |
| parent | 2c1acf85ac24f78207e0c667a7fae8dfdfa54ac0 (diff) | |
| download | coinosv3-e7979230cdddde45113a7bf282f00b4192d2ab0a.tar.gz coinosv3-e7979230cdddde45113a7bf282f00b4192d2ab0a.zip | |
Videos grid, "All shapes": justified rows (each tile its clip's own proportions, every row one height filling the width) instead of squares
Co-Authored-By: Claude Opus 5.5 <[email protected]>
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 10 |
1 files changed, 8 insertions, 2 deletions
diff --git a/src/style.css b/src/style.css index 0403a88..3dcbf17 100644 --- a/src/style.css +++ b/src/style.css @@ -1541,8 +1541,14 @@ body::after { /* only wide clips in it: one to a row, the poster whole */ .media-grid.wide { grid-template-columns: 1fr; gap: 6px; } .media-grid.wide .media-tile.video { aspect-ratio: 16 / 9; } -/* every shape in it: squares, none of them favoured */ -.media-grid.square .media-tile.video { aspect-ratio: 1; } +/* every shape in it: justified rows. A tile starts at its proportions at + the row height and grows in proportion to them, so a row's tiles share one + height and fill the width; the filler takes the last row's slack instead + of stretching its few tiles. */ +.media-grid.justified { display: flex; flex-wrap: wrap; --row-h: 140px; } +.media-grid.justified .media-tile.video { aspect-ratio: var(--ar); flex: var(--ar) 1 calc(var(--ar) * var(--row-h)); min-width: 0; } +.media-grid.justified::after { content: ''; flex: 1000 1 0; } +@media (max-width: 600px) { .media-grid.justified { --row-h: 100px; } } .media-tile img, .media-tile video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .media-tile.broken { display: none; } .media-tile-play { |