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: a lit hero, new slogans, the wallpapers, and a better reader

Browse source 
Home:
- The hero stands on a light from the upper left and a pool of the
  accent, mixed from Niveus tokens so it follows the theme. The mark sits
  in an .nv-tile key under a slogan: "Every layer its own -- from the
  first instruction to the last pixel."
- New section headings: "A teaching kernel that outgrew its lessons",
  "Measured, not marketed", "One ISO. One stick. Your disks untouched."
- A Wallpapers section with the four new ones, each downloadable as a
  4K JPEG or as SVG. The four-card grids are two across, so none is left
  alone on its row.

Docs reader:
- An index filter, a breadcrumb with reading time and source path,
  code blocks framed with a language strip and a Copy key, previous and
  next keys at the foot, a reading-progress hairline, and the contents
  entry lit for the section on screen.
- The index lists the documents it was missing: scheduler, FAT, audio,
  LDLS, debugging and the hardware report.
- On a phone the page is no longer wider than the screen (a pre block
  was sizing the grid's auto column), and the index folds away.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01S1giNvrHTrPMPw7V6x1kQ4
This commit is contained in:
Nexoniarz 2026-10-23 15:56:43 +02:00
commit 7af579a20d
4 changed files with 421 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

194
docs/Website/app.css
View file

@ -55,6 +55,28 @@
/* --- Hero ------------------------------------------------------------------ */
/* The band behind the hero, lit the way the Graphite wallpaper is: a light
from the upper left, and a pool of the accent on the surface the window
stands on. Mixed from the system's own tokens rather than from the picture,
so it follows the brand and the appearance instead of fighting the copy. */
.heroband {
background:
radial-gradient(ellipse 45% 38% at 68% 62%,
color-mix(in oklab, var(--nv-color-accent) 45%, transparent), transparent 72%),
radial-gradient(ellipse 60% 70% at 18% 0%,
color-mix(in oklab, var(--nv-color-text-primary) 7%, transparent), transparent 70%),
var(--nv-color-background);
padding-block-end: var(--nv-space-12);
}
.hero__tile {
flex: none;
}
.hero__slogan {
max-inline-size: 22ch;
}
.hero {
display: grid;
gap: var(--nv-space-12);
@ -88,6 +110,41 @@
block-size: 1.15em;
}
/* --- Wallpapers ----------------------------------------------------------- */
/* Two across, not auto-fit: four of anything at three per row leaves one
alone on the last, which reads as an afterthought. */
.walls,
#docs .nv-card-grid {
display: grid;
gap: var(--nv-space-5);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 48rem) {
.walls,
#docs .nv-card-grid { grid-template-columns: 1fr; }
}
.wall {
margin: 0;
overflow: hidden;
}
.wall__img {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.wall__caption {
display: flex;
flex-direction: column;
gap: var(--nv-space-2);
padding: var(--nv-space-4) var(--nv-space-5) var(--nv-space-5);
}
/* --- The console ----------------------------------------------------------- */
/*
A terminal is a window into the machine, so it is drawn as one: a solid
@ -367,11 +424,18 @@
*/
.docshell {
max-inline-size: var(--nv-layout-max-width);
/* Wider than the rest of the site: the document column carries tables and
diagrams that the prose measure would squeeze, and both side panels have
to fit beside it. */
max-inline-size: calc(var(--nv-layout-max-width) + 16rem);
margin-inline: auto;
padding-inline: var(--nv-layout-gutter);
padding-block: var(--nv-space-8) var(--nv-space-16);
display: grid;
/* minmax(0, ...) even with one column: a code block is white-space: pre,
and an auto column grows to its longest line -- which on a phone made
the whole page wider than the screen. */
grid-template-columns: minmax(0, 1fr);
gap: var(--nv-space-8);
align-items: start;
}
@ -385,6 +449,13 @@
@media (max-width: 64rem) {
.docshell__rail { display: none; }
/* One column: the index stops following the reader and folds away, so
the document is the first thing on the screen rather than the fortieth. */
.docshell__aside {
position: static;
max-block-size: none;
}
}
/* Both panels follow the reader down the page, under the bar rather than
@ -457,6 +528,36 @@
border-block-end: var(--nv-border-width) solid var(--nv-color-border-subtle);
}
/* A code block is a small window: a raised strip naming the language, with
the copy key on it, over the recess the code sits in. */
.codeframe {
margin: 0;
border-radius: var(--nv-radius-md);
overflow: hidden;
background: var(--nv-color-surface-elevated);
box-shadow: var(--nv-elevation-1);
}
.codeframe__bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--nv-space-1) var(--nv-space-1) var(--nv-space-1) var(--nv-space-4);
border-block-end: var(--nv-border-width) solid var(--nv-color-border-subtle);
}
.codeframe__lang {
font-family: var(--nv-font-family-mono);
font-size: var(--nv-font-size-xs);
letter-spacing: var(--nv-letter-spacing-wide);
text-transform: uppercase;
color: var(--nv-color-text-tertiary);
}
.codeframe .doc__pre {
border-radius: 0;
}
.doc__pre {
margin: 0;
padding: var(--nv-space-4);
@ -496,3 +597,94 @@
.features {
--nv-scroller-item: 21rem;
}
/* --- The reader's furniture ----------------------------------------------- */
/* Where this document sits, and how long it is. */
.dochead {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--nv-space-2) var(--nv-space-4);
padding-block-end: var(--nv-space-4);
border-block-end: var(--nv-border-width) solid var(--nv-color-border-subtle);
}
.doc > .dochead + * {
margin-block-start: var(--nv-space-6);
}
/* Previous and next, as two keys. */
.docpager {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--nv-space-4);
margin-block-start: var(--nv-space-12);
}
.docpager__key {
display: flex;
flex-direction: column;
gap: var(--nv-space-1);
padding: var(--nv-space-4) var(--nv-space-5);
text-decoration: none;
color: inherit;
}
.docpager__key--next {
text-align: end;
align-items: flex-end;
grid-column: 2;
}
@media (max-width: 40rem) {
.docpager { grid-template-columns: 1fr; }
.docpager__key--next { grid-column: auto; }
}
/* The filter well above the index. */
.docfind {
margin-block-end: var(--nv-space-5);
}
.docfind .nv-input {
inline-size: 100%;
}
/* Reading progress: a hairline of accent under the bar, growing from the
left. Transform rather than width, so it costs a composite and no layout. */
.readbar {
position: sticky;
inset-block-start: 0;
z-index: 10;
block-size: var(--nv-border-width-strong);
margin-block-end: calc(var(--nv-border-width-strong) * -1);
}
.readbar span {
display: block;
block-size: 100%;
background: var(--nv-color-accent);
box-shadow: 0 0 var(--nv-space-2) var(--nv-color-accent);
transform: scaleX(0);
transform-origin: left;
}
/* The contents entry for the section being read. */
#toc .nv-nav__item[aria-current="location"] {
color: var(--nv-color-accent-text);
}
/* The index's fold. Open on a wide screen, where it is a column; closed on a
narrow one (docs.js), where it would push the document out of view. */
.docindex > summary {
display: none;
}
@media (max-width: 64rem) {
.docindex > summary {
display: flex;
margin-block-end: var(--nv-space-3);
}
}