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.

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-base (el cuerpo, en H5/H6, que nunca bajan del tamaño de lectura). El acento carmín (--sn-nova) recae en los niveles impares — H1, H3 y H5; los pares (H2, H4, H6) van en tinta. Ese acento es transversal: el H5 sale carmín en cualquier contexto del skin (cuerpo, pie, modales), no sólo en el artículo.

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

Helpers de contenido

Clases utilitarias para el wikitexto — viven en MediaWiki:Common.css (replicadas aquí para el espécimen). Ortogonales: se combinan en cualquier orden (class="lg serif center nova"). Pensadas para envolver el <p> que genera la wiki: una clase en el <div> contenedor se hereda al párrafo interno (tamaño, familia, énfasis, color); la alineación se propaga al <p> de forma explícita porque .sn-body p fija justify. Alcance .mw-parser-output .clase para ganarle a las reglas de cuerpo del skin.

Tamaño — jumbo · lg · sm · xs

Escala alrededor del cuerpo (que es el tamaño por defecto, sin clase). Respetan la preferencia S/M/L del lector (--sn-font-scale); jumbo es el titular.

<p class="jumbo">Titular jumbo</p>
<p class="lg">Destacado (lg)</p>
Cuerpo normal, sin clase.
<p class="sm">Secundario (sm)</p>
<p class="xs">Pie / nota (xs)</p>

Familia — serif · sans · mono

<span class="serif">Forzado a serif</span>
<span class="sans">Forzado a sans</span>
<span class="mono">Forzado a mono</span>

Énfasis — uppercase · italic · bold

<span class="uppercase">Versalita real</span>
<span class="italic">Cursiva</span>
<span class="bold">Negrita</span>

Alineación — left · center · right · justify

En un <div> alcanzan el <p> interno que produce la wiki (por eso funcionan sobre bloques de párrafos, no sólo sobre el texto suelto).

<div class="center">
Texto centrado. Aunque la wiki lo
envuelva en su <p>, queda centrado.
</div>

<div class="right">Alineado a la derecha</div>

Color semántico — nova · ok · warn · danger

Color de texto por rol; voltean claro/oscuro con el tema. Para fondos y avisos en bloque, usar las cajas .wash del skin, no estas clases.

<span class="nova">Marca / acento</span>
<span class="ok">Correcto</span>
<span class="warn">Atención</span>
<span class="danger">Error</span>

Muestrario de roles

Ancho de fuente — fw-50 … fw-150

Estas viven en la skin (no en MediaWiki:Common.css ni en TemplateStyles). Existen porque el sanitizador de TemplateStyles (css-sanitizer) no acepta font-stretch: 80% —solo palabras clave—, así que una plantilla no puede condensar por porcentaje en su propio styles.css. La skin no está sanitizada y lo expone como clase: se escribe class="fw-90" y nunca se toca font-stretch en CSS sanitizado. fw-NN = font-stretch: NN% (eje wdth de las fuentes variables del skin). La escala va de 10 en 10, de 50 a 150; siguen publicados fw-75 fw-85 fw-95 (pasos de 5 heredados de v0.6.14). font-stretch hereda → en un <div> el ancho fluye a los párrafos internos.

<span class="fw-100">Ancho normal</span>
<span class="fw-90">Condensada 90%</span>
<span class="fw-80">Condensada 80% (= cuerpo)</span>

<!-- fuera de 75-100: fija la familia -->
<span class="serif fw-130">Expandida</span>

<div class="fw-90">
Un bloque entero: el ancho
se hereda a los <p> internos.
</div>

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: ----

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

Tablas

Clase .wikitable (y las de consulta semántica .smwtable / .broadtable): diseño minimalista de solo filetes horizontales — nunca verticales ni contorno exterior. Cabecera transparente con un filete normal (--sn-hairline) que la separa del cuerpo; entre filas, filete fino (--sn-hairline-soft) uniforme — sin colores alternados. Texto a --sn-fs-table (≈80% del cuerpo), todo alineado a la izquierda, sobre la grilla de línea base. En tablas anchas la <table> se vuelve su propia caja de scroll horizontal. Las de resultados (smwtable) realzan la fila bajo el cursor.

{| 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
|}

Ficha — class="wikitable plantilla"

El modificador plantilla (alias inglés template) convierte la tabla en una ficha vertical clave→valor (perfil, ficha técnica): sin filetes, la etiqueta a la derecha en versalita tenue y el valor a la izquierda. Llena el ancho y corre a ¾ de la línea base. Es lo que usan las fichas migradas desde MediaWiki:Common.css.

{| class="wikitable plantilla"
! Tipo de Proyecto
| Proyecto de Curso
|-
! Año
| 2016
|-
! Carrera
| Diseño Gráfico
|-
! Profesor
| Herbert Spencer
|}

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>

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>

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

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.

Formularios

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

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.

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>

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.

Aviso administrado (.sn-notice)

aside.sn-notice · banner que el skin inyecta al tope del paper desde el fragmento administrable Stella-Nova:Aviso. Se revienta al borde superior de la hoja (mismo bleed que .full-width), fondo --sn-notice-bg / tinta --sn-notice-ink (ámbar tenue que voltea con el tema) y trae su botón de cierre; el lector lo descarta y no reaparece esa revisión.

Se edita en Stella-Nova:Aviso
(no se teclea en el artículo).
El skin lo envuelve en:
<aside class="sn-notice">
  <div class="sn-notice-body">…</div>
  <button class="sn-notice-x">×</button>
</aside>

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>

Bandas de fondo (.fondo-*)

Bloque de contenido a sangre lateral: el fondo va de lado a lado de la hoja (misma técnica de bleed que .full-width) pero el contenido vuelve al ancho de lectura, con una línea base de aire arriba y abajo. Sirve para destacar una sección —intro, aviso, índice de portada— sin sacarla del flujo. Cada variante sólo cambia el color, tomado de un lavado pálido semántico que voltea con el tema. Se combina con las clases de contenido y con .grilla (el fondo sangra, la grilla maqueta dentro).

<div class="fondo-ahuesado">…</div>
<div class="fondo-coral">…</div>
<div class="fondo-verde">…</div>
<div class="fondo-ambar">…</div>
<div class="fondo-info">…</div>

<!-- con grilla: el fondo sangra,
     las columnas maquetan dentro -->
<div class="fondo-coral grilla cols-3">
  …tres columnas…
</div>

Botón de contenido (.wiki-btn)

Clase de wikitexto migrada desde Common.css al tema. Botón «outline»: contorno fino (1 px) en forma de píldora; al pasar el cursor se rellena y el texto voltea a --sn-nova-ink. Tres variantes: por defecto (gris), red y green. Color 100 % por tokens → voltea claro/oscuro. Robusto a tres usos: envolviendo un enlace, como span suelto (p.ej. un toggle) o aplicado directo a un <a> — el volteo del texto no depende de que haya un enlace dentro.

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

<!-- span suelto, sin enlace (toggle): -->
<span class="mw-customtoggle-x link-toggle wiki-btn green">
  ver versión en inglés</span>

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 en ambos ejes) o, por eje, .gap-h-* (horizontal, entre columnas) y .gap-v-* (vertical, entre filas), .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>

cols-3

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

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

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

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

<div class="grid cols2-1 align-center">
Bloque amplio (dos tercios)
Bloque angosto (un tercio)
</div>

stack (flujo vertical) + gap-s

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

gap-0 (sin separación)

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

gap por eje — gap-h (columnas) · gap-v (filas)

El gap se puede separar por eje: gap-h-* controla el espacio horizontal (entre columnas, dentro de la fila) y gap-v-* el vertical (entre filas). Se combinan entre sí y con gap-*. Aquí: columnas juntas (gap-h-0), filas separadas (gap-v-l).

<div class="grid cols-3 gap-h-0 gap-v-l">
…columnas pegadas, filas aireadas…
</div>

alias en español (grilla)

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

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>

Imagen con leyenda (thumb)

Miniatura enmarcada con pie, el patrón [[Archivo:…|thumb|…]]. MediaWiki moderno (Parsoid) emite <figure typeof="mw:File/Thumb"> con su <figcaption>; el skin une imagen y leyenda en una sola tarjeta sobre papel, esquinas --sn-radius-s, y la leyenda voltea con el tema. tright/tleft la flotan.

[[Archivo:Obra.jpg|thumb|right|
  Leyenda: describe la imagen.]]

Texto del cuerpo que fluye alrededor
de la miniatura flotada…

Texto del cuerpo que fluye alrededor de la miniatura flotada a la derecha. La leyenda queda pegada al pie de la imagen, sobre el mismo fondo de papel, sin la «lupa de ampliar» heredada del core. El resto del párrafo sigue su curso justificado hasta cerrar el bloque y reconquistar el ancho completo de la hoja.

Galería (<gallery> nativa)

El tag <gallery> del core produce ul.gallery.mw-gallery-traditional con una li.gallerybox por imagen. El layout lo aporta el módulo mediawiki.page.gallery.styles (replicado aquí); el skin viste el recuadro de cada caja (papel + --sn-radius-s) y achica el pie al grado más pequeño.

<gallery>
Archivo:A.jpg|Primera obra
Archivo:B.jpg|Segunda obra
Archivo:C.jpg|Tercera obra
</gallery>

Tarjeta Portafolio (formato #ask)

Origen: Plantilla:Portafolio/style.css (TemplateStyles, no el skin). Miniatura + título + datos que muestra una tarea o proyecto como tarjeta. Se invoca directa o, lo habitual, desde una consulta semántica {{#ask:… |format=template |template=Portafolio}} que lista proyectos. Suelta se autoacomoda (ancho base 16 rem); dentro de una grilla cols-auto pasa a celda y llena la columna. Toda la tarjeta enlaza a su página (stretched link).

{{#ask: [[Categoría:Proyecto]]
 | ?Imagen
 | ?Alumnos
 | format=template
 | template=Portafolio
}}

Atmósfera de colores afectadosAndrés Aliaga · Taller Luz y Color

Portafolio WebMartín Araneda · Construcción 4º DG

Ciclo Proyecto FinalAndrea Leiva · Módulo Investigación

Ficha Personal

Origen: Plantilla:Ficha Personal/style.css (TemplateStyles). Foto circular + bio en dos columnas (1fr 2fr); el nombre va en versalita. Aparece en los #ask format=template que listan profesores (Categoría:Persona), normalmente dentro de una grilla cols-auto.

{{#ask: [[Categoría:Persona]]
 | ?Imagen
 | format=template
 | template=Ficha Personal
}}

Óscar Andrade

Profesor Jerarquizado, Arquitecto PUCV
Magíster en Arquitectura y Diseño PUCV

Katherine Exss

Profesora, Diseñadora PUCV
Magíster en Diseño de Interacción

Documento miniatura (.dm) — tarjeta en la retícula

Origen: Plantilla:Documento miniatura/styles.css (TemplateStyles). Título enlazado + pie (autor · año) + guía, en una tarjeta de una fila que se apila en columna desde un {{#ask:… |format=template |template=Documento miniatura}}. Toda la tarjeta enlaza a su página (stretched link) y en hover pinta --sn-nova-wash. Cierra en la retícula: los textos corren a line-height: var(--sn-baseline) y el relleno vertical usa var(--sn-baseline-half) a cada lado — media interlínea × 2 = una línea base entera —, de modo que la altura de la tarjeta es múltiplo de --sn-baseline y una columna larga no acumula desfase, ni siquiera con la preferencia de tamaño de letra en sus extremos.

{{#ask: [[Categoría:Documento]]
 | ?Autor
 | ?Año
 | ?Profesor guía
 | format=template
 | template=Documento miniatura
}}

Listado de Cursos (.curso-listado)

Origen: Plantilla:Listado de Cursos/style.css (TemplateStyles). Hermana de .dm para cursos: h4 enlazado + profesores (itálica) + alumnos, apilada en columna desde un {{#ask:… |template=Listado de Cursos}}. Mismo contrato de retícula que .dm — textos a --sn-baseline y relleno var(--sn-baseline-half) — así la columna de cursos también cierra en baselines enteras.

{{#ask: [[Categoría:Curso]]
 | ?Profesores
 | ?Alumnos
 | format=template
 | template=Listado de Cursos
}}