Este código CSS define la familia tipográfica "Guardian Headline Full" con múltiples estilos y pesos. Incluye variantes light (300), regular (400), medium (500) y semibold (600), cada una en estilos normal y cursiva. Para cada estilo, proporciona archivos de fuente en formatos WOFF2, WOFF y TrueType desde el servidor de recursos de 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 y TrueType) junto con sus pesos y estilos. 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 ajusta los anchos y posiciones de los elementos para adaptarse a la pantalla. El código garantiza que elementos como párrafos y listas mantengan un ancho máximo para la legibilidad, y maneja elementos inmersivos expandiéndolos a ancho completo en dispositivos móviles y ajustando su diseño en pantallas más grandes.
Para columnas de contenido interactivo, se añade un borde izquierdo de color gris claro posicionado ligeramente a la izquierda. Los elementos dentro de estas columnas no tienen márgenes superior ni inferior pero incluyen un relleno de 12px. Cuando un párrafo sigue a un elemento, se elimina el relleno y se establecen márgenes de 12px. Los elementos en línea están limitados a un ancho máximo de 620px, y para pantallas más anchas, las figuras con un rol específico también se ajustan a este límite de ancho.
Se definen variables de color para varios elementos de texto y fondo, incluyendo líneas de fecha, bordes de encabezados, pies de foto y colores de características, con un color de característica predeterminado establecido en rojo.
Los elementos con estilo de átomos no tienen relleno. Se aplican reglas específicas al primer párrafo que sigue a ciertos elementos o reglas horizontales en diferentes áreas de contenido, añadiendo un relleno superior de 14px. Además, la primera letra de estos párrafos tiene un estilo de fuente grande, en negrita, mayúsculas y de estilo titular, coloreada según el color de característica definido, y flotada a la izquierda con un margen.
Las reglas horizontales seguidas de párrafos en varias secciones de contenido no tienen relleno superior. Las citas destacadas dentro de áreas de contenido específicas tienen un ancho máximo de 620 píxeles.
Para elementos de vitrina en varios contenedores de artículo, los pies de foto se posicionan estáticamente con ancho completo y un ancho máximo de 620 píxeles.
Los elementos inmersivos abarcan el ancho completo del viewport menos la barra de desplazamiento. En pantallas de hasta 71.24em de ancho, estos elementos se limitan a 978 píxeles, con un relleno de pie de foto de 10 píxeles. Entre 30em y 71.24em, el relleno del pie de foto aumenta a 20 píxeles. Para pantallas entre 46.25em y 61.24em, el ancho máximo es de 738 píxeles. Por debajo de 46.24em, los elementos inmersivos se alinean a la izquierda con márgenes ajustados y un relleno de pie de foto de 20 píxeles entre 30em y 46.24em.
El contenedor de mobiliario utiliza un diseño de cuadrícula en pantallas de 61.25em y más anchas, con columnas y filas definidas para organizar el contenido. Los titulares presentan un borde superior, las secciones meta tienen relleno superior y los elementos de standfirst incluyen enlaces estilizados con subrayados que cambian de color al pasar el cursor. Inicialmente, el primer párrafo en standfirst tiene un borde superior y sin relleno inferior, que se elimina en pantallas de 71.25em y superiores.
Las figuras dentro del contenedor de mobiliario tienen márgenes izquierdos y un ancho máximo de 630 píxeles para elementos en línea. En pantallas más grandes (71.25em y superiores), las columnas de la cuadrícula se reconfiguran para una colocación diferente del contenido.
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 define áreas para el título, titular, standfirst, información meta y retrato, con filas establecidas en alturas fijas y automáticas. Aparece una línea fina sobre la sección meta, y el standfirst tiene una línea vertical en su lado izquierdo.
En pantallas más grandes, la cuadrícula se ajusta para usar unidades fraccionales para las filas y expande los spans de columnas. El tamaño de fuente del titular aumenta y su ancho máximo cambia, mientras que algunos elementos como líneas se ocultan. El texto del standfirst tiene un estilo con un peso y tamaño de fuente específicos, y el área principal de medios se posiciona dentro de la cuadrícula, con ajustes de ancho y márgenes en dispositivos más pequeños. Los pies de foto se posicionan absolutamente en la parte inferior con un color de fondo y relleno.
El código CSS define estilos para un componente contenedor de mobiliario, 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 elementos ocultos y botones interactivos con efectos hover para compartir en redes sociales. Los titulares y la información meta tienen un estilo con fuentes y colores específicos, asegurando consistencia en el diseño.
Este código CSS define estilos para elementos dentro de una clase "furniture-wrapper", centrándose en las secciones de información meta y standfirst. Establece colores de texto en gris claro (#dcdcdc) y colores de enlace en un tono basado en variables, con efectos hover que cambian el color de la decoración del texto. Los enlaces en el standfirst están subrayados con un desplazamiento y color específicos, y los estados hover ajustan el color del subrayado en consecuencia.
Para pantallas más grandes (ancho mínimo: 61.25em), el primer párrafo en el standfirst gana un borde superior, que se elimina en pantallas aún más grandes (ancho mínimo: 71.25em). Los elementos de lista en el standfirst también adoptan el color de texto gris claro.
El código incluye elementos de diseño responsivo usando consultas de medios para diferentes anchos de pantalla (46.25em, 61.25em, 71.25em y 81.25em). Estos ajustan el ancho y posicionamiento de pseudo-elementos (:before y :after) para crear áreas de fondo con bordes, calculando dimensiones basadas en el ancho del viewport y ajustes de la barra de desplazamiento.
Además, estiliza elementos SVG dentro de keylines y elementos de redes sociales o comentarios en la sección meta, estableciendo su trazo y colores de texto para que coincidan con el tema usando variables CSS.
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 tienen un peso de fuente ligero de 200, pero si contienen un elemento strong, usan un peso negrita de 700.
Además, se define la familia tipográfica Guardian Headline Full con varios estilos y pesos, incluyendo light, regular, medium y semibold, cada uno en versiones normal y cursiva. Estas fuentes se obtienen de URLs específicas en formatos WOFF2, WOFF y TrueType.
Este código CSS define varias caras de fuente para la familia tipográfica "Guardian Headline Full", cada una con diferentes pesos y estilos (normal y cursiva), que van desde semibold (600) hasta black (900). También incluye una cara de fuente para "Guardian Titlepiece" en negrita. Las fuentes se obtienen de URLs específicas en formatos WOFF2, WOFF y TrueType.
Además, el código establece propiedades personalizadas de CSS (variables) para fondos de modo oscuro y colores de características, ajustándolos según la preferencia de esquema de color del usuario o cuando el sitio se ve en dispositivos iOS o Android. También incluye estilos para la primera letra de párrafos en contenedores de artículo en estas plataformas móviles, con selectores específicos para manejar puertas de inicio de sesión.
Para dispositivos Android, la primera letra del primer párrafo en artículos estándar y de comentarios tiene un estilo con un color de pilar secundario. Tanto en iOS como en Android, los encabezados de artículo están ocultos, y los contenedores de mobiliario tienen un relleno específico. Las etiquetas dentro de estos contenedores usan una fuente negrita, en mayúsculas, de estilo titular con un nuevo color de pilar. Los titulares se establecen en 32px, negrita, con relleno inferior y un color oscuro. Las imágenes en contenedores de mobiliario 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ículo se establecen 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, las secciones de resumen de artículo tienen un relleno superior e inferior de 4px y 24px respectivamente, con un margen derecho compensado de -10px.
El texto en estos resúmenes utiliza la familia tipográfica Guardian Headline o fuentes serif similares.
Los enlaces dentro de los resúmenes tienen un estilo 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 para coincidir con el color del enlace.
Además, las secciones de metadatos en artículos en ambos sistemas operativos tienen un estilo consistente.
Para dispositivos Android, el margen para elementos meta en contenedores de artículo estándar y de comentarios se establece en cero.
En dispositivos iOS, la información del autor y byline en contenedores de artículo de feature, estándar y de comentarios aparecerá en el color de pilar designado. De manera similar, en dispositivos Android, los mismos elementos en contenedores de artículo de feature, estándar y de comentarios también usarán el color de pilar.
Para ambos iOS y Android, la información meta miscelánea en contenedores de artículo de feature, estándar y de comentarios no tiene relleno, y cualquier icono SVG dentro de ellos tiene un estilo con el color de pilar como su trazo.
El botón de pie de foto en elementos de vitrina para artículos de feature, estándar y de comentarios en ambos iOS y Android se muestra como un contenedor flex. Está centrado, mide 28 por 28 píxeles y se posiciona a 14 píxeles de la derecha con 5 píxeles de relleno.
El cuerpo del artículo en contenedores de feature, estándar y de comentarios para iOS y Android tiene 12 píxeles de relleno horizontal y ningún relleno vertical.
Para dispositivos iOS y Android, en contenedores de artículo de feature, estándar y de comentarios, las imágenes que no son miniaturas ni inmersivas dentro del cuerpo del artículo no tendrán margen, un ancho calculado como el ancho completo del viewport menos 24 píxeles y el ancho de la barra de desplazamiento, y una altura automática. Sus pies de foto 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.
En la prosa del cuerpo del artículo, las citas en bloque entrecomilladas mostrarán un marcador coloreado usando el nuevo color de pilar. Los enlaces tendrán un estilo con el color de 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 de pilar.
En modo oscuro, el fondo del contenedor de mobiliario se establecerá en un gris oscuro (#1a1a1a).
Para dispositivos iOS y Android, aplicar los siguientes estilos a contenedores de artículo de feature, estándar y de comentarios:
- Establecer las etiquetas de contenido para usar el nuevo color de pilar.
- Eliminar el color de fondo de los titulares y establecer su color de texto al color del borde del encabezado, asegurando que esto tenga prioridad.
- Hacer que los párrafos y enlaces del standfirst adopten el color del borde del encabezado.
- Usar el nuevo color de pilar para los autores del byline y sus enlaces.
- Aplicar el nuevo color de pilar al trazo de los iconos meta misceláneos.
- Establecer el color de los pies de foto de imágenes de vitrina al color de la línea de fecha.
- Estilizar las citas en bloque entrecomilladas en la prosa del cuerpo del artículo en consecuencia.
Para dispositivos iOS y Android, el color de texto de los bloques entrecomillados en los cuerpos de artículo se establece en un color de pilar específico.
Además, el color de fondo para varias secciones del cuerpo del artículo en ambos sistemas operativos se fuerza a un fondo oscuro.
En iOS, la primera letra que sigue a ciertos elementos en los cuerpos de artículo tiene un estilo con efecto de letra capital.
Esto parece ser un selector CSS dirigido a la primera letra de párrafos que siguen a elementos específicos en varios contenedores de artículo en plataformas iOS y Android. El selector se aplica a diferentes tipos de artículo (estándar, feature, comentario) y tiene en cuenta las puertas de inicio de sesión que podrían 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 blanco o un color de variable personalizada. También ajusta el relleno y márgenes para elementos standfirst en artículos de comentarios, establece tamaños de fuente para encabezados h2 y modifica el relleno para botones de pie de foto.
Para el modo oscuro, cambia los colores de texto e iconos a tonos más claros y define un color de fondo oscuro. Además, oculta los encabezados de artículo haciéndolos completamente transparentes y aplica estilos a contenedores de mobiliario, aunque la última regla parece incompleta.
Para dispositivos iOS y Android, el contenedor de mobiliario del artículo no tiene margen. Las etiquetas en artículos de feature, estándar y comentarios usan el nuevo color de pilar o un color de característica de modo oscuro. Los titulares en estos artículos se establecen a un color gris claro. Los enlaces en encabezados de artículo o secciones de título también adoptan el nuevo color de pilar o el color de característica de modo oscuro.
Antes de la sección meta en estos artículos, se aplica un gradiente lineal repetitivo como fondo, usando el color del borde del encabezado para crear un efecto de rayas. El texto del byline dentro del área meta se muestra en gris claro.
Para dispositivos iOS y Android, los siguientes estilos se aplican a enlaces dentro de la sección meta de contenedores de artículo de feature, estándar y comentarios:
- Los enlaces están coloreados usando el nuevo color de 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 de 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ículo de feature, estándar y comentarios se establece a un nuevo color de pilar o 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 las mismas opciones de color. Además, los elementos meta misceláneos tienen su margen reiniciado y se aplica un margen izquierdo de 20 píxeles.
Los párrafos y listas desordenadas dentro del cuerpo del artículo de estos contenedores están limitados a un ancho máximo de 620 píxeles para ambos iOS y Android.
Las citas en bloque con la clase "quoted" en la sección de prosa del cuerpo del artículo también reciben estilos para iOS y Android en todos los tipos de artículo.
Para bloques entrecomillados en artículos
