Stella Nova v0.3.0
Tema

Stella Nova · componentes

Espécimen de primitivos del skin. Cada bloque documenta los tokens en juego y muestra el componente con texto simulado.

Colofón tipográfico

Familia única IBM Plex, auto-alojada en assets/fonts/ (woff2, subsetting latin / latin-ext vía unicode-range). Sin CDN, sin Google Fonts.

Aa Bb Cc · 0123
IBM Plex Sans · variable, dos ejes wght 100–700 + wdth 75–100
Token --sn-font-sans (primitiva). Alias semánticos: --sn-font-text = cuerpo + UI + cabeceras, --sn-font-display = alias de text.
Aa Bb Cc · 0123
Roboto Serif · variable, cuatro ejes wght 100–900 + wdth 75–100 + opsz 8–60 + GRAD −50–100
Token --sn-font-serif (primitiva). Alias semántico: --sn-font-quote = citas + <poem> por defecto.
Activable como familia del cuerpo desde el menú del usuario (data-sn-family="serif"): cuerpo + UI voltean a Serif y citas/<poem> voltean a Sans. Comparte el rango de ancho con el sans (wdth 75–100) → el cuerpo condensa igual. Grado vía --sn-serif-grade (eje GRAD): 0 en claro, 30 en oscuro para compensar el aclaramiento óptico.
Aa Bb Cc · 0123
IBM Plex Mono · monospace técnico
Token --sn-font-mono
Uso: código, valores numéricos, identificadores

Cabeceras

Todas las cabeceras (H1–H6) en --sn-font-text — IBM Plex Sans, familia única. Sus alturas de línea son múltiplos enteros de --sn-baseline (la interlínea del cuerpo): H1/H2 ocupan 2 baselines, H3–H6 uno. Escala: --sn-fs-display (1.5–2.0 rem) → --sn-fs-sm (0.82–0.90 rem). El acento de color (carmín --sn-nova) sólo aparece en H3.

== Sección principal ==
=== Sub-sección ===
==== Agrupación menor ====
===== Apostilla =====
====== Referencia inline ======

Heading 1 · display editorial

Heading 2 · sección principal

Heading 3 · sub-sección

Heading 4 · agrupación menor

Heading 5 · apostilla
Heading 6 · referencia inline

El H1 del artículo se genera automáticamente desde el título de la página — no se escribe en el cuerpo. La jerarquía editable empieza en == (dos signos igual a cada lado). Sumá un signo por cada nivel. No saltes niveles (no pongas ==== después de == sin un === intermedio).

Con tres o más cabeceras, MediaWiki inserta automáticamente la tabla de contenidos. Se puede forzar con __TOC__ o desactivar con __NOTOC__.

Cuerpo de texto

Familia --sn-font-text · cuerpo --sn-fs-base (1.00–1.05 rem fluido) · interlínea --sn-leading (1.65, fijo) · medida de la hoja --sn-measure (58 rem, fijo). Los párrafos van justificados con hyphens: auto (depende del lang del documento).

Texto corrido con '''negrita''', ''cursiva''
y '''''ambas'''''.

Enlace interno: [[Página]] o [[Página|texto a mostrar]].
Enlace externo: [https://wiki.ead.pucv.cl texto]
o simplemente https://wiki.ead.pucv.cl.

Salto de párrafo: una línea en blanco.
Filete horizontal: cuatro guiones al inicio: ----

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Enlaces: interno (carmín · azul en oscuro) · externo (con ícono --sn-ext-icon) · rojo (página inexistente, clase .new automática que MediaWiki añade al detectar el enlace muerto).

Para citar texto inline usá <cite>…</cite> (no hay sintaxis wiki dedicada). Para énfasis semántico fuerte, <strong> y <em> equivalen a ''' y '' pero son más explícitas.

Listas

Sangría heredada de --sn-s-5 · marcadores en --sn-ink-soft · espaciado vertical --sn-s-1.

* Ítem de lista no ordenada
* Otro ítem
** Sub-ítem (dos asteriscos)
*** Sub-sub-ítem

# Ítem de lista ordenada
# Segundo
## Sub-ítem ordenado

; Término primario
: Definición del término
; Término secundario
: Definición.

: Texto sangrado (sin término)
:: Doble sangría
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
    • Sub-ítem (dos asteriscos)
    • Otro sub-ítem
  • Ut enim ad minim veniam
  1. Primer ítem de la secuencia
  2. Segundo ítem
  3. Tercero
Término primario
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Término secundario
Sed do eiusmod tempor incididunt ut labore.

Cada ítem ocupa una línea. La sangría se controla repitiendo el marcador (**, ##). Las listas se cortan al encontrar una línea en blanco o un marcador distinto.

Las listas de definición (; y :) también sirven para sangrar texto suelto: una línea iniciada con : sin ; previo produce sólo la sangría.

Tablas

Clase .wikitable: encabezados sobre --sn-sunk · filas alternas --sn-hairline-soft · filete inferior --sn-hairline · caption en --sn-font-display.

{| class="wikitable"
|+ Título descriptivo de la tabla
! Token !! Rol !! Familia
|-
| --sn-fs-display || H1 display || text
|-
| --sn-fs-xl || H2 || text
|-
| --sn-fs-lg || H3 || text
|-
| --sn-fs-base || Cuerpo || text
|}
Escala tipográfica del sistema
TokenRolFamilia
--sn-fs-displayH1 displaytext
--sn-fs-xlH2text
--sn-fs-lgH3text
--sn-fs-baseCuerpotext

Estructura: {| abre la tabla y va con la clase wikitable para heredar los estilos del skin. |+ es el título (<caption>). ! son celdas de encabezado, | son celdas de datos. |- separa filas. |} cierra.

Atajos: !! y || permiten poner varias celdas en una sola línea. Modificador class="wikitable plantilla" retira los bordes internos para fichas (perfil, ficha técnica).

Cita y poema

<blockquote> y <poem> (extensión Poem) consumen --sn-font-quote, que por defecto apunta a Roboto Serif (la serif del skin, variable en wght/wdth/opsz/GRAD). Si el lector alterna la familia del cuerpo a serif desde el menú del usuario, citas y poemas voltean a sans para mantener el contraste editorial. El poema lleva white-space: pre-wrap, lo que conserva los espacios del wikitexto como materia significante (no son adorno: son la espacialidad del verso). Fragmento de la Aventura de Amereida (1967) usado en la portada de Casiopea.

<blockquote>
Texto de la cita en uno o más párrafos.
— Autoría, <cite>Obra</cite> (año)
</blockquote>

<poem>
     no fue
        el hallazgo
             ajeno a los descubrimientos

 ¡oh marinos!
     sus pájaras salvajes
        el mar incierto
             las gentes desnudas entre sus dioses
</poem>

el descubrimiento no nos descubre nuestro propio continente, sino que nos da el continente propio.

Amereida (1967)

no fue el hallazgo ajeno a los descubrimientos ¡oh marinos! sus pájaras salvajes el mar incierto las gentes desnudas entre sus dioses

Para la cita: <blockquote>…</blockquote> envuelve uno o varios párrafos. La atribución va como texto al final (no hay marcado específico).

Para el poema: cada línea del wikitexto produce una línea visual y los espacios al inicio se preservan literalmente — así se reconstruye la espacialidad del verso. La extensión Poem inserta un <br> tras cada línea, pero el skin lo suprime visualmente porque el \n con white-space: pre-wrap ya produce el salto (de no hacerlo quedaría un espacio doble entre líneas).

Código

Familia --sn-font-mono · fondo --sn-sunk.
Inline: padding 1px / 4px · radio 2 px · 0.9 em.
Bloque: padding --sn-s-3 / --sn-s-4 · radio --sn-radius · scroll horizontal en overflow.

Código inline: <code>const x = 1</code>.

Bloque indentado (lo más simple): empezar
la línea con un espacio.
 function ejemplo() {
   return 42;
 }

Bloque preformateado explícito:
<pre>
texto monoespaciado, conserva
saltos de línea y espacios.
</pre>

Inline: const lorem = ipsum(dolor) dentro de un párrafo.

// Bloque pre > code
function loremIpsum(dolor, sit) {
    const amet = consectetur(dolor);
    return amet + sit;
}

Para citar nombres de variables, comandos o identificadores en medio de un párrafo, usá <code>. Para mostrar fragmentos largos, <pre> + <code> es el patrón estándar (lo que aquí se renderiza).

El bloque preformateado por sangrado (línea iniciada con un espacio) es el más rápido pero no permite resaltado ni metadatos. La wiki no carga SyntaxHighlight en producción.

Botones

Capa semántica --sn-btn-* · altura --sn-ctl (2.4 rem) · radio --sn-radius · tipografía --sn-fs-sm · foco con la nova (--sn-focus-ring). La nova no rellena botones — sólo aro de foco.

Primario
Neutro
Destructivo
Ícono

Los botones son parte de la interfaz del skin, no se escriben en el wikitexto del artículo. Aparecen automáticamente en formularios (editar, mover, subir archivo), en diálogos de extensiones (PageForms, ReplaceText) y en barras de acción. Los botones de ícono pueblan el cluster a la derecha del título cuando la usuaria tiene permisos sobre la página.

Si una plantilla necesita un botón propio, lo mejor es envolver un enlace con la clase sn-btn: <span class="sn-btn">[[Página|Texto]]</span>.

Formularios

Capa semántica --sn-field-* · borde --sn-field-border · foco con --sn-focus-border + --sn-focus-ring · placeholder en --sn-field-placeholder.

Los formularios estándar de MediaWiki (preferencias, búsqueda avanzada, mover página) los provee el core y heredan estos estilos automáticamente. Para crear formularios editoriales (fichas de proyecto, observaciones, etapas, travesías) la wiki usa la extensión PageForms: el formulario se define en una página Plantilla:Formulario/Nombre con la sintaxis de PageForms ({{{field|nombre|input type=…}}}) y el skin lo renderiza con estos primitivos.

Pestañas de página

Bandeja de acciones del artículo · pestaña activa marcada con filete inferior --sn-nova (2 px) · enlace rojo (página inexistente) en --sn-link.

Las pestañas las genera el skin a partir de los namespaces y permisos: Artículo · Discusión · Editar · Historial · Más. No se escriben en el wikitexto. Para añadir pestañas propias, las extensiones usan el hook SkinTemplateNavigation; el skin las recibe y las renderiza en la misma bandeja.

Avisos (washes)

Fondos derivados con color-mix(in oklab, ...) sobre --sn-paper — voltean con el tema sin redefinir. Filete izquierdo (3 px) en el color de la señal.

<div class="sn-wash sn-wash-ok">
'''Confirmación.''' Texto del aviso.
</div>

<div class="sn-wash sn-wash-info">
'''Información.''' Aviso neutro.
</div>

<div class="sn-wash sn-wash-warn">
'''Advertencia.''' Precaución.
</div>

<div class="sn-wash sn-wash-danger">
'''Error.''' Bloqueo o falla.
</div>

Variantes: sn-wash-ok (confirmación) · sn-wash-info (aviso neutro) · sn-wash-warn (precaución) · sn-wash-danger (error o bloqueo). Estos avisos los inserta el skin en respuesta a acciones del sistema, pero también se pueden emitir desde una plantilla envolviendo el contenido en un <div> con la clase correspondiente.

Badges y contadores

Badge: tipografía --sn-fs-xs peso 500, radio --sn-radius · fondo wash correspondiente a la señal.
Pill: --sn-radius-pill + familia mono para valores numéricos.

<span class="sn-badge">Neutro</span>
<span class="sn-badge sn-badge-nova">Nova</span>
<span class="sn-badge sn-badge-ok">Activo</span>
<span class="sn-badge sn-badge-warn">En revisión</span>
<span class="sn-badge sn-badge-danger">Bloqueado</span>

<span class="sn-pill">42 ítems</span>
Neutro Nova OK Aviso Error 000 ítems 000 ítems

Badges para estados cortos (palabras); pills para contadores numéricos (familia mono). Variantes: sn-badge-nova · -ok · -warn · -danger. Útiles para marcar el estado de una etapa, un proyecto o una observación dentro de fichas y plantillas.

Tabla de contenidos

Numeración en --sn-font-mono · --sn-fs-xs · filete izquierdo en --sn-nova marca la sección activa.

== Sección uno ==
== Sección dos ==
=== Sub-sección 2.1 ===
=== Sub-sección 2.2 ===
== Sección tres ==

Palabras mágicas (control fino):
__TOC__       inserta el índice en este punto.
__NOTOC__     suprime el índice de la página.
__FORCETOC__  fuerza el índice aun con < 4 cabeceras.

Por defecto la tabla aparece automáticamente cuando hay 4 o más cabeceras (==, ===, etc.), justo antes de la primera. Las palabras mágicas con doble guión bajo a cada lado la sobrescriben (sensibles a mayúsculas).

El skin la renderiza en la posición donde la coloque MediaWiki — respeta la ubicación de __TOC__. Solo cambia su vestimenta (numeración monoespaciada, filete izquierdo carmín marcando la sección activa).

Nota al margen

aside.sn-notice · información meta del artículo (categorías, redirecciones, banners de plantilla) · fondo --sn-info-wash · filete --sn-warn.

<aside class="sn-notice" role="note">
'''Nota.''' Texto del aviso, con [[enlaces]]
si hace falta.
</aside>

El cuerpo del artículo continúa debajo del aviso, manteniendo el flujo de lectura sin saltos visuales bruscos.

A diferencia de los washes (que codifican una severidad), la nota al margen es información meta del artículo: redirecciones, banners de plantilla, advertencias editoriales. Va dentro del cuerpo y rompe sutilmente el flujo sin alarmar. Se usa también para el fragmento administrable Stella-Nova:Aviso que se inyecta al tope del paper.

Imágenes a sangre completa (.full-width)

Clase de wikitexto migrada desde Common.css de producción para que viaje con el tema. Una imagen, figura o envoltorio con class="full-width" se «revienta» del padding lateral de la hoja para ir borde a borde del artículo. Sirve a tres patrones de wikitexto.

[[Archivo:foo.jpg|class=full-width]]
[[Archivo:foo.jpg|frameless|class=full-width]]
<div class="full-width">[[Archivo:foo.jpg]]</div>

Párrafo del cuerpo, con el ancho de lectura normal de la hoja.

imagen a sangre completa · borde a borde

El párrafo siguiente regresa al ancho de lectura.

El truco: margin-inline: calc(-1 * var(--sn-paper-px)), el mismo padding lateral que la hoja expone como contrato. Sólo funciona dentro de .sn-paper / .sn-canvas. También casa el token con apóstrofes 'full-width' que MediaWiki preserva en [[Imagen:…|class='full-width']].

Botón de contenido (.wiki-btn)

Clase de wikitexto migrada desde Common.css al tema. Botón «outline» que envuelve un enlace: contorno fino (1 px) en forma de píldora; al pasar el cursor se rellena y el texto voltea. Tres variantes: por defecto (gris), red y green. Color 100 % por tokens → voltea claro/oscuro.

<span class="wiki-btn">[[Página|Etiqueta]]</span>
<span class="wiki-btn red">[[…|Rojo]]</span>
<span class="wiki-btn green">[[…|Verde]]</span>

Color 100 % tokenizado: por defecto → --sn-ink-soft; red--sn-nova; green--sn-ok. El enlace interno hereda el color; al hover/foco el botón se rellena y el texto pasa a --sn-nova-ink (voltea: blanco en claro, casi-negro en oscuro). La variante blue se retiró (sin token equivalente, sin uso). Debe vivir dentro de .sn-body (la regla está acotada a ese contenedor).

Grid / grilla — framework de layout

Reemplaza el patrón .row > .col-md-* del skin Bootstrap anterior. Nombre bilingüe: .grid (canónico) y .grilla (alias en español). Los modificadores se combinan: .cols-1…6 / .cols-auto / .cols1-2 / .cols2-1 (columnas), .gap-0/s/m/l (espaciado), .flujo-v/.stack (pila vertical), .align-top/center/bottom (alineación de celda), .sin-margen/.flush (margen) y .full/.completa (a todo el campo). Bajo 64 rem las grillas densas (4/5/6) reducen columnas; bajo 48 rem todas colapsan.

A la izquierda el código que se escribe; a la derecha, el resultado. La misma referencia vive en la wiki en Ayuda:Grilla.

cols-2

<div class="grid cols-2">
  Celda 1
  Celda 2
</div>
Celda 1
Celda 2

cols-3

<div class="grid cols-3">
…tres hijos directos…
</div>
1
2
3

cols-auto + gap-l (tarjetas auto-fit, gap amplio)

<div class="grid cols-auto gap-l">
…tantas columnas (≥ 16 rem) como quepan…
</div>
auto 1
auto 2
auto 3
auto 4

cols2-1 (tercios asimétricos) + align-center

<div class="grid cols2-1 align-center">
Bloque amplio (dos tercios)
Bloque angosto (un tercio)
</div>
2/3 — bloque amplio
con dos líneas
1/3

stack (flujo vertical) + gap-s

<div class="grid stack gap-s">
…celdas apiladas en columna…
</div>
fila 1
fila 2
fila 3

gap-0 (sin separación)

<div class="grid cols-3 gap-0">
…sin separación entre celdas…
</div>
1
2
3

alias en español (grilla)

<div class="grilla cols-2">
…equivalente a class="grid cols-2"…
</div>
Celda 1
Celda 2

full / completa (a todo el campo)

full rompe el ancho de lectura con la técnica de full-width (100vw + margen inline negativo): a sangre del viewport en pantalla completa, del paper en chrome normal. No se demuestra en vivo aquí porque reventaría el recuadro del espécimen; ver la wiki para el efecto real.

<div class="grid cols-3 full">
…ocupa todo el campo…
</div>
1
2
3

Cada hijo directo de .grid es una celda; URLs largas o bloques de código no desbordan (minmax(0, 1fr)). El gap por defecto es --sn-s-4 (1 rem) y ahora se ajusta con .gap-0/s/m/l.

Funciona en chrome normal y en __PANTALLACOMPLETA__: ambos contenedores llevan .sn-body, que es donde el skin define la regla. En pantalla completa el contenido es libre (sin columna central), así que .grid es la herramienta recomendada para maquetar ahí. Si la grilla aparece "rota" (en una sola columna), revisar que esté dentro de .sn-body.