Este código CSS define una familia de fuentes personalizada llamada "Guardian Headline Full" con múltiples pesos y estilos de fuente. Incluye pesos light, regular, medium y semibold, cada uno en estilos normal y cursiva. Los archivos de fuente se proporcionan en formatos WOFF2, WOFF y TrueType, alojados en el servidor de recursos de The Guardian.
La familia de fuentes Guardian Headline Full incluye varios estilos, cada uno disponible en múltiples formatos (WOFF2, WOFF y TTF). Los estilos son:
- Bold (peso 700, estilo normal)
- Bold Italic (peso 700, estilo cursiva)
- Black (peso 900, estilo normal)
- Black Italic (peso 900, estilo cursiva)
- Light (peso 300, estilo normal)
- Light Italic (peso 300, estilo cursiva)
- Regular (peso 400, estilo normal)
- Regular Italic (peso 400, estilo cursiva)
Además, la fuente Guardian Titlepiece está disponible en Bold (peso 700, estilo normal).
La familia de fuentes "Guardian Headline Full" incluye múltiples archivos de fuente en varios pesos y estilos. Cada fuente está disponible en formatos WOFF2, WOFF y TrueType, alojados en las URL especificadas. Los pesos van desde 400 (regular) hasta 900 (black), con estilos normal y cursiva proporcionados para cada peso.
```css
@font-face {
font-family: Guardian Headline;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Guardian Titlepiece;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-column-gap: 0px;
grid-template-columns: 100%;
grid-template-areas:
"media"
"title"
"headline"
"standfirst"
"lines"
"meta"
"body";
}
@media (min-width: 30em) {
#article-body>div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive>div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
padding: 0 20px;
max-width: 620px;
}
}
@media (min-width: 46.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 100%;
grid-column-gap: 10px;
grid-template-areas:
"title"
"headline"
"standfirst"
"media"
"lines"
"meta"
"body";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: 80px;
}
}
@media (min-width: 61.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 620px 300px;
grid-template-areas:
"title right-column"
"headline right-column"
"standfirst right-column"
"media right-column"
"lines right-column"
"meta right-column"
"body right-column"
". right-column";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: unset;
}
}
@media (min-width: 71.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 140px 1px 620px 300px;
grid-template-areas:
"title border headline right-column"
". border standfirst right-column"
". border media right-column"
". border body right-column"
". border . right-column";
}
#article-body>div .content--interactive-grid .content__standfirst,
.content--interactive>div .content--interactive-grid .content__standfirst,
#comment-body .content--interactive-grid .content__standfirst,
[data-gu-name=body] .content--interactive-grid .content__standfirst,
#feature-body .content--interactive-grid .content__standfirst {
padding-bottom: 0;
}
#article-body>div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive>div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
/ El estilo de caption continúa aquí /
}
}
```
Para los subtítulos de figuras inmersivas y el contenido de cuadrícula interactiva, el relleno se establece en 4 píxeles en la parte superior y 0 en otros lugares. Los elementos con los nombres "lines" y "meta" dentro de las cuadrículas interactivas se posicionan en un área de cuadrícula específica. Los elementos "lines" tienen una altura establecida para ajustarse a su contenido y un margen superior de 5 píxeles, mientras que los elementos "meta" tienen un margen superior de 18 píxeles.
En pantallas más anchas de 81.25 em, las cuadrículas interactivas utilizan un diseño de cinco columnas con anchos fijos y flexibles.
En dispositivos iOS y Android, los encabezados de los artículos utilizan fuentes y pesos específicos para el texto de standfirst, las etiquetas de sección y las líneas de autor. Las etiquetas de sección se escriben en mayúsculas y las líneas clave tienen un relleno ajustado. Las imágenes de las figuras tienen fondos transparentes y las imágenes se desplazan ligeramente hacia la derecha. Los titulares tienen fondos transparentes, relleno ajustado y utilizan un tamaño de fuente de 24 píxeles con una altura de línea del 115%. Para Android, los encabezados principales y secundarios se establecen para mostrarse como bloques. Tanto en iOS como en Android, los subtítulos tienen un estilo de peso de fuente ligero, alineación a la izquierda y ajuste de texto equilibrado.
Los kickers de los artículos no tienen relleno y su copia está oculta.
Los elementos de línea de autor y fecha de publicación utilizan una fuente de 17px con peso normal y una altura de línea del 130%. El texto de la línea de autor y los enlaces del autor tienen el color #707070.
Los párrafos de standfirst se establecen en 20px, estilo normal, peso ligero y una altura de línea del 115%. Los enlaces dentro de los párrafos de standfirst son en negrita, de color #707070, con un borde inferior y sin imagen de fondo.
El texto del titular tiene color #dcdcdc.
Las imágenes y sus contenedores se establecen en un ancho de 100vw menos 20px, con altura automática y un ancho máximo de 620px. Los elementos internos de las figuras tienen su altura sin establecer. Las imágenes showcase tienen un ancho máximo de 280px.
Ciertas secciones y apartados que siguen a la navegación están ocultos. Los elementos Atom no tienen margen ni relleno.
Los elementos showcase y sus contenidos tienen un ancho máximo de 210px, que aumenta a 260px para viewports más anchos de 61.25em. Los spans de caption dentro de elementos inline y showcase también tienen un estilo correspondiente. Para los subtítulos dentro del cuerpo, el texto del span se establece en 14px, un color gris claro (#707070) y se muestra en línea. El primer span en los subtítulos para elementos inline y showcase se establece en inline-block.
En pantallas más anchas de 71.25em, los subtítulos para elementos inline y showcase se posicionan relativamente y se restablece su ancho.
Para artículos de contenido interactivo, el diseño utiliza áreas de cuadrícula denominadas "header", "headline", "standfirst", "lines", "meta" y "body". En pantallas más grandes (71.25em y superiores), el diseño de cuadrícula cambia a tres columnas con áreas para "header", "meta", "border", "standfirst" y "body". Se elimina el margen de la columna principal, se oculta el borde izquierdo y el ancho del párrafo se establece en 620px.
Los elementos de titular tienen configuraciones de fuente específicas: Guardian Headline o fuentes similares, tamaño de 24px, peso ligero (300) y un color gris claro (#dcdcdc). El relleno es de 0-10px en pantallas pequeñas, 0-20px en pantallas medianas (30em y superiores) y se elimina en pantallas grandes (71.25em y superiores).
Las líneas clave y las líneas están ocultas. En pantallas grandes, el encabezado del artículo se posiciona absolutamente a 20px de la izquierda.
Los enlaces del encabezado del artículo utilizan un tamaño de fuente de 17px y estilo normal. El relleno superior del encabezado es de 2px, y las etiquetas tienen un borde superior y relleno (0-10px en pantallas pequeñas, 0-20px en pantallas medianas). En pantallas más grandes (46.25em y superiores), se elimina el borde superior y el relleno se establece en 0 en las pantallas más grandes (71.25em y superiores).
Este código CSS da estilo a los elementos dentro de un artículo interactivo.
Para los títulos y enlaces de los artículos, establece la altura de línea al 115% y el color del texto en #ff5943. Al pasar el cursor sobre los enlaces del título, el color del subrayado cambia a #dcdcdc.
El standfirst (resumen del artículo) utiliza fuentes específicas, un color gris (#606060), un tamaño de fuente de 24px, estilo normal, peso 400 y una altura de línea del 115%. Tiene un relleno que se ajusta según el ancho de la pantalla: 2px 10px para pantallas más pequeñas, 2px 20px para pantallas de 30em y más anchas, y sin relleno para pantallas de 71.25em y superiores. Los enlaces en el standfirst son #707070 y obtienen un borde inferior de 2px al pasar el cursor.
Los botones de redes sociales en la sección meta no tienen efecto de transición. Al pasar el cursor, su fondo se convierte en #121212, el borde se convierte en #121212, el texto se convierte en #dcdcdc y cualquier icono SVG también cambia a relleno #dcdcdc con fondo #121212.
Los botones de compartir están ocultos. Se define un pequeño elemento de espacio en línea de 4px. Para el cuerpo del artículo, un contenedor de cuadrícula de nombres utiliza un diseño de dos columnas con un ancho máximo de 620px. Para pantallas más anchas de 46.25em, el contenedor de cuadrícula de nombres utiliza dos columnas, cada una de 310px de ancho. Los elementos impares en la cuadrícula tienen 5px de relleno derecho (10px en pantallas más anchas), mientras que los elementos pares tienen 5px de relleno izquierdo (10px en pantallas más anchas).
Los encabezados (h2) dentro de la cuadrícula tienen un tamaño de fuente de 17px, un borde superior, 2px de relleno superior y un ancho máximo de 620px. Los elementos de lista que siguen a estos encabezados no tienen relleno ni margen, y el primer elemento utiliza un color de texto diferente. Los marcadores de elementos de lista están ocultos y el texto del párrafo utiliza una familia de fuentes específica, tamaño de 14px y una altura de línea del 130%.
Las figuras inmersivas tienen un fondo oscuro y las imágenes dentro de ellas comienzan completamente transparentes. Cuando se aplica la clase "fade-in", las imágenes se vuelven completamente opacas con una transición suave de 1 segundo.
El encabezado conmemorativo abarca el ancho completo del viewport (menos el ancho de la barra de desplazamiento), tiene un fondo oscuro, texto blanco y márgenes izquierdos negativos que se ajustan según el tamaño de la pantalla. En pantallas medianas y más grandes, incluye relleno centrado y un borde. La sección de nombres tiene una altura mínima de 200px y sin bordes superior e inferior, mientras que la sección de furniture es sticky en la parte inferior con ajustes de relleno adicional y alineación izquierda en pantallas más grandes. La sección interna de furniture incluye relleno izquierdo y un borde en pantallas más anchas.
```css
/
* Pila de fuentes serif
*/
/
* Pila de fuentes para titulares
*/
/
* Pila de fuentes sans serif para texto
*/
/
* Pila de fuentes sans serif para titulares
*/
/
* Configuraciones predeterminadas de escala de fuentes
* Ver font-scale.html y font-scale.png para ejemplos visuales
*/
/
* Obtener todos los niveles de una escala de fuentes
*
* @param {String} $name - Nombre de la escala de fuentes (ej., headline)
* @param {Map} $font-scale ($font-scale)
*
* @example
* font-size: get-scale(header);
*
* @return {Map}
*/
/
* Obtener información para un nivel específico de una escala de fuentes
*
* @param {String} $name - Nombre de la escala de fuentes (ej., headline)
* @param {Number} $level - Nivel en la escala
* @param {Map} $font-scale ($font-scale)
*
* @example
* font-size: get-scale-level(header, 1);
*
* @return {Map}
*/
/
* Obtener un tamaño de fuente para un nivel en la escala de fuentes
*
* @param {String} $name - Nombre de la escala de fuentes (ej., headline)
* @param {Number} $level - Nivel en la escala
* @param {Map} $font-scale - Configuración
*
* @example
* font-size: get-font-size(header, 3);
*
* @return {Number}
*/
/
* Obtener una altura de línea para un nivel en la escala de fuentes
*
* @param {String} $name - Nombre de la escala de fuentes (ej., headline)
* @param {Number} $level - Nivel en la escala
* @param {Map} $font-scale - Configuración
*
* @example
* font-size: get-line-height(header, 3);
*
* @return {Number}
*/
/
* Convertir cualquier valor a píxeles
*
* @param {Number} $value
*
* @example
* font-size: convert-to-px(14); // 14
