/* ===================================================================== ROUND 135, ITEMS 13 AND 14, PART (c). "Article-body images on COLUMNS and PAGES must flow inline (half-width drop) and not pile over each other." WHAT WAS WRONG, MEASURED BEFORE A LINE OF THIS WAS WRITTEN. Two photographs dropped into one section of a column, rendered on the preview at 1440: figure 1 x=79 y=919 466 x 311 position: absolute figure 2 x=79 y=919 466 x 311 position: absolute overlap 466 x 311 -- the second picture is entirely behind the first one, and nothing on the page says so AND THE WORDS NEVER MOVED OVER EITHER. `static/site/ed2-figures.css` asks the text to make room with `.gt-block.text .text:has(> .ed2-seofig--left) { padding-left: calc(50% + 6px) }` -- (0,4,0) -- and the captured theme answers with `section.gt-block.text .content .text { padding: 5rem }` -- (0,4,1), which wins. Measured: padding-left stayed 38.4px, the heading stayed 880px wide at x=117, and the prose ran underneath the photograph at full width. So on a column the half-width drop was neither half width nor a drop; it was a picture laid over the writing. WHY THAT ONLY BITES A COLUMN AND A PAGE. On a RECIPE the figure never reaches this CSS at all: `app/recipe_v3._dropped_shot` lifts an `ed2-seofig` out of the article prose and makes it the card's own shot (round 5's two-column illustrated box). The absolute rules in ed2-figures.css are therefore dead for all 227 recipes and live only on the 7 columns and 51 pages -- the two kinds this item is about. WHAT THIS DOES. The body figure becomes what the brief asks for: a FLOAT. A float is half width, the words wrap round it, and the next one starts BELOW it rather than on top of it -- `clear` on the same side is what makes the second statement true for any number of pictures, not just two. IT WINS ON SPECIFICITY, NEVER ON ORDER, and that is deliberate. ed2-figures.css is linked at the top of the main column -- in the body, after this head (measured on the served column: `` at byte 21,828, that link at 28,425) -- so it is the later sheet whatever this file does. Every selector here is `section.gt-block.text .content .text > ...`, (0,5,1), which beats both ed2-figures.css's (0,1,0) figure rules and the theme's (0,4,1) padding rule. There is not one `!important` in this file. TWO CLASSES, AND THE SECOND ONE IS THE LEGACY. With this switch on the editor writes `ed2-bodyfig` on a column or a page (oneed-drag.js), so the absolute rules are never asked for in the first place. `.ed2-seofig` is handled as well, scoped to the stored page shape, so a figure dropped BEFORE this switch existed is also fixed rather than left piled. AND THAT LEGACY CASE IS NOT HYPOTHETICAL -- IT IS LIVE. Both static/site/ed2-figures.css and app/routes._ed2_figures_css still say "no published page carries one today", and that sentence has gone stale. MEASURED in data/ttc.db on 13 October 2026: one published column does. id 985 /two-uncooked-condiments-for-summer/ one `ed2-seofig--right`, 52-slovak-biscuits-pagace.jpg Fetched from www.tomthechef.com at 1440: the picture is absolute at x=569..1035 and FOUR lines of the list underneath run past x=569 and under it -- "Let the produce lead", "Easy salsa", "Argentine chimichurri" and "Where each goes" are all printed across the photograph. So this file does not only stop a future pile; it repairs a page a reader can open now. THOSE TWO STALE COMMENTS ARE DELIBERATELY NOT CORRECTED IN PLACE. Editing ed2-figures.css would change its sha, which changes its `?v=`, which changes the bytes of the one published page that links it -- and the whole-site comparison with every switch OFF would then report a difference this round cannot switch off. The correction is recorded here and in the report instead. ===================================================================== */ /* ---- the figure: half width, floated, in the flow -------------------- */ section.gt-block.text .content .text > .ed2-bodyfig, section.gt-block.text .content .text > .ed2-seofig { position: static; top: auto; bottom: auto; left: auto; right: auto; width: calc(50% - 12px); float: left; /* THE CLEAR IS THE WHOLE "DO NOT PILE". Two left figures in one section cannot sit side by side and cannot overlap: the second one starts below the first. It is per side, so a left and a right one DO sit opposite each other, which is the one arrangement that is wanted. */ clear: left; margin: 4px 20px 14px 0; } section.gt-block.text .content .text > .ed2-bodyfig--right, section.gt-block.text .content .text > .ed2-seofig--right { float: right; clear: right; margin: 4px 0 14px 20px; } /* The image. ed2-figures.css gives it `height: 100%` with `object-fit: cover`, which is right for a figure stretched top to bottom by its absolutely positioned parent and wrong for one in the flow -- a floated figure has no height of its own, so `height: 100%` collapses it. The photograph keeps its own shape instead. */ section.gt-block.text .content .text > .ed2-bodyfig > img, section.gt-block.text .content .text > .ed2-seofig > img { display: block; width: 100%; height: auto; object-fit: fill; border-radius: 8px; } section.gt-block.text .content .text > .ed2-bodyfig > figcaption, section.gt-block.text .content .text > .ed2-seofig > figcaption { font-size: .85rem; color: #6d6357; padding-top: 5px; line-height: 1.45; } /* ---- the container: the absolute scaffolding comes off --------------- */ /* `position: relative` and `min-height: 190px` are what ed2-figures.css puts on the text block so an absolute figure has something to be absolute inside. Both DID apply -- they are the two properties the theme has no rule for -- so both are put back to what the block has without a picture in it. The theme's own padding is NOT restated: it already wins, and the words are supposed to keep it. */ section.gt-block.text .content .text:has(> .ed2-bodyfig), section.gt-block.text .content .text:has(> .ed2-seofig) { position: static; min-height: 0; } /* A float must not escape the section it was dropped in and start wrapping the next one's words. ed2-figures.css already clears `.text::after` for the round-105 float; this restates it at this file's own specificity so it holds whichever sheet is serving. */ section.gt-block.text .content .text::after { content: ""; display: block; clear: both; } /* ---- A LIST BESIDE THE PICTURE --------------------------------------- CAUGHT BY LOOKING AT THE SCREENSHOT, which is the only thing that catches it. The float moved the list's WORDS over beside the photograph and left its BULLETS behind: a marker is drawn in the list's own padding, and padding is not shortened by a float, so three stray dots sat on top of the picture at x=40 while their text was at x=565. `display: flow-root` makes the list its own block formatting context, so the whole list -- markers included -- is placed beside the float instead of flowing through it. PARAGRAPHS ARE DELIBERATELY NOT GIVEN ONE: prose wrapping round a picture is the whole point of a float and has no markers to strand. Only a list, and only in a section that actually holds a dropped picture. */ section.gt-block.text .content .text:has(> .ed2-bodyfig) > ul, section.gt-block.text .content .text:has(> .ed2-bodyfig) > ol, section.gt-block.text .content .text:has(> .ed2-seofig) > ul, section.gt-block.text .content .text:has(> .ed2-seofig) > ol { display: flow-root; } /* ---- on a phone ------------------------------------------------------ */ /* A half-width picture in a 310px column is three words wide. Below 620px -- the same breakpoint ed2-figures.css measured -- every body figure goes full width and stands on its own, which is what it already does there today. Restated at this specificity so the float above cannot leak into the phone layout. */ @media (max-width: 620px) { section.gt-block.text .content .text > .ed2-bodyfig, section.gt-block.text .content .text > .ed2-seofig, section.gt-block.text .content .text > .ed2-bodyfig--right, section.gt-block.text .content .text > .ed2-seofig--right { float: none; clear: both; width: 100%; margin: 10px 0 14px; } section.gt-block.text .content .text > .ed2-bodyfig > img, section.gt-block.text .content .text > .ed2-seofig > img { height: auto; } }