nexoniarz/SchOS
nexoniarz/SchOS
Watch
1
0
Fork
You've already forked SchOS
 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

site: "what it has" is a rail you move along, not a wall you skim

Browse source 
Eleven cards in a grid is a list people stop reading somewhere around the
fourth one. A row you move through is one you go along, and the section is a
survey rather than a comparison -- nothing in it needs to be read beside
anything else, which is the test for whether a grid was carrying information
or just filling space.

So it is a `.nv-scroller`: snapping, hidden scrollbar, arrows that appear only
at the end that has something behind it, and an edge fade that says "more this
way" without a scrollbar having to. All of that is the component's.

**This site's part is one declaration.** `--nv-scroller-item: 21rem`, because
18rem is a width for a card carrying a line and these carry a paragraph. I had
also written `align-self: stretch` to make the heights match, then checked:
they already do, because a flex row stretches by default. The rule came back
out -- restating something the system already guarantees is exactly the drift
the split between Niveus and `app.css` exists to prevent.

The honest cost: a reader who does not scroll sees three cards rather than
eleven, and the section's own claim ("every card marked runs is in the tree")
is about all of them. The fade and the arrows are what pay for that, and they
are the reason this is a scroller rather than a row with a scrollbar.

Verified in a browser: 11 items, equal 256px heights with no rule of ours,
`data-nv-at-start` set and `data-nv-at-end` clear on load, and the arrows page
the rail and swap over as it reaches each end.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Nexoniarz 2026-09-23 14:45:36 +02:00
commit df304918f8
2 changed files with 34 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

13
docs/Website/app.css
View file

@ -527,3 +527,16 @@
.doc li + li {
margin-block-start: var(--nv-space-2);
}
/* --- The feature rail --------------------------------------------------------- */
/*
One declaration, because the component already does the rest: the equal
heights are the flex default, the snapping, the hidden scrollbar and the
fade that marks which end has more behind it are all .nv-scroller's. The
only thing it cannot know is how wide a card of *this* content wants to be,
and 18rem is a line where these carry a paragraph.
*/
.features {
--nv-scroller-item: 21rem;
}