/* ===================================================================== THE DAILY - a magazine, and a magazine's design is its rhythm ===================================================================== Jack, 28 September: "its very boring... should utiilse alments like the weather, and hsould be exciting", then "ok build something amazineg - needs to be a much better design, we coul duse a hero or come up with somethig creative". HAND-WRITTEN, like _ours.css and _home5.css. No builder makes this file. WHAT WAS WRONG WITH THE FIRST CUT. Nine sections in a fixed order, every one the same shape: kicker, headline, paragraph. The eye had nothing to do, and tomorrow's edition would have looked exactly like today's. A magazine alternates - full-bleed photograph, column of type, something set enormous, a list, a photograph again - and that alternation IS the design. So every kind of section here has its own shape and no two neighbours are drawn alike. the hero a full screen of one of ours, the masthead over it like a cover the glance one row of figures on today cards with times the news three columns of type, no photographs at all on this day a wide plate with the year over it did you know one sentence, enormous, on oat the question a full-bleed photograph with the question over it out there three short entries in a row four ideas four tall cards --------------------------------------------------------------------- */ /* --dy-gap was clamp(56px,7vw,110px) and is the top padding of every unbanded section, so it was the other half of the 207px joins. It takes the same number as the banded ones. */ .dy{--dy-col:34em;--dy-wide:1100px;--dy-gap:var(--dy-pad);color:var(--ink)} /* ---- THE COVER ---- A full screen of one of our own photographs with the masthead over it. Every daily round-up in Britain opens on a headline because a headline is all an aggregator has; we have 19,257 of these. THE TINT IS TWO LAYERS, not one. A single dark wash over a photograph flattens it - the sky goes grey and the land goes grey with it. A tweed multiply keeps the colour and a gradient from the foot gives the type somewhere to sit, which is the same pair the door cards use. */ /* THE FILM RUNS UNDER THE BAR. header.site is position:sticky, so it takes 76px of the flow and the hero began below it - which meant the glass bar went transparent over PAPER and its shell-coloured words vanished. Pulling the hero up by the bar's own height puts the film behind it, which is what makes a glass bar mean anything; the padding underneath puts it back so nothing is drawn under the menu. Both read var(--bar) rather than 76, so neither can drift from it. */ /* PLATE J. The film runs clean from the glass bar to the strip and carries no type at all; the words are on our own ink along the foot. No padding on the cover itself - the strip carries its own, and anything the cover held would inset the strip from the edge of the window. */ .dy-hero{margin-top:calc(var(--bar,76px) * -1); position:relative;min-height:min(88vh,860px);display:flex;flex-direction:column; align-items:stretch;justify-content:flex-end;text-align:left;padding:0; overflow:hidden;background:var(--ink)} .dy-hero-pic{position:absolute;inset:0;display:block} .dy-hero-pic{background-size:cover;background-position:center} .dy-hero-pic img,.dy-hero-pic video{width:100%;height:100%;object-fit:cover;display:block} /* LESS MOTION: the film goes, and the poster is already behind it because the poster is the ground rather than an attribute of the