La familia tipográfica Guardian Headline Full incluye varios estilos, cada uno con diferentes pesos y cursivas. La versión ligera (peso 300) viene en estilos regular y cursiva, al igual que la versión regular (peso 400). Los estilos medium (peso 500) y semibold (peso 600) también tienen opciones regular y cursiva. Cada archivo de fuente está disponible en formatos WOFF2, WOFF y TrueType desde los servidores de The Guardian.@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Guardian Titlepiece;
src: url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://interactive.guim.co.uk/fonts/garnett/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) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
}
}La columna principal de contenido interactivo tiene estilos específicos para los elementos. Por ejemplo, los átomos no tienen margen superior ni inferior pero tienen un relleno de 12px. Cuando un párrafo sigue a un átomo, se elimina el relleno del átomo y se establecen márgenes de 12px. Los elementos en línea están limitados a un ancho de 620px.
Para las figuras con un rol de bucle, el pie de foto se posiciona con un índice z de 6. Un botón de bucle se estiliza para tener 32px de ancho, alineado a la derecha inferior con márgenes específicos. El botón del pie de foto tiene un alto índice z de 100.
Los elementos de video autoalojados se establecen al 100% de ancho, con un límite de 620px, y se muestran como un bloque con márgenes de 12px. El video y su contenedor también toman el ancho completo hasta 620px y están centrados. Si el video es inmersivo, elimina el límite de ancho y los márgenes, extendiéndose completamente. En pantallas más grandes, los videos inmersivos se expanden a 1140px de ancho con un margen izquierdo negativo, y en tamaños aún mayores, se convierten en 1300px de ancho con un margen negativo más grande.
Las variables de color definen varios colores de tema, como el gris de la línea de fecha, el borde del encabezado, el texto del pie de foto y el rojo de la función. En el modo oscuro, algunos colores se ajustan a una paleta de tema oscuro.
Dentro del cuerpo del artículo, el primer párrafo después de un átomo o una regla horizontal tiene un relleno superior adicional. Además, la primera letra del primer párrafo después de un átomo tiene un estilo, aunque el estilo específico no se detalla completamente aquí.El código CSS define estilos para letras capitulares, citas destacadas y varios elementos de diseño en diferentes secciones de un sitio web. Las letras capitulares se estilizan con una fuente, tamaño y color específicos, y se flotan a la izquierda. A las citas destacadas se les da un ancho máximo. Para los elementos de exhibición, los pies de foto se establecen en una posición estática con un ancho completo y un ancho máximo de 620px.
Los elementos inmersivos se configuran para tomar el ancho completo del viewport, menos la barra de desplazamiento. En pantallas más pequeñas que 71.24em, su ancho máximo se ajusta a 978px, y el relleno del pie de foto varía con el tamaño de la pantalla. En pantallas medianas (46.25em a 61.24em), el ancho máximo es de 738px. En pantallas pequeñas (menos de 46.24em), a los elementos inmersivos se les dan márgenes izquierdos negativos para extenderse hasta el borde del viewport, con el relleno del pie de foto ajustado en consecuencia.
Para pantallas más grandes (más de 61.25em), se utiliza un diseño de cuadrícula para el contenedor de mobiliario, creando una estructura de dos columnas con filas definidas para las secciones de título, titular, entradilla, metadatos y retrato. Se agrega un borde superior al primer hijo de los elementos de titular, y el posicionamiento de la sección de metadatos se establece en absoluto.El contenedor de mobiliario establece que el contenido de la entradilla tenga una posición relativa con un relleno superior de 2 píxeles y sin margen derecho. Dentro de la entradilla, el área de contenido principal tiene un margen inferior de 4 píxeles. Los elementos de lista dentro de la entradilla usan un tamaño de fuente de 20 píxeles. Los enlaces dentro de la entradilla, incluidos los que están en los elementos de lista, no tienen borde, no tienen imagen de fondo y están subrayados con un desplazamiento de 6 píxeles, usando un color personalizado para el subrayado. Al pasar el cursor, el color del subrayado cambia a un nuevo color de pilar.
El primer párrafo en la entradilla tiene un borde superior y sin relleno inferior. Para pantallas más grandes (61.25em y superiores), si la pantalla también tiene al menos 71.25em de ancho, se elimina el borde superior. Para pantallas de al menos 61.25em de ancho, las figuras no tienen margen izquierdo y un ancho máximo de 630 píxeles cuando están en línea.
En pantallas de 71.25em y más anchas, el contenedor de mobiliario utiliza un diseño de cuadrícula con columnas y filas específicas. Aparece una línea decorativa antes de la sección de metadatos, de 540 píxeles de ancho. Los párrafos en la entradilla no tienen borde superior, y se agrega una línea vertical antes del contenido de la entradilla. Para pantallas aún más grandes (81.25em y superiores), la cuadrícula se ajusta con más columnas y filas, la línea decorativa antes de los metadatos se extiende a 620 píxeles, y la línea vertical antes de la entradilla se desplaza ligeramente.
Las etiquetas en el encabezado del artículo o la sección de título tienen un relleno superior de 2 píxeles. El titular utiliza un peso de fuente en negrita, un ancho máximo de 620 píxeles y un tamaño de fuente de 32 píxeles. En pantallas más grandes (71.25em y superiores), el titular se ajusta a un ancho máximo de 540 píxeles y un tamaño de fuente de 50 píxeles.
Para pantallas medianas (46.25em y superiores), las líneas clave o los elementos de línea no tienen margen derecho. En pantallas más grandes (61.25em y superiores), estas líneas están ocultas. Las líneas usan un color personalizado para el trazo.Este código CSS define estilos para el diseño de una página web, particularmente para un contenedor con temática de mobiliario. Establece varias propiedades para elementos como información de metadatos, texto de entradilla, medios principales y pies de foto. Los estilos incluyen ajustes para márgenes, relleno, colores y posicionamiento, con reglas específicas para diferentes tamaños de pantalla usando consultas de medios. El diseño utiliza variables CSS personalizadas para colores, como `--darkBackground` y `--headerBorderColor`, y asegura que los elementos estén ocultos o se muestren según el ancho del viewport. El contenedor tiene un fondo oscuro e incluye un comportamiento responsivo para dispositivos que van desde móviles hasta escritorios.El código CSS estiliza elementos dentro de una clase furniture-wrapper. Los titulares (h1) están en negrita y son de un gris claro (#dcdcdc). Las figuras en los titulares no tienen margen superior y un pequeño margen inferior.
Para pantallas más anchas que 71.25em, aparece una línea coloreada antes de la sección de metadatos. El texto y los resúmenes en la sección de metadatos son de color gris claro. Los enlaces a redes sociales y los botones tienen un borde coloreado y usan un color específico para el texto y los iconos, que cambia a un fondo oscuro al pasar el cursor.
Los enlaces en la sección de metadatos usan un color específico y lo mantienen al pasar el cursor con subrayados coincidentes. En la sección de entradilla, los enlaces están subrayados con un color gris claro que cambia al pasar el cursor, y el texto del párrafo es gris claro. En pantallas más anchas, el primer párrafo puede tener o perder un borde superior. Los elementos de lista en la entradilla también son de color gris claro.
Para pantallas más anchas que 71.25em, aparece una línea antes de la entradilla. En pantallas más anchas que 46.25em, el contenedor obtiene un fondo oscuro y un borde derecho.El contenedor de mobiliario utiliza pseudo-elementos para crear bordes laterales. El elemento `:before` se posiciona a la izquierda con un fondo oscuro y un borde izquierdo, mientras que su ancho y posición izquierda se calculan en función del ancho del viewport, el ancho de la barra de desplazamiento y un ancho base fijo de 738px. El elemento `:after` refleja esto en el lado derecho con un borde derecho.
Para pantallas más grandes (ancho mínimo de 61.25em), los cálculos se ajustan a un ancho base de 978px. Este patrón continúa para puntos de quiebre aún mayores: 71.25em (base de 1138px) y 81.25em (base de 1298px).
Dentro del contenedor, los trazos SVG y ciertos bordes de elementos sociales/metadatos están configurados para usar una variable CSS personalizada para el color, `--headerBorderColor`.
En el cuerpo del artículo, los encabezados de nivel dos (`h2`) tienen un peso de fuente de 200, pero si contienen un elemento `strong`, el peso aumenta a 700.
Finalmente, se definen varias reglas `@font-face` para cargar la familia tipográfica "Guardian Headline Full" en varios pesos y estilos (Light, Light Italic, Regular, Regular Italic) desde los servidores de recursos de The Guardian.@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.ttf) format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHead
