/* Theme Name: Midyan Theme URI: https://midyan.com Author: Kareem Japer Description: Block theme for Midyan Developments. Built from the Midyan design system: charcoal, off-white and grey; Mosvita across the whole scale; a 12-column 1600px desktop grid and a 4-column 342px mobile grid. Bilingual English and Arabic, right-to-left aware throughout. Requires at least: 6.8 Tested up to: 7.1 Requires PHP: 7.4 Version: 0.1.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: midyan Tags: full-site-editing, block-patterns, rtl-language-support, translation-ready, accessibility-ready */ /* * Almost everything is expressed in theme.json, which is the single source of * truth for the design system. Only rules that theme.json cannot express belong * here, and each one is written with logical properties so that the Arabic * right-to-left layout needs no mirrored stylesheet. */ /* -------------------------------------------------------------------------- Mosvita is a variable font with a width axis, and the design uses two points on it: the expanded width for the voice of the brand — the two display sizes, the small caps labels, the menu and the controls — and the normal width for everything that is read as prose. theme.json declares the axis range on the @font-face but has no property for choosing a point on it, so the choice is made here. Prose takes the font's own width, which is the normal one, and needs no declaration. -------------------------------------------------------------------------- */ :where(h1, h2), .has-display-font-size, .has-h-1-font-size, .has-h-2-font-size { font-stretch: 120%; } :where(h6), .has-navigation-font-size, .midyan-eyebrow, .midyan-spec__name, .wp-block-navigation, .wp-element-button { font-stretch: 125%; } /* * The size decides, not the tag: the footer sets its line in the third heading * size and it is set at the reading width there, exactly as it would be in a * paragraph. */ .has-h-3-font-size, .has-h-4-font-size, .has-h-5-font-size, .has-body-large-font-size, .has-body-font-size, .has-body-small-font-size, .has-caption-font-size { font-stretch: 100%; } /* -------------------------------------------------------------------------- Type scale Every step of the scale is a size and a leading together. theme.json can hold both values but has nowhere to tie them: a font size preset carries a size and nothing else, so a paragraph set to Body Large would otherwise take the body leading and stand a line and a half taller down a long column. Headings are already paired through the element styles, and are repeated here for the case where a size is applied to something that is not a heading. -------------------------------------------------------------------------- */ .has-display-font-size { line-height: var(--wp--custom--line-height--display); letter-spacing: var(--wp--custom--letter-spacing--display); } .has-h-1-font-size { line-height: var(--wp--custom--line-height--h-1); letter-spacing: var(--wp--custom--letter-spacing--h-1); } .has-h-2-font-size { line-height: var(--wp--custom--line-height--h-2); letter-spacing: var(--wp--custom--letter-spacing--h-2); } .has-h-3-font-size { line-height: var(--wp--custom--line-height--h-3); letter-spacing: var(--wp--custom--letter-spacing--h-3); } .has-h-4-font-size { line-height: var(--wp--custom--line-height--h-4); } .has-h-5-font-size { line-height: var(--wp--custom--line-height--h-5); } .has-body-large-font-size { line-height: var(--wp--custom--line-height--body-large); } .has-body-small-font-size { line-height: var(--wp--custom--line-height--body-small); } .has-label-font-size { line-height: var(--wp--custom--line-height--label); } .has-caption-font-size { line-height: var(--wp--custom--line-height--caption); } /* -------------------------------------------------------------------------- Reduced motion -------------------------------------------------------------------------- */ @media ( prefers-reduced-motion: reduce ) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- Motion One page, so moving between its sections should read as moving rather than as arriving. Anyone who has asked their system for less motion gets the jump. -------------------------------------------------------------------------- */ @media ( prefers-reduced-motion: no-preference ) { html { scroll-behavior: smooth; } } /* -------------------------------------------------------------------------- Focus The design system asks for a visible keyboard focus. :focus-visible keeps it off the pointer, on the keyboard. This belongs here and not in theme.json, which cannot express it: the pseudo-selectors it accepts stop at :focus, and :focus matches a mouse click too, so a ring declared there draws a box around whatever was last clicked and leaves it there. Anyone tempted to move the focus ring back into the design system will reintroduce that. -------------------------------------------------------------------------- */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--wp--custom--focus-ring) solid var(--wp--preset--color--grey); outline-offset: 2px; } /* * A touch browser paints a grey pane over whatever is being pressed, in the * shape of the element rather than the shape of what is drawn in it. Most of * these are the glyph and nothing else — the cue under the hero, the arrows * beside a row, a link with no box — so the pane reads as a shadow appearing * behind them for as long as the finger is down. Each already answers a press * on its own. */ :where(a, button, summary, [tabindex]) { -webkit-tap-highlight-color: transparent; } /* -------------------------------------------------------------------------- Controls -------------------------------------------------------------------------- */ :where(.wp-block-navigation-item__content) { min-block-size: var(--wp--custom--tap-target); display: inline-flex; align-items: center; } /* * The ink and the ground it is on. Prose is grey and headings are charcoal, but * a mark, a control and a rule are all one of the two brand colours drawn on * the other, and which way round is the surface's decision rather than the * block's. The pair is declared once and turned over by the surface, so * anything that draws in the section's ink says so by name instead of by * inheriting whatever colour the text around it happens to be. */ /* * The drift's three figures: how much of it is being given, and how far from * centre the picture is. All registered, because a custom property the * browser has not been told about is a string, and a string cannot be * animated — and the whole point of these is that they animate. * * The first carries the zoom as well as the shift, so a card at rest is the * card the design draws: the picture only grows past its frame while there is * a hand on it, and the room the shift moves into grows with it. * * Only the first is eased here, and by a transition, because it is one * movement with an end. The two distances are not: a hand reports itself * about thirty times a second and a screen draws sixty, so a transition * given a new target every other frame spends every other frame beginning * one, and a transition's first frame moves nothing. They are carried frame * by frame from the script instead, and written straight onto the picture. */ @property --midyan-drift-in { syntax: ""; initial-value: 0; inherits: false; } /* Written on the picture itself, a frame at a time, by the script. */ @property --midyan-drift-x { syntax: ""; initial-value: 0; inherits: false; } @property --midyan-drift-y { syntax: ""; initial-value: 0; inherits: false; } :root { /* * And how the whole thing arrives and leaves. It answers the hand at * once and then eases into place, rather than easing at both ends: an * even curve spends its first hundred and fifty milliseconds doing * almost nothing, which is felt as the picture taking a moment to * notice that a hand is on it. */ --midyan-drift-fade: 620ms cubic-bezier(0.25, 0.6, 0.3, 1); /* * What a tile takes to open. Longer than a control's answer, because * three things arrive one after another rather than one changing. */ --midyan-reveal: 420ms cubic-bezier(0.2, 0, 0.2, 1); /* * The two controls on a file: look at it, and take it away. Drawn as * masks so each takes the colour of the control it stands in, the way * the steps through the pages already do. */ --midyan-eye: url('data:image/svg+xml;utf8,'); --midyan-down: url('data:image/svg+xml;utf8,'); /* The mark on the line that counts a file's pages. */ --midyan-leaf: url('data:image/svg+xml;utf8,'); /* What a row with no cover of its own stands behind. */ --midyan-sheet: url('data:image/svg+xml;utf8,'); /* The step back, and the step all the way back. Drawn once, worn by two. */ --midyan-chevron: url('data:image/svg+xml;utf8,'); --midyan-chevron-far: url('data:image/svg+xml;utf8,'); --midyan-ink: var(--wp--preset--color--charcoal); --midyan-surface: var(--wp--preset--color--paper); --midyan-wipe-in: left; --midyan-wipe-out: right; } :where([dir="rtl"]) { --midyan-wipe-in: right; --midyan-wipe-out: left; } /* * Core sets display on .wp-block-button__link, so this cannot be written with * :where(), which carries no specificity at all. */ .wp-block-button > .wp-block-button__link, button.wp-element-button, input.wp-element-button, .wp-block-read-more { box-sizing: border-box; min-block-size: var(--wp--custom--control-height); display: inline-flex; gap: 19px; align-items: center; justify-content: center; } .is-dark-section, .midyan-hero, .midyan-404, .wp-site-blocks .midyan-header-over { --midyan-ink: var(--wp--preset--color--paper); --midyan-surface: var(--wp--preset--color--charcoal); } .wp-block-button:not(.is-style-text-link) > .wp-block-button__link, button.wp-element-button, input.wp-element-button, .wp-block-read-more { position: relative; isolation: isolate; background-color: transparent; border: 1px solid var(--midyan-ink); color: var(--midyan-surface); transition: color var(--wp--custom--transition), border-color var(--wp--custom--transition); } .wp-block-button:not(.is-style-text-link) > .wp-block-button__link::before, button.wp-element-button::before, input.wp-element-button::before, .wp-block-read-more::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--midyan-ink); transform-origin: var(--midyan-wipe-out); transition: transform var(--wp--custom--transition); } .wp-block-button:not(.is-style-text-link) > .wp-block-button__link:hover, button.wp-element-button:hover, input.wp-element-button:hover { color: var(--midyan-ink); } .wp-block-button:not(.is-style-text-link) > .wp-block-button__link:hover::before, button.wp-element-button:hover::before, input.wp-element-button:hover::before { transform: scaleX(0); } /* The arrow every button in the design carries, leading the way out. */ .wp-block-button > .wp-block-button__link::after, button.wp-element-button::after, input.wp-element-button::after, .wp-block-read-more::after { content: ""; flex: none; inline-size: 16px; block-size: 14px; background-color: currentcolor; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; transition: translate var(--wp--custom--transition); } :where([dir="rtl"]) .wp-block-button > .wp-block-button__link::after, :where([dir="rtl"]) button.wp-element-button::after, :where([dir="rtl"]) .wp-block-read-more::after { transform: scaleX(-1); } .wp-block-button:not(.is-style-text-link) > .wp-block-button__link:hover::after, button.wp-element-button:hover::after, input.wp-element-button:hover::after, .wp-block-read-more:hover::after { translate: 4px 0; } :where([dir="rtl"]) .wp-block-button:not(.is-style-text-link) > .wp-block-button__link:hover::after, :where([dir="rtl"]) button.wp-element-button:hover::after, :where([dir="rtl"]) .wp-block-read-more:hover::after { translate: -4px 0; } :where(.wp-element-button, .wp-block-button__link):disabled, :where(.wp-element-button, .wp-block-button__link)[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; } @media ( prefers-reduced-motion: reduce ) { .wp-block-button > .wp-block-button__link, .wp-block-button > .wp-block-button__link::before, .wp-block-button > .wp-block-button__link::after, button.wp-element-button, button.wp-element-button::before, button.wp-element-button::after, .wp-block-read-more, .wp-block-read-more::before, .wp-block-read-more::after { transition: none; } } /* * The link out of a development entry. Core's read more block is a bare anchor * with no style of its own, and the design draws it as the outline control, so * it is given the same box rather than a second set of rules that would drift * away from it. */ .wp-block-read-more { font-size: var(--wp--preset--font-size--button); line-height: var(--wp--custom--line-height--button); letter-spacing: var(--wp--custom--letter-spacing--button); font-weight: var(--wp--custom--font-weight--light); font-stretch: 125%; text-transform: uppercase; text-decoration: none; } /* -------------------------------------------------------------------------- Imagery "Hero and gallery crops retain aspect ratio ... never stretch imagery." -------------------------------------------------------------------------- */ .wp-block-image img, .wp-block-post-featured-image img, .wp-block-cover__image-background { object-fit: cover; } /* -------------------------------------------------------------------------- Section rhythm 96 / 128 / 160 on desktop, all three collapsing to 64 on mobile. The clamps live in theme.json so patterns can apply them by class alone. -------------------------------------------------------------------------- */ .section-xs { padding-block: var(--wp--custom--section--xs); } .section-sm { padding-block: var(--wp--custom--section--sm); } .section-md { padding-block: var(--wp--custom--section--md); } .section-lg { padding-block: var(--wp--custom--section--lg); } /* * Sections meet. Each one carries its own padding, so the block gap that * separates ordinary blocks would add a fourth value between every pair of them * and no section would land where the design puts it. Written on the class * rather than on the container's block gap, which is wanted everywhere else. */ .wp-block-group.section-xs, .wp-block-group.section-sm, .wp-block-group.section-md, .wp-block-group.section-lg, .wp-site-blocks > main, .wp-site-blocks > footer { margin-block: 0; } /* -------------------------------------------------------------------------- Dark sections "Use inverse text on dark sections." -------------------------------------------------------------------------- */ .is-dark-section { background-color: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--paper); } .is-dark-section :where(h1, h2, h3, h4, h5, h6) { color: var(--wp--preset--color--paper); } .is-dark-section :where(a:not(.wp-element-button)) { color: var(--wp--preset--color--paper); } /* -------------------------------------------------------------------------- Arabic Mosvita carries no Arabic glyphs and Alexandria stands behind it in the family, so an Arabic run picks Alexandria up wherever it is written without being told to. What has to be said here is the tracking: the sizes are set as one of these, and Arabic letters are joined, so any tracking at all pulls a word apart. -------------------------------------------------------------------------- */ html[lang|="ar"] { --wp--custom--letter-spacing--display: 0; --wp--custom--letter-spacing--h-1: 0; --wp--custom--letter-spacing--h-2: 0; --wp--custom--letter-spacing--h-3: 0; --wp--custom--letter-spacing--label: 0; --wp--custom--letter-spacing--button: 0; } /* -------------------------------------------------------------------------- Screen-reader text -------------------------------------------------------------------------- */ .screen-reader-text { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed !important; inset-block-start: var(--wp--preset--spacing--16); inset-inline-start: var(--wp--preset--spacing--16); z-index: 100000; inline-size: auto; block-size: auto; padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24); clip-path: none; background-color: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--paper); text-decoration: none; } /* -------------------------------------------------------------------------- Brand marks Inlined SVG inheriting currentColor, so one asset serves the light, dark and transparent section tones. The block sets the width; the mark fills it, so no size is repeated here to fall out of step with the block's own setting. -------------------------------------------------------------------------- */ /* The block sets the width on its wrapper; the link has to pass it down rather than shrink to the image's intrinsic size, or an uploaded logo renders at its own dimensions and ignores the setting. */ .midyan-brand-mark, .midyan-brand-mark__link { color: var(--midyan-ink); } .midyan-brand-mark__link { display: flex; align-items: center; inline-size: 100%; text-decoration: none; } .midyan-brand-mark svg, .midyan-brand-mark__svg svg, .midyan-brand-mark__image { display: block; inline-size: 100%; block-size: auto; } /* The design system steps the wordmark down to 144px on phones. The symbol is already small enough to keep its size. */ @media ( max-width: 781px ) { .midyan-brand-mark.is-wordmark { inline-size: 144px; } } /* -------------------------------------------------------------------------- Header 112px tall on desktop, 88px on mobile, per the design system. -------------------------------------------------------------------------- */ /* * 112 on desktop. The mark and the menu are both 44 tall and the padding is * 32, which leaves the row four short, so the row carries the difference. * * It has to be the row and not the header: the header lays its child out with * the constrained layout, which sets an automatic margin on each side, and an * automatic margin in a flex or grid parent shrinks the child to its contents * instead of leaving it on the column. */ .midyan-header > .wp-block-group { min-block-size: 48px; } .midyan-header .wp-block-navigation-item__content { padding-block: 0; text-transform: uppercase; text-decoration: none; } .midyan-footer__nav .wp-block-navigation-item__content { text-transform: uppercase; text-decoration: none; } /* * The filter row above the developments index reads as a row of labels rather * than a menu, so it takes the small caps treatment. The tap target the menu * items carry stays, and is also what puts the row where the design has it. */ .midyan-filters .wp-block-navigation-item__content { letter-spacing: var(--wp--custom--letter-spacing--label); text-transform: uppercase; text-decoration: none; } /* * "Active destinations are underlined", and a destination under the pointer is * on its way to being the active one, so it draws the same line. * * The line is drawn rather than set with text-decoration, which cannot be * animated: it grows from the start of the item. The item is a tap target * taller than its own text, so the line is placed from the bottom of the * text's line box rather than from the bottom of the box around it. */ .midyan-header .wp-block-navigation-item__content, .midyan-filters .wp-block-navigation-item__content, .midyan-footer__nav .wp-block-navigation-item__content, .midyan-footer__policies .wp-block-navigation-item__content { position: relative; } .midyan-header .wp-block-navigation-item__content::after, .midyan-filters .wp-block-navigation-item__content::after, .midyan-footer__nav .wp-block-navigation-item__content::after, .midyan-footer__policies .wp-block-navigation-item__content::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: calc((100% - 1lh) / 2); block-size: 1px; background-color: currentcolor; transform: scaleX(0); transform-origin: var(--midyan-wipe-in); transition: transform var(--wp--custom--transition); } .midyan-header .wp-block-navigation-item__content:hover::after, .midyan-filters .wp-block-navigation-item__content:hover::after, .midyan-footer__nav .wp-block-navigation-item__content:hover::after, .midyan-footer__policies .wp-block-navigation-item__content:hover::after, .midyan-header .current-menu-item > .wp-block-navigation-item__content::after, .midyan-header .current-menu-ancestor > .wp-block-navigation-item__content::after, .midyan-filters .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); } @media ( prefers-reduced-motion: reduce ) { .midyan-header .wp-block-navigation-item__content::after, .midyan-filters .wp-block-navigation-item__content::after, .midyan-footer__nav .wp-block-navigation-item__content::after, .midyan-footer__policies .wp-block-navigation-item__content::after { transition: none; } } /* The mark is a fixed size. It gives the menu room, it does not lend it any. */ .midyan-header .midyan-brand-mark { flex: none; } /* * Core opens its overlay at 600, far below the width where this row runs out: * the mark and the seven items want about 1,085 between them. So the overlay * is brought up to where the row genuinely stops fitting. */ @media ( min-width: 600px ) and ( max-width: 1365px ) { .midyan-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } .midyan-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } } @media ( max-width: 781px ) { .midyan-header { padding-block: var(--wp--preset--spacing--24) !important; } .midyan-header > .wp-block-group { min-block-size: 40px; } .midyan-header .midyan-brand-mark { width: 136px !important; } .midyan-nav .wp-block-navigation__responsive-container-open svg { scale: 1.5 1; } } /* -------------------------------------------------------------------------- The menu as an overlay Below the width where the row runs out, the menu becomes a panel over the page: the mark, the way out, the nine routes and the address. The routes are read there rather than scanned, so they are set in the fifth heading size rather than in the one the row across the top is set in. -------------------------------------------------------------------------- */ /* The row beside the mark does not repeat the page the mark leads to. */ @media ( min-width: 1366px ) { .midyan-nav .wp-block-home-link { display: none; } } /* The mark stands in the same band at the top of the panel as it does in the header the panel covers. */ .midyan-overlay__head { min-block-size: 48px; } .midyan-overlay__menu .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--h-5); line-height: var(--wp--custom--line-height--h-4); text-transform: uppercase; text-decoration: none; } /* * The way out is a control, and is given a control's reach. A button does not * inherit its colour from the panel the way everything else in it does, so it * is told to, and the cross is drawn in the panel's own ink rather than black. */ .midyan-overlay .wp-block-navigation-overlay-close { display: flex; align-items: center; justify-content: center; min-inline-size: var(--wp--custom--tap-target); min-block-size: var(--wp--custom--tap-target); padding: 0; background: none; border: 0; color: inherit; cursor: pointer; } /* -------------------------------------------------------------------------- Media A picture or a film across the column, and the one a phone is given in its place. The crop and the point to hold come from the block as properties rather than written on the element: a has one image for both widths, and only a media query can tell the two apart. -------------------------------------------------------------------------- */ /* Only to undo the margin a bare figure carries: the layout the band stands in sets the step above it, and a rule of its own would win over that. */ :where(.midyan-media) { margin-block: 0; } .midyan-media__item { display: block; inline-size: 100%; block-size: auto; aspect-ratio: var(--midyan-media-ratio, auto); object-fit: var(--midyan-media-fit, cover); object-position: var(--midyan-media-point, 50% 50%); } .midyan-media__item--narrow { display: none; } @media ( max-width: 781px ) { .midyan-media__item { aspect-ratio: var(--midyan-media-ratio-narrow, var(--midyan-media-ratio, auto)); object-position: var(--midyan-media-point-narrow, var(--midyan-media-point, 50% 50%)); } .midyan-media__item--wide { display: none; } .midyan-media__item--narrow { display: block; } } /* The thumbnail beside the phone's own source, in the editor's sidebar. */ .midyan-media-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-block-end: 16px; } .midyan-media-panel__thumb { inline-size: 100%; block-size: auto; border: 1px solid var(--wp--preset--color--grey); } .midyan-media-panel__note { margin-block: 0 16px; color: var(--wp--preset--color--grey); font-size: 12px; line-height: 1.5; } .midyan-media-panel__label { margin-block: 0; font-size: 11px; font-weight: 500; text-transform: uppercase; } /* * The picture a cover hands a phone is its own crop, so the point core holds * in the wide one is the wrong point for it. Both pictures are shown through * one element, which core writes that point onto directly, so a media query is * the only thing that can tell them apart and !important the only thing that * reaches past an inline style. The class is set from the block, and only * where a point for the phone was chosen. */ @media ( max-width: 781px ) { .wp-block-cover.has-midyan-narrow-point > img.wp-block-cover__image-background { object-position: var(--midyan-cover-point-narrow) !important; } } /* * Where either file is a film the two cannot be offered through one element, * so both stand in the cover and the one off screen is taken out of the way. * Neither is fetched until the film script finds it being shown. */ .midyan-cover__item--narrow { display: none; } @media ( max-width: 781px ) { .midyan-cover__item--wide { display: none; } .midyan-cover__item--narrow { display: block; } } /* -------------------------------------------------------------------------- The page frame A column that fills the window, so the footer sits on the bottom of the screen on a page with little or nothing in it, and is pushed down by the content on every other one. The admin bar moves the document down by its own height, which is 32px or 46px depending on the width. Core publishes that as a custom property, and it only exists while the bar is being shown, so the fallback covers every visitor who is not signed in. The window here is the small one — the phone with its address bar showing. The dynamic one is a live number: it is recomputed on every frame the bar spends sliding away and sliding back, which asks this column and everything under it to be laid out again each of those frames, on the page's longest scroll. The small one is the same height with the bar out and never moves, and the only thing this measurement is for is a page too short to fill the screen, which is a page that never scrolls the bar away in the first place. -------------------------------------------------------------------------- */ .wp-site-blocks { display: flex; flex-direction: column; min-block-size: calc(100svh - var(--wp-admin--admin-bar--height, 0px)); /* * An absolutely positioned element with no positioned ancestor is placed * against the initial containing block, which starts at the top of the * canvas rather than at the top of the document. The overlay header below * is anchored here instead, so it follows the admin bar. */ position: relative; } .wp-site-blocks > main { flex-grow: 1; } /* -------------------------------------------------------------------------- Header over the hero Chosen per page, through the "Page with overlay header" template, so that the reason a header is transparent is visible in the page's own settings rather than inferred from what happens to be at the top of the content. Every rule here is inside .wp-site-blocks, which the front end has and the editor does not, and that is deliberate. The editor gives every block wrapper `position: relative` so it can hang a toolbar off it, and it wins: the header stays in the flow whatever this file says. Left unscoped, the light text would still apply and the editor would show a blank white band where the menu should be. Scoped, the editor draws an ordinary header — not what the page will look like, but legible, and honest about it. -------------------------------------------------------------------------- */ .wp-site-blocks .midyan-header-over, .wp-site-blocks .midyan-header-over :where(a) { color: var(--wp--preset--color--paper); } .wp-site-blocks .midyan-header-over { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 2; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ /* * 739px at 390 and 850px at 1920, both measured from the design, interpolated * between. The height is set here rather than on the block so that the two * breakpoints are one declaration; an editor who sets a height in the sidebar * writes an inline style and takes over, which is the intended escape hatch. */ .midyan-hero { min-block-size: 100vh; min-block-size: 100svh; } /* * The scrim. It belongs to the theme and not to the block on purpose: it is * what keeps the header legible over an image nobody has chosen yet, so it has * to survive an editor swapping the picture. As a cover overlay it could be * deleted in two clicks and the contrast would go with it. * * ::after is the cover's last child, so it paints over the background image, * which is positioned but has no z-index of its own. The inner container is * lifted above both. */ .midyan-hero::after { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 200px; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgb(27 29 30 / 80%), rgb(27 29 30 / 0%)); } /* * The headline sits on the bottom edge, and on the same 1296px column as the * rest of the page. * * The block's own "content position" control would do the first of those and * undo the second: it shrinks the inner container to the width of the text so * the content can hug a corner. A cover is a flex container, so an auto margin * on the leading edge pushes the content to the bottom while it stays full * width and the constrained layout inside keeps it on the column. */ .midyan-hero > .wp-block-cover__inner-container { z-index: 1; margin-block-start: auto; } .midyan-hero__title { text-transform: uppercase; } /* * The cue over the lower edge of the hero. It carries no label, so its reach * is given by a tap target rather than by text, and the arrow is drawn at the * size the page draws it rather than at the size a button label would carry. * * It sits back until it is wanted: held down and drifting the way it points, * then brought up to full strength and a step further down under the pointer. * * The drift is never interrupted. Swapping it for a second animation on hover * meant the arrow snapped back to where the first one started before the * second could pick it up, so the two are kept on different elements: the * drift is on the arrow, the step down is on the control around it. */ .midyan-hero__scroll > .wp-block-button__link { gap: 0; padding: 0; min-inline-size: var(--wp--custom--tap-target); opacity: 0.55; transition: opacity var(--wp--custom--transition), translate var(--wp--custom--transition); } .midyan-hero__scroll > .wp-block-button__link:hover, .midyan-hero__scroll > .wp-block-button__link:focus-visible { opacity: 1; color: inherit; translate: 0 6px; } .midyan-hero__scroll > .wp-block-button__link::after { inline-size: 32px; block-size: 36px; mask-image: url('data:image/svg+xml;utf8,'); } @media ( prefers-reduced-motion: no-preference ) { .midyan-hero__scroll > .wp-block-button__link::after { animation: midyan-cue 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; } } @keyframes midyan-cue { 0%, 100% { translate: 0 0; } 50% { translate: 0 8px; } } /* -------------------------------------------------------------------------- Editorial measure Four widths, each taken from where the design breaks its lines. A paragraph without one of these runs the full width of whatever column it sits in. -------------------------------------------------------------------------- */ .midyan-measure-sm { max-inline-size: var(--wp--custom--measure--sm); } .midyan-measure-md { max-inline-size: var(--wp--custom--measure--md); } .midyan-measure-lg { max-inline-size: var(--wp--custom--measure--lg); } .midyan-measure-xl { max-inline-size: var(--wp--custom--measure--xl); } /* * A measure shortens the line, it does not move it. Core's constrained layout * centres anything narrower than the content column, which would take these off * the margin every other line in the design starts on. */ .midyan-measure-sm, .midyan-measure-md, .midyan-measure-lg, .midyan-measure-xl { margin-inline-start: 0 !important; margin-inline-end: auto !important; } /* -------------------------------------------------------------------------- The developments rail The design draws two cards side by side, both whole, with a control at each end and the stops beneath. The row scrolls to the rest. -------------------------------------------------------------------------- */ .midyan-rail { --midyan-rail-gutter: max(var(--wp--style--root--padding-left), calc((100% - var(--wp--style--global--content-size)) / 2)); --midyan-rail-control: 74px; --midyan-rail-card: 632px; --midyan-rail-gap: 32px; position: relative; } .midyan-rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(var(--midyan-rail-card), 100%); gap: var(--midyan-rail-gap); padding-inline: var(--midyan-rail-gutter); overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; /* Room below the cards for a focus ring, and for a scrollbar where the platform insists on drawing one. */ padding-block-end: var(--wp--preset--spacing--24); } /* * The row can be pulled. Said with the cursor because the design carries no * scrollbar and no arrows, so there is nothing else on screen to say it. */ @media ( pointer: fine ) { .midyan-rail__track { cursor: grab; } .midyan-rail__track.is-dragging { cursor: grabbing; user-select: none; } /* A card dragged past is not a card being clicked. */ .midyan-rail__track.is-dragging a { pointer-events: none; } } .midyan-rail__track::-webkit-scrollbar { display: none; } /* * The controls. They only mean anything where the row can be stepped by a * pointer, so they are built by script and the row only makes room for them * at the widths the design draws them at. */ @media ( min-width: 1024px ) { /* The row runs between the controls, and is cut off by them at both ends. */ .midyan-rail__track { margin-inline: calc(var(--midyan-rail-gutter) + var(--midyan-rail-control) + var(--wp--preset--spacing--64)); padding-inline: 0; } } /* * Two to a row, which is what the design draws, and they share the room * equally rather than the second being sliced by the edge of the row. * * At the design's own width this changes nothing: 632 is narrower than half * the row, so the cap holds and the two cards are the size they are drawn. * Below it they come down together. The cards only share from the width where * half a row is still a card worth reading; under that the row keeps the * drawn size and the next card shows as the sliver that says the row runs on. */ @media ( min-width: 1280px ) { .midyan-rail__track { grid-auto-columns: min(var(--midyan-rail-card), calc((100% - var(--midyan-rail-gap)) / 2)); } } .midyan-rail__viewport { position: relative; } .midyan-rail__control { position: absolute; inset-block-start: calc((100% - var(--wp--preset--spacing--24)) / 2); translate: 0 -50%; display: grid; place-items: center; inline-size: var(--midyan-rail-control); block-size: var(--midyan-rail-control); padding: 0; border: 1px solid color-mix(in srgb, var(--wp--preset--color--grey) 14%, transparent); background: none; color: var(--wp--preset--color--charcoal); cursor: pointer; transition: opacity var(--wp--custom--transition), background-color var(--wp--custom--transition), border-color var(--wp--custom--transition), color var(--wp--custom--transition); } .midyan-rail__control:disabled { opacity: 0.5; cursor: default; } /* Hovering it inverts it, as hovering any other control does. */ .midyan-rail__control:hover:not(:disabled) { background-color: var(--wp--preset--color--charcoal); border-color: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--paper); } .midyan-rail__control--prev { inset-inline-start: var(--midyan-rail-gutter); } .midyan-rail__control--next { inset-inline-end: var(--midyan-rail-gutter); } .midyan-rail__control::before { content: ""; inline-size: 16px; block-size: 14px; background-color: currentcolor; mask: var(--midyan-chevron-far) no-repeat center / contain; transition: translate var(--wp--custom--transition); } .midyan-rail__control--next::before { scale: -1 1; } .midyan-rail__control--prev:hover:not(:disabled)::before { translate: -3px 0; } .midyan-rail__control--next:hover:not(:disabled)::before { translate: 3px 0; } /* * Back and on are the writing's words, not the room's: where the writing * turns round, so do both marks and the way each leans under the hand. */ :where([dir="rtl"]) .midyan-rail__control--prev::before { scale: -1 1; } :where([dir="rtl"]) .midyan-rail__control--next::before { scale: 1 1; } :where([dir="rtl"]) .midyan-rail__control--prev:hover:not(:disabled)::before { translate: 3px 0; } :where([dir="rtl"]) .midyan-rail__control--next:hover:not(:disabled)::before { translate: -3px 0; } .midyan-rail__dots { display: flex; gap: 4px; justify-content: center; margin-block-start: var(--wp--preset--spacing--8); } /* * The dot is drawn at eight pixels and stands twenty-four tall. It is not the * only way to move the row — the arrows are thirty-four across and a drag, the * wheel and the keyboard all do the same — so it is a second route to a * position rather than the only one, which is what lets it stay this small. */ .midyan-rail__dot { display: grid; place-items: center; inline-size: 8px; block-size: 24px; padding: 0; border: 0; background: none; cursor: pointer; transition: inline-size var(--wp--custom--transition); } .midyan-rail__dot::before { content: ""; inline-size: inherit; block-size: 8px; border-radius: 4px; background-color: color-mix(in srgb, var(--wp--preset--color--grey) 9%, transparent); transition: background-color var(--wp--custom--transition); } .midyan-rail__dot[aria-current="true"] { inline-size: 24px; } .midyan-rail__dot[aria-current="true"]::before { background-color: var(--wp--preset--color--charcoal); } @media ( prefers-reduced-motion: reduce ) { .midyan-rail__control, .midyan-rail__dot, .midyan-rail__dot::before { transition: none; } } /* * The gap is the grid's. WordPress's flow layout would otherwise put the block * gap on each item as a top margin, which lands on every card but the first. */ .midyan-rail__track > li { margin-block-start: 0; scroll-snap-align: start; } /* * A finger flicks the row and the browser settles it on a card, which it does * with the momentum it was given. A mouse has no momentum, so snapping just * yanks the row to the nearest card the moment the hand lets go. The row is * carried there by script instead, on the same curve the arrows use, and * snapping is left to the pointers that read well with it. */ @media ( pointer: coarse ) { .midyan-rail__track { scroll-snap-type: x mandatory; scroll-padding-inline-start: var(--midyan-rail-gutter); } } @media ( pointer: coarse ) and ( min-width: 1024px ) { .midyan-rail__track { scroll-padding-inline-start: 0; } } .midyan-card__image img { inline-size: 100%; object-fit: cover; } /* * A picture that leads somewhere drifts inside its frame, against the hand — * the cards on the front page, the bands on the developments index and the * entries in the media centre alike, since each of them is a way in to what * it shows and they are the same thing at three sizes. * * The frame does not move at all. The picture inside it grows a little past * the frame's edges and then slides the other way from the pointer, so moving * right nudges the picture left. What the eye reads is distance between the * frame and what is behind it — depth, with nothing turned or tilted. * * How far it goes is a share of the card rather than a figure, so no edge is * ever uncovered at any width. Both the zoom and the shift are multiplied by * how much of the drift is being given, which is nothing until a hand * arrives: a card nobody is pointing at is the card the design draws, * uncropped and still. */ @media ( pointer: fine ) { .midyan-card__image, .midyan-entry__image, .midyan-media-card__image { overflow: hidden; } .midyan-card__image img, .midyan-entry__image img, .midyan-media-card__image img { scale: calc(1 + (0.12 * var(--midyan-drift-in))); translate: calc(var(--midyan-drift-x) * var(--midyan-drift-in)) calc(var(--midyan-drift-y) * var(--midyan-drift-in)); transition: --midyan-drift-in var(--midyan-drift-fade); } .midyan-card__image.is-drifting img, .midyan-entry__image.is-drifting img, .midyan-media-card__image.is-drifting img { --midyan-drift-in: 1; } @media ( prefers-reduced-motion: reduce ) { .midyan-card__image img, .midyan-entry__image img, .midyan-media-card__image img { scale: 1; translate: none; transition: none; } } } /* -------------------------------------------------------------------------- The gallery The same row, set to one picture at a time: the controls square off and come in to the edge of the column, and the stops below carry the picture they go to instead of a dot. -------------------------------------------------------------------------- */ .midyan-rail--thumbnails { --midyan-rail-control: 70px; } /* The row here is core's gallery, set to run on rather than wrap. */ .midyan-rail--thumbnails .midyan-rail__track { display: flex; flex-wrap: nowrap; gap: 0; padding-block-end: 0; padding-inline: var(--midyan-rail-gutter); } /* * The gallery's slides are figures, not the list items the rest of the rail * is built from, so they are told where to come to rest here. Without it a * finger leaves the row wherever the flick ran out, showing the end of one * picture and the start of the next. */ .midyan-rail--thumbnails .wp-block-gallery.has-nested-images figure.wp-block-image { flex: 0 0 100%; inline-size: 100%; max-inline-size: 100%; scroll-snap-align: start; } /* * The picture gives a little under the hand that is pulling it, and comes * back when the hand lets go: a press the row answers rather than a row that * simply moves. * * It is the picture that gives and not the slide holding it. The row works * out where to come to rest from the width of a slide, and a slide being * scaled is a slide reporting a width it does not have — the row then landed * short of the next picture and left a strip of the last one showing. */ .midyan-rail--thumbnails .wp-block-gallery.has-nested-images figure.wp-block-image img { inline-size: 100%; block-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: scale 320ms cubic-bezier(0.2, 0, 0.2, 1); } .midyan-rail--thumbnails .midyan-rail__track:active figure.wp-block-image img, .midyan-rail--thumbnails .midyan-rail__track.is-dragging figure.wp-block-image img { scale: 0.96; } @media ( min-width: 1024px ) { .midyan-rail--thumbnails .midyan-rail__track { margin-inline: calc(var(--midyan-rail-gutter) + var(--midyan-rail-control) + var(--wp--preset--spacing--48)); padding-inline: 0; } } /* * The controls stand against the whole gallery, pictures and stops together, * rather than against the picture alone. */ .midyan-rail--thumbnails .midyan-rail__viewport { position: static; } .midyan-rail--thumbnails .midyan-rail__control { inset-block-start: 50%; } /* * The stop is the picture, so the row of them needs no size of its own. They * are set closer than the design draws them, which is a decision rather than * a measurement: five pictures far apart read as five things, and a strip of * them reads as one. Their size is the design's and stays, so nothing below * the gallery moves. */ .midyan-rail--thumbnails .midyan-rail__dots { gap: var(--wp--preset--spacing--16); margin-block-start: var(--wp--preset--spacing--24); } .midyan-rail--thumbnails .midyan-rail__dot { position: relative; inline-size: 109px; block-size: auto; aspect-ratio: 4 / 5; border-radius: 0; overflow: hidden; translate: 0 0; transition: opacity var(--wp--custom--transition), translate 420ms cubic-bezier(0.2, 0, 0.2, 1); } .midyan-rail--thumbnails .midyan-rail__dot::before { content: none; } .midyan-rail--thumbnails .midyan-rail__dot img { inline-size: 100%; block-size: 100%; object-fit: cover; } /* * A stop stands a step back from the picture it goes to, and comes forward * under the pointer: the veil over it clears and it lifts a little. Slower * than a control, because this is a picture settling rather than a button * answering. */ .midyan-rail--thumbnails .midyan-rail__dot::after { content: ""; position: absolute; inset: 0; background-color: var(--wp--preset--color--charcoal); opacity: 0.22; transition: opacity 420ms cubic-bezier(0.2, 0, 0.2, 1); } .midyan-rail--thumbnails .midyan-rail__dot:hover:not([aria-current="true"]), .midyan-rail--thumbnails .midyan-rail__dot:focus-visible { translate: 0 -5px; } .midyan-rail--thumbnails .midyan-rail__dot:hover::after, .midyan-rail--thumbnails .midyan-rail__dot:focus-visible::after { opacity: 0; } /* The one on screen is not somewhere to go, and is held back to say so. */ .midyan-rail--thumbnails .midyan-rail__dot[aria-current="true"] { opacity: 0.4; cursor: default; } @media ( prefers-reduced-motion: reduce ) { .midyan-rail--thumbnails .midyan-rail__dot, .midyan-rail--thumbnails .midyan-rail__dot::after, .midyan-rail--thumbnails .wp-block-gallery.has-nested-images figure.wp-block-image img { transition: none; } .midyan-rail--thumbnails .midyan-rail__dot:hover:not([aria-current="true"]), .midyan-rail--thumbnails .midyan-rail__dot:focus-visible { translate: none; } .midyan-rail--thumbnails .midyan-rail__track:active figure.wp-block-image img, .midyan-rail--thumbnails .midyan-rail__track.is-dragging figure.wp-block-image img { scale: none; } } /* -------------------------------------------------------------------------- The pointer over a picture that leads somewhere A picture that goes somewhere looks the same as one that does not, so over it the pointer becomes the instruction. A row that is pulled says so with the hand the platform already draws for it. -------------------------------------------------------------------------- */ @media ( pointer: fine ) { /* * The ring is the pointer here, so there are not two of them. The class * is set by the script that draws the ring, so a page without it keeps * the pointer it always had. */ a.has-midyan-cursor img { cursor: none; } /* * Carried to the hand by the script, which is given the hand's place in * the window and counts from the left corner whichever way the writing * runs. So the corner it is carried from is that one too: told to start * where the writing starts, the ring on an Arabic page sets out from the * right and is carried the width of the window past it. */ .midyan-cursor { position: fixed; top: 0; left: 0; z-index: 60; display: grid; place-items: center; inline-size: 70px; block-size: 70px; margin: -35px 0 0 -35px; border: 1px solid currentcolor; border-radius: 50%; /* * The ring and its arrows are drawn in the paper colour over a * photograph nobody has chosen yet, so they carry their own ground, * as the header over the hero does. * * Forty-five per cent is what it takes. Over white that lands the * ground near mid grey, which the paper arrows stand on; over a dark * picture it is close enough to what is already there to pass for a * lens rather than a disc. */ background-color: color-mix(in srgb, var(--wp--preset--color--charcoal) 45%, transparent); color: var(--wp--preset--color--paper); pointer-events: none; opacity: 0; scale: 0.4; transition: opacity var(--wp--custom--transition), scale var(--wp--custom--transition); } .midyan-cursor.is-shown { opacity: 1; scale: 1; } /* Held down, it closes on the hand. */ .midyan-cursor.is-holding { scale: 0.86; } /* * One arrow leading out: the picture goes somewhere. It is the arrow every * button in the design carries, turned to point out of the page. */ .midyan-cursor::before { content: ""; inline-size: 20px; block-size: 18px; rotate: -45deg; background-color: currentcolor; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } /* Out of the page is the other corner where the writing runs the other way. */ :where([dir="rtl"]) .midyan-cursor::before { rotate: 45deg; scale: -1 1; } @media ( prefers-reduced-motion: reduce ) { .midyan-cursor { transition: none; } } } /* -------------------------------------------------------------------------- The gallery, full screen The same row given the window: the pictures whole rather than cropped to the column, the same arrows, and the same strip of stops underneath. -------------------------------------------------------------------------- */ /* * Nothing behind the screen scrolls while it is open. * * The page is a little wider for as long as that lasts, since the scrollbar * goes with the scrolling — which nobody sees, because the screen is over * it. It is given back before the row is stood up again and before any of * the leaving is drawn, so nothing is ever measured against a width the page * is about to lose. */ .has-midyan-lightbox { overflow: hidden; } /* * The screen is the window. * * Its size comes from the four edges and not from a hundred of the viewport's * width, because that hundred counts the scrollbar's room and this does not * sit in it: a screen told to be that wide is a screen wider than the page * can show, and the page grows a bar along the bottom to reach the rest of * it. Held off the edges instead, it is the window exactly. The dialog's own * ceilings are lifted for the same reason. */ .midyan-lightbox { position: fixed; inset: 0; max-inline-size: none; max-block-size: none; inline-size: auto; block-size: auto; padding: 0; margin: 0; border: 0; background-color: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--paper); --midyan-ink: var(--wp--preset--color--paper); --midyan-surface: var(--wp--preset--color--charcoal); --midyan-rail-gutter: var(--wp--preset--spacing--24); } .midyan-lightbox::backdrop { background-color: rgb(0 0 0 / 80%); } /* * The picture takes whatever is left once the strip has what it needs. The * first row is written minmax(0, 1fr) and not 1fr, which would hold the row * open to the picture's own height and push the strip off the bottom. */ .midyan-lightbox .midyan-rail { box-sizing: border-box; display: grid; grid-template-rows: minmax(0, 1fr) auto; block-size: 100%; padding-block: var(--wp--preset--spacing--64) var(--wp--preset--spacing--24); } /* The arrows stand against the picture here, not against the whole screen. */ .midyan-lightbox .midyan-rail--thumbnails .midyan-rail__viewport { position: relative; } .midyan-lightbox .midyan-rail__viewport, .midyan-lightbox .midyan-rail__track { min-block-size: 0; block-size: 100%; } /* A control drawn in charcoal is not on a charcoal screen. */ .midyan-lightbox .midyan-rail__control { border-color: color-mix(in srgb, var(--wp--preset--color--paper) 24%, transparent); color: var(--wp--preset--color--paper); } .midyan-lightbox .midyan-rail__control:hover:not(:disabled) { background-color: var(--wp--preset--color--paper); border-color: var(--wp--preset--color--paper); color: var(--wp--preset--color--charcoal); } .midyan-lightbox .midyan-rail__track { align-items: center; } /* * Whole, not cropped: the whole of it is why this screen exists. The row on * the page crops to the column with a rule of its own, so these carry the * same names and one more to reach past it. */ .midyan-lightbox .midyan-rail--thumbnails .wp-block-gallery.has-nested-images figure.wp-block-image { display: flex; align-items: center; justify-content: center; block-size: 100%; margin: 0; } .midyan-lightbox .midyan-rail--thumbnails .wp-block-gallery.has-nested-images figure.wp-block-image img { inline-size: auto; block-size: auto; max-inline-size: 100%; max-block-size: 100%; aspect-ratio: auto; object-fit: contain; } .midyan-lightbox .midyan-rail__dots { margin-block-start: var(--wp--preset--spacing--24); } /* * Filled. * * These pictures are nineteen twenty across and the screen holds them at * about fourteen hundred, so filling it is the one enlargement that shows * more of the picture rather than more of its pixels. The strip and the * arrows stand down while it does, because there is nothing left to put * them on and nowhere to go until the screen is given back. */ .midyan-lightbox.is-zoomed .midyan-rail { padding-block: 0; } .midyan-lightbox.is-zoomed .midyan-rail__dots, .midyan-lightbox.is-zoomed .midyan-rail__control { display: none; } .midyan-lightbox.is-zoomed .midyan-rail__track { /* Held off the edges for arrows that are no longer there. */ margin-inline: 0; overflow: hidden; cursor: zoom-out; } .midyan-lightbox.is-zoomed .wp-block-gallery.has-nested-images figure.wp-block-image img { inline-size: 100%; block-size: 100%; max-inline-size: none; max-block-size: none; object-fit: cover; } /* * Leaving. * * The screen and the page are each drawn once and laid over one another for * the length of the change, and both carry arrows and a strip of stops at * close to the same place. Left up they come through each other doubled, so * the screen's own go first and what is laid over the page is the ground and * the picture and nothing else. */ .midyan-lightbox.is-leaving .midyan-rail__dots, .midyan-lightbox.is-leaving .midyan-rail__control, .midyan-lightbox.is-leaving .midyan-lightbox__close { opacity: 0; transition: opacity 160ms cubic-bezier(0.2, 0, 0.2, 1); } /* * How a picture is carried from one of its places to another, and how the * screen behind it comes and goes. * * These are written on the transition's own tree rather than on anything in * the page: while one is running the browser draws it above everything, out * of two pictures it took of the page before and after. The tree hangs off * the document element, so the page's own curves reach it. */ ::view-transition-group(midyan-shot) { animation-duration: 520ms; animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1); } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 360ms; animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1); } .midyan-lightbox__close { position: absolute; inset-block-start: var(--wp--preset--spacing--24); inset-inline-end: var(--wp--preset--spacing--24); z-index: 2; display: flex; align-items: center; justify-content: center; inline-size: var(--wp--custom--tap-target); block-size: var(--wp--custom--tap-target); padding: 0; background: none; border: 0; color: inherit; cursor: pointer; opacity: 0.7; transition: opacity var(--wp--custom--transition); } .midyan-lightbox__close:hover, .midyan-lightbox__close:focus-visible { opacity: 1; } .midyan-lightbox__close::before, .midyan-lightbox__close::after { content: ""; position: absolute; inline-size: 22px; block-size: 1.5px; background-color: currentcolor; } .midyan-lightbox__close::before { rotate: 45deg; } .midyan-lightbox__close::after { rotate: -45deg; } /* * Under this width the row lays itself out again: the stops go under the * picture and the arrows under them, in one column. The screen keeps that * order and only says which row takes the space left over, so the picture * sits in the middle of it rather than the gap being shared out. */ @media ( max-width: 1023px ) { .midyan-lightbox .midyan-rail { grid-template-rows: minmax(0, 1fr) auto auto; padding-block: var(--wp--preset--spacing--48) var(--wp--preset--spacing--16); } .midyan-lightbox .midyan-rail__control { margin-block-start: var(--wp--preset--spacing--16); } } /* * A screen with little height to give — a phone turned on its side, which is * how anyone looks at a gallery on one — is laid out for a phone held * upright, where the strip and the arrows ask for what they need and there * is height to spare. Turned over there is not, and the picture is left a * sliver of it. Here they are held to a share of the screen instead, and the * picture takes what is left. */ @media ( max-width: 1023px ) and ( max-height: 600px ) { .midyan-lightbox .midyan-rail { padding-block: var(--wp--preset--spacing--16); } .midyan-lightbox .midyan-rail--thumbnails .midyan-rail__dot { max-inline-size: calc(16dvh * 4 / 5); } .midyan-lightbox .midyan-rail__dots, .midyan-lightbox .midyan-rail__control { margin-block-start: var(--wp--preset--spacing--8); } } /* -------------------------------------------------------------------------- Specifications A name and its value, ruled off above. The rule belongs to the row, so a list cannot close on a line that has nothing under it. -------------------------------------------------------------------------- */ .midyan-spec { container: midyan-spec / inline-size; } .midyan-spec__list { margin-block: 0; } .midyan-spec__row { display: grid; /* The value opens on the quarter: the two meet with nothing between. */ grid-template-columns: 23.75% 1fr; align-items: center; /* * The room under the rule is half again what the room before the next * one is, which is what holds the pair clear of the line above without * closing the row up. Written as half the two so the step stays visible * and the row still follows if either is ever changed. */ padding-block: calc((var(--wp--preset--spacing--24) + var(--wp--preset--spacing--48)) / 2) var(--wp--preset--spacing--48); border-block-start: 1px solid var(--wp--preset--color--grey); } /* The case is written, not set, so a name can be given one of its own. */ .midyan-spec__name { margin: 0; font-size: var(--wp--preset--font-size--label); line-height: var(--wp--custom--line-height--label); letter-spacing: var(--wp--custom--letter-spacing--label); /* The name is the ink the page is written in; the value answers in grey. */ color: var(--wp--preset--color--charcoal); } .midyan-spec__value { margin: 0; font-size: var(--wp--preset--font-size--body); line-height: var(--wp--custom--line-height--body); } /* * Under six hundred the quarter a name is given is too narrow to hold one, so * the value reads under the name rather than beside it. Asked of the list's * own column rather than of the window, because the list is set wherever it * is put: beside a heading on a development, across the page on a phone. * * The rule is drawn on the row's own edge rather than above it, and the line * the value is set on is a little deeper than the one drawn, so the row gives * back the one pixel and the two. */ @container midyan-spec ( max-width: 600px ) { .midyan-spec__row { grid-template-columns: 1fr; row-gap: var(--wp--preset--spacing--8); padding-block: calc(var(--wp--preset--spacing--8) - 1px) calc(var(--wp--preset--spacing--16) - 2px); } } /* A set of lines, read down rather than across, and carrying no marker. */ .midyan-lines { margin-block: 0; padding-inline-start: 0; list-style: none; } .midyan-lines > li + li { margin-block-start: var(--wp--preset--spacing--24); } /* -------------------------------------------------------------------------- A development The body is a run of sections, each carrying its own step. The last of them closes against the link out rather than against its own padding. -------------------------------------------------------------------------- */ .midyan-development .midyan-page-head { padding-block-end: var(--wp--custom--section--sm); } /* The split opening sets the picture against the name rather than under it. */ .midyan-development__head .wp-block-columns { margin-block: 0; } /* The name has the column, not the measure an editorial heading is set to. */ .midyan-development__head .wp-block-columns.midyan-split > .wp-block-column:first-child > :where(h1, h2, h3) { max-inline-size: none; } .midyan-development__head .midyan-page-lede { margin-block: 0; } .midyan-development .wp-block-post-content > .wp-block-group:last-child:not(.is-dark-section) { padding-block-end: 0; } /* Where the copy is read as a set of statements rather than as prose. */ .midyan-tight .wp-block-column.midyan-prose > * + * { margin-block-start: var(--wp--preset--spacing--24); } /* * The way out of a list of facts stands against the last of them. The export * draws it some fifteen lower, and the gallery after it in the same place, so * giving it that room takes the whole of the rest of the page with it. */ .wp-block-column.midyan-prose > .midyan-spec__out { margin-block-start: 0; } /* -------------------------------------------------------------------------- Legal pages One document read from top to bottom rather than a run of sections, so the steps are the document's: a heading, its paragraphs close under it, and the next heading well clear of the last of them. -------------------------------------------------------------------------- */ .wp-block-group.midyan-legal { padding-block-start: var(--wp--custom--section--lg); padding-block-end: var(--wp--custom--section--sm); } /* The fields still to be filled in are one long word each, too long to fit. */ .wp-block-group.midyan-legal p { overflow-wrap: break-word; } .wp-block-group.midyan-legal > * + * { margin-block-start: var(--wp--preset--spacing--16); } .wp-block-group.midyan-legal > :where(h2, h3) + * { margin-block-start: var(--wp--preset--spacing--24); } .wp-block-group.midyan-legal > * + :where(h2, h3) { margin-block-start: var(--wp--preset--spacing--48); } .midyan-development__close { margin-block: 0; padding-block: var(--wp--preset--spacing--24) var(--wp--custom--section--md); } /* -------------------------------------------------------------------------- Hairlines One rule, grey on both grounds. On paper it is held back; on charcoal the same grey already reads as the lighter line the design draws there. -------------------------------------------------------------------------- */ .midyan-card__rule, .midyan-rule, .midyan-footer__divider { border: 0; border-block-start: 1px solid var(--wp--preset--color--grey); opacity: 0.35; } .is-dark-section :where(.midyan-card__rule, .midyan-rule), .midyan-footer__divider { opacity: 1; } /* * The cards in the row are as tall as the tallest of them, so the rule that * closes each one belongs on that shared edge rather than wherever its own * copy happens to end. The card is given the height and stacked, and the rule * takes the space that is left. * * Stacking a constrained group means taking back the automatic side margins * core gives its children, which in a column would shrink each of them to the * width of its own content. They are centred in a container they already fill, * so nothing moves by removing them. */ .wp-block-group.midyan-card { display: flex; flex-direction: column; block-size: 100%; } .wp-block-group.midyan-card > * { margin-inline: 0 !important; } /* * The slack goes to the description rather than to the rule, so the gaps the * card is built on are all still there and only the paragraph's box grows. */ .wp-block-group.midyan-card > .midyan-card__excerpt { flex: 1 1 auto; } .midyan-card__rule { margin-block-end: 0; } /* * The card's name breaks where the design breaks it. A capped width inside a * constrained group is centred by core, so the start margin is taken back. */ .wp-block-group.midyan-card > .midyan-card__title { max-inline-size: var(--wp--custom--measure--sm); /* * Most names take two lines at this measure. A name that takes one keeps * the second line's room, so the sentence under it, the way in and the * rule that closes the card stand level across the row. */ min-block-size: calc(2 * 1lh); } /* -------------------------------------------------------------------------- Eyebrow The small caps label that opens most sections. -------------------------------------------------------------------------- */ .midyan-brand { text-transform: uppercase; } .midyan-eyebrow { font-weight: var(--wp--custom--font-weight--light); letter-spacing: var(--wp--custom--letter-spacing--label); line-height: var(--wp--custom--line-height--label); text-transform: uppercase; } /* -------------------------------------------------------------------------- Words that lead somewhere A link that is neither a button nor a place in a menu: the name on a card, and the trail above a page title that core/site-title and core/post-title build between them. Each is part of the line it stands in rather than a link in prose, so it takes that line's colour and carries no line of its own until a hand is on it. A name is answered by the ink it is set in rather than by a line under it. The page's hairline is the right weight beside a label and far too light beside a name set at seventy-two, where it also breaks across every line the name takes. The names go to full ink instead, which is the move every button on the site makes, and the trail keeps the line — small enough that a line is what reads there. -------------------------------------------------------------------------- */ .midyan-breadcrumb :where(a), .midyan-card__title a, .midyan-entry__title a, .midyan-media-card__title a { color: inherit; transition: color var(--wp--custom--transition); } .midyan-breadcrumb :where(a) { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color var(--wp--custom--transition); } .midyan-breadcrumb :where(a):hover { text-decoration-color: currentcolor; } .midyan-card__title a, .midyan-entry__title a, .midyan-media-card__title a { text-decoration: none; } .midyan-card__title a:hover, .midyan-entry__title a:hover, .midyan-media-card__title a:hover { color: var(--midyan-ink); } /* -------------------------------------------------------------------------- Outline buttons Core registers the style; the design gives it no fill, a hairline in the surrounding ink, and the same height as every other control. -------------------------------------------------------------------------- */ .wp-block-button.is-style-outline > .wp-block-button__link, .wp-block-read-more, button.midyan-form__submit { padding: 0 var(--wp--preset--spacing--24); border-color: currentcolor; color: inherit; } .wp-block-button.is-style-outline > .wp-block-button__link::before, .wp-block-read-more::before, button.midyan-form__submit::before { transform: scaleX(0); transform-origin: var(--midyan-wipe-in); } .wp-block-button.is-style-outline > .wp-block-button__link:hover, .wp-block-read-more:hover, button.midyan-form__submit:hover { border-color: var(--midyan-ink); color: var(--midyan-surface); } .wp-block-button.is-style-outline > .wp-block-button__link:hover::before, .wp-block-read-more:hover::before, button.midyan-form__submit:hover::before { transform: scaleX(1); } /* The design draws the arrow at full strength over a label set in body grey. */ .wp-block-button.is-style-outline > .wp-block-button__link::after, .wp-block-read-more::after, button.midyan-form__submit::after { background-color: var(--midyan-ink); } .wp-block-button.is-style-outline > .wp-block-button__link:hover::after, .wp-block-read-more:hover::after, button.midyan-form__submit:hover::after { background-color: currentcolor; } /* -------------------------------------------------------------------------- Text link buttons A call to action that carries no box: caps, tracked, and still 44px tall so it stays a tap target. -------------------------------------------------------------------------- */ .wp-block-button.is-style-text-link .wp-block-button__link { padding: 0; min-block-size: var(--wp--custom--tap-target); color: inherit; background: none; border: 0; } .is-dark-section .wp-block-button.is-style-text-link .wp-block-button__link { background: none; border: 0; color: inherit; } .wp-block-button.is-style-text-link:not(.midyan-hero__scroll) .wp-block-button__link:hover { color: color-mix(in srgb, currentcolor 80%, transparent); background: none; } /* -------------------------------------------------------------------------- The platform section The picture is the height of the column beside it, whatever that turns out to be, so the two sides of the section always end on the same line. -------------------------------------------------------------------------- */ .midyan-platform__media { display: flex; } .midyan-platform__media > .wp-block-image { display: flex; inline-size: 100%; } .midyan-platform__media img { inline-size: 100%; block-size: 100%; object-fit: cover; } /* -------------------------------------------------------------------------- Footer Four columns sized to the design's own measure and set flush, stacking 48px apart on mobile. -------------------------------------------------------------------------- */ /* * The base of the footer. Who owns the page on one side, the policies on the * other, and both on one line until the window is too narrow to hold them. * * The policies are a menu rather than a line of text so that another one can * be added without touching anything but the menu. They are read, not * navigated, so they keep the line the design draws them on instead of the * tap target the other menus take; the 48px of quiet around the row is what * keeps them apart. */ .midyan-footer__policies .wp-block-navigation-item__content { min-block-size: 0; text-decoration: none; } .midyan-footer__policies .wp-block-navigation-item + .wp-block-navigation-item { display: flex; align-items: center; gap: 12px; } .midyan-footer__policies .wp-block-navigation-item + .wp-block-navigation-item::before { content: ""; flex: none; inline-size: 1px; block-size: 16px; background-color: currentcolor; } @media ( max-width: 781px ) { .midyan-footer__columns { gap: var(--wp--preset--spacing--48); } } /* Inspector panel for the brand mark. Replaces __experimentalVStack, which the WordPress coding guidelines rule out: an experimental export can be renamed or removed in any release, and nothing shipped to a client should depend on one. */ .midyan-mark-panel { display: flex; flex-direction: column; gap: 12px; } /* -------------------------------------------------------------------------- The developments index One development to a band: a picture across the column, then the sector, the name, a sentence and the way in. -------------------------------------------------------------------------- */ .midyan-entry__image img { inline-size: 100%; object-fit: cover; } /* * A list of developments opens one section down from whatever introduces it — * the filter row on the index, the picture on the sectors page — where two * sections that follow each other meet with nothing between them. */ .midyan-entries { margin-block-start: var(--wp--custom--section--sm); } /* -------------------------------------------------------------------------- The page lede What opens an inner page under its title: a standfirst where there is one, then a band of imagery, closing on the step the first section opens on. -------------------------------------------------------------------------- */ .wp-block-group.midyan-page-head { padding-block-start: var(--wp--custom--section--sm); } .midyan-page-lede { margin-block-end: var(--wp--custom--section--sm); } .wp-block-group.midyan-page-lede > * + * { margin-block-start: var(--wp--preset--spacing--48); } /* -------------------------------------------------------------------------- Editorial columns "Heading and copy columns at desktop; stacked on mobile." Five of the twelve columns carry the heading and the remaining seven the copy, meeting on the grid's own gutter. Three equal columns stand a fourth column's width apart. -------------------------------------------------------------------------- */ .wp-block-columns.midyan-split { column-gap: var(--wp--preset--spacing--24); } .wp-block-columns.midyan-split > .wp-block-column:first-child { flex-basis: 40.79%; } .wp-block-columns.midyan-split > .wp-block-column:last-child { flex-basis: 57.71%; } /* The heading breaks on its own measure rather than on the column's. */ .wp-block-columns.midyan-split > .wp-block-column:first-child > :where(h1, h2, h3) { max-inline-size: var(--wp--custom--measure--sm); } .wp-block-columns.midyan-trio { column-gap: 14%; row-gap: var(--wp--preset--spacing--48); } .wp-block-columns.midyan-trio > .wp-block-column { flex-basis: 24%; } /* * Paragraphs in a column of prose stand further apart than blocks do elsewhere, * which is what lets a long passage break into arguments on the page. */ .wp-block-column.midyan-prose > * + *, .wp-block-group.midyan-prose > * + * { margin-block-start: var(--wp--custom--rhythm--paragraph); } /* -------------------------------------------------------------------------- The phone frame What the 390 frames draw differently from the 1920 ones. Headings and the large body copy close their leading, the bands of imagery take taller crops, and the rail steps one card at a time with its controls under the dots. -------------------------------------------------------------------------- */ @media ( max-width: 781px ) { body { --wp--custom--line-height--h-1: 1.25; --wp--custom--line-height--h-2: 1.25; --wp--custom--line-height--h-3: 1.3333; --wp--custom--line-height--body-large: 1.625; } .midyan-developments > .wp-block-buttons { justify-content: flex-start; } .wp-block-group.midyan-impact__grid > * + * { margin-block-start: var(--wp--preset--spacing--32); } .midyan-hero { min-block-size: min(100svh, 740px); padding-block-end: var(--wp--preset--spacing--24) !important; } .midyan-hero__title + .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--32); } /* * A band carries its own crop for this width. A featured image cannot: * core writes one ratio on to the picture and has nowhere to put a * second, so the override stays for those. */ .wp-block-post-featured-image.midyan-page-lede img { aspect-ratio: 342 / 428 !important; } .wp-block-post-featured-image.midyan-development__portrait img { aspect-ratio: 342 / 613 !important; } /* * Stacked, the heading's column would carry its control up above the copy * that explains it. The column steps out of the way so the heading, the * copy and the control are three items in one order, which is the order * the phone frame reads in. */ .wp-block-columns.midyan-split > .wp-block-column:first-child { display: contents; } .wp-block-columns.midyan-split > .wp-block-column:first-child > :where(h1, h2, h3) { order: -1; } .wp-block-columns.midyan-split > .wp-block-column:first-child > .wp-block-buttons { order: 1; /* One step further off than the gap already between the stacked items. */ margin-block-start: var(--wp--preset--spacing--24) !important; } .midyan-platform__media img { aspect-ratio: 342 / 300; block-size: auto; } .midyan-footer__nav + .midyan-footer__nav { margin-block-start: calc(var(--wp--preset--spacing--48) * -1); } .midyan-footer__address br { display: none; } } @media ( max-width: 1023px ) { .midyan-rail { display: grid; grid-template-columns: 1fr auto auto; column-gap: 28px; } .midyan-rail__viewport { display: contents; } .midyan-rail__track, .midyan-rail__dots { grid-column: 1 / -1; } .midyan-rail__dots { margin-block-start: var(--wp--preset--spacing--16); } .midyan-rail__control { --midyan-rail-control: 34px; position: static; grid-row: 3; translate: none; margin-block-start: 40px; } .midyan-rail__control--prev { grid-column: 2; } .midyan-rail__control--next { grid-column: 3; margin-inline-end: var(--midyan-rail-gutter); } .midyan-rail__control::before { inline-size: 8px; block-size: 7px; } /* * The stops are pictures here, and five of them at the width the column * gives them would be twice the screen. They share what there is instead, * keeping the shape the design draws them in. */ .midyan-rail--thumbnails .midyan-rail__dots { gap: var(--wp--preset--spacing--8); padding-inline: var(--midyan-rail-gutter); } .midyan-rail--thumbnails .midyan-rail__dot { flex: 1 1 0; inline-size: auto; min-inline-size: 0; } /* * The arrows stand against the whole gallery rather than against one edge * of it, so on a narrow screen they come to the middle: a column of equal * space either side of the pair. */ .midyan-rail--thumbnails { grid-template-columns: 1fr auto auto 1fr; } .midyan-rail--thumbnails .midyan-rail__control--next { margin-inline-end: 0; } /* * The margin where the rest of the rail has padding. A row of cards is * read as a row, and showing the edge of the next one says so; a gallery * shows one picture at a time, and the sliver of the next beside it only * looks like a picture that did not fit. */ .midyan-rail--thumbnails .midyan-rail__track { margin-inline: var(--midyan-rail-gutter); padding-inline: 0; scroll-padding-inline-start: 0; } } /* -------------------------------------------------------------------------- The map Google will not style a map it has embedded, and the design draws one in the theme's own white and grey, so the colour is taken out here. The frame has no interface of its own: the design shows none, and a map that panned under a thumb would swallow the page scroll. -------------------------------------------------------------------------- */ .midyan-map { margin-inline: 0; margin-block-end: 0; background-color: var(--wp--preset--color--paper); } .midyan-map__frame { display: block; inline-size: 100%; aspect-ratio: 1600 / 356; border: 0; filter: grayscale(1) contrast(0.88) brightness(1.06); } @media ( max-width: 781px ) { .midyan-map__frame { aspect-ratio: 342 / 344; } } .midyan-map--editor { display: grid; place-items: center; aspect-ratio: 1600 / 356; border: 1px dashed var(--wp--preset--color--grey); color: var(--wp--preset--color--grey); } /* -------------------------------------------------------------------------- Form controls "Visible labels; 60px text, select and file controls; 160px textarea. Default, focus and explicit error states." The hairline is the whole of a control's drawing, so focus and error thicken it rather than draw a ring outside the box the design measures. -------------------------------------------------------------------------- */ .midyan-form { max-inline-size: 640px; margin-inline-start: auto; margin-inline-end: 0; } .midyan-form__form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--24); } .midyan-field { inline-size: 100%; } .midyan-field__label { display: block; margin-block-end: var(--wp--preset--spacing--8); font-size: var(--wp--preset--font-size--body-small); line-height: var(--wp--custom--line-height--body-small); color: var(--wp--preset--color--grey); } .midyan-field__control, .midyan-field__chosen { box-sizing: border-box; display: flex; align-items: center; inline-size: 100%; block-size: 60px; padding-inline: 16px; padding-block: 0; font-family: inherit; font-size: var(--wp--preset--font-size--body-small); line-height: var(--wp--custom--line-height--body-small); color: var(--wp--preset--color--charcoal); background-color: transparent; border: 1px solid var(--wp--preset--color--grey); border-radius: var(--wp--custom--radius--none); appearance: none; transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition); } textarea.midyan-field__control, .midyan-field__control--tall { display: block; block-size: 160px; padding-block: 16px; resize: vertical; } /* The design draws the example in the ink the answer will be written in. */ .midyan-field__control::placeholder { color: var(--wp--preset--color--charcoal); opacity: 1; } /* * The design draws the second state as a thicker edge. It is drawn inside the * box rather than by growing the border, which would move the text a pixel the * moment a field took focus. */ .midyan-field__control:focus-visible { border-color: var(--wp--preset--color--charcoal); box-shadow: inset 0 0 0 1px var(--wp--preset--color--charcoal); /* Transparent rather than absent, so a forced-colours mode still has one. */ outline: var(--wp--custom--focus-ring) solid transparent; outline-offset: 0; } /* --- The choice ---------------------------------------------------------- */ .midyan-field__select { position: relative; display: block; } .midyan-field__select::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: 20px; translate: 0 -50%; rotate: 90deg; inline-size: 16px; block-size: 14px; background-color: currentcolor; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; pointer-events: none; } select.midyan-field__control { padding-inline-end: 48px; } /* --- The attachment ------------------------------------------------------ */ /* * The native control is laid over the drawn box rather than replaced by it: * it keeps the keyboard, the label and the file dialogue a browser gives for * free, and the box carries the design. What has been chosen is written into * the box by the view script, which is the one thing the markup cannot say. */ .midyan-field__file { position: relative; display: block; } .midyan-field__control--file { position: relative; z-index: 1; block-size: 60px; border: 0; opacity: 0; cursor: pointer; } .midyan-field__chosen { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .midyan-field__file:focus-within .midyan-field__chosen { border-color: var(--wp--preset--color--charcoal); box-shadow: inset 0 0 0 1px var(--wp--preset--color--charcoal); } /* --- What is wrong ------------------------------------------------------- */ /* * The sheet draws this state as a thicker edge and a line of type beneath, both * in the only ink it has: there is no colour anywhere on it. The shape is kept * exactly as drawn and the colour is the one thing added, so a field that has * gone wrong reads as wrong at a glance rather than on inspection. */ .midyan-field.is-invalid .midyan-field__control, .midyan-field.is-invalid .midyan-field__chosen { border-color: var(--wp--custom--state--failed); box-shadow: inset 0 0 0 1px var(--wp--custom--state--failed); } .midyan-field__error { margin-block-start: var(--wp--preset--spacing--8); font-size: var(--wp--preset--font-size--caption); line-height: var(--wp--custom--line-height--caption); color: var(--wp--custom--state--failed); } /* * The answer stands where the form stood, and says which answer it is in its * own colour. The rule beside it is the only ink the design gives a message, * so the colour carries it rather than a filled panel the page has nowhere for. */ .midyan-form__notice { box-sizing: border-box; inline-size: 100%; margin-block: 0; padding-inline-start: var(--wp--preset--spacing--24); border-inline-start: 2px solid currentcolor; font-size: var(--wp--preset--font-size--body); line-height: var(--wp--custom--line-height--body); } .midyan-form__notice:not(:last-child) { margin-block-end: var(--wp--preset--spacing--24); } .midyan-form__notice--sent { color: var(--wp--custom--state--sent); } .midyan-form__notice--failed { color: var(--wp--custom--state--failed); } .midyan-form__trap { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* * The guard stands beside the button rather than above it. Set to show only * where someone has to answer it, it draws nothing at all, and nothing is a * row of its own above the button that would open a gap the design has not got. */ .midyan-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--24); } /* --- While it is being sent ---------------------------------------------- */ .midyan-form__form.is-sending { cursor: progress; } /* The arrow becomes the ring that says the page is waiting on the server. */ .midyan-form__form.is-sending .midyan-form__submit::after { inline-size: 14px; block-size: 14px; background-color: transparent; border: 2px solid currentcolor; border-block-start-color: transparent; border-radius: 50%; mask: none; } @media ( prefers-reduced-motion: no-preference ) { .midyan-form__form.is-sending .midyan-form__submit::after { animation: midyan-sending 700ms linear infinite; } } @keyframes midyan-sending { to { transform: rotate(1turn); } } /* -------------------------------------------------------------------------- Page not found One screen, the width of the window, with the header over it and no footer under it: there is nothing on this page to scroll to. -------------------------------------------------------------------------- */ .midyan-404 { min-block-size: 100svh; } /* * The one place in the theme that sets a size of its own. The design draws the * code at the same 162px on the phone as on the desktop — it is a graphic more * than a heading — so it does not move with the rest of the ladder. */ .midyan-404__code { margin-block: 0; font-size: 160px; /* Set close under the heading, as one title in two sizes. */ line-height: 0.96; font-weight: var(--wp--custom--font-weight--light); font-stretch: 120%; } /* The rule is drawn in the ink of the page it is on, not the grey of a page. */ .midyan-404__rule { color: inherit; } .midyan-404__cue { margin-block-start: calc(var(--wp--preset--spacing--24) + var(--wp--preset--spacing--32)); } /* * The copy runs from 16px on the phone to 24px on the desktop. Its leading does * not follow by one ratio — the design sets 26 against the first and 32 against * the second — so it takes the body leading at one end and the heading leading * at the other, both of them the system's own. */ .midyan-404__copy { font-size: clamp(1rem, 0.839rem + 0.661vw, 1.5rem); line-height: var(--wp--custom--line-height--h-4); } /* * Core sizes and centres a separator from a selector of its own, so this has * to carry the same weight to put the rule where the design draws it. */ .midyan-404__rule.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { inline-size: 52px; border-block-start: 1px solid currentcolor; border-block-end: 0; opacity: 1; /* The constrained layout centres every child of itself, and insists. */ margin-inline-start: 0 !important; margin-inline-end: auto !important; } /* * The cover sizes its inner container to its content so that it can place it, * which would take the copy off the column the rest of the site stands on. The * container takes the whole width instead, and the layout inside it holds the * column; the cover still does the placing from top to bottom. */ .midyan-404 > .wp-block-cover__inner-container { flex-grow: 1; /* The cover is already holding the gutter; this would hold a second one. */ padding-inline: 0; } @media ( max-width: 781px ) { .midyan-404 .midyan-404__inner { text-align: center; } .midyan-404__rule.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { margin-inline-start: auto !important; } .midyan-404 .wp-block-buttons { justify-content: center; } /* The design gives the one control the whole column on the phone. */ .midyan-404 .wp-block-button, .midyan-404 .wp-block-button > .wp-block-button__link { inline-size: 100%; } .midyan-404__copy { line-height: var(--wp--custom--line-height--body); } } /* -------------------------------------------------------------------------- The media centre The entries stand in threes, and the first of them opens the first page across the full width with its picture beside the words rather than over them. WordPress has already put the right entry there — a stuck post on the first page of the index, the newest where none is stuck — and marks every later page as paged, which is all this needs to know to leave those alone. A kind laid out as a mosaic is not a listing of cards at all, so it is left out of that; its own shape is further down. -------------------------------------------------------------------------- */ .midyan-media-card, .midyan-media-card__body { display: flex; flex-direction: column; } /* * Stacked, core's automatic side margins would shrink each child to the width * of its own content, and the rule that closes the card has none. */ .midyan-media-card > *, .midyan-media-card__body > * { margin-inline: 0 !important; } .midyan-media-card__body { flex: 1; } .midyan-media-card__image img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; } /* * A name takes two lines, as the design draws it. The newsroom writes them, * so one can run longer than that: it is cut at the second line rather than * pushing the date, the way in and the rule that closes the card below the * ones beside it. A name that takes one line keeps the second line's room, * so a row stands level however its names fall — which is what the cards on * the front page already do. */ .midyan-media-card__title { min-block-size: calc(2 * 1lh); font-size: var(--wp--preset--font-size--h-3); line-height: var(--wp--custom--line-height--h-3); letter-spacing: var(--wp--custom--letter-spacing--h-3); } /* * The cut is made on the link and not on the heading around it. A heading in * a card is one of a column, and a box counted in lines is turned back into * an ordinary block the moment a flex container is handed it. */ .midyan-media-card__title a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .midyan-media-card__date, .midyan-entry__date { color: var(--wp--preset--color--grey); text-transform: uppercase; } /* * The rule closes a card, so it sits at the foot however tall the card stands. * The slack above it can run out in the tallest of a row, so the gap the * design leaves under the button is held by the button itself. */ .midyan-media-card__rule { margin-block-start: auto; } .midyan-media-card__link { margin-block-end: var(--wp--preset--spacing--24); } /* * An entry that is the way to something published elsewhere. The arrow every * button in the design carries is turned out of the page rather than along * it, which says the link leaves the site before it is followed instead of * after. The same arrow, the same weight, the same box: it flips for Arabic * with every other arrow on the site, and leans with the hand the way they * all do. */ .midyan-media-card__away::after { mask-image: url('data:image/svg+xml;utf8,'); } .midyan-media-card__away:hover::after { translate: 4px -4px; } :where([dir="rtl"]) .midyan-media-card__away:hover::after { translate: -4px -4px; } .midyan-media-kind { margin-block-end: 0; } /* -------------------------------------------------------------------------- An entry in the media centre The trail, the name, the line that dates it and offers it on, and the picture: everything above what was written. The writing follows, and the three newest entries close the page. -------------------------------------------------------------------------- */ .midyan-entry > .wp-block-post-content { margin-block-start: var(--wp--custom--section--sm); } .midyan-entry > .midyan-media-more { margin-block-start: var(--wp--custom--section--md); padding-block-end: var(--wp--custom--section--md); } /* The line stands as tall as the marks on it, whichever side is the taller. */ .midyan-entry__meta { min-block-size: 52px; } /* * Core draws these four marks and knows what each of them is called. The * design squares them off and sets them in the page's ink. Under the hand one * empties out as every other filled control on the site does, which is why it * is drawn with the hairline it will need then; core's own answer there is to * grow the mark, which nothing else here does. */ .midyan-share .wp-social-link { box-sizing: border-box; inline-size: 52px; block-size: 52px; border: 1px solid var(--midyan-ink); border-radius: 0; background-color: var(--midyan-ink); color: var(--midyan-surface); transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition); } .midyan-share .wp-social-link a { inline-size: 100%; block-size: 100%; justify-content: center; padding: 0; } .midyan-share .wp-social-link:hover { background-color: var(--midyan-surface); color: var(--midyan-ink); transform: none; } @media ( prefers-reduced-motion: reduce ) { .midyan-share .wp-social-link { transition: none; } } /* -------------------------------------------------------------------------- Which page of the entries is being read The design counts the pages and offers four ways through them rather than listing them: the page before, the first, the page after, the last. The squares are the ones the gallery is pulled by, and are worn the same way. -------------------------------------------------------------------------- */ .midyan-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--24); margin-block-start: var(--wp--preset--spacing--32); } .midyan-pages__count { margin-block: 0; color: var(--wp--preset--color--charcoal); font-size: var(--wp--preset--font-size--body); line-height: var(--wp--custom--line-height--body); } .midyan-pages__steps { display: flex; gap: 14px; } .midyan-pages__step { box-sizing: border-box; display: grid; place-items: center; inline-size: 52px; block-size: 52px; border: 1px solid color-mix(in srgb, var(--wp--preset--color--grey) 14%, transparent); color: var(--wp--preset--color--charcoal); transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition), color var(--wp--custom--transition); } .midyan-pages__step::before { content: ""; inline-size: 16px; block-size: 14px; background-color: currentcolor; mask: var(--midyan-chevron) no-repeat center / contain; transition: translate var(--wp--custom--transition); } .midyan-pages__step--all::before { mask-image: var(--midyan-chevron-far); } .midyan-pages__step--on::before { scale: -1 1; } /* A mark that says which way is a mark that turns round with the writing. */ :where([dir="rtl"]) .midyan-pages__step--back::before { scale: -1 1; } :where([dir="rtl"]) .midyan-pages__step--on::before { scale: 1 1; } /* A page that is already being read is spent, as any other control is. */ .midyan-pages__step.is-spent { opacity: 0.4; } .midyan-pages__step:hover:not(.is-spent) { background-color: var(--wp--preset--color--charcoal); border-color: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--paper); } .midyan-pages__step--back:hover:not(.is-spent)::before { translate: -3px 0; } .midyan-pages__step--on:hover:not(.is-spent)::before { translate: 3px 0; } @media ( prefers-reduced-motion: reduce ) { .midyan-pages__step::before { transition: none; } } /* -------------------------------------------------------------------------- A kind laid out as a mosaic Coverage is read as pictures: four of them to a page, one tall beside one wide and two small, and nothing written over them until a hand arrives. The same card the other kinds are listed with, stood on its picture. -------------------------------------------------------------------------- */ .midyan-media-mosaic .midyan-media-list > .midyan-media-list__items { gap: 20px; } /* Everything stands on the picture, so the tile is what it all stands in. */ .midyan-media-mosaic .midyan-media-card { --midyan-ink: var(--wp--preset--color--paper); --midyan-surface: var(--wp--preset--color--charcoal); --midyan-tile-inset: var(--wp--preset--spacing--32); /* * How far the ground reaches in from each edge. A tile reads whatever * picture it is given, so it reaches as far as the words do — which in * a tile the size of a sixth of the page is most of it. */ --midyan-scrim-head: 30%; --midyan-scrim-hold: 32%; --midyan-scrim-foot: 58%; position: relative; block-size: 100%; overflow: hidden; color: var(--wp--preset--color--paper); } .midyan-media-mosaic .midyan-media-card__image { position: absolute; inset: 0; z-index: 0; } .midyan-media-mosaic .midyan-media-card__image a, .midyan-media-mosaic .midyan-media-card__image img { display: block; inline-size: 100%; block-size: 100%; aspect-ratio: auto; object-fit: cover; } /* * The ground the words are read against: darker at the two edges they stand * at and untouched between them, which is how the design draws it. */ .midyan-media-mosaic .midyan-media-card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(to bottom, rgb(0 0 0 / 55%), rgb(0 0 0 / 0%) var(--midyan-scrim-head)), linear-gradient(to top, rgb(0 0 0 / 60%) var(--midyan-scrim-hold), rgb(0 0 0 / 0%) var(--midyan-scrim-foot)); opacity: 0; transition: opacity var(--midyan-reveal); } /* * Core's own step between blocks is a margin, and a margin on a box pinned to * all four edges moves the box. Here nothing is stepped: every part of a tile * is placed against an edge of it. */ .midyan-media-mosaic .midyan-media-card__body, .midyan-media-mosaic .midyan-media-card__body > * { margin-block: 0 !important; } .midyan-media-mosaic .midyan-media-card__body { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 1fr auto; gap: var(--wp--preset--spacing--16); padding: var(--midyan-tile-inset); pointer-events: none; } .midyan-media-mosaic .midyan-media-card__body a { pointer-events: auto; } .midyan-media-mosaic .midyan-media-card__kind, .midyan-media-mosaic .midyan-media-card__rule { display: none; } .midyan-media-mosaic .midyan-media-card__date { grid-area: 1 / 1 / 2 / 3; color: inherit; } .midyan-media-mosaic .midyan-media-card__title { grid-area: 3 / 1 / 4 / 2; align-self: end; min-block-size: 0; } .midyan-media-mosaic .midyan-media-card__link { grid-area: 3 / 2 / 4 / 3; align-self: end; justify-self: end; margin-block-end: 0; max-inline-size: 100%; } /* * A tile is a picture until a hand is on it. Then the ground arrives, the * date comes down from over the top edge and the name and the way in rise * from under the bottom one, each a moment after the last. * * Carried on the tile's own edges: the tile hides what runs past them, so * each of them is put a whole step outside before it is asked to come in. */ @media ( hover: hover ) { .midyan-media-mosaic .midyan-media-card__date, .midyan-media-mosaic .midyan-media-card__title, .midyan-media-mosaic .midyan-media-card__link { opacity: 0; transition: translate var(--midyan-reveal), opacity var(--midyan-reveal); } .midyan-media-mosaic .midyan-media-card__date { translate: 0 calc(-100% - var(--midyan-tile-inset)); } .midyan-media-mosaic .midyan-media-card__title, .midyan-media-mosaic .midyan-media-card__link { translate: 0 calc(100% + var(--midyan-tile-inset)); } .midyan-media-mosaic .midyan-media-card:hover::after, .midyan-media-mosaic .midyan-media-card:focus-within::after { opacity: 1; } .midyan-media-card:hover .midyan-media-card__date, .midyan-media-card:hover .midyan-media-card__title, .midyan-media-card:hover .midyan-media-card__link, .midyan-media-card:focus-within .midyan-media-card__date, .midyan-media-card:focus-within .midyan-media-card__title, .midyan-media-card:focus-within .midyan-media-card__link { translate: 0 0; opacity: 1; } .midyan-media-mosaic .midyan-media-card:hover .midyan-media-card__title, .midyan-media-mosaic .midyan-media-card:focus-within .midyan-media-card__title { transition-delay: 70ms; } .midyan-media-mosaic .midyan-media-card:hover .midyan-media-card__link, .midyan-media-mosaic .midyan-media-card:focus-within .midyan-media-card__link { transition-delay: 140ms; } @media ( prefers-reduced-motion: reduce ) { .midyan-media-mosaic .midyan-media-card__date, .midyan-media-mosaic .midyan-media-card__title, .midyan-media-mosaic .midyan-media-card__link { translate: none; transition: opacity var(--wp--custom--transition); } } } /* * The shape, at the three widths it can be read at. * * The design draws the mosaic on a nineteen-twenty page: one tall tile beside * one wide and two small. The two small ones are a sixth of the page, and a * sixth of a smaller page cannot hold a name and a labelled way in at once — * so the shape is only drawn where it fits, and below that the four tiles * stand as equals: two and two on a tablet, one under another on a phone. */ @media ( min-width: 1600px ) { .midyan-media-mosaic .midyan-media-list > .midyan-media-list__items { grid-template-columns: 98fr 29fr 29fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1600 / 620; } .midyan-media-mosaic .midyan-media-list__items > li:nth-child(1) { grid-area: 1 / 1 / 3 / 2; } .midyan-media-mosaic .midyan-media-list__items > li:nth-child(2) { grid-area: 1 / 2 / 2 / 4; } .midyan-media-mosaic .midyan-media-list__items > li:nth-child(3) { grid-area: 2 / 2 / 3 / 3; } .midyan-media-mosaic .midyan-media-list__items > li:nth-child(4) { grid-area: 2 / 3 / 3 / 4; } /* The tall tile has room between its words: the ground stays at the edges. */ .midyan-media-mosaic .midyan-media-list__items > li:nth-child(1) .midyan-media-card { --midyan-scrim-head: 12%; --midyan-scrim-hold: 7%; --midyan-scrim-foot: 15%; } /* Only the tall tile is set at a name's full size. */ .midyan-media-mosaic .midyan-media-list__items > li:nth-child(n+2) .midyan-media-card { --midyan-tile-inset: var(--wp--preset--spacing--24); } .midyan-media-mosaic .midyan-media-list__items > li:nth-child(n+2) .midyan-media-card__title { font-size: var(--wp--preset--font-size--body-small); line-height: var(--wp--custom--line-height--body-small); letter-spacing: var(--wp--custom--letter-spacing--none); } /* The last two are the narrow ones: the way in goes under the name. */ .midyan-media-mosaic .midyan-media-list__items > li:nth-child(n+3) .midyan-media-card { --midyan-tile-inset: var(--wp--preset--spacing--16); } .midyan-media-mosaic .midyan-media-list__items > li:nth-child(n+3) .midyan-media-card__body { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; } .midyan-media-mosaic .midyan-media-list__items > li:nth-child(n+3) .midyan-media-card__date { grid-area: 1 / 1 / 2 / 2; } .midyan-media-mosaic .midyan-media-list__items > li:nth-child(n+3) .midyan-media-card__title { grid-area: 3 / 1 / 4 / 2; } .midyan-media-mosaic .midyan-media-list__items > li:nth-child(n+3) .midyan-media-card__link { grid-area: 4 / 1 / 5 / 2; justify-self: start; } } /* * A sixth of the page is a sixth of whatever the page is. Until the page is * wide enough for the way in to be drawn at its own size, it is drawn at the * size the tile has room for. */ @media ( min-width: 1600px ) and ( max-width: 1799px ) { .midyan-media-mosaic .midyan-media-list__items > li:nth-child(n+3) .midyan-media-card__link { padding-inline: var(--wp--preset--spacing--16); font-size: var(--wp--preset--font-size--caption); } } /* Narrower than the shape but wider than a phone: four equal tiles. */ @media ( min-width: 782px ) and ( max-width: 1599px ) { .midyan-media-mosaic .midyan-media-list > .midyan-media-list__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } .midyan-media-mosaic .midyan-media-list__items > li { aspect-ratio: 3 / 2; } } /* A phone reads them one under another. */ @media ( max-width: 781px ) { .midyan-media-mosaic .midyan-media-list > .midyan-media-list__items { grid-template-columns: minmax(0, 1fr); } .midyan-media-mosaic .midyan-media-list__items > li { aspect-ratio: 3 / 2; } } /* * Where the tiles are equals the name and the way in stand one over the * other, which is what fits a tile of any width. */ @media ( max-width: 1599px ) { .midyan-media-mosaic .midyan-media-card { --midyan-tile-inset: var(--wp--preset--spacing--24); } .midyan-media-mosaic .midyan-media-card__body { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; } .midyan-media-mosaic .midyan-media-card__date { grid-area: 1 / 1 / 2 / 2; } .midyan-media-mosaic .midyan-media-card__title { grid-area: 3 / 1 / 4 / 2; } .midyan-media-mosaic .midyan-media-card__link { grid-area: 4 / 1 / 5 / 2; justify-self: start; } } /* Where there is no hand to arrive, the tile is read as it stands. */ @media ( hover: none ) { .midyan-media-mosaic .midyan-media-card::after { opacity: 1; } } @media ( max-width: 781px ) { .midyan-media-list__items.is-layout-grid { grid-template-columns: minmax(0, 1fr); } } @media ( min-width: 782px ) { body:not(.paged):not(.midyan-media-mosaic) .midyan-media-list > .midyan-media-list__items > li:first-child { grid-column: 1 / -1; } body:not(.paged):not(.midyan-media-mosaic) .midyan-media-list > .midyan-media-list__items > li:first-child .midyan-media-card__title { min-block-size: 0; font-size: var(--wp--preset--font-size--h-1); line-height: var(--wp--custom--line-height--h-1); letter-spacing: var(--wp--custom--letter-spacing--h-1); } /* The entry at the head is not one of a row, so it is not cut to one. */ body:not(.paged):not(.midyan-media-mosaic) .midyan-media-list > .midyan-media-list__items > li:first-child .midyan-media-card__title a { display: block; overflow: visible; } body:not(.paged):not(.midyan-media-mosaic) .midyan-media-list > .midyan-media-list__items > li:first-child .midyan-media-card__rule { display: none; } body:not(.paged):not(.midyan-media-mosaic) .midyan-media-list > .midyan-media-list__items > li:first-child .midyan-media-card__link { margin-block-end: 0; } } /* * The picture stands beside the words rather than over them once there is * room for both. A name set at this size needs the whole of the column the * design gives it: narrower than this, the longest word in it is wider than * the column and the page breaks the word in half rather than the line. So * below this the entry still leads, across the full width, with its picture * over its words as every other card has. */ @media ( min-width: 1366px ) { body:not(.paged):not(.midyan-media-mosaic) .midyan-media-list > .midyan-media-list__items > li:first-child .midyan-media-card { flex-direction: row; gap: var(--wp--preset--spacing--48); align-items: center; } /* * The picture is written first, because that is the order a card stands * them in. Here the words come first and the picture follows, and a * release turns the two around again, which is what its kind is asked. */ body:not(.paged):not(.midyan-media-mosaic) .midyan-media-list > .midyan-media-list__items > li:first-child .midyan-media-card__image { flex: 0 0 58%; order: 1; margin-block: 0; } /* Nine hundred and twenty-three across by five hundred and forty down. */ body:not(.paged):not(.midyan-media-mosaic) .midyan-media-list > .midyan-media-list__items > li:first-child .midyan-media-card__image img { aspect-ratio: 12 / 7; } body.midyan-lead-left:not(.paged) .midyan-media-list > .midyan-media-list__items > li:first-child .midyan-media-card__image { order: -1; } } /* * A section whose entries are files. * * The design lays the rows against one picture of the file being read, and * draws that picture exactly as tall as three rows. So the two are one grid, * seven of its columns against five, and the picture is told to be as tall as * whatever stands beside it rather than given a height of its own. */ .midyan-files { /* * The row and what stands in it, in one place: the picture beside the * list is drawn from the first two, so the list cannot be loosened or * tightened without the picture following. */ --midyan-file-row: 132px; --midyan-file-gap: var(--wp--preset--spacing--32); --midyan-file-pad: var(--wp--preset--spacing--24); --midyan-file-step: clamp(var(--wp--preset--spacing--32), 5vw, 88px); --midyan-file-mark: 76px; --midyan-file-way: 48px; --midyan-file-name: var(--wp--preset--font-size--h-4); --midyan-file-said: var(--wp--preset--font-size--body-small); display: grid; gap: var(--wp--preset--spacing--32); grid-template-columns: 7fr 5fr; align-items: start; } .midyan-files__list { display: flex; flex-direction: column; gap: var(--midyan-file-gap); margin: 0; padding: 0; list-style: none; } .midyan-file__row { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-content: center; align-items: center; column-gap: var(--midyan-file-step); row-gap: var(--wp--preset--spacing--8); box-sizing: border-box; min-block-size: var(--midyan-file-row); padding: var(--midyan-file-pad); border: 2px solid color-mix(in srgb, var(--wp--preset--color--grey) 26%, transparent); background-color: var(--wp--preset--color--white, #fff); cursor: pointer; transition: border-color var(--wp--custom--transition); } /* * Three states, told apart by how dark the edge is: at rest, under the * hand, and the one the picture beside the list is showing. Drawn at rest * the weight the design draws, but lightened — the row the picture belongs * to has to be the darkest thing in the list, and it cannot be where every * row is already as dark as it can go. */ .midyan-file__row:hover { border-color: color-mix(in srgb, var(--wp--preset--color--grey) 60%, transparent); } .midyan-file__row:focus-within { border-color: var(--wp--preset--color--grey); } /* * Where each part falls. The mark and the controls stand through both rows, * the name over the count between them — which is the design, and which the * phone then rearranges without a second markup. */ .midyan-file__mark { grid-area: 1 / 1 / 3 / 2; } .midyan-file__name { grid-area: 1 / 2 / 2 / 3; } .midyan-file__said { grid-area: 2 / 2 / 3 / 3; } .midyan-file__ways { grid-area: 1 / 3 / 3 / 4; } /* The cover of the file, or the mark of a file where there is no cover. */ .midyan-file__mark { display: grid; place-items: center; overflow: hidden; inline-size: var(--midyan-file-mark); block-size: calc(var(--midyan-file-mark) + 4px); margin: 0; border-radius: 12px; background-color: color-mix(in srgb, var(--wp--preset--color--grey) 12%, transparent); } .midyan-file__mark img { inline-size: 100%; block-size: 100%; object-fit: cover; } .midyan-file__mark.is-blank::before { content: ""; inline-size: 34px; block-size: 42px; background-color: var(--wp--preset--color--grey); mask: var(--midyan-sheet) no-repeat center / contain; } .midyan-file__name { min-inline-size: 0; margin: 0; font-size: var(--midyan-file-name); font-weight: 400; line-height: 1.2; text-transform: uppercase; } .midyan-file__said { display: flex; align-items: center; gap: var(--wp--preset--spacing--8); margin: 0; color: var(--wp--preset--color--charcoal); font-size: var(--midyan-file-said); font-weight: 500; } .midyan-file__said::before { content: ""; flex: none; inline-size: 14px; block-size: 18px; background-color: currentcolor; mask: var(--midyan-leaf) no-repeat center / contain; } .midyan-file__ways { display: flex; gap: 12px; margin: 0; } .midyan-file__way { display: grid; place-items: center; box-sizing: border-box; inline-size: var(--midyan-file-way); block-size: var(--midyan-file-way); border: 1px solid color-mix(in srgb, var(--wp--preset--color--grey) 14%, transparent); background-color: var(--wp--preset--color--paper); color: var(--wp--preset--color--charcoal); cursor: pointer; transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition), color var(--wp--custom--transition); } .midyan-file__way::before { content: ""; background-color: currentcolor; } .midyan-file__way--read::before { inline-size: 20px; block-size: 14px; mask: var(--midyan-eye) no-repeat center / contain; } .midyan-file__way--take::before { inline-size: 14px; block-size: 17px; mask: var(--midyan-down) no-repeat center / contain; } .midyan-file__way:hover { border-color: var(--wp--preset--color--charcoal); background-color: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--paper); } /* Which row the picture beside the list is showing. */ .midyan-file.is-standing .midyan-file__row, .midyan-file.is-standing .midyan-file__row:hover { border-color: var(--wp--preset--color--charcoal); cursor: default; } .midyan-files__cover { margin: 0; /* Three rows and the two gaps between them, which is what it is drawn to. */ block-size: calc((var(--midyan-file-row) * 3) + (var(--midyan-file-gap) * 2)); } .midyan-files__cover img { inline-size: 100%; block-size: 100%; object-fit: cover; } /* * The file itself, full screen. * * A dialog opened with showModal() brings the rest with it: the top layer, a * backdrop, Escape, the focus held inside, and the page behind made inert. */ .midyan-file-view { display: grid; grid-template-rows: auto 1fr; inline-size: min(1100px, 92vw); block-size: min(90vh, 1400px); max-block-size: none; max-inline-size: none; padding: 0; border: 0; background-color: var(--wp--preset--color--charcoal); } /* * Written out rather than mixed from the palette: what a backdrop inherits * has moved between versions of the browsers, and a backdrop that inherits * nothing is a page with no backdrop at all. */ .midyan-file-view::backdrop { background-color: rgb(27 29 30 / 88%); } /* * A bar of its own above the frame. The reader inside the frame is the * browser's, and it draws a row of its own controls along its top edge; * anything of ours laid over that would sit on top of them. */ .midyan-file-view__bar { display: flex; align-items: center; gap: var(--wp--preset--spacing--16); padding-inline: var(--wp--preset--spacing--24); padding-block: var(--wp--preset--spacing--16); color: var(--wp--preset--color--paper); } .midyan-file-view__name { flex: 1; min-inline-size: 0; margin: 0; overflow: hidden; font-size: var(--wp--preset--font-size--label); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .midyan-file-view__frame { display: block; inline-size: 100%; block-size: 100%; border: 0; } .midyan-file-view__close, .midyan-file-view__away { display: grid; flex: none; place-items: center; inline-size: 40px; block-size: 40px; border: 1px solid color-mix(in srgb, var(--wp--preset--color--paper) 28%, transparent); background-color: transparent; color: inherit; cursor: pointer; transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition); } .midyan-file-view__close:hover, .midyan-file-view__away:hover { background-color: var(--wp--preset--color--paper); color: var(--wp--preset--color--charcoal); } .midyan-file-view__close { font-size: 20px; line-height: 1; } .midyan-file-view__away::before { content: ""; inline-size: 14px; block-size: 17px; background-color: currentcolor; mask: var(--midyan-down) no-repeat center / contain; } /* * Under the width the grid is drawn at, the row has less to stand in. The * design settles it at 1600 and nothing below that is drawn, so the row is * brought in rather than left to spill: a smaller name, a smaller mark, and * less air around all of it. */ @media (1200px <= width <= 1599px) { .midyan-files { --midyan-file-row: 104px; --midyan-file-gap: var(--wp--preset--spacing--24); --midyan-file-step: var(--wp--preset--spacing--24); --midyan-file-mark: 60px; --midyan-file-way: 44px; --midyan-file-name: var(--wp--preset--font-size--h-5); } } /* * Below the width at which a name still sets on one line, the picture beside * the list has nowhere to stand: five of twelve columns is a picture too small * to read and a list too narrow to write in. So the two columns become one and * every row carries its own cover, in the place of the mark — which says * nothing a reader needs where every file is the same kind. * * The row itself is unchanged: the mark, the name and the two controls still * stand on one line, because the list now has the whole width to do it in. */ @media (width <= 1199px) { .midyan-files { grid-template-columns: 1fr; } .midyan-files__cover { display: none; } .midyan-files { --midyan-file-row: 112px; --midyan-file-gap: var(--wp--preset--spacing--24); --midyan-file-step: var(--wp--preset--spacing--32); --midyan-file-mark: 64px; --midyan-file-way: 44px; --midyan-file-name: var(--wp--preset--font-size--h-5); } .midyan-file__mark { block-size: var(--midyan-file-mark); } /* Nothing stands here: every row carries its own picture. */ .midyan-file.is-standing .midyan-file__row { border-color: color-mix(in srgb, var(--wp--preset--color--grey) 26%, transparent); } } /* * A phone has the least of all. Only here do the two controls come off the * line the name is on, because only here is there not room for both. */ @media (width <= 600px) { .midyan-files { --midyan-file-row: 0px; --midyan-file-mark: 72px; --midyan-file-way: 42px; --midyan-file-pad: var(--wp--preset--spacing--16); --midyan-file-said: var(--wp--preset--font-size--label); } .midyan-file__row { column-gap: var(--wp--preset--spacing--16); row-gap: var(--wp--preset--spacing--16); } /* * The name takes the width the controls had, and they come down beside * the count. Anything else leaves the space under the mark empty. */ .midyan-file__name { grid-area: 1 / 2 / 2 / 4; font-size: var(--wp--preset--font-size--body-large); } .midyan-file__ways { grid-area: 2 / 3 / 3 / 4; align-self: end; } .midyan-file__mark { align-self: start; } }