vincent/gerbeur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v3: the journal mosaic closes its rows — dense auto-flow was papering over a tiler that didn't tile: a 2-column banner meeting a 1-column gap wrapped, left a hole, and dense filled it by pulling a later card up out of rank order. So the composer now walks its own occupancy grid in reading order and clamps each footprint to the run of cells actually free to the right of the cursor (a banner that meets one cell becomes a square rather than wrapping), plus drops the second row of a portrait within a row of the end, where nothing is left to fill the cells beside it. Four columns close on every row, no gap to backfill, and the order read is the order ranked — dense stays only below the full width, where four-column tiling no longer describes the grid and a hole is the worse alternative. The page also leads with art now: when the hottest dump is a bare note, the first picture within three places of it takes the front instead, since the top few sit within noise of each other on score and which one opens a section front is an editorial call. nyt's frameless block follows: rules overshoot their cell so neighbours meet and read continuous, which leaves ticks around the outside of the grid, and one page-coloured frame as thick as the art inset cuts them all back at once — replacing the two strips that only masked the first column and first row.

Browse Source 
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
khannurien
2026-09-20 07:46:24 +00:00
parent 27c55ea96f
commit a0738f5fc5
3 changed files with 121 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/themes/nyt.css
View File

@@ -254,11 +254,13 @@
/* Journal view: a section-front grid of stories divided by hairline rules,
not boxed cards. Close the gaps and rule each cell on its top & left edge so
the rules read as continuous row + column delimiters (à la nytimes.com).
The left-most column's rule is masked off (below) so there's no outer frame
on the left — CSS grid can't target "first column", hence the mask. */
The outermost rules are masked off (below) so there's no frame around the
block — CSS grid can't target a first column or a last row, hence the mask. */
[data-style="nyt"] .journal-grid {
gap: 0;
position: relative;
/* How far a photo holds off the rules; the mask is cut to match. */
--journal-art-inset: 0.55rem;
}
[data-style="nyt"] .journal-card {
background: transparent;
@@ -268,37 +270,28 @@
box-shadow: none;
}
/* Page-coloured strips over the grid's content-left and content-top edges,
hiding the first column's left rule and the first row's top rule (offsets
track the grid's padding-left / padding-top). */
/* Rules run to the edges of their cell, but a photo holds off them by
--journal-art-inset. Between two cells the overshoot meets the neighbour's
and the pair reads as one continuous rule; around the outside of the block
there is no neighbour, so each one ends as a tick sticking out past the art
— above and below it at the top and bottom of the grid, past its sides at
the left and right.
One page-coloured frame, laid over the grid's content edge and as thick as
that inset, cuts all of them back to the art at once. It takes the outer
rules (the first row's top, the first column's left) with it, which is the
same frameless block the two strips it replaces were after. */
[data-style="nyt"] .journal-grid::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 1.25rem;
width: 1px;
background: var(--color-bg);
z-index: 1;
pointer-events: none;
}
[data-style="nyt"] .journal-grid::after {
content: "";
position: absolute;
top: 1.25rem;
left: 0;
right: 0;
height: 1px;
background: var(--color-bg);
inset: 1.25rem;
border: var(--journal-art-inset) solid var(--color-bg);
z-index: 1;
pointer-events: none;
}
@media (max-width: 460px) {
[data-style="nyt"] .journal-grid::before {
left: 1rem;
}
[data-style="nyt"] .journal-grid::after {
top: 0.85rem;
inset: 0.85rem 1rem;
}
}
[data-style="nyt"] .journal-card:hover {