Este código CSS define la familia tipográfica "Guardian Headline Full" con diversos pesos y estilos, incluyendo light, regular, medium y semibold, cada uno en versiones normal y cursiva. Especifica los archivos de fuente en formatos WOFF2, WOFF y TrueType alojados en los servidores del Guardian.
Este código CSS define varias familias tipográficas para las fuentes Guardian Headline y Guardian Titlepiece, especificando sus fuentes en diferentes formatos (WOFF2, WOFF, TTF) junto con sus pesos y estilos de fuente. También incluye reglas de diseño responsivo para la columna de contenido principal en diseños interactivos, ajustando márgenes, anchos y posicionamiento según el tamaño de la ventana gráfica. Por ejemplo, en pantallas más anchas, añade un margen izquierdo y un borde, mientras que en pantallas más pequeñas, expande los elementos a ancho completo y los centra. Los estilos garantizan un formato adecuado en todos los dispositivos, con anchos máximos establecidos para varios tipos de contenido como átomos, showcases y elementos inmersivos.
Para las columnas de contenido interactivo, se añade un borde izquierdo antes del elemento, posicionado 11 píxeles a la izquierda. Dentro de estas columnas, los átomos (elementos) no tienen márgenes superior ni inferior pero incluyen 12 píxeles de relleno tanto en la parte superior como inferior. Cuando un párrafo sigue a un átomo, se elimina el relleno y se aplican márgenes de 12 píxeles en su lugar. Los elementos en línea están limitados a un ancho máximo de 620 píxeles, y para pantallas más anchas (más de 61.25em), las figuras en línea con un rol específico también se ajustan a este límite de ancho.
Se definen variables de color para varios elementos, como líneas de fecha, encabezados, leyendas y características, con un color de característica predeterminado establecido en rojo. Los átomos en la columna principal y en otros lugares no tienen relleno.
Se aplican reglas específicas al primer párrafo después de ciertos elementos o reglas horizontales en diferentes áreas de contenido (cuerpo del artículo, contenido interactivo, comentarios, características), añadiendo 14 píxeles de relleno superior. Además, la primera letra de estos párrafos se estiliza con una fuente grande, en negrita, mayúscula y en un tipo de letra específico, coloreada según una variable, y flotando a la izquierda con un margen.
Las reglas horizontales seguidas de párrafos en estas secciones no tienen relleno superior. Las citas destacadas dentro de áreas de contenido específicas están limitadas a un ancho máximo de 620 píxeles.
Para los elementos showcase en varios contenedores de artículos, las leyendas se posicionan estáticamente con ancho completo hasta 620 píxeles.
Los elementos inmersivos abarcan el ancho completo del viewport menos el ancho de la barra de desplazamiento. En pantallas de hasta 71.24em de ancho, estos elementos tienen un límite de 978px de ancho con un relleno de leyenda de 10px. Entre 30em y 71.24em, el relleno de la leyenda aumenta a 20px. Para pantallas entre 46.25em y 61.24em, el ancho máximo se convierte en 738px. Por debajo de 46.24em, los elementos inmersivos se alinean al borde izquierdo con márgenes ajustados y mantienen un relleno de leyenda de 20px entre 30em y 46.24em.
El contenedor furniture utiliza un diseño de cuadrícula responsivo en pantallas de 61.25em y más anchas, organizando las secciones de título, titular, información meta, standfirst y retrato. Los titulares presentan un borde superior, las secciones meta tienen relleno superior, y el texto standfirst incluye un estilo específico para listas y enlaces con subrayados personalizados que cambian de color al pasar el cursor. El primer párrafo en standfirst tiene un borde superior en pantallas más grandes pero lo elimina por encima de 71.25em.
Las figuras dentro del contenedor furniture tienen márgenes alineados a la izquierda y los elementos en línea están limitados a 630px de ancho. Por encima de 71.25em, el diseño de cuadrícula se ajusta para acomodar más columnas para el contenido de retrato.
El diseño utiliza una cuadrícula con columnas y filas específicas para diferentes tamaños de pantalla. Para pantallas más pequeñas, la cuadrícula tiene tres columnas y filas que se ajustan automáticamente, con una altura fija de 80px para las áreas de título y retrato. Aparece una línea fina sobre la sección meta, y la sección standfirst tiene una línea vertical en su lado izquierdo.
En pantallas más grandes, la cuadrícula se expande a más columnas y filas con unidades fraccionales para flexibilidad. La línea superior de la sección meta se ensancha, y la línea vertical del standfirst se desplaza ligeramente. Los titulares tienen un ancho máximo y un tamaño de fuente que aumentan en pantallas más grandes, mientras que ciertos elementos como líneas se ocultan o ajustan en márgenes para diferentes puntos de ruptura.
Los elementos sociales y de comentarios en la sección meta comparten el mismo color de borde, y algunos componentes no se muestran. El texto standfirst tiene un estilo específico con margen izquierdo y relleno reducidos, y propiedades de fuente. Los elementos multimedia principales se posicionan relativamente, con ancho completo y márgenes ajustados en varios dispositivos, y las leyendas se posicionan absolutamente en la parte inferior con colores de fondo y texto personalizados.
El código CSS define estilos para un componente contenedor furniture, incluyendo su diseño, colores y comportamiento responsivo en diferentes tamaños de pantalla. Establece colores de fondo, colores de texto y estilos de borde usando propiedades personalizadas de CSS para temas como el modo oscuro. El contenedor ajusta márgenes, relleno y posicionamiento en pantallas más grandes, e incluye reglas para ocultar o mostrar elementos como leyendas y botones. Los titulares y la información meta se estilizan con fuentes y colores específicos, y los botones de redes sociales tienen efectos hover que cambian su apariencia. Las consultas de medios aseguran que el diseño se adapte a varios dispositivos.
Este código CSS define estilos para la clase furniture-wrapper de una página web, centrándose en elementos como la información meta y las secciones standfirst. Establece colores de texto en gris claro (#dcdcdc) y colores de enlace en un tono basado en variables, con efectos hover que cambian los colores de decoración de texto. Los enlaces en áreas standfirst tienen subrayados con desplazamientos específicos y sin bordes, mientras que los párrafos y elementos de lista también adoptan el color gris claro.
Para pantallas más grandes (ancho mínimo: 61.25em), el primer párrafo en standfirst obtiene un borde superior, que se elimina en pantallas aún más grandes (71.25em). El código también crea barras laterales decorativas usando pseudo-elementos (:before y :after) que se ajustan en ancho según el tamaño de la ventana gráfica, con fondos oscuros y bordes con borde. Además, estiliza elementos SVG con colores de trazo e iconos de redes sociales o comentarios dentro de las secciones meta.
La sección de comentarios tiene un color de borde que coincide con el color del borde del encabezado.
En los artículos, los encabezados de segundo nivel (h2) dentro del cuerpo principal tienen un peso de fuente ligero de 200. Sin embargo, si un h2 contiene un elemento strong, utiliza un peso de fuente en negrita de 700.
La familia tipográfica Guardian Headline Full incluye varios estilos y pesos, cada uno con fuentes de archivo específicas en formatos WOFF2, WOFF y TrueType:
- Light (peso 300, estilo normal)
- Light Italic (peso 300, estilo cursiva)
- Regular (peso 400, estilo normal)
- Regular Italic (peso 400, estilo cursiva)
- Medium (peso 500, estilo normal)
- Medium Italic (peso 500, estilo cursiva)
- Semibold (peso 600, estilo normal)
- Semibold Italic (peso 600, estilo cursiva)
Este código CSS define varias caras de fuente para la familia tipográfica "Guardian Headline Full" con diferentes pesos y estilos (normal y cursiva), que van desde semibold (600) hasta black (900). Cada cara de fuente especifica archivos de origen en formatos WOFF2, WOFF y TrueType desde los servidores de recursos del Guardian.
También define la fuente "Guardian Titlepiece" con un peso en negrita (700) y estilo normal, usando formatos de archivo similares desde un subdominio diferente.
El código incluye propiedades personalizadas CSS (variables) para esquemas de color, particularmente para el modo oscuro en dispositivos iOS y Android. Configura un color de fondo oscuro, colores de característica para modos claro y oscuro, y usa consultas de medios para ajustar el color pilar según el esquema de color preferido del usuario.
Además, hay reglas de estilo específicas para la primera letra de los párrafos en contenedores de artículos en dispositivos iOS y Android, que se aplican cuando siguen a ciertos elementos como átomos, puertas de inicio de sesión o elementos de puerta específicos.
Para dispositivos Android, la primera letra del primer párrafo en artículos estándar y de comentarios se estiliza con un color pilar secundario. Tanto en iOS como en Android, los encabezados de los artículos están ocultos, y los contenedores furniture tienen un relleno específico. Las etiquetas dentro de estos contenedores usan una fuente en negrita, en mayúsculas, en estilo titular con un nuevo color pilar. Los titulares se establecen en 32px, en negrita, con relleno inferior y un color oscuro. Las imágenes en contenedores furniture se posicionan relativamente, abarcan el ancho del viewport menos la barra de desplazamiento, y ajustan su altura automáticamente.
Para dispositivos Android, las imágenes dentro de contenedores de artículos se configuran para tener un fondo transparente, abarcar el ancho completo del viewport menos la barra de desplazamiento, y ajustar su altura automáticamente.
Tanto en iOS como en Android, la sección standfirst en artículos tiene un relleno superior e inferior de 4px y 24px respectivamente, con un margen derecho compensado de -10px. El texto interior utiliza la familia tipográfica Guardian Headline o fuentes serif de respaldo.
Los enlaces dentro del standfirst en ambas plataformas se estilizan con un color específico, subrayados con un desplazamiento de 6px, y usan un color designado para el subrayado que cambia al pasar el cursor. Se elimina la imagen de fondo y el borde inferior.
Además, la sección meta en los artículos se estiliza consistentemente en iOS y Android para contenedores de característica, estándar y comentarios.
Para dispositivos Android, elimina los márgenes de los elementos meta en contenedores de artículos estándar y de comentarios.
Para dispositivos iOS, establece el color de los elementos de autoría y autor en contenedores de artículos de característica, estándar y comentarios al nuevo color pilar. También, elimina el relleno de los elementos meta misc y establece el trazo de los iconos SVG dentro de ellos al nuevo color pilar. Además, estiliza el botón de leyenda en elementos showcase con visualización, relleno, alineación y dimensiones específicas.
Para ambos iOS y Android, establece el relleno del cuerpo del artículo a 0 en los lados y 12px en la parte superior e inferior en contenedores de artículos de característica, estándar y comentarios.
Para dispositivos iOS y Android, en contenedores de artículos de característica, estándar y comentarios, las imágenes que no son miniaturas y no son inmersivas dentro del cuerpo del artículo no tendrán margen, un ancho del viewport completo menos 24 píxeles y el ancho de la barra de desplazamiento, y una altura automática. Sus leyendas no tendrán relleno.
Las imágenes inmersivas en estos contenedores abarcarán el ancho completo del viewport menos el ancho de la barra de desplazamiento.
Las citas en bloque citadas en el cuerpo del artículo mostrarán un marcador coloreado usando el nuevo color pilar.
Los enlaces en el cuerpo del artículo se estilizarán con el color pilar primario, subrayados con un desplazamiento, y usarán el color del borde del encabezado para el subrayado. Al pasar el cursor, el color del subrayado cambia al nuevo color pilar.
En modo oscuro, el fondo del contenedor furniture será gris oscuro (#1a1a1a).
Para dispositivos iOS y Android, los siguientes estilos se aplican a contenedores de artículos de característica, estándar y comentarios:
- Las etiquetas de contenido usan el nuevo color pilar.
- Los titulares no tienen fondo y usan el color del borde del encabezado para el texto.
- Los párrafos y enlaces standfirst usan el color del borde del encabezado.
- Las autorías y sus enlaces usan el nuevo color pilar.
- Los iconos de metadatos misceláneos se trazan con el nuevo color pilar.
- Las leyendas de imágenes showcase usan el color de la línea de fecha.
- Las citas en bloque citadas en el cuerpo del artículo se estilizan con el nuevo color pilar.
Para dispositivos iOS y Android, el color del texto de los bloques citados en los cuerpos de los artículos se establece en un color pilar específico.
Además, el color de fondo de varias secciones del cuerpo del artículo en ambos iOS y Android se cambia a un fondo oscuro, asegurando que anula cualquier otro estilo.
Además, para la primera letra que sigue a ciertos elementos en los cuerpos de los artículos en iOS, se aplica un estilo especial, aunque el efecto exacto no se especifica aquí.
Esto parece ser un selector CSS dirigido a la primera letra de los párrafos que siguen a elementos específicos en varios contenedores de artículos en plataformas iOS y Android. El selector se aplica a diferentes tipos de artículos (estándar, característica, comentario) y tiene en cuenta las puertas de inicio de sesión que pueden aparecer entre elementos.
Este código CSS define estilos para elementos específicos en dispositivos Android e iOS. Establece el color de la primera letra en ciertos párrafos a un color variable, ajusta el relleno y los márgenes para elementos standfirst en artículos de comentarios, y estiliza los encabezados con un tamaño de fuente de 24px.
Para los botones de leyenda, aplica diferentes valores de relleno en iOS y Android. En modo oscuro, cambia varias variables de color a tonos más oscuros para una mejor legibilidad y establece un color de fondo oscuro.
Además, oculta los encabezados de los artículos haciéndolos completamente transparentes en ambos sistemas operativos y aplica estilos a los contenedores furniture, aunque el código está incompleto para esto último.
Para dispositivos iOS y Android, el contenedor furniture del artículo no tiene margen. Dentro de artículos de característica, estándar y comentarios, las etiquetas de contenido usan una variable de color específica, mientras que los titulares se establecen en un color gris claro. Los enlaces en el encabezado del artículo o la sección de título también adoptan la variable de color designada.
Además, se aplica un gradiente lineal repetitivo como fondo antes de la sección meta, creando un efecto de borde con patrón. El texto de autoría en el área meta aparece en gris claro, y los enlaces dentro de la sección meta se estilizan en consecuencia.
Para dispositivos iOS y Android, los siguientes estilos se aplican a los enlaces dentro de la sección meta de contenedores de artículos de característica, estándar y comentarios:
- Los enlaces se colorean usando el nuevo color pilar o un color de característica de modo oscuro.
- Los iconos SVG en la sección miscelánea meta tienen su trazo establecido al mismo color.
- Las etiquetas de alerta se muestran en un color gris claro (#dcdcdc) con prioridad importante.
- Los spans con atributos data-icon también adoptan el nuevo color pilar o el color de característica de modo oscuro.
Para dispositivos iOS y Android, el color de los iconos dentro de la sección meta de contenedores de artículos de característica, estándar y comentarios se establece al nuevo color pilar o a un color de característica de modo oscuro.
En pantallas más grandes (71.25em y superiores), la sección meta en estos contenedores muestra un borde superior usando el nuevo color pilar o el color del borde del encabezado. Además, los elementos misceláneos meta tienen su margen izquierdo ajustado a 20px.
Los párrafos y listas desordenadas en el cuerpo del artículo de
