/* =========================================================================== wp-blocks.css - the minimum of WordPress block-library CSS needed to render the IMPORTED Gutenberg bodies on this site's two static pages. tch-ops/server-configs#364 item 11, RECONCILED by #374 item 7. Loaded only by pages that set bWpCss364 in header.asp - as of item 7 that is /auto-test-records/ AND /contact/, and nothing else. WHAT ITEM 7 CHANGED, AND WHY IT HAD TO. This file was written for #364 item 11, when the site was still motorsportmedia's Bootstrap 3 theme and this page was the only Gutenberg markup on it. Two things have since changed under it: 1. /contact/ turned out to be Gutenberg markup as well - a two-column `wp-block-columns` with a `wp-block-social-links` row - so the columns CSS now serves two pages, not one, and the two want DIFFERENT behaviour at 390px: contact stacks, test-records does not. 2. #374 items 2-6 replaced the theme, so the live page geometry is now knowable. Every value below is measured off theauto.page itself, at 1440 and 390, rather than approximated - and three of the original rules turned out to be approximations that no longer match: * columns were separated with `padding: 0 6px` on each column. Live uses a 32px flex GAP (WordPress's `--wp--style--block-gap`, 2em) and no padding. Measured: at 1440 the first block's columns are 334 and 51.34 wide at x=562 and x=928 - a 32px pitch that 6px of padding cannot produce. * `flex-wrap: nowrap` was unconditional. Live gets nowrap from the markup's own `is-not-stacked-on-mobile` class, which is why /contact/ (which does not carry it) stacks its two columns at 390 and the test records do not. Reproducing WordPress's own mechanism is what lets one file serve both pages. * `@media (max-width:767px){.hide-mobile{display:none}}` hid a column that LIVE SHOWS. Measured at 390: `.hide-mobile` is 36.16px wide and displayed. The class is the WordPress theme's, no rule on live ever matched it, and hiding it dropped a column of data on a phone. THE SCOPE CHANGED TOO, deliberately. Every rule used to be prefixed `.wp-imported`, because inside a Bootstrap theme these generic block names ("size-large", "has-text-align-right") could collide anywhere on the site. The guard is now the CONDITIONAL LOAD: header.asp emits this file for two URLs and no others, so a rule here cannot reach a page that did not opt in. The prefix bought nothing beyond that on a stylesheet two pages share, and it cost the one thing that matters here - being able to read a rule against the capture's own selector, which is what the measuring harness diffs. ORDERING IS LOAD-BEARING: header.asp emits this LAST, after theauto.css, so the block library wins where WordPress's own cascade had it winning. =========================================================================== */ /* --- columns -------------------------------------------------------------- WordPress core's model, transcribed from `theauto.page_wp-includes_blocks_columns_style.min.css` in the capture and confirmed against the measured boxes: wrap by default, nowrap at >= 782px OR when the markup says `is-not-stacked-on-mobile`; each column takes its flex-basis from the INLINE style Gutenberg wrote, may shrink, and never grows. The shrink is what makes the numbers come out. Block 1 declares 63.73% / 9.8% / 14.7% / 11.76% inside a 620px column with three 32px gaps: the bases sum to 620 and the gaps to 96, so the row overflows by 96 and every column shrinks in proportion - 63.73% of 620 = 395.1, less 96 * (395.1/620) = 61.2, giving 333.9 against the 334 live measures. Set `flex-grow: 1` here instead and the first column comes out 395 with the last three squeezed to nothing. --------------------------------------------------------------------------- */ .wp-block-columns { box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: normal; -ms-flex-align: normal; align-items: normal; gap: 32px; /* --wp--style--block-gap, 2em at 16px. Measured: column 2 starts 32px after column 1 ends, at both widths and on both pages. */ margin-bottom: 28px; /* core's :where() 1.75em; measured 28 */ } @media (min-width: 782px) { .wp-block-columns { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } .wp-block-columns.is-not-stacked-on-mobile { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .wp-block-column { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; min-width: 0; /* without this a long unbroken value stops the column from ever shrinking, and one row of data widens the whole table */ overflow-wrap: break-word; word-break: break-word; } /* A column with no inline flex-basis is the two-column /contact/ case: there Gutenberg leaves the basis off and WordPress shares the row equally. Below 782px both files' columns are full width, which is what makes contact stack while `is-not-stacked-on-mobile` keeps the test records side by side. */ .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style*="flex-basis"] { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } @media (max-width: 781px) { .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { -ms-flex-preferred-size: 100%; flex-basis: 100%; } } /* --- social links --------------------------------------------------------- /contact/ only. A 24px icon in a 36x36 tile: `svg{height:1em;width:1em}` at the list's own 24px font-size, inside an anchor with 0.25em of padding. The -8px on the list against +8px on each tile is live's, and it is what makes the 44px list box hold a 36px tile with 8px of clearance above it. Colours are WordPress's brand table, and only the two networks this page uses are carried - Instagram #f00075 and Facebook #0866ff, both measured. --------------------------------------------------------------------------- */ .wp-block-social-links { background: none; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 24px; gap: 12px; /* :where(.is-layout-flex){gap:.5em}. Measured: the tiles sit on a 48px pitch, 36 + 12. */ line-height: 39px; margin-top: -8px; margin-left: 0; padding-left: 0; padding-right: 0; text-indent: 0; } .wp-block-social-links .wp-social-link { border-radius: 9999px; display: block; height: auto; margin: 8px 0 0; padding: 0; text-align: center; } .wp-block-social-links .wp-social-link a { -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: currentColor; display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 0; padding: 0.25em; text-decoration: none; } .wp-block-social-links .wp-social-link svg { fill: currentColor; height: 1em; width: 1em; } .wp-block-social-links .wp-social-link-instagram { background-color: #f00075; color: #fff; } .wp-block-social-links .wp-social-link-facebook { background-color: #0866ff; color: #fff; } /* --- typography helpers --------------------------------------------------- Alignment and colour classes only. The sizes and line-heights on the test records are INLINE on each

and need nothing here, and the 36px paragraph margin comes from theauto.css section 10's `.page .entry-content p` - which is live's own value, so the `margin: 0 0 1em` this file used to force is gone. It was a (0,1,1) rule losing to a (0,2,1) one and had no effect on the bottom margin anyway; all it did was zero the top one, which Bootstrap already zeroes. --------------------------------------------------------------------------- */ .has-text-align-right { text-align: right; } .has-text-align-left { text-align: left; } .has-text-align-center { text-align: center; } .has-vivid-red-color { color: #cf2e2e; } /* The red advice paragraph near the top of the test records - "best viewed in portrait form on mobile and tablets... otherwise view the data on a laptop" - is a CALLOUT BOX on live, not loose red text: 32px of padding on a #fbe7dd peach panel with a 4px radius. Measured 620 x 142 at x=562, y=882.67, and without it the paragraph rendered as three bare red lines 64px shorter, which took every block below it up the page with it. The rule is CoBlocks' alert-paragraph style, which arrived in the markup with the import (`is-style-warning has-vivid-red-color has-text-color has-link-color`) and is the only one of that family the page uses. The background is scoped `:not(.has-background)` and the colour `:not(.has-text-color)`, exactly as the source has them, so a future paragraph that sets either explicitly keeps its own. */ p.is-style-warning { border-radius: 4px; box-sizing: border-box; padding: 32px; } p:not(.has-background).is-style-warning { background-color: #fbe7dd; } p:not(.has-text-color).is-style-warning { color: #8a4b30; } /* --- images --------------------------------------------------------------- Measured: 620 wide at 1440 and 342 at 390 - the figure fills the measure and the `width="980"` attribute on the img is overridden. 16px of bottom margin, which is core's 1em, NOT the 1.5em this file used to carry. --------------------------------------------------------------------------- */ .wp-block-image { box-sizing: border-box; margin: 0 0 16px; } .wp-block-image img { box-sizing: border-box; display: block; height: auto; max-width: 100%; vertical-align: bottom; } /* --- file / PDF embeds ---------------------------------------------------- The carries its own inline width:100%;height:600px, exactly as WordPress wrote it, so nothing here sizes it. Everything else is measured: the block is 0.8em (12.8px) with 1.5em (19.2px) below it, the embed 1em (12.8px) below itself, and the Download button 18px/29.25 with 12px 24px of padding. THE BUTTON IS WHITE ON #d1d1d1 AND THAT IS LIVE. The theme paints .wp-element-button with its accent, wp.com's custom-colors layer flattens that accent from #ffde00 to #d1d1d1 - the same flattening item 5 found on .cat-links and item 6 found on the page frame - and the white label it was given for the yellow stayed. It reads poorly and it is what a reader sees today; correcting it would be a visible change at cutover. The 1px #ddd border this file used to draw around the embed is gone: live measures 0 on every side. --------------------------------------------------------------------------- */ .wp-block-file { box-sizing: border-box; margin-bottom: 19.2px; } .wp-block-file:not(.wp-element-button) { font-size: 0.8em; } .wp-block-file__embed { margin-bottom: 12.8px; } .wp-block-file__button { background-color: #d1d1d1; border-radius: 2em; color: #fff; display: inline-block; font-size: 18px; font-weight: 300; line-height: 29.25px; padding: 12px 24px; text-decoration: none; } .wp-block-file * + .wp-block-file__button { margin-left: 0.75em; } .wp-block-file__button:active, .wp-block-file__button:focus, .wp-block-file__button:hover, .wp-block-file__button:visited { box-shadow: none; color: #fff; opacity: 0.85; text-decoration: none; } /* --- what is deliberately NOT here ---------------------------------------- `.wp-imported { overflow-x: auto }` and the `.wp-imported` wrapper it hung on are both GONE, and this is the third of item 11's approximations that item 7 had to unwind. It was #364 item 11's one stated deviation from live, justified as "the source page is marked is-not-stacked-on-mobile, so live overflows on a phone". Measured on theauto.page at 390: it does not. The columns stay side by side and still fit - 156.8 + 32 + 24.1 + ... inside 342 - because flex-shrink takes every column down in proportion. What live actually does is wrap the car names very hard, which is how one page becomes 71,349px tall on a phone, and why the page carries its own red advice to read it on a laptop. So the scroll container never had anything to scroll, and keeping it would now cost something real: it is a measurable difference from live (`.entry-content` reads overflow-x: visible on the capture), and whichever element carried the class would have to be either an extra wrapper inside `.entry-content` - which moves the `.entry-content > *` max-width that theauto.css section 10 applies - or `.entry-content` itself. Live's markup has neither. #374 item 7. --------------------------------------------------------------------------- */