layout.css

Screen layout: rails around a viewport.

The corner rule finally applies at the scale it was written for. It reads "corner treatment says WHERE a panel sits, never which panel it is": body panels cut one diagonal, EDGE BARS CUT THE EDGE THEY HOLD, and the viewport cuts all four. Until now this kit only had body panels, so only half the rule was in use.

src/layout.css · 5 blocks · blocks that belong to a custom element are on that element's page

.ov-cluster

No still yet.

No demo page uses it, and no script writes it.

.ov-panel

Also styled in chrome.css. Written into markup by src/ov-reveal.js, so an element sets it for you. Used on ascii.html, chrome.html, cli.html, index.html, instrument.html, motion.html, radar.html, reticle.html and 5 more.

.ov-rail

No still yet.

Also styled in chrome.css. Used on screen.html, index.html.

.ov-screen

No still yet.

Each bar cuts the edge it holds, and only that edge. Reading the corners tells you where you are on the screen.

Also styled in chrome.css. Used on screen.html, index.html.

.ov-viewport

No still yet.

🔴 .ov-viewport__foot WAS MARKUP THE KIT EMITTED AND CSS THE KIT DID NOT DEFINE. demo/screen.html and the home page each carried these two rules in their own page style, so a composite screen only held together on a page that knew to redefine it. Anyone copying the markup out of the demo got a viewport foot that fell out of the bottom: measured at y=1253 in a screen ending at y=686. The foot is the kit's own class, so its layout is the kit's job. ⚠️ The numbers are INHERITED from those page styles, not chosen here. They are the values both pages already rendered with, moved rather than redesigned, so that this change cannot alter how anything looks. Tokenising them is a separate decision.

Also styled in chrome.css. Used on screen.html, index.html.