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
