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 versiones normal y cursiva. Las fuentes se cargan desde los servidores de The Guardian en formatos WOFF2, WOFF y TrueType para garantizar la compatibilidad en diferentes navegadores.
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.ttf) format("truetype");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf) format("truetype");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
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;
}
@media (min-width: 71.25em) {
.content__main-column--interactive {
margin-left: 160px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive {
margin-left: 240px;
}
}
.content__main-column--interactive .element-atom {
max-width: 620px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-atom {
max-width: 100%;
}
}
.content__main-column--interactive .element-showcase {
margin-left: 0;
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-showcase {
max-width: 620px;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-showcase {
max-width: 860px;
}
}
.content__main-column--interactive .element-immersive {
max-width: 1100px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-immersive {
width: calc(100vw - var(--scrollbar-width, 0px));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
}
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(-20px);
width: calc(100% + 60px);
}
}
@media (max-width: 71.24em) {
.content__main-column--interactive .element-immersive {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(0);
width: auto;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive .element-immersive {
max-width: 1260px;
}
}
.content__main-column--interactive p,
.content__main-column--interactive ul {
max-width: 620px;
}
.content__main-column--interactive:before {
position: absolute;
top: 0;
height: calc(100% + 15px);
min-height: 100px;
content: "";
}
@media (min-width: 71.25em) {
}
Para las columnas de contenido interactivo, se añade un borde izquierdo con posicionamiento y z-index específicos. En pantallas más grandes, la posición izquierda del borde se ajusta ligeramente. Dentro de estas columnas, los elementos atómicos no tienen márgenes superior ni inferior pero incluyen relleno. Cuando los párrafos preceden a elementos atómicos, se elimina el relleno y se añaden márgenes en su lugar. Los elementos en línea están limitados a un ancho máximo.
Para las figuras en línea en pantallas medianas y superiores, se establece un ancho máximo. En las secciones de medios que contienen figuras en bucle, los subtítulos se superponen encima, y los botones de bucle se estilizan con dimensiones y alineación específicas. Los botones de subtítulo se colocan encima.
En la sección del cuerpo, las islas de vídeo autoalojadas ocupan el ancho completo hasta un máximo, con márgenes centrados. Las figuras en bucle y los vídeos dentro de estas islas también ocupan el ancho completo. Para los elementos de vídeo inmersivos, se eliminan las restricciones de ancho y se ajustan los márgenes. En pantallas más grandes, los vídeos inmersivos se expanden en ancho y se desplazan hacia la izquierda, con los subtítulos sangrados en consecuencia.
Las variables de color definen varios elementos de la interfaz de usuario como líneas de fecha, bordes, subtítulos y colores de características, con los colores de pilar influyendo en subtítulos, citas destacadas y citas en bloque. En el modo oscuro, estos colores se adaptan al tema oscuro.
Los elementos atómicos dentro de las columnas de contenido no tienen relleno. Reglas específicas ajustan los primeros párrafos después de ciertos elementos o reglas horizontales en diferentes áreas de contenido como artículos, contenido interactivo, comentarios y características, asegurando un espaciado y diseño adecuados.
El primer párrafo después de una puerta de inicio de sesión o una regla horizontal (excepto la última) tiene un relleno superior de 14 píxeles.
Para la primera letra del primer párrafo que sigue a elementos específicos como un átomo, una puerta de inicio de sesión o una regla horizontal (no la última) en varias áreas de contenido (cuerpo del artículo, contenido interactivo, comentarios, características o elementos con un `data-gu-name` de "body"), se aplica un estilo especial de letra capitular. Este estilo utiliza fuentes de titulares específicas, establece el tamaño de fuente en 111px con una altura de línea de 92px, lo flota a la izquierda, lo pone en mayúsculas, añade un margen derecho de 8px, lo alinea con la parte superior del texto y lo colorea con una variable personalizada para letras capitulares.
Los párrafos inmediatamente posteriores a una regla horizontal en estas áreas de contenido no deben tener relleno superior.
Las citas destacadas dentro de estas áreas de contenido están limitadas a un ancho máximo de 620 píxeles.
Los subtítulos para elementos de exhibición en el contenido principal, artículos de características, artículos estándar y secciones de comentarios se posicionan estáticamente, tomando el ancho completo hasta un máximo de 620 píxeles.
Los elementos inmersivos abarcan el ancho completo del viewport, teniendo en cuenta la barra de desplazamiento. En pantallas más grandes (hasta 71.24em), su ancho máximo es de 978px, con el relleno de subtítulos ajustado en diferentes puntos de interrupción. En pantallas medianas (entre 46.25em y 61.24em), el ancho máximo es de 738px. En pantallas más pequeñas (por debajo de 46.24em), los elementos inmersivos se alinean con el borde izquierdo con márgenes ajustados y relleno de subtítulos.
Para pantallas más anchas (por encima de 61.25em), el contenedor de mobiliario utiliza un diseño de CSS Grid con columnas y filas definidas para posicionar elementos como el título, el titular, los metadatos, el standfirst y las áreas de retrato.
Los estilos CSS definen un contenedor de diseño para componentes de artículo. Los titulares tienen un borde superior y ajustan su tamaño de 32px a 50px en pantallas más grandes, con un ancho máximo que también cambia. La información meta incluye una línea decorativa superior en pantallas anchas. La sección standfirst presenta enlaces subrayados con un color personalizado que cambia al pasar el cursor, y su primer párrafo tiene un borde superior en pantallas más pequeñas que se elimina en las más grandes. Aparece una línea separadora vertical en el standfirst en pantallas anchas.
Se definen cuadrículas de diseño para pantallas de 71.25em y más anchas, y nuevamente para 81.25em y más anchas, especificando plantillas de columnas y filas para posicionar elementos como las áreas de título, titular, meta, standfirst y retrato. Las figuras tienen márgenes específicos y anchos máximos. En general, los estilos controlan la presentación responsiva de los encabezados de los artículos y el contenido introductorio.
Para pantallas más anchas que 740px, oculta elementos con la clase `.keyline-4` o el atributo `[data-gu-name="lines"]`. Dentro del `.furniture-wrapper`, estiliza los trazos SVG dentro de estos elementos con una variable de color personalizada.
En pantallas medianas y más grandes, elimina el margen derecho de los elementos con el ID `#meta` o el atributo `[data-gu-name="meta"]`.
Dentro de la sección meta, establece el color del borde para enlaces sociales, elementos de comentarios y sus spans hijos a una variable personalizada. Además, oculta cualquier elemento `gu-island` dentro de un contenedor específico.
Para la sección standfirst, ajusta su posicionamiento y relleno, añadiendo un desplazamiento a la izquierda. En pantallas medianas, añade un pequeño relleno superior. Estiliza el párrafo interior con un peso de fuente regular, un tamaño de 20px y relleno inferior.
El área principal de medios se posiciona relativamente, se coloca en el área de cuadrícula 'portrait' y se le dan márgenes específicos. Asegura que sus divs internos tomen el ancho completo. En pantallas más grandes, elimina el margen inferior. En pantallas más pequeñas, ajusta el ancho y el margen izquierdo, con un ajuste adicional para pantallas medianas-pequeñas.
Estiliza los subtítulos de las figuras para que aparezcan en la parte inferior con un fondo y color de texto personalizados, anulando el ancho y los márgenes por defecto. Oculta el primer span interior y muestra el segundo, limitando su ancho. En pantallas medianas, ajusta el relleno del subtítulo. Un estado oculto hace que el subtítulo sea transparente.
Un botón de subtítulo se posiciona en la parte inferior derecha, estilizado con un fondo circular y un icono escalado, con su posición ajustada en pantallas medianas.
Para columnas de artículos interactivos en pantallas muy grandes, ajusta la posición y altura de un pseudo-elemento. Además, limita el ancho de los encabezados de nivel 2.
En iOS o Android, define un conjunto de variables de color para el tema oscuro. En el modo oscuro, ajusta la variable de color primario.
Para dispositivos iOS, apunta al primer párrafo después de elementos específicos en diferentes contenedores de artículo y estiliza su primera letra.
La primera letra del primer párrafo que sigue a una puerta de inicio de sesión, o el primer párrafo después de un átomo de elemento en varios contenedores de artículo en iOS y Android, debe colorearse usando la variable de pilar secundario (por defecto negro).
Tanto en iOS como en Android, la altura del encabezado del artículo en contenedores de artículo de características, estándar y comentarios debe establecerse en cero.
El contenedor de mobiliario dentro de estos contenedores de artículo en ambas plataformas debe tener un relleno superior de 4 píxeles y un relleno horizontal de 10 píxeles.
Las etiquetas dentro del contenedor de mobiliario deben estar en negrita, usar la pila de fuentes especificada, tomar su color de la nueva variable de pilar y estar en mayúsculas.
Los titulares (h1) dentro del contenedor de mobiliario deben tener un tamaño de 32 píxeles, estar en negrita, tener un relleno inferior de 12 píxeles y estar coloreados en #121212.
Las figuras de imagen dentro del contenedor de mobiliario deben posicionarse relativamente, tener un margen superior de 14 píxeles, un margen izquierdo de -10 píxeles, un ancho calculado como el ancho del viewport menos el ancho de la barra de desplazamiento, y una altura automática.
Para artículos de características en iOS, el elemento de figura interior, la imagen y el enlace dentro de estas figuras de imagen también deben seguir estas reglas de estilo.
Para dispositivos iOS y Android, se aplican las siguientes reglas CSS:
Para imágenes dentro de contenedores de artículo:
- Establece el fondo como transparente.
- Haz que el ancho sea igual al ancho completo del viewport menos el ancho de la barra de desplazamiento.
- Asegura que la altura se ajuste automáticamente.
Para la sección standfirst del artículo:
- Añade 4px de relleno en la parte superior y 24px en la inferior.
- Aplica un margen derecho negativo de 10px.
Para párrafos dentro del standfirst:
- Utiliza las familias de fuentes Guardian headline y serif.
Para enlaces dentro del standfirst:
- Establece el color a una variable específica.
- Elimina cualquier imagen de fondo.
- Aplica un subrayado con un desplazamiento de 6px y un color de borde específico.
- Elimina cualquier borde inferior.
Para efectos de hover en estos enlaces:
- Aplica el mismo estilo anterior.
Para dispositivos Android, al pasar el cursor sobre enlaces dentro de la sección standfirst de artículos de comentarios, el color del subrayado del texto debe coincidir con el nuevo color de pilar.
Tanto en dispositivos iOS como Android, para artículos de características, estándar y comentarios, la sección meta no debe tener margen. Dentro de esta sección meta, el byline, el nombre del autor y los enlaces relacionados deben mostrarse todos en el nuevo color de pilar.
Ad
