Built entirely from cssvars.css — no custom CSS rules, no JavaScript. Every open/close/hover state is driven by native HTML (:checked, :hover) or the browser's own resize behavior.
.card-hover (translateY + shadow) rather than inventing a transform:scale rule.resize property gives an actual draggable grip for free — set on a panel with overflow:auto. resize has no framework class equivalent, so it's the one inline declaration here.Panel A
Drag the bottom-right corner to resize — that's the browser's native resize handle, no script involved.
Panel B
Fills remaining space via .flex-fill.
resize trick applied to a sidebar/content layout, with the existing .resize-grip class kept as a visual divider (hover highlight only — a functional drag on the grip itself would need JS, whereas the pane's own resize handle is free).Explorer
index.html
Editor content goes here.
.table stack (.table-striped, .table-hover, .table-bordered) inside an .overflow-auto wrapper, header pinned with .position-sticky.top-0. Sort arrows are shown for affordance; actual sorting logic is a JS concern outside CSS's reach.| Task | Owner | Status | Priority | |
|---|---|---|---|---|
| Ship accessibility layer | Kim | In progress | High | |
| Write scheduler docs | Kim | Review | Medium | |
| Publish landing page | Kim | Done | Low | |
| Bento grid presets | Kim | Backlog | Low |
Built with love in by Kim Majali, EITO team, and contributors.