/* ===================================================================== ROUND 135, ITEM 4 -- THE REVISION PASS. ZEMLOVKA IS THE REFERENCE. TOM'S INSTRUCTION, in his words: * "REVERT the 27->10 shrink of the gap ABOVE the ingredient list (between the lead-in sentence and the first ingredient). Keep the larger original gap." * "ZEMLOVKA is the single reference standard. Measure its actual values for (a) lead-in -> first ingredient gap; (b) gap between ingredient lines; (c) gap above and below the whole ingredient block." * "Go through EVERY recipe's directions and make each match the Zemlovka reference exactly." * "This applies ONLY to recipe directions -- not columns, not pages." THE 27 -> 10 IS REVERTED. The whole of the first build was one line, `.ttc-v2 .card.step .slist { margin-top: 10px }`, and it is gone. The gap above the list is 27px again, which is `recipe-v3.css:638`'s own value and the one Zemlovka renders. --------------------------------------------------------------------- THE REFERENCE, READ OFF ZEMLOVKA at 1440 with every switch off (tools/r135_item4_zemlovka.py), four lists on that page: (a) lead-in -> first ingredient NOT PRESENT on Zemlovka: none of its four lists has a sentence above it. The list is the first thing in the step body. (b) between ingredient lines 0px, on all four lists (c) above the block 27px (the list's own margin-top) below the block 14px (the margin-top of the paragraph that follows it) computed: margin-top 27px, margin-bottom 0px. AND THE FIRST AUDIT OF THIS WAS WRONG, which is worth more than the numbers. It reported 86 of 171 recipes as differing, and a rule written from that would have "fixed" 86 recipes that were never broken. The fault was in the MEASUREMENT: when a list is the first child of the step body, the tool walked up to `list.parentElement.previousElementSibling`, which is `span.lead` -- the INLINE step-number badge ("3.1."). An inline span's box is its text, so on a step whose title wraps to two lines the badge sits on line one and the gap measured 52.5px instead of 27px. The badge was higher up; the list had not moved. Measured on the same pages, the COMPUTED values are identical everywhere: `margin-top: 27px`, `margin-bottom: 0px`, line gaps 0px, on every `.slist` in every one of the 171 recipes that has one -- because they all come from one rule in one stylesheet. SO WHAT ACTUALLY VARIES IS NOT THE LIST. It is what sits around it. The realised gap above a list is the larger of the list's own 27px and the bottom margin of whatever is above it, and the realised gap below is the larger of 0 and the top margin of whatever follows -- and those neighbours are paragraphs, notes, timers and photograph rows with margins of their own, which is why the gap below measured 14, 18 and 30 on different pages. THIS SHEET PINS BOTH BOUNDARIES, so the realised gap is Zemlovka's whatever the neighbour happens to be. That is the only thing a stylesheet can make "match exactly", and it is what makes every recipe's directions read with one rhythm. --------------------------------------------------------------------- SCOPE: `.ttc-v2 .card.step` is the recipe page's directions and nothing else. Measured over all 233 published URLs: `.slist` appears on 171 pages, every one a published recipe -- 0 columns and 0 pages carry one, because a column does not render through app/recipe_v3. So "only recipe directions" is true by the selector and not by intention. ONE THING FOUND AND DELIBERATELY NOT APPLIED, kept from the first build. On Zemlovka, "Zest from 1 lemon" sits OUTSIDE the list as its own paragraph because `app/recipe_v3.slist_runs` only groups runs of two or more and its bold is in the middle rather than leading. Pulling it in would change which lines the list CONTAINS, and that is recipe structure, which this brief says comes only from the Drive document. No spacing rule can fix it without closing up every real instruction that follows a list. ITS OWN SWITCH: `site_r135_stepspacing`, OFF by default. ROLLBACK: site_r135_stepspacing off. ===================================================================== */ /* (c) ABOVE THE BLOCK -- 27px, Zemlovka's own value, whatever is above. The list keeps the 27px it has today; what is added is zeroing the bottom margin of the element immediately before it, so the two cannot add up to something larger on one page than another. `:has(+ .slist)` is the same construction static/site/ed2-figures.css already relies on. */ .ttc-v2 .card.step .slist { margin-top: 27px; margin-bottom: 0; } .ttc-v2 .card.step .sbody > *:has(+ .slist) { margin-bottom: 0; } /* (a) THE LEAD-IN SENTENCE KEEPS THE LARGER GAP, which is the revert Tom asked for stated as a rule rather than as an absence. A sentence ending in a colon is still an element before the list, so it takes the 27px above -- not the 10px the first build gave it. */ /* (c) BELOW THE BLOCK -- 14px, which is what follows a list on Zemlovka. Pinned on the FOLLOWING element rather than as the list's own bottom margin, because that is where the variation was: a paragraph contributed 14, a photograph row 30, a note 18. Measured after: 374 of 374 gaps below a list are 14px, where before they were 14, 18, 27 and 30. `:not(.slist)` IS NOT DECORATION. Without it, two ADJACENT lists in one step took this rule on the second one -- so its gap ABOVE became 14px instead of the 27px every other list has, and eight recipes measured `above=[14, 27]`. A list that follows a list is still a list above a block, so it keeps the 27. Found by auditing all 170 recipes after the first version of this rule, not by reading it. */ .ttc-v2 .card.step .sbody > .slist + *:not(.slist) { margin-top: 14px; } /* (b) BETWEEN THE LINES -- 0px, which is what Zemlovka renders and what every other recipe already renders. Stated so the reference is complete and so a future change to the shared component is caught by this item's own checks rather than silently changing 171 pages. */ .ttc-v2 .card.step .slist > * { margin-top: 0; margin-bottom: 0; }