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 un estilo específico para los elementos. Los elementos dentro de esta columna no tienen margen superior ni inferior pero incluyen relleno. Cuando un párrafo sigue a un elemento, el espaciado se ajusta en consecuencia. Los elementos en línea están limitados a un ancho máximo de 620 píxeles.
Para pantallas más grandes, las figuras en línea también están limitadas a 620 píxeles. Se aplica un estilo especial a los bucles de video, incluida la ubicación de los botones y la posición de los subtítulos. Los videos autoalojados se establecen con un ancho máximo de 620 píxeles con márgenes centrados, mientras que los videos inmersivos se expanden a todo el ancho con márgenes ajustados en pantallas más grandes.
Las variables de color definen el tema, como la fecha, los bordes del encabezado y los colores de los subtítulos. En modo oscuro, estos colores se adaptan a una paleta más oscura. El primer párrafo después de ciertos elementos recibe un relleno superior adicional, y la primera letra del primer párrafo puede tener un estilo distintivo.El código CSS define estilos para letras capitulares, citas destacadas y varios elementos de diseño en diferentes secciones de un sitio web, como artículos, comentarios y reportajes. Establece fuentes, tamaños y colores específicos para la primera letra de los párrafos, ajusta el ancho y la posición de los elementos inmersivos y de exhibición, y crea un diseño de cuadrícula receptivo para pantallas más grandes. Los estilos también incluyen consultas de medios para adaptar el diseño a diferentes tamaños de pantalla.El contenedor de mobiliario establece que el contenido del sumario tenga una posición relativa con un relleno superior de 2 píxeles y sin margen derecho. Dentro del sumario, los elementos de lista tienen un tamaño de fuente de 20 píxeles, y los enlaces no tienen borde, ni imagen de fondo, tienen un subrayado con un desplazamiento de 6 píxeles y un color de la propiedad personalizada `--headerBorder` (que por defecto es `#dcdcdc`). Al pasar el cursor, el subrayado del enlace cambia al color definido por `--new-pillar-colour`.
Para pantallas más grandes (61.25em y superiores), las figuras no tienen margen izquierdo, y los elementos en línea con un rol específico están limitados a un ancho máximo de 630 píxeles. A partir de 71.25em y superiores, el diseño utiliza una cuadrícula con columnas y filas definidas. Aparece una línea decorativa antes de la sección de metadatos, y se añade una línea vertical antes del sumario. Los bordes de los párrafos se eliminan en este punto de ruptura.
A 81.25em, la cuadrícula se ajusta para incluir más columnas, y las líneas decorativas se reposicionan.
Los titulares tienen un peso de fuente de 600 y un ancho máximo de 620 píxeles, con un tamaño de fuente de 32 píxeles. En pantallas más grandes (71.25em y superiores), el tamaño de fuente del titular aumenta a 50 píxeles, y el ancho máximo se reduce a 540 píxeles.
Para pantallas medianas (46.25em y superiores), los elementos con la clase `keyline-4` o el atributo `data-gu-name=lines` no tienen margen derecho. En pantallas más grandes (61.25em y superiores), estos elementos están ocultos. Sus trazos SVG utilizan el color `--headerBorder`.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 sumario, medios principales y subtítulos. Los estilos incluyen ajustes para márgenes, relleno, colores y posicionamiento, con reglas específicas para diferentes tamaños de pantalla utilizando consultas de medios. El diseño utiliza variables CSS personalizadas para colores, como características de modo oscuro y tonos de fondo, y asegura un comportamiento receptivo en todos los dispositivos.El código CSS estiliza elementos dentro de la clase furniture-wrapper. Los titulares (h1) son en negrita y de color gris claro (#dcdcdc). Las figuras en los titulares no tienen margen superior y tienen un pequeño margen inferior.
Para pantallas más anchas de 71.25em, aparece una línea de color 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 botones de redes sociales tienen un borde e icono de color, y el icono y el texto cambian de color al pasar el cursor.
Los enlaces en la sección de metadatos utilizan un color de tema y mantienen ese color al pasar el cursor, con un subrayado del mismo color. En la sección del sumario, los enlaces están subrayados con una línea gris claro que cambia al color del tema al pasar el cursor. Los párrafos y elementos de lista en el sumario son de color gris claro.
En pantallas más anchas de 61.25em, el primer párrafo en el sumario tiene un borde superior, que se elimina en pantallas más anchas de 71.25em. En esas pantallas más grandes, también aparece una línea de color antes del sumario.
Para pantallas más anchas de 46.25em, el furniture-wrapper obtiene un fondo oscuro y un borde derecho.El CSS define un `.furniture-wrapper` con pseudo-elementos que crean barras laterales. Estas ajustan el ancho y la posición según el tamaño de la ventana gráfica para mantener un área de contenido centrada de anchos fijos (738px, 978px, 1138px, 1298px) en diferentes puntos de ruptura, teniendo en cuenta el ancho de la barra de desplazamiento. Los bordes y colores de fondo se aplican utilizando propiedades CSS personalizadas.
Para los encabezados dentro de los artículos, los elementos `h2` utilizan un peso de fuente ligero (200), pero cambian a negrita (700) si contienen un elemento `strong`.
Las reglas `@font-face` cargan la familia de fuentes "Guardian Headline Full" en varios pesos y estilos (Light, Light Italic, Regular, Regular Italic) 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-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/GHGuardianHeadline-RegularItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format("truetype");
font-weight: 400;
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-Medium.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.ttf) format("truetype");
font-weight: 500;
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-MediumItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.ttf) format("truetype");
font-weight: 500;
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-Semibold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Semibold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Semibold.ttf) format("truetype");
font-weight: 600;
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-SemiboldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian
