site: rebuilt on Niveus, and the palette stops being a copy
Niveus is the interface language the project uses from here on -- this site
first, applications after it. Rebuilding the site on it is what proves the
system is one, rather than a folder of CSS with a README.
**`style.css` is gone.** 21 KB that transcribed include/theme.h by hand:
palette, type scale, shadows, spacing, every component. The intent was right --
"a site describing an operating system should look like the operating system"
-- and the mechanism was a copy, which means two files that have to be kept in
step by remembering to. What replaced it is `app.css`, which is layout and
nothing else, and one declaration in each page:
:root { --nv-brand: #7C5CFF; }
That is SCH_ACCENT. Niveus derives the accent and its states, the link colour,
the focus ring, the tint in the greys and how far the status colours lean, for
light and dark both. One number to keep true instead of forty.
**The site is now adaptive.** Dark by default, because the OS is dark, with a
Light/Dark/Auto group in the bar that is real. The choice is kept in
localStorage and re-applied by an inline script before first paint, so the page
never renders in one appearance and corrects itself while you watch.
**PSOGM keeps its one purple, and now says so structurally.** #4B1D9A is
spelled the way Niveus spells a subtree with its own colour -- `data-nv-brand`
with its own `--nv-brand` on that section -- so every role inside re-derives
from it rather than being painted on. Still exactly one place, which is what
branding/README.md asks for.
Content is unchanged; what changed is what it is made of. Cards are `.nv-card`,
tags are `.nv-badge`, the support table is `.nv-table`, the crash section is a
`.nv-bed`, and the docs reader's two rails are `.nv-nav--vertical` with the
current document marked by `aria-current` rather than a class of our own.
`docs.js` emits `.nv-table` and `.nv-code`, so a change to the system reaches
the documentation too.
Three things were found by looking at it in a browser rather than by reading
it, and all three are the same mistake: **a `.nv-card` carries no padding of
its own -- its parts do.** The stat tiles, the "One ISO, one stick" band and
the card headers were all built from bare children, so numbers ran to the card
edge, the USB mark hung off it, and a title and its badge sat at opposite ends
of a row meant for a title and a trailing slot. Where the component had a right
way to say it, the markup now says it that way; where it did not -- a tile has
no parts -- `app.css` supplies the padding and says why.
Checked: every nv- class used across the three pages and docs.js exists in the
CSS, every token referenced by app.css is defined, and app.css contains no hex
value at all. Niveus's own tools/check.py passes.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
parent
9ab8a7a426
commit
6490e5c759
89 changed files with 20804 additions and 1363 deletions
|
|
@ -1,20 +1,73 @@
|
|||
<!-- SPDX-License-Identifier: Apache-2.0 -->
|
||||
# The website
|
||||
|
||||
Six files and a folder of marks. No build step, no dependencies, no
|
||||
framework — open `index.html` and it works, including from a `file://` URL.
|
||||
Three pages, two scripts, one stylesheet of its own, and the design system
|
||||
underneath. No build step, no dependencies, no framework — open `index.html`
|
||||
and it works, including from a `file://` URL.
|
||||
|
||||
```
|
||||
index.html the front page
|
||||
download.html get it, write it to a stick, or build it
|
||||
docs.html the documentation reader
|
||||
style.css the palette, transcribed from include/theme.h
|
||||
app.js the front page: the boot log types, sections fade in
|
||||
app.css this site's layout — and nothing else, see below
|
||||
app.js the boot log types, sections arrive, the bar takes a shadow
|
||||
docs.js the Markdown renderer and the doc index
|
||||
niveus/ Niveus, vendored. The site links niveus/dist/niveus.css and
|
||||
niveus/niveus/niveus.js
|
||||
Assets/ shift.svg (logo), uberblock.svg (SchFS),
|
||||
usb.svg (downloads), pride.svg
|
||||
```
|
||||
|
||||
## It is built on Niveus
|
||||
|
||||
[Niveus](../niveus/) is the interface language the project uses for everything
|
||||
with a screen — this site first, applications after it. The rule that makes it
|
||||
worth having is the one it enforces on this directory:
|
||||
|
||||
**`app.css` contains no colour, shadow, radius, type size or duration.** It is
|
||||
layout: where things sit, how wide they get, when they stack. Everything else
|
||||
is a token. A hex value in that file means the system is missing something, and
|
||||
the answer is to add it to Niveus rather than to work around it here.
|
||||
|
||||
What that replaced was a 21 KB `style.css` that transcribed
|
||||
[`include/theme.h`](../../include/theme.h) by hand — palette, type scale,
|
||||
shadows, the lot. The intent was right and the mechanism was a copy: two files
|
||||
that had to be kept in step by remembering to. Now the whole identity is one
|
||||
declaration, in the `<head>` of each page:
|
||||
|
||||
```css
|
||||
:root { --nv-brand: #7C5CFF; }
|
||||
```
|
||||
|
||||
That is `SCH_ACCENT`, the same violet the kernel draws with. Niveus derives the
|
||||
accent and its states, the link colour, the focus ring, the tint in the greys
|
||||
and how far the status colours lean — for light and dark both. The site still
|
||||
looks like the operating system, and now there is one number to keep true
|
||||
instead of forty.
|
||||
|
||||
**The appearance follows the system, and remembers what you pick.** Dark is the
|
||||
default because the OS is dark; the Light/Dark/Auto group in the bar is real,
|
||||
and `app.js` keeps the choice in `localStorage`. An inline script in each
|
||||
`<head>` reads it back before first paint, so the page never renders in one
|
||||
appearance and corrects itself in front of you.
|
||||
|
||||
**PSOGM purple appears exactly once.** `#4B1D9A` is on the crash-screen section
|
||||
and nowhere else, because [../branding/README.md](../branding/README.md) says
|
||||
it means *the machine stopped* and that a colour used everywhere means nothing.
|
||||
It is spelled the way Niveus spells a subtree with its own colour —
|
||||
`data-nv-brand` with its own `--nv-brand` — so every role inside that section
|
||||
re-derives from it rather than being painted on. If it shows up in a second
|
||||
place, that is a bug in the page.
|
||||
|
||||
### Updating the system
|
||||
|
||||
`niveus/` here is a copy, so that this directory can be deployed on its own.
|
||||
The original lives in [../niveus/](../niveus/) and is where changes are made:
|
||||
|
||||
```sh
|
||||
rm -rf docs/Website/niveus && cp -r docs/niveus docs/Website/niveus
|
||||
```
|
||||
|
||||
## The download page
|
||||
|
||||
`download.html` links to `releases/schos.iso`, a path relative to this
|
||||
|
|
@ -27,11 +80,12 @@ make iso
|
|||
mkdir -p docs/Website/releases && cp schos.iso docs/Website/releases/
|
||||
```
|
||||
|
||||
The page is written so that this is the only thing that needs doing, and so that
|
||||
nothing on it is a promise the tree cannot keep. In particular the support table
|
||||
says **one real machine, under test** rather than listing hardware, because one
|
||||
Chromebox is the entire bare-metal record and a compatibility list would be
|
||||
fiction. When that changes, change the table; do not soften the wording.
|
||||
The page is written so that this is the only thing that needs doing, and so
|
||||
that nothing on it is a promise the tree cannot keep. In particular the support
|
||||
table says **one real machine, under test** rather than listing hardware,
|
||||
because one Chromebox is the entire bare-metal record and a compatibility list
|
||||
would be fiction. When that changes, change the table; do not soften the
|
||||
wording.
|
||||
|
||||
The `dd` command is split across two lines on purpose. It was one long line
|
||||
first, and the card clipped it at `conv=` — a destructive command that can
|
||||
|
|
@ -41,8 +95,13 @@ scroll half of itself out of view is a good way to take somebody's disk.
|
|||
|
||||
`docs.html` renders the Markdown in `docs/` in the site's own theme, with the
|
||||
index down the left and a table of contents down the right. Links between
|
||||
documents are rewritten to stay inside the reader, so `../history/schfs.md`
|
||||
in an architecture page navigates rather than downloads.
|
||||
documents are rewritten to stay inside the reader, so `../history/schfs.md` in
|
||||
an architecture page navigates rather than downloads.
|
||||
|
||||
Both rails are `.nv-nav--vertical`, the current document is marked with
|
||||
`aria-current="page"` rather than a class of our own, and the renderer emits
|
||||
`.nv-table` and `.nv-code` — the reader is built from the same system as the
|
||||
rest of the site, so a change to Niveus reaches the documentation too.
|
||||
|
||||
The parser is about 150 lines in `docs.js` and handles what `docs/` actually
|
||||
uses: headings, fenced code, tables, lists, quotes, rules and inline marks.
|
||||
|
|
@ -79,22 +138,13 @@ is not.
|
|||
|
||||
## The flag
|
||||
|
||||
`Assets/pride.svg` is in the top bar and in the footer, on both pages, and it
|
||||
`Assets/pride.svg` is in the top bar and in the footer, on every page, and it
|
||||
is not seasonal. Support with an end date is marketing; this is a project that
|
||||
belongs to whoever writes it. It is also deliberately small — the site is
|
||||
about an operating system, and the flag is a statement, not a subject.
|
||||
|
||||
## The rules it follows
|
||||
|
||||
**The palette is not a design decision.** It is `include/theme.h`, copied. A
|
||||
site describing an operating system should look like the operating system, and
|
||||
copying the header means the two cannot drift apart by accident.
|
||||
|
||||
**PSOGM purple appears exactly once.** `#4B1D9A` is on the crash-screen section
|
||||
and nowhere else, because [../branding/README.md](../branding/README.md) says
|
||||
it means *the machine stopped* and that a colour used everywhere means nothing.
|
||||
If it shows up in a second place, that is a bug in the page.
|
||||
|
||||
**The typefaces are the ones the OS ships.** Roboto for text and JetBrains Mono
|
||||
for the system voice — both already in `ports/`, both already in `NOTICE`. They
|
||||
are requested from the system rather than downloaded: a font file would be
|
||||
|
|
@ -102,7 +152,8 @@ larger than the entire rest of the site.
|
|||
|
||||
**The script is optional.** If `app.js` fails to load the page is still
|
||||
complete and still readable. Everything it does is decoration, and it honours
|
||||
`prefers-reduced-motion` by doing none of it.
|
||||
`prefers-reduced-motion` by doing none of it. `niveus.js` is optional in the
|
||||
same way — without it, state changes arrive instead of travelling.
|
||||
|
||||
**The boot log is real.** The lines in `app.js` are from an actual boot, not
|
||||
invented. The timer calibration line is there deliberately; see section 13 of
|
||||
|
|
@ -118,6 +169,6 @@ find kernel include -name '*.c' -o -name '*.h' | xargs wc -l | tail -1
|
|||
grep -c '^SYSCALL' kernel/sys/table.inc
|
||||
```
|
||||
|
||||
The feature cards carry a tag — `runs`, `in progress`, or `designed` — and the
|
||||
tag is a promise. Anything marked `runs` is in the tree and works today. When
|
||||
that stops being true, change the tag rather than the wording.
|
||||
The feature cards carry a badge — `runs`, `in progress`, or `designed` — and
|
||||
the badge is a promise. Anything marked `runs` is in the tree and works today.
|
||||
When that stops being true, change the badge rather than the wording.
|
||||
|
|
|
|||
Loading…
Reference in a new issue