v3: the journal feed breathes — one mosaic running unbroken down the page reads as a slab, so the composer now cuts it into sub-blocks, each its own grid with a themable rule between. A break can only fall where a row starts clean and isn't reached into from above, which the exact tiling makes cheap to test: every row closes flush, so the only boundaries ruled out are the ones a portrait or a hero straddles.
All checks were successful
Build and Publish Docker Image / build-and-push (push) Successful in 42s
All checks were successful
Build and Publish Docker Image / build-and-push (push) Successful in 42s
Two things set the rhythm, and neither is a row counter — that beats like a metronome. It comes due on a count of *cards*: a block is a set of stories and a hero is one story however many cells it takes, so a stretch thick with big footprints reaches the count over more rows than a stretch of squares does, and block heights end up tracking the size mix (measured: four to five rows through square-heavy runs, six to seven where art clusters). And the break *makes* its own section front rather than waiting for one, promoting the card that opens a new block to a hero. Waiting was the first attempt and it failed on the numbers — a banner lands at the start of a row on its own two to five times in thirty-six, so the preference almost never fired and a max-rows cap did all the work. Promotion always fits, since a break only falls on a row with all four cells free. A tail guard keeps the last cut from leaving a rule with a fragment under it. The break sits between two grids rather than inside one: a grid item would be stretched to the 9rem row track, and out here its height is its own, down to nothing. Three custom properties are the whole contract a theme writes against — the air around it, the rule through it, an optional glyph centred on that rule — with `none` on the last two meaning the real absence of each, so a theme can remove the separation entirely rather than leave an empty band. Themes wanting something a rule can't be reach past the properties to plain CSS: nyt pairs hairlines in the grid's own pen and clips them to the art inset (which moves up to the feed, since a property on the grid can't reach a sibling); brutalist spends air around the 2px border it already divides everything else with; kanagawa takes a comment divider, geocities the rainbow its header ends on, melange a thinner band of the mélange. The page gutter moves to a feed wrapper so every block lines up on the same edges, and nyt's masking frame now runs once per block, which is what makes each of them read frameless and not just the feed. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -256,11 +256,16 @@
|
||||
the rules read as continuous row + column delimiters (à la nytimes.com).
|
||||
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. */
|
||||
|
||||
/* How far a photo holds off the rules. It sits on the feed rather than on the
|
||||
grid because the break between two grids is cut to the same measure, and a
|
||||
property declared on the grid wouldn't reach it. */
|
||||
[data-style="nyt"] .journal-feed {
|
||||
--journal-art-inset: 0.55rem;
|
||||
}
|
||||
[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;
|
||||
@@ -277,22 +282,35 @@
|
||||
— 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. */
|
||||
One page-coloured frame, laid over the grid's own 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. One frame per grid
|
||||
means one per sub-block, so every block reads frameless, not just the feed. */
|
||||
[data-style="nyt"] .journal-grid::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 1.25rem;
|
||||
inset: 0;
|
||||
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 {
|
||||
inset: 0.85rem 1rem;
|
||||
}
|
||||
|
||||
/* A section front changes section on a rule, not an ornament — and here on a
|
||||
double one, the paired hairline a paper sets above a new section. Both
|
||||
lines are the grid's own rule colour and weight, so the break reads as the
|
||||
same pen that divides the cells, used twice. It needs less air than the
|
||||
base break asks for: each block already ends and begins on the
|
||||
page-coloured frame, which is holding its own rules back by the art inset. */
|
||||
[data-style="nyt"] .journal-break {
|
||||
--journal-break-space: 1rem;
|
||||
--journal-break-rule: 1px solid var(--color-border);
|
||||
height: 3px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
/* Stop where the art stops. The frame above holds the grid's own rules
|
||||
back by the inset, so a full-width break would overshoot the pictures
|
||||
it divides by exactly that much on each side. */
|
||||
margin: var(--journal-break-space) var(--journal-art-inset);
|
||||
}
|
||||
[data-style="nyt"] .journal-card:hover {
|
||||
border-color: var(--color-border);
|
||||
|
||||
Reference in New Issue
Block a user