/** * Article rail - layout only. Each card's own look lives in its own file. * * Figma geometry (canvas -> real, geometry is scaled 0.925 in this file; see posts.css): * content column 740 -> 800 .container-800, which is what the design was drawn against * body 498 -> 538 * gap 25 -> 27 * rail 217 -> 234 * card spacing 20 -> 22 (cards sit 190 apart, boxes are 170 tall) * * 538 + 27 + 234 = 799, so the design's split landed inside .container-800 exactly - which * is what "narrow the column when the rail is present" (MODULES.md D2) resolved to. The post * now uses the site's standard 1450px container (single.php), so the body column is wider * than the design's 538 while the rail holds the design's 234. * * ADDITIVE BY DESIGN: the grid only exists when .o-has-rail is present, which single.php * only adds when a card actually rendered. Posts with no rail content are byte-for-byte * unchanged. */ /*-------------------------------------------------------------- # Top spacing # # This has to be restated because the grid REMOVED it. As a plain block, .iron-article let # its first child's top margin collapse through it - that collapsed margin is what pushed # the whole article clear of the masthead. Grid items don't margin-collapse with their # parent, so the moment .o-has-rail turned this into a grid the margin was trapped inside: # the body kept its offset, the rail sat flush at 0, and the section lost its gap entirely. # # So: the gap becomes the container's padding, and the body's first child gives up the # margin that used to provide it. Net effect on the body is zero (32 of margin -> 32 of # padding), the rail gains the same 32, and both columns now start on the same line - which # is what the design does (its first card and first body line share y=757). # # Putting it on the container rather than on .iron-rail is the point: the two columns stay # aligned whatever the article happens to open with. --------------------------------------------------------------*/ /*-------------------------------------------------------------- # The container and the grid are DIFFERENT ELEMENTS. This is not tidiness. # # A container query never applies to its own container: @container resolves against the # nearest ANCESTOR container, so an element that declares container-type cannot be restyled # by a query on itself. Both were on .iron-article once, and the result was worse than a # breakpoint that does nothing: the `display:flex` below silently never fired (article stays # a 2-col grid at every width), while the descendant rules in the same block DID fire - so # `.iron-rail{display:contents}` dissolved the rail's box and handed its six cards to the # still-live grid as direct items, which auto-placed them into both columns, interleaved with # the article. If you ever need to know why single.php has an extra div, this is why. # # .iron-article container + the top spacing. No layout of its own. # .iron-article__grid the columns. What the query below actually restyles. --------------------------------------------------------------*/ .iron-article.o-has-rail { padding-top: 32px; /* The reflow below measures THIS element, not the viewport - same rule the modules follow. The article column is what actually constrains the rail; the window is not. Width here is identical to __grid's, since neither has horizontal padding. */ container-type: inline-size; container-name: iron-article; } /*-------------------------------------------------------------- # The two columns # # The rail GROWS WITH THE ARTICLE rather than sitting at a flat number. The post now uses the # site's standard 1450px container (single.php), where the design's 234 reads as a leftover # strip beside a 1180px body - but a flat 320 would be paid for at every width, and that is # the part that matters: the reflow below only stacks at 700, so an article between 700 and # ~1000 would keep a 320 rail and squeeze the body to ~350. Tablet would pay for desktop. # # clamp against the CONTAINER's width (cqi = 1% of .iron-article, the same element the reflow # measures - not the viewport): # # 234 at article <=1017 the design's own number, so every narrow state is UNCHANGED # 320 at article >=1391 the full-width case, ~22% of the 1450 container # fluid in between # # At the full 1450 the split becomes 1096 + 27 + 320. The gap stays at the design's 27. # # 23cqi rather than 23%: percentages in track sizing resolve against the grid box, which is # the same number here, but the container unit says WHICH element it follows. The plain 234px # line above is a fallback for anything without container units - and anything that old could # not run the container query below either, so it keeps exactly the layout it already had. --------------------------------------------------------------*/ .iron-article.o-has-rail > .iron-article__grid { display: grid; /* minmax(0, 1fr) not 1fr: a plain 1fr is min-content-floored, so one long unbroken string (a URL, a wide table) in the body would push the grid wider than the article instead of scrolling inside its own column. */ grid-template-columns: minmax(0, 1fr) 234px; grid-template-columns: minmax(0, 1fr) clamp(234px, 23cqi, 320px); column-gap: 27px; align-items: start; } /* The margin the padding above replaced. Without this the body sits 32px lower than the rail instead of level with it. */ .iron-article.o-has-rail .iron-article__body > :first-child { margin-top: 0; } .iron-rail { display: flex; flex-direction: column; gap: 22px; min-width: 0; } /*-------------------------------------------------------------- # Narrow - driven by the ARTICLE's width, not the viewport # # Two columns need 538 + 27 + 234 = 799. Below ~700 the body column is too cramped to be # worth keeping, so the rail stops being a column and the cards join the article's own flow. # # `display: contents` on the rail is what lets "On This Page" hoist above the article while # the other cards stay below it: the cards become flex items of .iron-article and can be # ordered individually. Without it, every card is trapped in the aside's box and can only # move as a block. # # Trade-off, deliberate: display:contents removes the