/* ========================================================================== Foundation article (AB#100709 / AB#100789 visitor, AB#100790 content editor) -------------------------------------------------------------------------- Serves BOTH CMS copies of the article template: the news article (foundationNewsArticle) and the learner resource article (foundationLearningResourceArticle, AB#100751 / AB#100752). One stylesheet, because one frame draws both bodies and the two copies exist to stay identical. Loaded by masterFoundation.cshtml only. Every rule is scoped under .brand-foundation and the fnd-article__* classes, so nothing here can reach the ASISA, ESD or Academy layouts. main.css is NOT modified; the few shared rules that leak into a Foundation page (h1, h2, p, ul, li, a) are reset in the Resets block below. DESIGN SOURCE: design/foundation-news-article/. Read SOURCE.md before changing a number, and re-run measure.py to check one. - FRAME measured off design/foundation-news-article/reference.jpg with Pillow, at 1440 and with the 132px caption strip subtracted. - ESTIMATE an invention: reasonable, internally consistent, NOT the design. Every one of them is a vertical gap between blocks, or a value at a width the single 1440 frame does not cover. THE FRAME IS PROGRAMME-SCOPED. Its caption reads "WageWise Programme Article", so it settles the article BODY and says nothing about the Foundation-level variant, which carries no programme chrome. That is Q#68 and it is still open. Nothing here paints the chrome either way: the banner and the secondary navigation are the master layout's, resolved from the page's place in the tree. THE QUOTE BLOCK IS NOT STYLED HERE. It reuses .fnd-band-quote from foundation-bands.css, because an article's quote and a programme page's are the same component and must not drift. This file only gives it the vertical space an article needs around it. Same for the text-and-image block, which reuses the bands' named content block. ========================================================================== */ .brand-foundation .fnd-article { /* ---- the three content widths, all FRAME ------------------------------- The article nests three widths rather than using one. Measured at several rows each and consistent to a pixel: featured image 183 -> 1256 1074 media blocks 236 -> 1204 968 text 283 -> 1156 872 That is a 1074 container with media inset 53 a side and text inset 101. */ --fnd-article-wide: 1074px; /* FRAME */ --fnd-article-media: 968px; /* FRAME */ --fnd-article-text: 872px; /* FRAME */ /* ---- vertical rhythm --------------------------------------------------- ESTIMATE, every one. The frame gives absolute block positions, so a gap is a subtraction of two measurements rather than a stated value. They are internally consistent and they are not the design. */ --fnd-article-gap: 56px; /* ESTIMATE: between body blocks */ --fnd-article-gap-band: 96px; /* ESTIMATE: around a full-bleed band */ --fnd-article-head-gap: 32px; /* ESTIMATE: H1 to blurb */ /* ---- the featured image ------------------------------------------------ */ --fnd-article-image-height: 478px; /* FRAME: y 594 -> 1072 */ /* ---- the related-article links ----------------------------------------- */ --fnd-article-related-height: 108px; /* FRAME: the bar is 108 tall */ --fnd-article-related-gap: 32px; /* FRAME: 2752 -> 2784 between the pair */ --fnd-article-related-fill: #DDE2DB; /* FRAME: sampled inside the bar */ /* ---- the video block --------------------------------------------------- */ --fnd-article-video-fill: #262626; /* FRAME: sampled inside the box */ --fnd-article-video-ratio: 968 / 599; /* FRAME: 236 -> 1204 by 3443 -> 4042 */ display: block; } /* ========================================================================== Resets: the shared rules that reach into a Foundation page ========================================================================== */ /* main.css is not global box-sizing outside .LandingPageContent, so a full-width child overflows its column. The learner resource centre and the news band each lost a review round to this; it is answered here from the first commit. */ .brand-foundation .fnd-article, .brand-foundation .fnd-article * { box-sizing: border-box; } /* ========================================================================== The head: title, blurb, featured image ========================================================================== */ .brand-foundation .fnd-article__head { margin: 0 auto; max-width: var(--fnd-article-text); text-align: center; /* FRAME: H1 and blurb are centred */ } .brand-foundation .fnd-article__heading { margin: 0; text-align: center; } .brand-foundation .fnd-article__blurb { margin: var(--fnd-article-head-gap) auto 0; text-align: center; } /* THE FEATURED IMAGE COMES AFTER THE H1 AND THE BLURB, which is what the frame draws and the opposite of what 7.5.1's criteria said. The frame is the signed-off artefact, so it wins; the criterion is raised on the story rather than silently followed. See SOURCE.md. */ .brand-foundation .fnd-article__featured { margin: var(--fnd-article-gap) auto 0; max-width: var(--fnd-article-wide); } .brand-foundation .fnd-article__featured img { display: block; height: var(--fnd-article-image-height); object-fit: cover; width: 100%; } /* ========================================================================== The body: one column of blocks ========================================================================== */ .brand-foundation .fnd-article__body { margin: var(--fnd-article-gap) auto 0; } .brand-foundation .fnd-article__block + .fnd-article__block { margin-top: var(--fnd-article-gap); } /* Text, subheadings and bullets take the narrowest of the three widths. */ .brand-foundation .fnd-article__text { margin: 0 auto; max-width: var(--fnd-article-text); } /* The media blocks take the middle width. */ .brand-foundation .fnd-article__video, .brand-foundation .fnd-article__named { margin: 0 auto; max-width: var(--fnd-article-media); } /* A FULL-BLEED BAND BREAKS OUT OF THE COLUMN and takes its own space above and below. The quote is the only block that does this on the frame. */ .brand-foundation .fnd-article__block--bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; } .brand-foundation .fnd-article__block--bleed + .fnd-article__block, .brand-foundation .fnd-article__block + .fnd-article__block--bleed { margin-top: var(--fnd-article-gap-band); } /* ========================================================================== The video block ========================================================================== */ .brand-foundation .fnd-article__video { background: var(--fnd-article-video-fill); margin-bottom: 0; padding: 0; } .brand-foundation .fnd-article__video-frame { aspect-ratio: var(--fnd-article-video-ratio); display: block; width: 100%; } .brand-foundation .fnd-article__video-link { align-items: center; color: #FFFFFF; display: flex; height: 100%; justify-content: center; text-decoration: none; width: 100%; } .brand-foundation .fnd-article__video-caption { color: var(--foundation-ink, #222222); margin-top: 16px; /* ESTIMATE */ text-align: center; } /* ========================================================================== The related-article links -------------------------------------------------------------------------- Drawn BETWEEN content blocks, in pairs, twice down the frame, rather than as one list at the foot. Nobody had written that down; it is in SOURCE.md now. ========================================================================== */ .brand-foundation .fnd-article__related { display: grid; gap: var(--fnd-article-related-gap); /* FRAME */ margin: var(--fnd-article-gap) auto 0; max-width: var(--fnd-article-text); } .brand-foundation .fnd-article__related-link { align-items: center; background: var(--fnd-article-related-fill); /* FRAME */ color: var(--foundation-ink, #222222); display: flex; justify-content: space-between; min-height: var(--fnd-article-related-height);/* FRAME */ padding: 0 32px; /* ESTIMATE */ text-decoration: none; } /* ========================================================================== The tags, at the FOOT of the article -------------------------------------------------------------------------- Q#36. The criteria put them in the header area; the frame puts them at the foot, centred. The frame wins and the question is raised, not closed. ========================================================================== */ .brand-foundation .fnd-article__tags { display: flex; flex-wrap: wrap; gap: 24px; /* ESTIMATE */ justify-content: center; /* FRAME: centred, width 528 */ list-style: none; margin: var(--fnd-article-gap-band) auto 0; max-width: var(--fnd-article-text); padding: 0; } .brand-foundation .fnd-article__tag { margin: 0; } /* ========================================================================== The back link, directly below the breadcrumb ========================================================================== */ .brand-foundation .fnd-article__back { display: inline-flex; gap: 8px; /* ESTIMATE */ margin: 0 auto; max-width: var(--fnd-article-text); text-decoration: none; } /* ========================================================================== A block type the site does not know yet -------------------------------------------------------------------------- Renders nothing rather than throwing. It exists so a block type added in the backoffice before the markup catches up is invisible to a visitor and obvious to a developer reading the DOM. ========================================================================== */ .brand-foundation .fnd-article__pending { display: none; } /* ========================================================================== Narrow widths -------------------------------------------------------------------------- EVERY VALUE BELOW IS AN ESTIMATE. The frame is one width, 1440, and draws nothing else. The article is a single centred column, which is the easiest thing here to get right and the easiest to be wrong about at 400px. main.css drops .container's side padding below 1024, so a band would run edge to edge. The gutter is restored on the article itself rather than by touching the shared rule. ========================================================================== */ @media (max-width: 1140px) { .brand-foundation .fnd-article { padding-left: 24px; /* ESTIMATE */ padding-right: 24px; /* ESTIMATE */ } .brand-foundation .fnd-article__block--bleed { margin-left: -24px; margin-right: -24px; width: auto; } } @media (max-width: 768px) { .brand-foundation .fnd-article { --fnd-article-gap: 40px; /* ESTIMATE */ --fnd-article-gap-band: 64px; /* ESTIMATE */ --fnd-article-image-height: 240px; /* ESTIMATE */ --fnd-article-related-height: 88px; /* ESTIMATE */ } .brand-foundation .fnd-article__named { display: block; } }