s. Sized in device pixels there and stretched back to CSS ones here, exactly like #grid-ink. */ #axis-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* Mobile is still the same infinite canvas, but interaction is constrained to this six-column strip. viewport.js keeps these screen-space edges aligned with the fixed world width as the window changes size. */ #mobile-board-frame { display: none; position: absolute; top: 0; bottom: 0; left: var(--mobile-board-left, 0); width: var(--mobile-board-width, 0); box-sizing: border-box; border-inline: var(--hairline) dashed var(--grid-axis); background: color-mix(in srgb, var(--paper-card) 8%, transparent); box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--ink) 4%, transparent); pointer-events: none; } #mobile-board-ceiling { display: none; position: absolute; inset: 0 0 auto; height: max(0px, var(--mobile-board-top, 0px)); background: color-mix(in srgb, var(--ink) 4%, transparent); pointer-events: none; } #mobile-board-ceiling::after { content: ""; position: absolute; left: var(--mobile-board-left, 0); bottom: 0; width: var(--mobile-board-width, 0); border-top: var(--hairline) dashed var(--grid-axis); opacity: var(--mobile-board-ceiling-opacity, 0); } :root[data-board-mode="mobile"] #mobile-board-frame, :root[data-board-mode="mobile"] #mobile-board-ceiling { display: block; } :root[data-board-mode="mobile"] #axis-ink, :root[data-board-mode="mobile"] #origin-mark, :root[data-board-mode="mobile"] #web { display: none !important; } /* The origin, marked like a compass rose rather than just a crossing. Drawn a shade stronger than the axes so (0,0) reads as a place, not an accident. */ #origin-mark { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; color: var(--accent); opacity: 0.7; pointer-events: none; } #viewport.no-axes #origin-mark { display: none; } #marquee { position: absolute; border: 1.5px dashed var(--select); background: var(--select-fill); border-radius: var(--radius-sm); pointer-events: none; z-index: 5; } /* The web of threads between items (canvas/web.js). Inside #world, so pan and zoom are the layer's transform rather than anything this has to redraw. Negative z-index puts it under every item; #world paints no background of its own, so there is nothing for it to disappear behind. */ #web { position: absolute; overflow: visible; pointer-events: none; z-index: -1; } /* Two kinds of element, one appearance. The bulk carries every settled thread as subpaths of a single `d`, which is what keeps a redraw to one attribute write on a board with hundreds of them. A thread only gets its own for as long as it is fading, because opacity cannot be applied to a subpath - and it is handed back to the path the moment it lands. */ #web path, #web line.thread { stroke: var(--web-line); stroke-width: var(--web-weight); stroke-linecap: round; /* A thread, not a beam: without this the stroke would be multiplied by the zoom along with everything else, and reach ten pixels wide at 8x. */ vector-effect: non-scaling-stroke; } /* --------------------------------------------------------- Items --------------------------------------------------------- */ .item { position: absolute; background: var(--item-bg); /* The corner this item actually draws, which is not simply --radius. Two things bend it. A note is cut from a pad and carries --note-radius instead, so --shape-radius is overridden per type. And the browser caps a border-radius at half the box's shorter side - an item narrower than twice its radius comes out a lozenge, whatever was asked for - so --half-min (written by items.js/place(), which is where the size is known) applies that same cap here. Everything that has to trace this corner reads --own-radius rather than guessing, so nothing ends up sweeping a 26px curve around a corner the browser quietly flattened to 10. */ --shape-radius: var(--radius); --own-radius: min(var(--shape-radius), var(--half-min, 9999px)); /* The three-dot handle's width, named because two things need it: the handle itself, and anything drawn along the foot of a card that has to stop before reaching it. It is a corner of every card that is already spoken for. */ --handle-w: 30px; border-radius: var(--own-radius); box-shadow: var(--item-shadow); /* Deliberately not clipped: the resize handles and their brackets sit *outside* this box, and a clip here would slice every one of them in half. .item-body does the clipping instead - it fills the item and carries the same radius, so content still rounds off at the corners. */ overflow: visible; cursor: grab; user-select: none; -webkit-user-select: none; /* The selection ring's geometry, collapsed flat. A card that is not selected wears its ring against its own edge, at no thickness, where nothing can be seen and nothing has to be worked out - see .item.is-selected below, which is where these three mean something and why they are not simply written there once. */ --sel-edge: 0px; --mark-radius: var(--own-radius); --mark-size: 0px; /* The lift and the tilt are zero at the plain end of the whimsy axis, so the same declaration covers "springs up to meet you" and "does not move". The resting tilt is each item's own factor in [-1, 1] (written by canvas/items.js, dealt from a bag so a third of the board hangs straight) times whatever the axis currently allows - and the drag tilt adds on top of it, rather than replacing it, so picking a crooked item up keeps it crooked. */ translate: 0 calc(var(--lift) * var(--iz)); rotate: calc(var(--item-tilt, 0) * var(--tilt-max) + var(--tilt)); scale: var(--grow); --lift: 0px; --tilt: 0deg; --grow: 1; transition: box-shadow var(--dur-base) var(--ease), translate var(--dur-base) var(--ease-back), rotate var(--dur-base) var(--ease-back), scale var(--dur-base) var(--ease-back); } /* Snapped to the grid: nothing leans, at any whimsy tier. A lattice is a promise about edges, and a card resting a degree and a half off square breaks it more visibly than being a few pixels out of place ever did - two neighbours in adjacent cells make a wedge between them that reads as a mistake in the snapping rather than as charm. So the same switch that lines the board up also stands the cards up. `rotate` outright rather than zeroing --tilt-max: the tilt tokens are on the Appearance panel's list and can be written inline on :root, which no selector can outrank. This is on .item instead, where nothing inline competes - and it still leaves item.rot alone, which lives in `transform` (see below). It also inherits the rotate transition above, so switching snapping on straightens the board rather than jumping it. */ :root[data-snap] .item { rotate: 0deg; } /* translate/rotate/scale rather than transform, because items.js already owns `transform` for the item's own rotation - these are independent properties and compose with it instead of fighting over one declaration. */ .item:hover { box-shadow: var(--item-shadow), 0 0 0 calc(1px * var(--iz)) var(--rule-2); --lift: var(--lift-hover); --grow: var(--grow-hover); } .item.is-dragging { cursor: grabbing; --lift: var(--lift-drag); --tilt: var(--tilt-drag); --grow: var(--grow-hover); } /* The selection ring, drawn rather than outlined. `outline` would be the obvious tool and is the wrong one: engines disagree about whether outline-offset grows the outline's corner radius along with it. Firefox keeps the element's radius, Blink adds the offset - so a ring and a corner mark computed from the same numbers still came out as two different curves, doubling visibly at every corner. A border on a pseudo-element has one interpretation everywhere. The box's outer edge is --sel-edge out from the item and the border grows inwards from it, so the ring occupies exactly --sel-gap to --sel-edge - and its radius is the item's own, offset by the same amount, which is the same expression the corner marks use. */ .item::before { content: ''; position: absolute; inset: calc(-1 * var(--sel-edge)); border: 0 solid var(--select); border-radius: var(--mark-radius); pointer-events: none; /* The delays are what let the ring stand off the card while it is being worn and lie flat against it the rest of the time, without the change ever being seen. A transition is written on the state it is going *to*, so this rule governs the trip back to unselected: the border thins over --dur-fast, and the offset and the curve are held at their old values until it is over, then drop. By that point the border has no width, so there is nothing on screen for the drop to move. The rule below has no such delay, so selecting still puts the ring in its proper place at once and merely thickens it. */ transition: border-width var(--dur-fast) var(--ease), inset 0s var(--dur-fast), border-radius 0s var(--dur-fast); } .item.is-selected::before { border-width: calc(var(--sel-line) * var(--iz)); transition: border-width var(--dur-fast) var(--ease); } /* The ring's geometry, in two versions of the same three names. --sel-edge how far the ring's outer edge sits from the item box --mark-radius the curve both it and the corner marks trace: the item's own corner, pushed outwards by that gap. A curve of radius R offset outwards by d is a curve of radius R + d, and both terms are in the item's own units, so it holds at any zoom --mark-size how big a corner mark has to be. Not merely --sel-reach: a border-radius larger than its own box is scaled down by the browser, which flattened the marks on a heavily rounded card while a note's - with a much smaller radius - came out true. Sized from the curve *plus* the straight run, so --sel-reach means what it says: how far the heavy part continues past the end of the curve. R + d is the true parallel of a *rounded* corner. A square corner's true parallel is an arc of radius d - geometrically correct, and visibly wrong: a rounded ring around a sharp card reads as a mistake in a language whose whole premise is that corners are square. So the growth is switched off when there is no corner to grow. Multiplying by a large factor saturates to R + d for any real radius and collapses to zero at exactly zero, which is a branch CSS has no other way to express. The unselected version is the whole point of the split, and it is a performance one. Every one of these is written in terms of --iz, which changes on every frame of a zoom - so a card that is not selected was re-deriving three values it does not use, and re-laying out a pseudo-element whose offset is one of them, for every card on the board sixty times a second. Collapsed to constants, an unselected card has nothing here that the zoom can move, and its ring simply lies flat against its edge where it cannot be seen. The version that means something arrives with the selection, which is also the only time anything reads it: the ring and the grips, and neither is drawn otherwise. */ .item.is-selected { --sel-edge: calc((var(--sel-gap) + var(--sel-line)) * var(--iz)); --mark-radius: min(calc(var(--own-radius) + var(--sel-edge)), calc(var(--own-radius) * 1000)); --mark-size: calc(var(--mark-radius) + var(--sel-reach) * var(--iz)); } .item-body { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; /* Carries .item's radius down the tree. `border-radius: inherit` copies the *parent's* value, so without this link the card inside inherits 0 and its border and inset ruling turn up square inside a rounded card. */ border-radius: inherit; pointer-events: none; /* the whole card is one drag target */ } .item-body img, .item-body video { width: 100%; height: 100%; object-fit: cover; display: block; } .item[data-fit="contain"] .item-body img, .item[data-fit="contain"] .item-body video { object-fit: contain; } /* The zoomed-out stand-in. Two things arrive here by the same door: a frozen GIF frame shot by canvas/stills.js, and a photograph's hundred-pixel thumbnail made at import. Both are a sibling , and both are swapped in by the same pair of rules - see the note in the image renderer. is-ready, not merely [src]: the attribute lands the moment it is assigned but the bytes still have to decode, and swapping then would show a blank where the picture was. Until it is ready the full picture stays up, which is the harmless failure in both cases. The primary is matched as :not(.still) rather than by [data-gif], so a still photograph gets the swap as well as an animated one. */ .item-body img.still { display: none; } #world.is-stilled .item-body img.still.is-ready { display: block; } #world.is-stilled .item-body img:not(.still):has(+ .still.is-ready) { display: none; } /* Cards for the non-visual types: audio, text, and the generic fallback. Ruled just inside the edge, the way a plate or a bookplate is. */ .card { position: relative; width: 100%; height: 100%; /* Named, because the sleeve on an audio card is positioned against the padding box and has to sit *inside* the padding rather than on its edge. Absolute positioning measures from that edge, so the inset has to be the padding itself - and a number repeated in two rules is a number that drifts apart in two rules. */ --card-pad-y: 15px; --card-pad-x: 16px; padding: var(--card-pad-y) var(--card-pad-x); display: flex; flex-direction: column; gap: 7px; border-radius: inherit; background: var(--paper-card); /* The card fills .item exactly, and .item clips at the same radius - so a real border would be shaved away at the corners by that clip. An inset shadow draws inside the padding box and survives it. */ box-shadow: inset 0 0 0 var(--hairline) var(--item-border); overflow: hidden; } /* The inner rule. Two nested rounded rectangles only look concentric when the inner radius is the outer radius *minus* the gap between them - otherwise the corners bow outward and the gap reads wider at the corners than along the sides. That subtraction is the whole point of this rule. */ .card::after { content: ''; position: absolute; inset: var(--card-rule-gap); border: var(--hairline) solid var(--rule); border-radius: max(0px, calc(var(--own-radius) - var(--card-rule-gap))); pointer-events: none; } .card-icon { font-family: var(--font-display); font-size: 11px; font-style: var(--display-italic); letter-spacing: calc(0.16em * var(--ls-scale)); text-transform: uppercase; color: var(--accent); } .card-name { font-family: var(--font-display); font-weight: 600; font-size: var(--t-title); line-height: 1.2; word-break: break-word; } .card-meta { color: var(--ink-3); font-size: var(--t-small); font-style: var(--display-italic); } /* The body of a text card. Written before the renderer that uses it existed; canvas/renderers.js/RENDERERS.text is what fills it. */ .card-text { flex: 1; min-height: 0; overflow: hidden; margin: 0; white-space: pre-wrap; /* Source and CSV routinely run past the card; wrapping mid-word is what keeps a minified line or a long path from widening the card's own scroll box. */ overflow-wrap: anywhere; tab-size: 2; font-family: var(--font-mono); font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); } /* A picture given to a card that is not itself one - album art off an mp3's tags, or anything chosen by hand. See coverEl() in canvas/renderers.js, which prepends it inside the card rather than behind it. Inside the padding, not bled to the edges. A card here is a plate: ruled just in from its own border, with the rule's radius derived from the card's so the two curves stay concentric. A full-bleed cover would cross that rule and turn the plate into a poster with a line drawn across it - and the rule is what tells a filed card apart from a photograph on this board. flex rather than a fixed aspect, because a cover has no aspect it is entitled to. Square for album art, wide for a screenshot, tall for a poster; the card was sized by its type and its own resizing, so the picture takes the room the words leave and crops to it. */ .card-cover { flex: 1; min-height: 0; width: 100%; object-fit: cover; display: block; border-radius: var(--radius-sm); /* A pale cover on pale card stock has no edge of its own - the same problem the polaroid mat has, and the same hairline answers it. */ box-shadow: 0 0 0 var(--hairline) color-mix(in srgb, var(--ink) 10%, transparent); } /* The kicker earns its place on a card that is only words. Above a picture of the record it is labelling a card AUDIO that is plainly a record sleeve. Not on an audio card, where the sleeve is a stamp in the corner rather than the top half of the card: there the kicker is still the only thing naming the type, and hiding it made a row of records where some said AUDIO and some did not, for a reason - whether the file happened to carry artwork - that is invisible from the outside. */ .card:not(.card-audio).has-cover .card-icon { display: none; } /* An audio card's sleeve: square, and up in the corner. Square because that is what a record is, and because the alternative is what this used to do - hand the picture a full-width band and let it be whatever shape it liked. Album art is square often enough that the band was mostly empty card, and the one time it is not - a wide still off a video, a tall poster - a card of this kind still wants a stamp rather than a header. Cropped to the square rather than fitted inside it. A sleeve is legible from its middle; letterboxing it would put the white bars back that the band had. Out of the flow, so the words keep the full height of the card and the transport stays where it was. The room it needs is bought back as padding on the three text lines below, which is what keeps a long title from running under it. */ .card-audio .card-cover { position: absolute; top: var(--card-pad-y); right: var(--card-pad-x); width: var(--sleeve); height: var(--sleeve); flex: none; } .card-audio { /* Half the card's short side, so the sleeve is a stamp on a big card and most of a small one, with a floor and a ceiling: below about 40px it is a smudge, and above 108 it stops being a corner and starts being the card. */ --sleeve: clamp(40px, calc(var(--half-min, 100px) * 0.5), 108px); /* The ⋮ is not part of the card but sits over its bottom-right corner - it is the item's own handle and every type has it - and on a card whose last row is a control of its own the two crowded each other. This used to be settled by reserving 16px of *height* at the foot, which worked and cost the one thing an audio card has least of: the transport is pinned to the bottom by margin-top: auto, so the reservation showed as an empty band under the waveform on every card, and it is height that decides what the card can still afford to say about itself. The room is taken sideways instead, the way a video's transport does it - the bar stops short of the corner and the handle stands beside the time rather than under it. Same collision, same fix, and 16px of card back. */ padding-bottom: var(--card-pad-y); /* Queried by the rules further down, which is how the card decides what to drop as it gets shorter. Its own size is fixed by the item it fills, so containing it costs nothing: `size` containment says the box does not depend on its contents, and this one never did. */ container: audio-card / size; } .card-audio.has-cover .card-icon, .card-audio.has-cover .card-name, .card-audio.has-cover .card-meta { padding-right: calc(var(--sleeve) + 10px); } /* The title is clamped rather than left to wrap. The transport is pinned to the foot of the card by `margin-top: auto`, which only works while there is a foot left to pin it to: a name that wrapped to five or six lines pushed the play button out through the bottom of the card, which clips. So it gets a line budget and an ellipsis after it. */ .card-audio .card-name { flex: 0 1 auto; min-height: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; } /* The transport keeps its height whatever else is on the card, and stops short of the corner the handle owns - see the padding note on .card-audio above. */ .card-audio .transport { flex: none; padding-right: var(--handle-w); } /* What a shrinking card gives up, and in what order. The name is the card. Everything else on it is either recoverable from somewhere else or not worth the room, and the name keeps the space they leave instead of being clamped to one line while a byte count sits underneath it. The kicker goes first. It reads AUDIO over a play button, a waveform and a running time, on a card shaped like nothing else on the board - it is the one line here that says something already said three times. The size and the format are a footnote, but they are a footnote nothing else on the card carries, so they outlast it. That is the reverse of the order this dropped them in for a long time, and the reason given for that order was the argument against it: the kicker was described as the redundant one and then kept the longer. Heights rather than widths, because it is height the layout runs out of - the title is what grows when a card is narrowed, and the transport at the foot is a fixed strip that the growth pushes against. Written with the same selectors as the rules above rather than the short ones they could be: a container query carries no specificity of its own, so `.card-name` inside one loses to `.card-audio .card-name` outside it and the clamp would never move. */ @container audio-card (max-height: 190px) { .card-audio .card-icon { display: none; } } @container audio-card (max-height: 148px) { .card-audio .card-name { -webkit-line-clamp: 2; line-clamp: 2; } } /* Just under the clamp above, and that is deliberate rather than a near miss. By this height the name is on two lines, not three, which hands back a line's worth of room - so the footnote survives a little way past the point a three-line card would have had to drop it. Below here a two-line name, a footnote and the transport genuinely do not fit between the paddings. */ @container audio-card (max-height: 140px) { .card-audio .card-meta { display: none; } } @container audio-card (max-height: 116px) { .card-audio .card-name { -webkit-line-clamp: 1; line-clamp: 1; } } /* The native player is a fixed-height control, so it is pinned to the foot of the card rather than left to be squeezed by the text above it. */ /* The audio card's own transport. The