@charset "UTF-8"; /* * / — light-DOM styles. * Copyright (c) 2001-2026 Stephane D'Alu — http://www.sdalu.com/ * * Pairs with mxw-gallery.js (shadow chrome: lightbox dialog, * resizer slider, filmstrip). This file only styles the light DOM: * the photos, layouts, captions and overlays. Design + class mapping: * /web/MoXoW/doc/GALLERY.md. * * Everything lives in the single layer `mxw.gallery` — one sublayer per * component, as mxw-back-to-top, mxw-print, mxw-scm, mxw-map and * mxw-climate-chart do — so ANY site rule in a layer `mxw` precedes * (theme, site…) overrides it without !important, and an unlayered one * always does. The order is MoXoW's, declared inline and first. * * Unlike its siblings this sheet is not injected by its script: the * gallery add-on emits the itself (g:css-path in * MoXoW/xsl/add-on/gallery.xsl), so a page that has the gallery has the * stylesheet. To pull it into a layer of your own instead: * @import url("/moxow/components/mxw-gallery.css") layer(components); * * Theming knobs (set them on mxw-gallery or any ancestor): * --mxw-gallery-frame-width grid frame width (default 130px) * --mxw-gallery-frame-height grid frame height (default: the * frame width — set it for non-square frames) * --mxw-gallery-gap gap between photos (default 1em) * --mxw-gallery-column-width masonry column width (default 250px) * --mxw-gallery-row-height justified target row height (default 200px) * --mxw-gallery-strip-height strip thumbnail height (default 120px) * --mxw-gallery-wall-min wall min column width (default 150px) * Deck (layout="deck") — one photograph at a time: * --mxw-gallery-deck-height tallest a picture may be (default 60svh) * The picture's WIDTH is derived from it and the * picture's own ratio, so nothing is letterboxed. * --mxw-gallery-deck-gap rows of the NO-SCRIPT column (default: the gap) * With the script running the deck is one stacked * row and the placard is flush against it, so this * only spaces the column the deck degrades to. * --mxw-gallery-deck-fade cross-fade between photographs (default 800ms; * the fade="" attribute overrides it per deck) * --mxw-gallery-deck-hold how long a photograph stays up under * [autoplay] (default 10000ms; the hold="" * attribute overrides it per deck) * The PLACARD: the deck's chrome is one strip flush with the picture's * bottom edge, the width of the picture and not of the gallery — a * label under a print, not a toolbar under a form. Its top rule IS the * progress bar (filled part / hairline track); below it, three zones on * a 1fr auto 1fr grid: the counter at the inline start, the dots * optically centred, prev/pause/next at the inline end. * The defaults are deliberately QUIET and theme-neutral — a ground * mixed out of currentcolor, a rule derived from it. A site theme * (mat board, brass rule…) sets these; the framework ships no palette. * --mxw-gallery-deck-placard-background the strip's ground (5% of the ink) * --mxw-gallery-deck-placard-color the strip's ink (default currentcolor) * --mxw-gallery-deck-placard-padding-inline strip side padding (0.6em) * --mxw-gallery-deck-placard-padding-block below the rule, and under * the zones (0.45em) * --mxw-gallery-deck-placard-gap between the three zones (0.75em) * --mxw-gallery-deck-placard-radius the strip's two BOTTOM corners * (default 0: the top edge is the picture's) * --mxw-gallery-deck-placard-rule-thickness the top rule (2px) * --mxw-gallery-deck-placard-rule-color the filled part (default: the accent) * --mxw-gallery-deck-placard-rule-track the unfilled hairline (20% ink) * --mxw-gallery-deck-control-size prev/next/pause box, floored at * the 24px pointer target (2.2rem) * --mxw-gallery-deck-control-gap gap between the controls (0.5em) * --mxw-gallery-deck-control-color glyph ink (default currentcolor) * --mxw-gallery-deck-control-background glyph ground (default none: the * controls are bare marks, with no box of their own) * --mxw-gallery-deck-dot-size pager dot diameter (0.6em) * --mxw-gallery-deck-dot-color pager dot ink (default currentcolor) * --mxw-gallery-deck-dot-current-color the current dot (default: the accent) * --mxw-gallery-deck-count-size "3 / 15" counter type size (0.85rem) * --mxw-gallery-deck-count-color counter ink (default currentcolor) * The deck's three corner marks: the licence and the author a * photograph carries, along the picture's bottom, and the gallery's * own logo (the .mxw-gallery-logo child) at its top. Deck only: no * other layout shows the logo, and in the others the licence and the * author are 14px thumbnail badges revealed on hover. * --mxw-gallery-deck-mark-size height of all three, floored * at the 24px pointer target (7%) * --mxw-gallery-deck-mark-inset distance from the picture's * bottom corners (0.5%) * --mxw-gallery-deck-logo-size the logo alone, if it should * differ (the mark size above) * --mxw-gallery-deck-logo-inset-inline distance from the picture's * inline start (0.5%) * --mxw-gallery-deck-logo-inset-block distance from its top (1%) * (the percentages are of the PICTURE, as mxw-hero's marks were of the * hero frame, so the mark keeps its proportions on any screen) * --mxw-gallery-caption-gap gap between a thumb and its caption (1ex) * Popover caption placement (captions="popover"): * --mxw-gallery-caption-width caption box width (default max-content) * --mxw-gallery-caption-height caption box height (default auto) * --mxw-gallery-caption-top top inset (default anchor(bottom)) * --mxw-gallery-caption-bottom bottom inset (default auto) * --mxw-gallery-caption-translate self-offset (default -50% 0) * --mxw-gallery-caption-margin caption margin box (default: gap on top) * --mxw-gallery-caption-place place-content of text (default start) * --mxw-gallery-caption-lines with-caption-centered ellipsis clamp (5) * --mxw-gallery-caption-anchor popover anchor: --mxw-gallery-pic * (the picture, default) or --mxw-gallery-frame (frame box) * Ready-made modifiers (add the class on the gallery): * with-caption-inside photo-width band at the picture bottom * with-caption-centered fills the picture, text centred in the middle * with-caption-none no caption (wins over any caption default) * with-caption-on-picture anchor the popover to the picture (default) * with-caption-on-frame anchor the popover to the frame / layout box * --mxw-gallery-frame-background grid frame background * --mxw-gallery-grid-border grid picture border shorthand * --mxw-gallery-hover-color hover accent * (the theme's mat ribbon uses its own --mxw-gallery-border-width) * * Per-photo: --mxw-gallery-ratio holds the picture aspect ratio (e.g. 3/2). * The XSL emits it inline (style="--mxw-gallery-ratio: 3/2") so justified and * masonry layouts reserve space with no JS and no layout shift; the * component fills it from the ratio="" attribute as a fallback. * (An inline custom property, not typed attr(): attr(type()) is still * Chrome-only.) */ @layer mxw.gallery { mxw-gallery { display: flex; flex-wrap: wrap; gap: var(--mxw-gallery-gap, 1em); } mxw-photo { position: relative; display: block; /* the picture wrapper: an when the thumb links, an inert
otherwise (see add-on/gallery.xsl). Both carry class="picture", so every layout / decoration / anchor rule targets the wrapper and the , never the tag — no bare- special-casing. */ & > .mxw-picture { display: block; text-decoration: none; } & img { display: block; max-inline-size: 100%; max-block-size: 100%; aspect-ratio: var(--mxw-gallery-ratio, auto); /* safety net: if a layout ever hands the img a box that does not * match the picture, letterbox rather than stretch */ object-fit: contain; } } /*== Layouts =======================================================*/ /* Grid: fixed square frames, picture letter-boxed inside — replaces .gallery.default / .exhibition / .imgbrowse (theme via the knobs). */ mxw-gallery[layout="grid"] mxw-photo { & > .mxw-picture { display: flex; align-items: center; justify-content: center; /* A frame is a fixed box by default. A fluid layout -- one that hands the gallery a grid and lets each frame fill its track -- cannot state a height, since it does not know the width; it sets --mxw-gallery-frame-ratio and --mxw-gallery-frame-height: auto instead, and the height follows the width. */ inline-size: var(--mxw-gallery-frame-width, 130px); block-size: var(--mxw-gallery-frame-height, var(--mxw-gallery-frame-width, 130px)); aspect-ratio: var(--mxw-gallery-frame-ratio, auto); background: var(--mxw-gallery-frame-background, transparent); } /* the frame border decorates the picture itself */ & img { /* Fill the cell in BOTH axes so object-fit does the * letterboxing. Leaving the block size to aspect-ratio looks * equivalent until a theme borders the picture: aspect-ratio * sizes the BORDER box, so the mat is counted inside the ratio * and the content box comes out off-ratio — contain then * letterboxes against the mat itself, showing a sliver of it * down the long edges. Two definite sizes take the ratio out * of the equation; the cell is the frame, contain fits to it. */ inline-size: 100%; block-size: 100%; border: var(--mxw-gallery-grid-border, none); } &:hover img { border-color: var(--mxw-gallery-hover-color, currentcolor); } } /* Masonry: CSS multi-columns (native masonry layout is not yet cross-browser) — replaces #gallery-travel-log and .waterfall. */ mxw-gallery[layout="masonry"] { display: block; column-width: var(--mxw-gallery-column-width, 250px); column-gap: var(--mxw-gallery-gap, 1em); & mxw-photo { margin-block-end: var(--mxw-gallery-gap, 1em); break-inside: avoid; /* Same trap as the strip: aspect-ratio governs the BORDER box, so with a mat drawn on the picture the ratio counts the mat in and the content left inside comes out off-ratio, 1.524 against a 1.501 photograph here, which contain shows as 1.95px of mat down each long edge. The column already gives a definite width; letting the picture set its own height against it keeps the content box true. */ & img { inline-size: 100%; aspect-ratio: auto; } } } /* Justified rows — replaces .stretched-board. Each photo's flex values derive from its aspect ratio, so a row of mixed portrait/ landscape pictures shares one height and fills the line. */ mxw-gallery[layout="justified"] { & mxw-photo { flex-grow: calc(var(--mxw-gallery-ratio, 1) * 100); flex-basis: calc(var(--mxw-gallery-ratio, 1) * var(--mxw-gallery-row-height, 200px)); /* pack lines by flex-basis alone: the min-width:auto floor would re-inflate an item to its image's natural width as each lazy image loads, re-wrapping the rows under a scroll in progress. */ min-inline-size: 0; & img { inline-size: 100%; /* height comes from inline-size + the aspect ratio; a percentage block-size here would depend on the row height, which depends on this image — a circular height that browsers resolve to a wrong (short) value, capping the page scroll. */ block-size: auto; object-fit: cover; } } /* Oversized spacer keeps the last, incomplete row left-aligned instead of stretching its photos to fill the line. */ &::after { content: ""; flex-grow: 1000000; } } /* Inline strip — replaces .gallery.inline and .g-blog-pics. A centred flex row with gap. (This works now that the srcset carries no sizes="auto": with the picture's true ratio restored, a flex item sizes to max-block-size x ratio, not the 300px default object width that used to blow every cell out.) */ mxw-gallery[layout="strip"] { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--mxw-gallery-gap, 1em); & mxw-photo { flex: 0 1 auto; min-inline-size: 0; /* may shrink below content on a tight line */ } & mxw-photo img { /* height caps at the strip height and width follows the ratio; * when the line is too narrow the base max-inline-size:100% * shrinks the width and the height scales DOWN with it */ inline-size: auto; block-size: auto; max-block-size: var(--mxw-gallery-strip-height, 120px); /* The same trap the grid cell fell into, and it needs the opposite * remedy. aspect-ratio governs the BORDER box, so with a theme * that draws a mat on the picture the ratio counted the mat in: * 163.2 by 108.8 outside came to 1.500 while the content left * inside was 1.540 against a 1.501 photograph, and contain fitted * to the short axis and left 2px of mat showing down each long * edge. * * The grid answered with two definite sizes, which a strip cannot * have: its width has to stay auto so a narrow line can shrink it. * Dropping the ratio does the same job here. It is only there to * reserve space before the picture loads, which is the justified * and masonry layouts' problem rather than this one, and with it * gone the picture's own ratio governs its content box, which is * what contain measures against. */ aspect-ratio: auto; } } /* Full-bleed wall — replaces .g-picture-wall. */ mxw-gallery[layout="wall"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--mxw-gallery-wall-min, 150px), 1fr)); gap: 0; & mxw-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; } } /* List: captions only — replaces .gallery-as-list and the old caption-only .compact-view. */ mxw-gallery[layout="list"] { display: block; & mxw-photo { & > .mxw-picture, & [slot="description"] { display: none; } & [slot="headline"] { display: block; } } } /* Deck: one photograph at a time, stepped through — the arrangement is a STACK, not a row, so the layout is a one-column grid whose photos all sit in row 1 and whose chrome (progress bar, control bar) takes the rows below. The component appends that chrome to the LIGHT DOM, as it already appends the credit marks and the [selectable] button, which is why every rule for it is here rather than in the script's shadow sheet — and why every rule is scoped under mxw-gallery[layout="deck"] and can reach no other layout. Two halves, deliberately: - the SIZING half is unconditional. With no javascript nothing stacks and nothing is hidden: the grid puts each photograph on its own row, at the same generous size, and the deck degrades to a column of big pictures with working links. Nothing is empty and nothing is dead. - the STACKING half hangs off :defined, which is true exactly when the element has upgraded, i.e. when there is a script to drive it. CSS cannot tell "javascript is off" from "the module has not run yet", and there is no third state to test, so a load paints the no-JS column until the module runs. Measured on a real page over several loads: the upgrade lands 24ms, 52ms and 87ms after first contentful paint — one to five frames of column before the deck closes up, the worst of it on a cold cache. It is the price of degrading to something real rather than to an empty box. The photo box is sized to the picture, not stretched to the row: its width is the height cap multiplied by the picture's own ratio, clamped to the row. That way the height cap never has to letterbox (the trap documented on the grid and strip layouts above), the box is definite before the picture loads (no layout shift), and the absolutely-positioned licence / author marks land on the picture's corners rather than out at the edges of an empty band. */ mxw-gallery[layout="deck"] { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--mxw-gallery-deck-gap, var(--mxw-gallery-gap, 1em)); & > mxw-photo { inline-size: min(100%, calc(var(--mxw-gallery-deck-height, 60svh) * var(--mxw-gallery-ratio, 1))); text-align: center; } & mxw-photo img { inline-size: 100%; block-size: auto; aspect-ratio: var(--mxw-gallery-ratio, auto); } } /* The stack, and the cross-fade across it. visibility, not display: it animates as a discrete step at the end of the fade, it keeps the box in the grid so the deck's height is the tallest photograph and never jumps, and it takes the hidden photographs out of the accessibility tree AND out of the tab order — so the deck offers the keyboard exactly one photograph, the one on screen. They stay in the light DOM either way, which is what a crawler reads. The stack is aligned to its BOTTOM, and the row gap is closed: the placard below it is attached to the picture's bottom edge, so print and label have to read as one object. With one orientation that is what centring already gave (every picture is the height cap); with a deck mixing portrait and landscape it is what keeps the label touching the picture instead of floating under the tallest one, and the slack all goes above. --mxw-gallery-deck-gap keeps its meaning for the no-script column, which is a real stack of rows. */ mxw-gallery[layout="deck"]:defined { row-gap: 0; & > mxw-photo { grid-area: 1 / 1; align-self: end; opacity: 0; visibility: hidden; transition: opacity var(--mxw-gallery-deck-fade, 800ms) ease, visibility 0s linear var(--mxw-gallery-deck-fade, 800ms); } & > mxw-photo.is-current { opacity: 1; visibility: visible; transition: opacity var(--mxw-gallery-deck-fade, 800ms) ease, visibility 0s; } } /*-- The deck's logo mark ------------------------------------------* The container's own credit — the site's logo, in the picture's TOP corner, where the licence and the author a photograph carries sit along its bottom. had the same three marks and this is the third of them; unlike the other two it belongs to the gallery, not to any one picture, so the page writes it as a child of the gallery: