Este código CSS define una familia de fuentes personalizada llamada "Guardian Headline Full" con múltiples pesos y estilos. 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 los servidores de The Guardian.
@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;
}
div#maincontent:focus {
box-shadow: none !important;
}
#init-1, #end-1, #init-2, #end-2, #init-3, #end-3, #init-4, #end-4, #init-5, #end-5,
h2#interactive-slot-1, h2#interactive-slot-2, h2#interactive-slot-3, h2#interactive-slot-4, h2#interactive-slot-5 {
visibility: hidden;
height: 0;
margin: 0;
padding: 0;
border: none;
}
:root {
--fires-bg-color: #0b0a32;
--headline-bg-color: #0b0a32;
--custom-text-color: #fff;
--article-border: #fac99b;
--primary-accent-color: #fac99b;
--secondary-accent-color: #ff5943;
--tertiary-accent-color: #59433c;
--block-quote-fill: var(--primary-accent-color);
--share-button: var(--primary-accent-color);
--share-button-hover: var(--fires-bg-color);
--interactive-block-background-datawrapper: transparent;
--branding-border: var(--tertiary-accent-color);
--section-background: #ffffff;
--interactive-block-background: transparent;
--caption-text: var(--primary-accent-color);
--sub-meta-label-text: #fff;
--dateline: var(--secondary-accent-color);
--sub-meta-background: --fires-bg-color;
--sub-meta-text: var(--primary-accent-color);
--sub-meta-text-hover: var(--fires-bg-color);
--straight-lines: var(--primary-accent-color);
--article-meta-lines: var(--primary-accent-color);
--article-background: var(--fires-bg-color);
}
li:before {
background-color: var(--secondary-accent-color) !important;
}
body {
background-color: var(--fires-bg-color) !important;
}
.content--interactive {
background-color: transparent !important;
}
body .content--interactive h1,
body .article h1 {
order: 1;
text-align: left;
color: #fff;
min-width: 50%;
margin: 0 auto 13px 10px;
color: var(--secondary-accent-color) !important;
}
.content__standfirst p {
margin: 0 auto 13px 10px;
}
.content__label__link span {
margin: 0 0 0 10px !important;
}
El resumen del contenedor tiene un margen izquierdo de 10 píxeles y utiliza un color de acento específico para su texto. Los elementos con el atributo data-print-layout establecido en "hide" no se muestran.
Los párrafos y los encabezados principales dentro del contenido interactivo y los artículos utilizan colores de texto personalizados. El tamaño de fuente del encabezado principal se establece en 3 rem, ajustándose a 2.5 rem en pantallas de tamaño mediano. Los encabezados secundarios tienen un peso de fuente ligero, un tamaño de 32 píxeles y un color de texto personalizado.
El texto introductorio en el contenido interactivo utiliza un color de acento primario y tiene un ancho máximo de 320 píxeles. Los enlaces dentro de artículos y contenido interactivo se colorean con un acento secundario. El enlace de la etiqueta del título también utiliza el color de acento primario.
El cuerpo define un esquema de color integral utilizando propiedades personalizadas de CSS para texto, fondos, líneas, botones, resaltados y colores de marca específicos. El fondo general de la página se establece con una variable personalizada.
Los encabezados y cuerpos de los artículos tienen un fondo transparente. La columna principal para contenido interactivo ajusta su ancho y elimina los márgenes predeterminados. La primera figura y el primer elemento átomo tienen bordes inferiores coloreados.
El contenedor principal del artículo interactivo abarca todo el ancho del viewport sin desplazamiento horizontal y utiliza un área de cuadrícula específica. En pantallas más grandes, el diseño utiliza una cuadrícula de varias columnas. El cuerpo del artículo ocupa toda la cuadrícula y oculta el desbordamiento.
Un elemento de borde está oculto, y el área de contenido principal no tiene margen superior. Para pantallas muy anchas, la cuadrícula define una columna central de 1300px con un margen izquierdo para elementos que no son del cuerpo. Esta columna central y el margen se ajustan en varios puntos de interrupción para diferentes anchos de pantalla.
Los elementos que no son del cuerpo en la cuadrícula interactiva tienen un orden de apilamiento más alto y reciben relleno lateral en pantallas más grandes. En Android e iOS, el cuerpo del artículo no tiene relleno, y el encabezado se posiciona de forma absoluta con un fondo transparente. El texto de la firma del autor y los enlaces dentro de la sección meta también mantienen la transparencia en estas plataformas móviles.
La firma, los enlaces del autor y las etiquetas de título están configurados para usar el color de acento secundario. El componente meta-byline tiene un margen izquierdo de 10px. Los enlaces del autor tienen un margen inferior de 13px. Las secciones de título y encabezado tienen un relleno superior de 5vh, con el título también teniendo un relleno inferior de 4px. El elemento de líneas y los bordes de la sección meta están ocultos en Android e iOS.
En Android e iOS, la fecha de publicación tiene un relleno superior de 4px. Los botones de redes sociales en la sección meta utilizan el color de acento secundario para el texto y los bordes, y sus iconos se rellenan con el mismo color. Los iconos en el contenedor meta del contenido están ocultos. Todos los elementos que no son del cuerpo en la cuadrícula interactiva tienen un relleno izquierdo y derecho de 10px. La sección de redes sociales en el área meta no tiene borde superior, y la sección de comentarios está oculta. El botón de compartir cambia al color de acento secundario con un icono blanco al pasar el cursor.
La primera figura de elemento átomo abarca todas las columnas con un margen inferior de 12px. Las figuras de elementos inmersivos tienen un ancho completo, hasta 1260px, sin márgenes laterales, y abarcan desde la penúltima hasta la segunda columna.
En pantallas pequeñas (menos de 30em), todos los elementos no inmersivos en la columna principal tienen márgenes laterales de 10px. En pantallas medianas (46.25em y superiores), la columna interactiva principal tiene una posición relativa con una línea vertical a la izquierda. Los elementos no átomo se colocan en la columna de cuadrícula del cuerpo.
Para diferentes tamaños de pantalla, el diseño utiliza plantillas de cuadrícula específicas:
- Entre 46.25em y 61.24em: un diseño de tres columnas.
- Entre 61.25em y 71.24em: un diseño de cuatro columnas.
- Entre 71.25em y 81.24em: un diseño de cinco columnas con columnas izquierda y derecha.
- Por encima de 81.25em: un diseño de cinco columnas con columnas más anchas.
El título se posiciona a 20dvh desde la parte superior, con ancho completo, sin margen superior. En pantallas entre 20em y 46.24em, se mueve a 10dvh. Las etiquetas de título no tienen borde.
El encabezado también está a 20dvh, con ancho completo, fondo oscuro, relleno y un borde superior. En pantallas medianas, se mueve a 10dvh.
El standfirst se posiciona a 20dvh, con ancho completo, fondo oscuro y relleno. En pantallas medianas, se mueve a 10dvh.
La cuadrícula interactiva define áreas para encabezado, standfirst, medios, líneas, meta y cuerpo.
La sección meta tiene ancho completo, posicionada a 20dvh con fondo oscuro y un z-index de 5. En pantallas medianas, se mueve a 10dvh. La dateline tiene un margen izquierdo de 10px.
El svelte-scroller-outer se muestra como un bloque con posicionamiento relativo.
El código CSS define estilos para un componente scroller e incluye reglas font-face para la familia de fuentes Guardian Headline Full. El scroller tiene una visualización en bloque, posicionamiento relativo y ancho completo. Su primer plano se establece en un z-index más alto y limpia los flotantes, mientras que el contenedor de fondo está posicionado de forma absoluta sin eventos de puntero y optimizado para cambios de transformación. Las reglas font-face cargan varios pesos y estilos de la fuente Guardian Headline Full desde los servidores de The Guardian, especificando variantes light, regular, medium y semibold en estilos normal y cursiva, con soporte para formatos WOFF2, WOFF y TTF.
The Guardian utiliza fuentes personalizadas para sus encabezados y piezas de título. Estas fuentes se cargan desde sus servidores en múltiples formatos como WOFF2, WOFF y TTF para garantizar una amplia compatibilidad con navegadores. Cada variación de fuente, como negrita o cursiva, se define con pesos y estilos específicos.
La página incluye una superposición de carga con una animación giratoria que aparece durante la obtención de datos. El área de contenido principal presenta un mapa a pantalla completa y una sección narrativa de desplazamiento. Los cuadros de texto dentro de esta sección tienen un fondo estilizado, borde y tipografía utilizando la fuente Egyptian Web de The Guardian para el texto del cuerpo. Ciertos tramos de texto se resaltan con un fondo coloreado para énfasis.
El CSS define un radio de borde de 12 píxeles y carga la familia de fuentes Guardian Headline Full. Esto incluye varios archivos de fuente en diferentes pesos y estilos (light, regular, medium, semibold y sus versiones en cursiva) desde los servidores de The Guardian. Los archivos se proporcionan en formatos WOFF2, WOFF y TrueType para garantizar una amplia compatibilidad con navegadores.
Cada día en 2024, los incendios forestales quemaron más de 360 kilómetros cuadrados de bosque, un área más grande que Malta. Para finales de año, más de 134,000 kilómetros cuadrados habían sido consumidos por las llamas, un total mayor que el tamaño de Inglaterra. En los últimos 24 años, los incendios forestales han destruido 1.5
El mundo está perdiendo un área de bosque del tamaño de Mongolia debido al fuego, una tasa que los expertos advierten que es insostenible. Si bien los incendios forestales son una parte natural de los ecosistemas, su escala, frecuencia e intensidad en bosques ricos en carbono se han disparado en las últimas décadas.
Investigaciones del World Resources Institute (WRI) muestran que los incendios ahora destruyen más del doble de cobertura arbórea que hace veinte años. Solo en 2024, 135,000 kilómetros cuadrados de bosque se quemaron, convirtiéndolo en el año de incendios forestales más extremo registrado.
Curiosamente, investigaciones de la Universidad de Tasmania indican que los incendios en otros paisajes no han aumentado de la misma manera. El área total quemada a nivel mundial en realidad ha disminuido durante décadas, en parte debido a que las granjas en expansión en África frenan la propagación de incendios. Sin embargo, los bosques se han convertido en un nuevo punto crítico para los incendios.
El aumento de los incendios forestales es claro. Cuatro de los cinco peores años registrados han ocurrido desde 2020. La investigación del WRI destaca que 2024 fue la primera vez que grandes incendios ardieron simultáneamente tanto en bosques tropicales húmedos como el Amazonas como en bosques boreales, como los de Canadá.
Países como Brasil, Bolivia, Rusia, Australia y Canadá han sufrido algunas de sus peores temporadas de incendios en los últimos años. Las olas de calor, intensificadas por la contaminación de combustibles fósiles, están aumentando el riesgo de incendios extremos.
Por ejemplo, Rusia ha sufrido tres de sus peores temporadas de incendios desde 2020, siendo 2021 la más severa. Aproximadamente 45,000 kilómetros cuadrados de bosque se quemaron, principalmente en Siberia y el lejano oriente. Los incendios se extendieron tan al norte que llegaron a regiones de permafrost dentro del Círculo Polar Ártico. En 2021, los satélites registraron el incendio forestal más al norte jamás visto. A medida que se descongela más permafrost, secando el suelo, calentando el aire y reduciendo la humedad, los científicos esperan un "aumento abrupto" de incendios forestales.
El texto proporcionado parece ser una serie de reglas CSS `@font-face` para cargar la familia de fuentes "Guardian Headline Full" en varios pesos y estilos (como normal, cursiva, negrita, etc
