La crítica era exacta: no se podía cambiar a oscuro, ni de idioma, ni había forma de moverse entre blocks. La sección arrancaba UIX y renderizaba la página desnuda, con un comentario que decía que el modo seguía al sistema operativo «para verificar oscuro emulando prefers-color-scheme» — cómodo para mí, inútil para quien mira la página. Ahora hay shell: topbar pegajosa con los ejes que de verdad mueven el framework (idioma ES/EN/FR/DE y dirección como INTENTS de prefs, así que llegan a langs, formatos y al AGENTS.md debug.log routes tsconfig.json CLAUDE.md docs scripts tsconfig.tsbuildinfo README.md node_modules src vite.config.ts STUMBLES.md package-lock.json static web audit package.json svelte.config.js worker.js build plans tmp workers del documento por el camino del sistema; densidad proyectada en :root para que la hereden también los overlays porteados; y el conmutador de tema, que alimenta el del ActiveEidos) y un raíl con el catálogo entero de los 27 blocks planificados, marcando el actual y atenuando los que aún no existen. Todo persiste en localStorage, así que una recarga te deja donde estabas. El catálogo pasa a : raíl y galería leen la MISMA fuente, y un block que aterriza no hay que recordarlo en dos sitios. Las tres regiones las coloca — cromo de app-land, el papel que hace en las docs de componentes; la regla de «sin CSS» del contrato B es para el tier (), no para el sitio que lo enseña. Dentro de esas regiones todo son componentes del canon. Verificado en navegador: el botón conmuta a oscuro de verdad (fondo oklch(0.1776 0 0)), el idioma llega a , el raíl lista los 27 y desaparece por debajo de 64rem sin desbordes, cero errores de consola. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>alpha-0.1-sec-dom
parent
50574806d6
commit
33328df7ae
@ -0,0 +1,63 @@
|
||||
/*
|
||||
* Chrome of the /blocks section — the shell only: topbar, rail and content
|
||||
* column. The CONTROLS inside it are canon components (ToggleGroup, Button,
|
||||
* Link…), like the rest of the site; this file just places the three regions
|
||||
* and paints their edges with foundation tokens.
|
||||
*
|
||||
* (The B contract's «no CSS» rule is about `src/uix/blocks/`, the tier itself.
|
||||
* This is app-land chrome for the demo site, the same role `uix.css` plays for
|
||||
* the component docs.)
|
||||
*/
|
||||
|
||||
[data-blocks-shell] {
|
||||
min-block-size: 100dvh;
|
||||
background: var(--color-surface-default);
|
||||
color: var(--color-content-primary);
|
||||
}
|
||||
|
||||
[data-blocks-topbar] {
|
||||
position: sticky;
|
||||
inset-block-start: 0;
|
||||
z-index: var(--z-index-raised);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
padding-inline: var(--space-4);
|
||||
padding-block: var(--space-2);
|
||||
background: color-mix(in srgb, var(--color-surface-default) 88%, transparent);
|
||||
backdrop-filter: blur(8px);
|
||||
border-block-end: var(--border-width) solid var(--color-border-subtle);
|
||||
}
|
||||
|
||||
[data-blocks-body] {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
min-block-size: 0;
|
||||
}
|
||||
|
||||
[data-blocks-rail] {
|
||||
flex: none;
|
||||
inline-size: 15rem;
|
||||
padding: var(--space-4);
|
||||
border-inline-end: var(--border-width) solid var(--color-border-subtle);
|
||||
position: sticky;
|
||||
inset-block-start: var(--space-12);
|
||||
align-self: start;
|
||||
max-block-size: calc(100dvh - var(--space-12));
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
/* Below `lg` the rail folds away: the topbar keeps the axes, and the gallery
|
||||
is one tap away. A demo section does not need a drawer of its own. */
|
||||
@media (width < 64rem) {
|
||||
[data-blocks-rail] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[data-blocks-content] {
|
||||
flex: 1 1 auto;
|
||||
min-inline-size: 0;
|
||||
}
|
||||
Loading…
Reference in new issue