'/><circle cx='118' cy='34' r='12' fill='%23fff3c4'/><path d='M0 90L40 40L70 70L100 30L160 90Z' fill='%23355070'/><path d='M0 90L30 62L60 82L95 55L130 75L160 60V90Z' fill='%231d3557'/></svg>)
Ridge walk
Six hours, 14 km, 900 m of climbing. Best started before dawn.
HardDay trip
Surfaces and media
v5 components for PLAN.md §9 "Surfaces and media": image cards, draggable windows and brand sign-in buttons. The script at the bottom only wires up the demo; dragging comes from assets/js/window.js.
Image card .card.has-media
Media bleeds to the card edge and is locked to --card-media-ratio (16 / 9 by default), so a lazy image reserves its space.
Default, square and 4 / 3
Harbour cruise
Square media with --card-media-ratio: 1.
Forest loop
The whole card is the link (.stretched-link).
Overlay title .is-overlay
Night market tour
Fridays, 8pm. Meet at the north gate.
Snowshoe trail
The scrim keeps text readable over a white image.
Loading aria-busy="true"
Lighthouse point
Title known, image still on its way.
Horizontal .is-horizontal
Beside the body when the nearest container (.cq, a modal or a drawer) is wider than 480px, stacked when it is narrower. Below: the same card in a wide and in a narrow .cq box.
Harbour cruise
Two hours around the bay with a stop at the lighthouse. Media takes --card-media-size (40%) and the card's full height.
From £24
Harbour cruise
Same markup in a 20rem box: stacked.
Draggable window .modal[data-drag]
Drag the title bar with a mouse, pen or finger. Double-click or double-tap it to maximize. Tab to the title bar and press Alt+Arrow keys to move it (Shift for 1px steps). The window stays inside the viewport.
Uploads
Notes
A second window: focusing one raises it above the other (--z-window).
Draggable. Alt plus arrow keys move the window; double-click maximizes.
Floating window
A top-layer popover window. It can be dragged anywhere on screen and never leaves it.
States
.is-dragging (set by window.js while a drag is in progress)
Moving…
Lifted shadow, grabbing cursor on the title bar.
.is-maximized fills its overlay
Brand sign-in and connect buttons .btn-brand
Drawn to each company's published guidelines and deliberately not re-themed: they look the same in every theme. Google and Microsoft logos ship in assets/logos/; GitHub, Apple and Spotify logos must be supplied by the app (dashed boxes below mark where they go).
Google .is-google
Microsoft .is-microsoft
Apple .is-apple (app supplies the logo)
GitHub .is-github (app supplies the logo)
Spotify .is-spotify (app supplies the logo)
Open Spotify
Listen on SpotifySign-in stack and disabled
Sign in to Northwind
Equal widths: Google and Apple ask to be shown at least as prominently as other providers.