- ` had no padding of its own and a native marker is
* drawn outside the content box.
*
* The marker now sits ONE STANDARD INDENT to the right of its heading: the
* same `--step-indent` that separates a section heading from its step
* numbers, not a new number.
*
* The marker is drawn by `::before` rather than left to `list-style`, for
* one reason: a native outside-marker's distance from the text is the
* browser's to choose and cannot be measured from script, so neither the
* rule below nor ttc_rules could prove where it is. `•` is the same mark
* the browser draws. Wrapped lines align under the TEXT, which is what the
* padding on the `li` does.
*/
.ttc-v2 { --bullet-gap: 18px; }
.ttc-v2 .sbody ul,
.ttc-v2 .card.note ul,
.ttc-v2 .vars-txt ul,
.ttc-v2 .tbox-txt ul:not(.tbox-rows),
.ttc-v2 .box ul {
list-style: none;
margin: 8px 0 0;
padding-left: var(--step-indent);
}
.ttc-v2 .sbody ul > li,
.ttc-v2 .card.note ul > li,
.ttc-v2 .vars-txt ul > li,
.ttc-v2 .tbox-txt ul:not(.tbox-rows) > li,
.ttc-v2 .box ul > li {
position: relative;
padding-left: var(--bullet-gap);
list-style: none;
}
.ttc-v2 .sbody ul > li::before,
.ttc-v2 .card.note ul > li::before,
.ttc-v2 .vars-txt ul > li::before,
.ttc-v2 .tbox-txt ul:not(.tbox-rows) > li::before,
.ttc-v2 .box ul > li::before {
content: '\2022';
position: absolute;
left: 0;
top: 0;
line-height: inherit;
}
@media (max-width: 1023px) {
/* the sub-steps lose their indent at this width and so does the list, but
it must still be INSIDE its heading rather than level with it */
.ttc-v2 .sbody ul,
.ttc-v2 .card.note ul,
.ttc-v2 .vars-txt ul,
.ttc-v2 .tbox-txt ul:not(.tbox-rows),
.ttc-v2 .box ul { padding-left: var(--bullet-gap); }
}
/* ROUND 7, 2d. THE BOLD INTRO LINE UNDER A SECTION HEADING.
*
* "Let's start the 60-minute Pan Pizza by preparing the dough." sat in the
* NUMBER GUTTER -- at the "1." column, not the "Dough:" column. It is the
* top-level step's own text, which has no indent of its own, and nothing had
* ever put it anywhere.
*
* It belongs in the heading TEXT column, one --num-gutter in from the card's
* padding, which is where "Dough:" begins.
*
* SCOPE, deliberately narrow: the paragraphs of a top-level step's own body,
* and nothing else. Not the step text, not the ingredient lines, not the
* notes -- a note has its own rule from round 6 and keeps it -- and not the
* photographs inside that body, which is why this is on the paragraphs
* rather than on the block.
*/
.ttc-v2 .card.step > .sbody:not(.is-note) > p,
.ttc-v2 .card.step > .sbody:not(.is-note) > .slist,
/* ROUND 14, JOB 4. A CALLOUT INSIDE A STEP BODY IS STILL IN THE STEP BODY.
*
* "Do not pound the meat." on the chicken steak is a `
` inside * `div.recipe-important.inline-callout`, which is inside `.sbody` -- so it is * a GRANDCHILD, and the rule above only reaches direct children. It started * at 91px where the heading's text column starts at 132: one whole number * gutter to the left of the sentence above it, which is what Tom saw. * * Tom's locked rule is that notes indent INSIDE their heading, never outside, * so the callout's own paragraphs take the same gutter. The callout element * itself is not moved and nothing else about it changes. */ .ttc-v2 .card.step > .sbody:not(.is-note) > [class*="inline-callout"] > p, .ttc-v2 .card.step > .sbody:not(.is-note) > [class*="inline-callout"] > .slist { margin-left: var(--num-gutter); } @media (max-width: 1023px) { /* the sub-steps lose their indent at this width; the heading's text column is still one gutter in, so this one stays */ .ttc-v2 .card.step > .sbody:not(.is-note) > p, .ttc-v2 .card.step > .sbody:not(.is-note) > .slist { margin-left: var(--num-gutter); } } /* ROUND 7, 2f. THE VARIATIONS HEADING JOINS THE ALTERNATION. * * The heading and the first row were both the darker tint and ran unbroken * from one into the other, so the heading melted into the row beneath it. * The heading is the first band; the rows carry on from there, and no two * adjacent bands share a tint. * * heading --vars-tint-a row 2 --vars-tint-a * row 1 --vars-tint-b row 3 --vars-tint-b */ .ttc-v2 .vars-rows > .vars-row { background: var(--vars-tint-b); } .ttc-v2 .vars-rows > .vars-row:nth-child(even) { background: var(--vars-tint-a); } /* ROUND 8, ITEM 1. THE VARIATIONS ROW'S PHOTOGRAPH IS A PHOTOGRAPH. * * It was the one layout Tom named that had no corner radius at all -- flush * to the row's right edge, square on all four corners. Every photograph on * the page is rounded on all four, so this one is too, at the same * `--shot-radius` the step photographs read. The tinted band shows at the * corners, which is what a rounded photograph on a tint looks like. */ /* ROUND 9: pinned to the value it had, NOT to --shot-radius. That token now * carries the radius measured off Tom's two mockups, and neither mockup shows * a Variations row. Borrowing the token would have moved an element nobody * measured, so it keeps its own number until there is a mockup to read. */ .ttc-v2 .vars-shot img { border-radius: 14px; } /* ROUND 8, ITEM 4. THE ARTICLE STAYS READABLE WHATEVER ARRIVES. * * The cowboy steak's article rendered as six columns 50-90px wide, one word * to a line, 3,826px down the page. The cause was a truncated fragment -- * fixed in app/recipe_v2._inner_text -- but a card with a photograph is a * flex row, so ANY stray block inside one becomes a column, and the next bad * fragment would do it again. * * So the row is told it may wrap, and a text column is given a floor: 320px, * which is about forty characters at the article's 15.5px and is the width * of the narrowest phone we support less its gutters. If it is readable * there it is readable here. `min()` keeps the floor from exceeding the * screen at 390, where there is one column anyway. * * MAXIMUM COLUMNS: two, ever -- the text and its photograph. Anything else * that finds its way inside takes a full row of its own. */ .ttc-v2 .card.shot-right, .ttc-v2 .card.shot-left { flex-wrap: wrap; } .ttc-v2 .card .card-txt { min-width: min(320px, 100%); } .ttc-v2 .tips .card .card { flex: 1 1 100%; width: 100%; } /* ROUND 37, JOB 37.1. THE SEAM, ONCE THE SITE IS BACK AROUND THE PAGE. * Restoring the header and footer put the theme's stylesheet on this document * for the first time, and the shot-join gate immediately failed at 1100 and * 1023 -- 234 seam pixels and 114 white ones in a corner. Round 33 recorded * that this gate's checks A and B "can no longer fail"; they could not, only * because the page had no site around it. With the site back they fail, and * they are right to. * The photograph carries the strip's own colour behind it, so a rounded * bottom corner can only ever reveal #f7f7f7, whatever the theme paints * underneath at any width. */ .ttc-v2 .pshot .pshot-img, .ttc-v2 .pshot .pshot-img > a:first-child{background-color:#f7f7f7} /* ROUND 65. THE CHROME IS NOT OURS TO STYLE. * * A block of rules lived here that rebuilt the furniture beside the * furniture: a two-column wrapper of our own, a 395px rail of our own, the * banner's 30px gaps copied out of header.css, and a `body:has(.ttc-v3-page)` * override that narrowed the site nav on this page only. * * Every one of them is deleted. recipe_v3.html now renders * `main.center > #main-left + #main-right`, the same structure * app/templates/page.html uses, so the header, the nav, the banners and the * newsletter rail are laid out by the theme's own style.css -- the one source * of truth -- and are automatically whatever the rest of the site says they * are. Nothing in this file may describe them again. * * What is left in this stylesheet is the RECIPE CONTENT and nothing else. */ /* ============================================================================ * THE CARD HEADER'S SECOND LINE, KEYED TO THE COLUMN IT SITS IN. * * THE FAULT. `.rh2` is one flex row -- yield, flag, NEW, avatar, "Tom the * Chef", "Published:", rating, views -- and every rule that sized it asked * the VIEWPORT how much room there was. That was true while the recipe was * the width of the page. It stopped being true when the recipe moved into * the site's shared `#main-left`: at a 1440px viewport the column is 980px, * not 1440, so the CSS laid the row out for a width it does not have. * Measured on the candidate: `.ryield` wrapped to 44px over two lines, * `.rwho` broke "Tom the / Chef", and `.rate` split the stars from * "(write a review)" onto a second line 26px lower -- the text and the * symbols on four different levels. * * THE FIX IS TO ASK THE RIGHT BOX. `.rhead` is the container and these rules * read ITS inline size, which is the column. No viewport number can answer * this, because the same viewport gives different columns depending on * whether the rail is beside it: 1800px of window is a 1099px header, 1440px * of window is 837px, and 1100px -- where the rail is hidden -- is 921px. * A container query reads the box that actually exists. * * (The numbers below are CONTENT-box widths. `container-type: inline-size` * measures the content box, so 1219px of `.rhead` with its 56/64 padding * answers 1099. Found by measuring, after a first cut keyed to the border * box put the 1800px window in the wrong band.) * * header content >= 1050 one row, full size -- the approved look * 900 - 1049 one row, tightened: 10px gaps, 34px symbols, * meta type down a point and a half * 800 - 899 one row, tighter: 8px gaps, 32px symbols * below 800 the row wraps as a ROW, phrases kept whole -- * the behaviour 9251a98 already had between 1024 * and 1244, and never an overflow * * Inside `@media (min-width:1024px)` because at and below 1023 the header is * not a row at all: `.rh1,.rh2{display:contents}` stacks it, and that stack * is Tom's approved phone layout and is not this fix's business. * ========================================================================= */ @media (min-width: 1024px) { .ttc-v2 .rhead { container-type: inline-size; } @container (min-width: 800px) { .ttc-v2 .rh2 { flex-wrap: nowrap; } .ttc-v2 .rh2 .ryield, .ttc-v2 .rh2 .rwho, .ttc-v2 .rh2 .pub { white-space: nowrap; } .ttc-v2 .rh2 .rate { flex-wrap: nowrap; white-space: nowrap; } } @container (min-width: 900px) and (max-width: 1049px) { .ttc-v2 .rh2 { --rmetaline-size: 16.5px; --rpub-size: 13px; --rrate-size: 14px; gap: 10px; } .ttc-v2 .rh2 .flag, .ttc-v2 .rh2 .newstar, .ttc-v2 .rh2 .avatar { width: 34px; height: 34px; flex: 0 0 34px; } .ttc-v2 .natnew { gap: 8px; } } @container (min-width: 800px) and (max-width: 899px) { .ttc-v2 .rh2 { --rmetaline-size: 16px; --rpub-size: 12.5px; --rrate-size: 13.5px; gap: 8px; } .ttc-v2 .rh2 .flag, .ttc-v2 .rh2 .newstar, .ttc-v2 .rh2 .avatar { width: 32px; height: 32px; flex: 0 0 32px; } .ttc-v2 .natnew { gap: 7px; } } @container (max-width: 799px) { .ttc-v2 .rh2 { flex-wrap: wrap; row-gap: 10px; } .ttc-v2 .rh2 .ryield, .ttc-v2 .rh2 .rwho { white-space: nowrap; } } } /* ============================================================================ * THE INGREDIENTS AND TOOLS BOXES, ALSO KEYED TO THE COLUMN. * * MEASURED, ON THE RELEASE THAT IS SERVING RIGHT NOW: at a 1440px viewport * the recipe card is 957px wide, its content box 837px -- and `.box.ing` * (`flex:0 0 729px`) plus the 32px gap plus `.box.too` (`flex:0 0 364px`) * ask for 1125px, because 729 + 32 + 364 = 1125 is exactly the content box of * the 1245px page `design/recipe-page-v3-FINAL.html` is drawn at. The Tools * box therefore ran 225px past the right edge of the column and was PAINTED * OVER THE NEWSLETTER RAIL. It is not a fault of 9251a98 -- at 1245px the * numbers fit to the pixel -- and it is not new to this change: the same * 224px of overflow is in 20260923-035422, which is live. It is what a * fixed-pixel layout does when the column it was drawn for is taken away. * * THE DESIGN'S PROPORTIONS, NOT ITS PIXELS. Below a 1245px card the two * boxes keep the ratio the drawing states -- 364/1125 = 32.36% for Tools, * 32/1125 = 2.84% for the gap, Ingredients taking the rest -- so at a 1219px * card Tools is 379px against the drawing's 364, and at 957px it is 279px. * At 1245px and above the original pixels apply, unchanged, and the drawing * is reproduced exactly. * * (The file already had this shape for 1024-1244px viewports, at 34.5%/2.6%. * Those rules stay; this one covers the case that band never saw -- a WIDE * viewport with a NARROW column, which only exists now that the rail is * beside the recipe.) * ========================================================================= */ @media (min-width: 1245px) { .ttc-v2 .rcard { container-type: inline-size; } @container (max-width: 1244px) { .ttc-v2 .boxes { gap: 2.84%; } .ttc-v2 .box.ing { flex: 1 1 auto; min-width: 0; } .ttc-v2 .box.too { flex: 0 0 32.36%; min-width: 0; } /* the sign keeps its label inside the narrower box */ .ttc-v2 .box .sign { max-width: 100%; } } } /* ============================================================================ * ROUND 69. THE DISCLAIMER BOX: THE STRAY SPACE UNDER IT, AND THE 30 BELOW. * * MEASURED at 1440, from the bottom of the policy iframe down: the slot's * reserved `min-height:1500px` stood 13px past the iframe's own 1487px; the * theme's `.text` padding added 38.4px (which is fine -- it is the same 38.4 * that sits ABOVE the text); the block's `margin-bottom:23.04px` added * another 23 INSIDE a box that already pads itself 48px; and `.embed` closed * with its own 48px. 122px below the iframe, where the box's own padding is * 48 above and should be 48 below. Then the box's `margin-bottom:0` put the * next block hard against it -- the CookingHub banner touched the card. * * The reservation exists to stop the page jumping while the iframe loads, so * it stays until the iframe is there: `:has(iframe)` drops it the moment the * embed has its own height, and not before. The block margin inside the box * goes, because the box's padding is already the space it was asking for. * What is left below the iframe is 38.4 + 48 -- the same two paddings that * sit above it. * * Scoped to `.ttc-v2` and in this stylesheet, which only the recipe page * loads: no published page carries this embed at all (measured -- the policy * slot is not in the live recipe template). * ========================================================================= */ .ttc-v2 .ttc-embed-slot--policy:has(iframe) { min-height: 0; } .ttc-v2 .embed .ttc-policy-embed { margin-bottom: 0; } /* the 30 Tom asked for, between the end of this box and whatever follows. * The block after it is an advertising banner, which header.css already * starts 30px below its neighbour; stating it here as well cannot double it * -- adjacent margins collapse to the larger of the two -- and it holds if * something without a margin of its own is ever put there instead. */ .ttc-v2 .embed:has(.ttc-policy-embed) { margin-bottom: 30px; } /* ========================================================================= QUEUE 75, PHASE 1: THE GALLERY'S ARROWS. They were a flat orange disc with nothing behind them and no hover: on a pale photograph -- the salsa, the ranch dip -- the disc sat on cream and lost its edge, and a mouse got no answer at all from a control that is a button in everything but name (`role="button"`, `tabindex="0"`, and `recipe-v3-gallery.js` listens on it). A WHITE RING AND A SOFT SHADOW, so the disc reads as a button on any photograph without changing the site's own orange mark; a hover that darkens the orange, lifts the disc ~7% and deepens the shadow; and the same answer for the keyboard, which had none. The ring is drawn INSIDE the 56px (`box-sizing:border-box` is set for everything in `.ttc-v2`), so the tap target does not change. This block sits at the end of the file because `.arrow.l`/`.arrow.r` further up set `background` as a SHORTHAND with the icon in it -- a `background-color` written before that line would be thrown away by it. ========================================================================= */ .arrow { border: 3px solid #fff; box-shadow: 0 3px 12px rgba(0, 0, 0, .28); cursor: pointer; transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease; } .arrow:hover, .arrow:focus-visible { background-color: #d96c1e; /* --orange #f18032, one step down */ box-shadow: 0 6px 18px rgba(0, 0, 0, .36); transform: translateY(-50%) scale(1.07); /* the -50% is the centring */ } .arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .arrow:active { transform: translateY(-50%) scale(.98); } /* The strip's own two arrows sit on the card, not on a photograph, so they need no ring -- but they were just as dead to a mouse, and they are the same control. */ .sarrow { transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease; } .sarrow:hover, .sarrow:focus-visible { background-color: #d96c1e; box-shadow: 0 3px 10px rgba(0, 0, 0, .22); transform: scale(1.07); } .sarrow:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } /* A PHONE. 56px of disc with 34px of inset ate a third of a 318px photograph, and two of them ate two thirds of the room a reader has to see the picture. 48px is still well over the 44px a finger needs, and the inset comes in with it. `--gal-ratio` keeps the box landscape at this width too, so the arrows stay vertically centred on a shorter picture. */ @media (max-width: 600px) { .arrow { width: 48px; height: 48px; border-width: 2px; } .arrow.l { left: 14px; } .arrow.r { right: 14px; } .pinbtn { right: 14px; top: 14px; } } @media (prefers-reduced-motion: reduce) { .arrow, .sarrow { transition: none; } .arrow:hover, .arrow:focus-visible { transform: translateY(-50%); } .sarrow:hover, .sarrow:focus-visible { transform: none; } } /* ===================================================================== ROUND 76, PHASE 2: ON A PHONE THE GALLERY IS SWIPED, NOT CLICKED. The two 48px discs are what a phone reader gets instead of the picture: measured on the candidate at 390, `.gal-main` is 318px wide and the two arrows plus their insets cover 124px of it -- 39% of the photograph, sat on top of the food. A phone has a better control for "next" than a button and it is the one every gallery on a phone already uses. A PHONE HERE IS <=600px, which is what this file has always called a phone: the block above ("A PHONE. 56px of disc with 34px of inset...") is the same query, and the arrows it shrinks are the arrows this one hides. Above 600 nothing changes -- the discs are still there and still work. `touch-action: pan-y` is the one thing that has to be said out loud: it lets the page keep scrolling vertically under the finger while the gallery takes the horizontal drag. Without it the browser claims the gesture and the swipe never reaches the script. The slide is done by the script adding `.gal-slide-out-l/r` and `.gal-slide-in-l/r` to the photograph; the transitions live here, and a reader who has asked for less motion gets the same photograph with no movement at all (the block at the foot of this file). ===================================================================== */ @media (max-width: 600px) { .gal-main > .arrow { display: none; } .gal-main { touch-action: pan-y; } } .gal-main > .gal-img { transition: transform .18s ease, opacity .18s ease; will-change: transform; } .gal-main > .gal-img.gal-slide-out-l { transform: translateX(-28%); opacity: 0; } .gal-main > .gal-img.gal-slide-out-r { transform: translateX(28%); opacity: 0; } .gal-main > .gal-img.gal-slide-in-l { transform: translateX(28%); opacity: 0; transition: none; } .gal-main > .gal-img.gal-slide-in-r { transform: translateX(-28%); opacity: 0; transition: none; } @media (prefers-reduced-motion: reduce) { .gal-main > .gal-img, .gal-main > .gal-img.gal-slide-out-l, .gal-main > .gal-img.gal-slide-out-r, .gal-main > .gal-img.gal-slide-in-l, .gal-main > .gal-img.gal-slide-in-r { transition: none; transform: none; opacity: 1; } } /* THE "ESTIMATED" LABEL ON THE NUTRITION PANEL (24 September). Beside the heading, not under the figures: the note below the numbers has always said they are an estimate, but a reader who takes the first number and leaves never reaches it. `.nut-top` is already a wrapping flex row with a 16px gap, so this sits on the heading's baseline at any width and drops below it on a phone without a rule of its own. */ .nut-est{display:inline-block;padding:3px 10px;border-radius:999px; background:rgba(81,0,13,.08);color:var(--maroon); font-size:13px;font-weight:700;line-height:1.5;letter-spacing:.02em; text-transform:uppercase;white-space:nowrap} /* =================================================================== THE HERO META ROW: A 45px FLOOR BETWEEN UNITS, AND A CLEAN REFLOW (MEGA round phase 4, 24 September) THE ROW HAS FOUR THINGS IN IT and three of them are one unit each: prep time, cook time and difficulty are an icon and a number that must never be separated, and the calories block is the fourth. The spacing rule is BETWEEN units and never inside one -- the 16px between an icon and its own number is set on `.mb-item` and is not touched here. WHAT WAS WRONG, MEASURED ON /recipes/60-min-pan-pizza/ AT TWELVE WIDTHS: 1024-1244 the units were spaced by `margin-right:clamp(16px,4.2%,64px)` and the clamp bottomed out: SIXTEEN PIXELS between units at every width from 1024 to 1244. The floor asked for is 45. 1245-1440 the calories block dropped below the times -- and was still RIGHT-ALIGNED, hard against the edge, which is the cramped lower line the brief says not to produce. >=1245 the units were fixed boxes, `flex:0 0 184px` and 200px for the third, so the space between them was whatever was left INSIDE each box: 67px after one, 109px after another. Even spacing was not expressible. AND WHY THERE IS NO BREAKPOINT FOR THE REFLOW. The obvious fix is a media query at the width where the row stops fitting. There is no such width. Measured across ALL 172 published recipes at 1440: the ink in this row ranges from 281px (Bagel, which publishes no calories at all) to 887px (Pulled Pork -- "121 calories Per Serving (of 10)" beside three long times). Holding 45px gaps needs 1,022px of inner width for Pulled Pork and 416px for Bagel. Any single breakpoint is wrong for most of the site. Worse, the width available here is not the viewport: a sidebar appears at 1204 and the column collapses from 1120px to 778px in four pixels of window, then climbs back. A viewport number cannot describe that either. SO FLEXBOX DECIDES, and the centring falls out of it: .mb-times grows (`flex:1 1 auto`), so on a row that fits it eats the free space and the calories block ends flush right exactly as it does today -- `justify-content:center` on the bar has nothing to centre. When the calories block does not fit, it wraps to its own line, alone. Now there IS free space on that line, and the same `justify-content` centres it. One declaration, both states, and no width written down. THE FLOOR ITSELF is `clamp(45px, 4.4vw, 109px)`: 109 is the widest gap the old fixed boxes produced, so a big desktop looks as it did; 4.4vw shrinks it smoothly; 45px is the floor and the clamp cannot go under it. BELOW 1024 NOTHING HERE APPLIES, deliberately. The phone rules already do what this phase asks -- the calories block is `flex:1 0 100%` on its own centred line, measured at 0px off centre at 1023, 900, 768, 600, 480 and 390 -- and a 45px floor is not achievable at 390px, where three units and two 45px gaps need 358px in a 346px column. QUESTIONS.md (f) records that. =================================================================== */ @media (min-width: 1024px) { .metabar { /* the one number this whole block exists for */ --mb-gap: clamp(45px, 4.4vw, 109px); /* a wrapped calories line must not be clipped by the fixed 131px */ height: auto; min-height: 131px; align-items: center; /* between the times group and the calories block */ column-gap: var(--mb-gap); row-gap: 18px; /* only ever visible on a line the calories block has to itself */ justify-content: center; } /* grows to fill a row that fits, so the calories block stays flush right and the centring above stays dormant */ .mb-times { flex: 1 1 auto; gap: var(--mb-gap); } /* the units size to their own content: the GAP is the spacer now, not leftover room inside a fixed box, so every gap is the same */ .mb-item, .metabar .mb-times .mb-item:nth-child(3) { flex: 0 0 auto; margin-right: 0; } /* shrink-to-fit, so it is centred as a block and not stretched */ .mb-right { flex: 0 1 auto; margin-left: 0; } } /* =================================================================== ROUND 82, PHASE 1: THE HERO META ROW'S VERTICAL SPACING (24 September) THE SPACE ABOVE AND BELOW THIS ROW IS NOT THE SPACE THE RULE BOOK TALKS ABOUT. The site's general figure is 30px AROUND a block; this is INSIDE the hero's own white bar, between its edge and the one row it carries, and the round asks for 20 and 10. Nothing outside `.metabar` is touched by anything below. AND THE BAR'S TOP EDGE IS NOT WHERE THE ELEMENT STARTS. `.metabar` carries `margin-top:-40px`, so its first 40px sit behind `.hero`, which has `overflow:hidden` and paints over them. A reader sees the white begin 40px lower. Every number here is measured from the edge the reader sees, which is why the padding carries that 40 as a separate term (`--mb-tuck`) rather than folding it into the figure the round asked for. MEASURED BEFORE THIS BLOCK, on five recipes at nine widths: one line 30.5 above, 30.5 below -- equal, but not 20 stacked 5 above, 28 between, 5 below -- this is the tight bottom the round names on Pan Pizza, which stacks at 1440 and 1244 <1024 12 above, 10 between, 18 below THE TWO CASES CANNOT BOTH BE PADDING, because a stylesheet cannot ask whether a flex line wrapped. So the padding is the STACKED case (10 above, 10 between via `row-gap`, 10 below) and the one-line case is reached with a `min-height` the single row cannot fill: min-height = 40 tuck + 20 + row + 20 A row that fits is one line of `--mb-icon` and `align-content:center` puts the 20px of slack half above and half below it. A row that stacks is `icon + 10 + 23` of content and `icon + 93` tall, always above that floor by 13px, so the min-height is dormant and the 10s stand. One declaration, both cases, and no width written down. `--mb-icon` IS THE SAME VALUE `.ring` IS DRAWN AT and is set beside it below 1024, where the icons are a clamp; if one ever changes the other follows, and the floor cannot drift away from the row it is sized for. =================================================================== */ @media (min-width: 1024px) { .metabar { --mb-tuck: 40px; /* hidden behind the hero above */ --mb-icon: 30px; /* `.ring` is 30x30 and sets the row */ --mb-edge: 20px; /* the one-line case, above AND below */ --mb-tight: 10px; /* the stacked case, and between rows */ height: auto; padding-top: calc(var(--mb-tuck) + var(--mb-tight)); padding-bottom: var(--mb-tight); row-gap: var(--mb-tight); align-content: center; min-height: calc(var(--mb-tuck) + var(--mb-edge) * 2 + var(--mb-icon)); } } @media (max-width: 1023px) { .metabar { --mb-tuck: 40px; /* the same clamp `.ring` is drawn at, so the floor tracks the row */ --mb-icon: clamp(26px, 7.2vw, 32px); --mb-edge: 20px; --mb-tight: 10px; height: auto; padding-top: calc(var(--mb-tuck) + var(--mb-tight)); padding-bottom: var(--mb-tight); row-gap: var(--mb-tight); align-content: center; min-height: calc(var(--mb-tuck) + var(--mb-edge) * 2 + var(--mb-icon)); } } /* =================================================================== ROUND 82, PHASE 2: WHEN THE CALORIES BLOCK DROPS, BOTH ROWS CENTRE (24 September) WHAT WAS WRONG, measured on 172 recipes at nine widths: when the calories block wrapped to its own line it WAS centred (round 81 put it there) and the times row above it was NOT -- 232px off centre on Pan Pizza at 1440, 116px on Pulled Pork. One row centred under another row jammed against the left edge is the thing this phase exists to stop. WHY IT HAPPENED. Round 81 gave `.mb-times` `flex:1 1 auto` so that on a row which fits it eats the free space and the calories block ends flush right, exactly as the mock-up has it. But a grown box is grown in BOTH states: when the calories block wraps, `.mb-times` still swells to the full line, so the bar's `justify-content:center` has nothing left to centre and the units sit at the box's left edge. AND A STYLESHEET CANNOT ASK WHETHER A FLEX LINE WRAPPED. There is no selector, no media feature and no container query for it. `.mb-times` is a box wider than its contents in BOTH cases -- that is exactly how round 81 pushed the calories block right -- so nothing about the box itself distinguishes them. Every arrangement of `flex-grow` and `auto` margins was tried and each one buys the stacked case by giving up the one-line case, or the other way round. SO THE ROW IS SIMPLY CENTRED, ALWAYS. `.mb-times` sizes to its contents and the bar centres whatever is on each line: stacked the times row is centred and so is the calories block -- which is what this phase was asked for one line the four units are centred as one group, and all three gaps become exactly `--mb-gap` -- the 114px hole that used to sit between the difficulty mark and the calories was leftover room, not a designed figure, and round 81's whole point was that the space between units should be one number THIS IS THE ONE THING IN ROUND 82 THAT WAS NOT ASKED FOR: the one-line row no longer spans edge to edge. It is one declaration, reverting it is one word, the before-and-after pictures show it at 1600 and 1024, and QUESTIONS.md (a) records it with the alternative -- a few lines of script toggling a class on the bar -- for Tom to choose instead. THE 45px FLOOR IS UNAFFECTED: `--mb-gap` is untouched and is now the gap on BOTH sides of the join rather than on one. =================================================================== */ @media (min-width: 1024px) { /* sizes to its contents, so a line that holds only this row has free space for the bar's `justify-content:center` to share out */ .mb-times { flex: 0 1 auto; } } /* ===== THE MEGA ROUND, ITEM 3: "Updated", and the date behind it ===== A recipe that has never been updated renders exactly what it rendered before -- a `.h-pub` / `.pub` span with two spans in it -- and NOT ONE RULE BELOW MATCHES IT. Everything here is under `.has-orig`, which the macro only writes when there is an original publication date to show. TOM'S REVIEW: THE LINE SWAPS IN PLACE, it does not reveal a second line underneath. The two readings sit in ONE grid cell, so the box is as wide and as tall as the longer of them and NOTHING in the header can move when they trade places -- which is what the old reveal did wrong. THE BUTTON HAS TO LOOK LIKE THE TEXT IT REPLACED. It is a