/* Gallery (.gallery; Figma Work "WORK TEMPL 5" 269:1176…1310): a stacked gallery. One per project on the Work page; also a story `gallery` block, though no case study uses one now (they use the carousel figure, /shared/story.css). A wide image, then (optionally) a title, a description and a category, then a rule. On black. Behaviour: /shared/gallery.js. One image: it fills the row. Several (.is-multi): the image fills most of the row and the next one peeks in at the right edge. Hovering the gallery (or focusing it) shows a white arrow box; it eases the next image in, and from the second image on a left arrow shows too. Each arrow hides at its end. Touch screens swipe; there are no arrows. The image row (.gallery__stage and in it) works in any [data-gallery] host with .is-multi when it has several images: the carousel figure (/shared/story.css) uses it too and only sets the variables below. Markup (generated from data by /build.py: case-study `gallery` blocks and /work/gallery.json):
    • …
[ ]
[
[

] [

] [

]

]
Fields: title?, description?, category?, link? (makes the title a link), images[] of { image, alt, position? }. Geometry (Figma, px at 1440): the image box is 644 tall and starts at --inset (40 on Work; the text column, 258.6, on a case study). One image ends 40 from the right edge. Several: each slide is the row less the 41 px peek and a 15 px gap, the viewport runs to the page's right edge so the next image shows there, and a spacer after the last slide lets it settle at the start like the others. */ .gallery{ --inset:4rem;--right:4rem;--peek:4.1rem;--gap:1.5rem;--media-h:64.4rem; position:relative; } .gallery--story{--inset:var(--col,25.86rem)} .gallery__stage{position:relative;margin-left:var(--inset,0px)} .gallery__viewport{ overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain; scrollbar-width:none;outline-offset:-.2rem; } .gallery__viewport::-webkit-scrollbar{display:none} .gallery__track{display:flex;gap:var(--gap);margin:0;padding:0;list-style:none} .gallery__slide{flex:0 0 calc(100% - var(--right,0px));scroll-snap-align:start} .is-multi .gallery__slide{flex-basis:calc(100% - var(--peek) - var(--gap))} .is-multi .gallery__track::after{content:"";flex:0 0 var(--peek)} /* lets the last image settle at the start */ .gallery__slide img{display:block;width:100%;height:var(--media-h);object-fit:cover} .gallery__slide img.is-contain{object-fit:contain;background:#fff} /* an image whose edges matter (a storyboard's captions): whole, on white */ /* Arrows: a 67 px white box, the red arrow turned to point along the row (Figma 311:1406), centred on the image. Shown while the gallery is hovered or focused; [hidden] at either end. */ .gallery__btn{ position:absolute;top:calc(var(--media-h) / 2);display:grid;place-items:center;width:6.7rem;height:6.7rem; padding:0;background:#fff;opacity:0; /* over the photo: never flips */ transform:translateY(-50%);transition:opacity .3s ease; } .gallery__btn--next{right:3.3rem} .gallery__btn--prev{left:2.6rem} .gallery__btn img{width:2.19rem;height:2.19rem;transform:rotate(45deg);transition:transform .35s cubic-bezier(.16,1,.3,1)} .gallery__btn--prev img{transform:rotate(-135deg)} .gallery__btn--next:hover img{transform:rotate(45deg) translate(.3rem,-.3rem)} .gallery__btn--prev:hover img{transform:rotate(-135deg) translate(.3rem,-.3rem)} .gallery__btn[hidden]{display:none} [data-gallery]:hover .gallery__btn,[data-gallery]:has(:focus-visible) .gallery__btn{opacity:1} /* keyboard focus only: a mouse click doesn't pin them */ @media (hover:none) and (pointer:coarse){.gallery__btn{display:none}} /* touch only: swipe (a tablet with a trackpad keeps them) */ /* Text under the image (Figma 269:1181): title Cal Sans 38/40, description 18/28, category 18/23 grey, 679 wide */ .gallery__text{width:67.9rem;margin:3.2rem 0 0 var(--inset)} .gallery__title{margin:0;font-family:"Cal Sans",Inter,sans-serif;font-weight:400;font-size:3.8rem;line-height:4rem;letter-spacing:.076rem} .gallery__title a{transition:color .25s ease} .gallery__title a:hover{color:var(--grey)} .gallery__desc,.gallery__cat{margin:0;font-size:1.8rem;text-box:trim-both cap alphabetic} .gallery__desc{line-height:2.8rem} .gallery__title + .gallery__desc{margin-top:1.6rem} .gallery__cat{margin-top:2.6rem;line-height:2.3rem;color:var(--grey)} /* The rule under each gallery, from the image's left edge to the right margin */ .gallery::after{content:"";display:block;margin:5.8rem var(--right) 0 var(--inset);border-top:var(--rule) solid var(--fg)} .gallery + .gallery{margin-top:8rem} /* The Work page's Gallery section: its title and line (Figma 269:1174, 269:1328), then the projects */ .gallery-list{padding-top:11.45rem} .gallery-list__head{margin:0 4rem 12.8rem 3.84rem} .gallery-list__head p{width:67.86rem;margin:2.8rem 0 0} @media (prefers-reduced-motion:reduce){.gallery__viewport{scroll-behavior:auto}} /* ═════════════════════════ PHONES ═════════════════════════ */ @media (max-width:767px){ .gallery,.gallery--story{--inset:2rem;--right:2rem;--peek:2.4rem;--gap:1rem;--media-h:24rem} .gallery__text{width:auto;margin:2rem var(--right) 0 var(--inset)} .gallery__title{font-size:2.8rem;line-height:3.2rem;letter-spacing:.056rem} .gallery__desc,.gallery__cat{font-size:1.6rem} .gallery__desc{line-height:2.4rem} .gallery__title + .gallery__desc{margin-top:1.2rem} .gallery__cat{margin-top:1.6rem;line-height:2.2rem} .gallery::after{margin-top:3.2rem} .gallery + .gallery{margin-top:4.8rem} .gallery-list{padding-top:4.8rem} .gallery-list__head{margin:0 2rem 3.2rem} .gallery-list__head p{width:auto;margin-top:1.6rem} }