El elemento con la clase "canvas.svelte-o3oskp" está configurado para mostrarse como bloque.
Se define una fuente personalizada llamada "Guardian Headline Full" con varios pesos y estilos:
- Light (300) en normal y cursiva
- Regular (400) en normal y cursiva
- Medium (500) en normal y cursiva
- Semibold (600) en normal y cursiva
Cada estilo de fuente está disponible en formatos WOFF2, WOFF y TrueType desde los servidores de recursos de The Guardian. El sitio web de The Guardian utiliza fuentes específicas para sus titulares y títulos. Estas incluyen Guardian Headline Full en estilos negrita, negrita cursiva, black y black cursiva, así como Guardian Titlepiece en negrita. Cada fuente está disponible en múltiples formatos de archivo como woff2, woff y truetype para compatibilidad.
Para la sección del carrusel, el título aparece en texto blanco usando la fuente Guardian Text Sans Web, con un tamaño de 17px y peso medio. Está posicionado de forma absoluta e incluye un enlace estilizado en verde brillante con peso negrita y sin subrayado.
El carrusel en sí es un contenedor de desplazamiento horizontal que ajusta los elementos en su lugar al desplazarse, con desplazamiento suave por defecto a menos que el usuario prefiera movimiento reducido. Oculta las barras de desplazamiento y tiene un espacio de 10px entre elementos.
Cada tarjeta en el carrusel mide 310px de ancho y 160px de alto, con fondo blanco y una imagen a la derecha que escala para ajustarse. El contenedor de la imagen es de 120px por 150px con fondo gris, y las imágenes se acercan ligeramente al pasar el cursor a menos que se prefiera movimiento reducido. Las tarjetas incluyen relleno y se muestran como contenedores flex, alineando el contenido en la parte inferior. En el componente del carrusel, el contenedor de imagen de la tarjeta no tiene efecto de transición. El contenedor de contenido dentro de cada tarjeta está configurado como un diseño de columna flexible. Los encabezados y párrafos dentro del contenedor de contenido están estilizados con color gris oscuro y sin decoración de texto. Los encabezados usan una pila de fuentes serif específica, tienen tamaño de fuente de 24px, altura de línea del 115%, peso normal y un borde inferior transparente. Los párrafos usan una pila de fuentes sans-serif con tamaño de fuente de 14px y altura de línea del 115%, con el primer párrafo en negrita.
Cuando se selecciona una tarjeta, su imagen escala un 20%. Las tarjetas deshabilitadas muestran una superposición de "Próximamente" en texto negrita sobre un fondo blanco semitransparente, posicionado en la parte superior izquierda.
La sección de controles es una fila flexible con alineación de espacio entremedio e incluye texto de paginación en blanco, usando una fuente sans-serif de 12px. Los botones de control son circulares, de 40px de diámetro, con borde gris y fondo transparente, conteniendo iconos de 24px. El icono del primer botón está volteado horizontalmente.
Las caras de fuente para Guardian Headline Full están definidas con variantes light, light cursiva, regular y regular cursiva, obtenidas de archivos woff2, woff y ttf. La familia de fuentes Guardian Headline Full incluye varios estilos y pesos, cada uno definido con archivos de origen específicos en formatos WOFF2, WOFF y TrueType. Aquí están los detalles:
- Regular Cursiva: peso 400, estilo cursiva
- Medium: peso 500, estilo normal
- Medium Cursiva: peso 500, estilo cursiva
- Semibold: peso 600, estilo normal
- Semibold Cursiva: peso 600, estilo cursiva
- Bold: peso 700, estilo normal
- Bold Cursiva: peso 700, estilo cursiva
- Black: peso 900, estilo normal
- Black Cursiva: peso 900, estilo cursiva
Todos los archivos de fuente están alojados en las URL especificadas del dominio de recursos 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-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;
}
.globe-overlay-wrapper {
overflow: auto;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 30;
background: #121212e6;
backdrop-filter: blur(2px);
display: flex;
justify-content: center;
}
.globe-overlay-wrapper .body-width-wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 100%;
padding: 22px 16px;
}
@media (min-width: 46.25em) {
.globe-overlay-wrapper .body-width-wrapper {
max-width: 740px;
}
}
@media (min-width: 61.25em) {
.globe-overlay-wrapper .body-width-wrapper {
max-width: 980px;
}
}
@media (min-width: 71.25em) {
.globe-overlay-wrapper .body-width-wrapper {
max-width: 1140px;
}
}
button {
padding: 1px 8px 3px;
border-radius: 30px;
border: 1px solid #fff;
background: var(--Neutral-neutral-neutral-7, #121212);
color: var(--Neutral-neutral-neutral-100, #fff);
font-family: Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 130%;
align-self: flex-start;
position: relative;
z-index: 60;
}
button:hover {
cursor: pointer;
}
.canvas-container {
width: 100vw;
height: 100vw;
max-width: min(600px, 100vh - 340px);
max-height: min(600px, 100vh - 340px);
align-self: center;
position: fixed;
top: 40px;
z-index: 40;
}
@media (min-width: 23.4375em) {
.canvas-container {
top: calc(50% - 120px);
left: 50%;
transform: translate(-50%, -50%);
}
}
.carousel-container {
height: calc(100vh - 116px);
height: calc(100dvh - 116px);
position: relative;
z-index: 50;
}
body.android .globe-overlay-wrapper .body-width-wrapper > button {
top: 58px;
}
body.ios .carousel-container {
height: calc(100vh - 180px) !important;
height: calc(100dvh - 180px) !important;
}
body.ios .canvas-container {
top: calc(50% - 170px) !important;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.ttf) format("truetype");
font-weight: 300;
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-LightItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.ttf) format("truetype");
font-weight: 300;
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-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-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/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format("truetype");
font-weight: 400;
font-style: italic;
}Este código CSS define varios estilos de fuente para la familia de fuentes "Guardian Headline Full". Incluye diferentes pesos y estilos (normal y cursiva) que van desde regular (400) hasta black (900). Cada estilo se especifica con múltiples formatos de archivo (WOFF2, WOFF y TrueType) para compatibilidad entre navegadores, todos obtenidos del servidor de recursos de The Guardian.Este texto define fuentes personalizadas y estilos para una página web. Especifica dos fuentes: Guardian Headline en black cursiva con un peso de 900, y Guardian Titlepiece en negrita con un peso de 700, ambas cargadas desde URL específicas en varios formatos.
También incluye reglas CSS para botones, como un botón circular que escala ligeramente al pasar el cursor y tiene un anillo de enfoque. Hay un botón de llamado a la acción "explorar" con relleno, borde y estilos de texto específicos.
Además, el código configura una barra de progreso que cambia de ancho y tiene diferentes colores de fondo, junto con ajustes de diseño responsivo para varios tamaños de pantalla. Un contenedor de botón de globo está estilizado para ser sticky y solo visible bajo ciertas condiciones, con diferentes diseños para dispositivos Android e iOS.
Finalmente, define un elemento de flecha de título como un icono circular con borde verde y contenido centrado.Este código CSS define estilos para una página web, incluyendo:
- Centrado de elementos con la clase "title-arrow"
- Configuración de imágenes dentro de "title-arrow" a ancho y alto completo
- Aplicación de filtros de inversión de color para modo oscuro en dispositivos iOS y Android
- Configuración del comportamiento de desplazamiento usando la librería Lenis smooth scrolling
- Carga de múltiples pesos y estilos de fuente para la tipografía "Guardian Headline Full" desde los servidores de The Guardian
El código maneja diseño responsivo, características de accesibilidad y tipografía para un diseño de sitio web de noticias.El sitio web de The Guardian utiliza fuentes específicas para sus titulares y títulos, cargándolas desde sus servidores en varios formatos como WOFF2, WOFF y TrueType. Estas fuentes incluyen diferentes estilos y pesos, como semibold, bold y black, tanto en versiones regulares como cursivas.
Para contenido interactivo, el diseño se ajusta según el tamaño de pantalla. En pantallas más anchas, la columna principal se desplaza hacia la izquierda con márgenes crecientes, mientras que elementos como átomos, showcases y contenido inmersivo tienen anchos máximos establecidos que cambian con el viewport. En pantallas más pequeñas, los elementos inmersivos se expanden a ancho completo y se realizan ajustes para las barras de desplazamiento para garantizar una alineación adecuada.Este texto parece ser código CSS para estilizar el diseño de una página web. Define estilos para diferentes tamaños de pantalla, colores, espaciado y elementos interactivos. El código establece anchos máximos para áreas de contenido, crea bordes, define variables de color para varios elementos como enlaces y fondos, y maneja cómo aparece la página cuando los scripts están habilitados o deshabilitados. También incluye estilos específicos para encabezados, párrafos y listas dentro de la columna de contenido principal, ajustando márgenes y relleno para diferentes dispositivos.Los enlaces de párrafo del contenedor del encabezado tienen un subrayado verde que se desplaza 4px del texto. Al pasar el cursor, el subrayado se vuelve oscuro.
La sección del titular presenta un fondo sutil de rayas verdes y asegura que el título no tenga relleno superior. Los enlaces del título están estilizados en una fuente específica, tamaño de 38px con color gris claro y transiciones suaves. Al pasar el cursor sobre ellos se eliminan los subrayados, cambian el color a oscuro y aumentan el contraste de un icono de flecha. Si se prefiere reducción de movimiento, las transiciones se desactivan. Los spans que no son enlaces en el título están ocultos.
El área de standfirst (subtítulo) tiene relleno inferior adicional y usa la misma fuente y tamaño que el título para sus párrafos.
Las animaciones controlan el fundido de entrada del título y standfirst cuando entran en vista, con el título fundiéndose primero. Estas animaciones se omiten si está habilitada la reducción de movimiento o no hay scripting disponible.
El primer elemento en línea está limitado a una relación de aspecto 4:5 con su imagen recortada en la parte superior. La sección del titular tiene relleno inferior y estiliza el encabezado principal con tipografía específica.
Las figuras tienen leyendas posicionadas en la parte inferior con un fondo oscuro semitransparente y texto claro, ocultando cualquier span dentro.
Las líneas no se muestran, y la sección meta tiene un borde superior delgado.Este texto parece ser código CSS para estilizar una página web, probablemente para un diseño de artículo. Define varias propiedades visuales como márgenes, fuentes, colores y comportamientos responsivos para diferentes tamaños de pantalla. El código incluye reglas específicas para elementos como el cuerpo del artículo, imágenes, leyendas y enlaces de redes sociales, ajustando su apariencia según el ancho del dispositivo y las preferencias del usuario para movimiento reducido.El CSS define un diseño de cuadrícula para contenido interactivo con tamaños de columna específicos y áreas nombradas. Ajusta el diseño para pantallas más grandes y cuando se prefiere movimiento reducido. Los elementos multimedia están configurados para ignorar eventos de puntero.
Para secciones del equipo de reportaje, estiliza una caja con bordes verdes, fuentes específicas y espaciado que cambia en pantallas más grandes. Los elementos de texto tienen tamaños, pesos y colores definidos, con cursiva para texto enfatizado. Los elementos de lista se muestran sin viñetas ni sangría.
Cuando el scripting está deshabilitado, ciertos elementos como barras de progreso y bordes están ocultos, y el formato de lista vuelve al predeterminado. Las imágenes dentro de enlaces o botones están contenidas sin desbordamiento.
En dispositivos iOS y Android, el fondo es blanco y los elementos del encabezado están organizados en una cuadrícula con áreas asignadas para titulares, metadatos y cuerpos de artículos, mientras se eliminan ciertas líneas decorativas.Este código CSS define el diseño y estilizado para artículos en dispositivos iOS y Android. Organiza la página en una cuadrícula con áreas específicas como barra de progreso, icono de
