Prose
CSS scope para contenido largo en MDX
Preview
Heading level 2
How vexingly quick daft zebras jump. The five boxing wizards jump quickly at dawn. Amazingly few discotheques provide jukeboxes, y sin embargo la línea aguanta el cuerpo de 18px sin fatiga.
Quiere la boca exhausta vid, kiwi, piña y fugaz jamón.
El pingüino Wenceslao hizo kilómetros bajo exhaustiva lluvia y frío; añoraba a su querido cachorro.
Heading level 3
Jovencillo emponzoñado de whisky: ¡qué figurota exhibe! La cigüeña tocaba el saxofón detrás del palenque de paja.
CSS real de prose.css (el canon), sin overrides: los tamaños que ves (h2 40px, body 18px, blockquote 28px Aleo italic) son los de producción. En uso real el contenedor centra a 90ch.
Elementos
| Elemento | Familia | Desktop | Mobile |
|---|---|---|---|
| h1 | Aleo | 64px / 500 | 36px |
| h2 | Aleo | 40px / 400 | 28px |
| h3 | Aleo | 32px / 400 | 24px |
| p | Georama | 18px / 400 | 17px |
| strong | Georama | 18px / 500 | 17px |
| blockquote | Aleo | 28px / 400 italic | 22px |
| table | Georama | 16px | 16px |
| figcaption | Georama | 14px | 14px |
Restricciones
- Sin @tailwindcss/typography. Todos los estilos son custom.
- Bold = peso 500. Nunca 700.
- Max-width 90ch.
- Solo dos componentes MDX: Lead y Figure/Caption.
Decisiones
| Decisión | Por qué |
|---|---|
| 90ch max-width | 65ch era demasiado estrecho para body a 18px |
| Strong a weight 500 | Georama 700 es demasiado pesado |
| Blockquote en Aleo italic | Distingue del body por cambio de typeface, no solo por borde |
| Fallback para figcaption huérfano | Previene rotura visual si se olvida el wrapper figure |