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
