/* The picture of the street behind a building's public page, and the page's * one scroll rule. * * Loaded only by that page — see app/views/buildings/show.html.erb. It is here * rather than in the markup because the rules that matter are a calc over a * custom property and a property on , neither of which Tailwind can say * from inside the body of a template. * * Mapbox draws the image centred on the building. The pin over it is laid out * by the page and lands wherever the copy underneath pushes it, so the image * has to be moved to meet the pin rather than the other way round: it sits in * a box centred on the pin's tip, and object-fit does the covering. */ /* The around the image is a shape switch and nothing else, so it is * taken out of the layout entirely rather than left as a zero-height flex item * in the middle of the hero's column. */ .building-map-frame { display: contents; } .building-map { /* Where the pin's tip sits, as a share of the section's height. * building_map_controller.js measures the real figure and writes it here; * this default is what the page looks like with the script dead, which is a * pin a few pixels off rather than a map in the wrong place. */ --tip: 34%; position: absolute; left: 50%; top: var(--tip); transform: translate(-50%, -50%); /* Tall enough to reach both edges of the section from a centre that is not * the section's own centre: twice the longer of the two halves. Width is the * section's, because the pin is centred across it. */ width: 100%; height: calc(2 * max(var(--tip), 100% - var(--tip))); /* Cover rather than stretch, and centred — which is what keeps the building's * own coordinate under the tip whatever shape the section ends up. */ object-fit: cover; object-position: center; /* What shows while Mapbox answers, and wherever it never does: emerald-900, * so the section reads as the page's own dark ground rather than as a gap. * The scrim over the top does the rest. */ background-color: #064e3b; } /* Anything landing on the claim anchor rides down to it rather than jumping, * which is what makes it read as one page scrolling rather than as a link that * went somewhere. Nothing on either page links to it from inside any more — the * to-do list's cards did, then the building page's two capability sections, and * those go straight into the claim's own pages now — so what this is left for is * a URL ending #claim, which is still how a shared link arrives at a guide's * ask. On because that is the element the fragment scrolls, and on these * pages only: the app's others have not asked for it. * * Off where the reader has asked for less motion. Smooth scrolling is exactly * the kind of movement prefers-reduced-motion is for, and the jump it falls * back to is the behaviour every other page already has. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }