Este código CSS define una familia de fuentes personalizada llamada "Guardian Headline Full" con múltiples pesos y estilos de fuente. Incluye pesos light, regular, medium y semibold, cada uno con variaciones 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://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;
}
@media (min-width: 71.25em) {
.content__main-column--interactive {
margin-left: 160px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive {
margin-left: 240px;
}
}
.content__main-column--interactive .element-atom {
max-width: 620px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-atom {
max-width: 100%;
}
}
.content__main-column--interactive .element-showcase {
margin-left: 0;
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-showcase {
max-width: 620px;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-showcase {
max-width: 860px;
}
}
.content__main-column--interactive .element-immersive {
max-width: 1100px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-immersive {
width: calc(100vw - var(--scrollbar-width));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width)) !important;
}
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(-20px);
width: calc(100% + 60px);
}
}
@media (max-width: 71.24em) {
.content__main-column--interactive .element-immersive {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(0);
width: auto;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive .element-immersive {
max-width: 1260px;
}
}
.content__main-column--interactive p,
.content__main-column--interactive ul {
max-width: 620px;
}
.content__main-column--interactive:before {
position: absolute;
top: 0;
height: calc(100% + 15px);
min-height: 100px;
content: "";
}
@media (min-width: 71.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
La columna de contenido interactivo tiene un borde izquierdo y un espaciado específico para los elementos. Los párrafos que siguen a ciertos elementos tienen un relleno superior adicional, y la primera letra de estos párrafos tiene el estilo de una letra capitular grande y coloreada. Los elementos en línea y las figuras están limitados a un ancho máximo de 620px en pantallas más grandes. Se definen varias variables de color para una tematización consistente.
Las citas destacadas dentro de contenedores específicos deben tener un ancho máximo de 620 píxeles.
Los pies de foto para elementos de muestra en el contenido principal y los contenedores de artículos deben posicionarse estáticamente, con un ancho completo de hasta 620 píxeles.
Los elementos inmersivos deben abarcar el ancho completo del viewport, menos la barra de desplazamiento. En pantallas más grandes, se limitan a 978 píxeles, con el relleno del pie de foto ajustado para pantallas medianas. En pantallas de rango medio, el ancho máximo es de 738 píxeles. En pantallas más pequeñas, los elementos inmersivos se alinean al borde izquierdo con márgenes ajustados y relleno del pie de foto.
Para los envoltorios de mobiliario en pantallas más grandes, se utiliza un diseño de cuadrícula con columnas y filas definidas. Los titulares tienen un borde superior, las secciones de metadatos se posicionan relativamente, y el contenido de standfirst incluye estilos específicos para enlaces y párrafos. Las figuras dentro del envoltorio no tienen margen izquierdo y un ancho máximo de 630 píxeles cuando están en línea. En pantallas extra grandes, las columnas de la plantilla de cuadrícula se ajustan.
El CSS define un diseño de cuadrícula para un encabezado de artículo con áreas específicas para el título, el titular, el standfirst, la información de metadatos y una imagen de retrato. Establece estilos para bordes, tipografía y espaciado, ajustando estas propiedades en diferentes tamaños de pantalla mediante consultas de medios. Por ejemplo, el tamaño de fuente del titular aumenta en pantallas más grandes, y ciertos elementos se ocultan o reposicionan a medida que cambia el viewport. El área principal de medios se configura para que tenga ancho completo en dispositivos móviles.
El código CSS define estilos para el diseño de una página web, centrándose en un elemento envoltorio de mobiliario. Establece colores de fondo, márgenes, relleno y comportamientos responsivos para diferentes tamaños de pantalla. Los estilos incluyen propiedades personalizadas para colores, como características de modo oscuro y bordes de encabezado. Reglas específicas controlan la apariencia de pies de foto, botones, titulares e información de metadatos, con ajustes para efectos de hover e iconos de redes sociales. Las consultas de medios aseguran que el diseño se adapte desde vistas móviles hasta de escritorio, incluyendo pantallas más anchas donde se añaden fondos laterales.
Este código CSS define estilos para un componente de página web, probablemente una barra lateral o un envoltorio de contenido. Establece colores, bordes y ajustes de diseño para varios elementos como enlaces, texto e iconos de redes sociales. Los estilos se adaptan a diferentes tamaños de pantalla usando consultas de medios, cambiando anchos y bordes para ajustarse a pantallas más grandes. Los colores se gestionan usando variables CSS para temas, como el modo oscuro.
El código CSS define estilos para elementos de artículo y carga fuentes personalizadas. Establece el color del borde para los comentarios para que coincida con el color del borde del encabezado. Para los encabezados de artículo, usa un peso de fuente ligero, pero hace que los encabezados con texto fuerte sean negrita. El código también importa la familia de fuentes Guardian Headline en varios pesos y estilos, incluyendo light, regular, medium y semibold, en versiones normal y cursiva.
La fuente "Guardian Headline Full" se define con varios estilos: semibold cursiva (peso 600), bold (peso 700), bold cursiva (peso 700), black (peso 900) y black cursiva (peso 900). Cada estilo incluye archivos de fuente en formatos WOFF2, WOFF y TrueType.
Además, la fuente "Guardian Titlepiece" se define en su estilo bold (peso 700), también con archivos WOFF2, WOFF y TrueType.
Para dispositivos iOS y Android, se establece un color de fondo oscuro (#1a1a1a) y colores de características específicos. En modo oscuro, el color de la característica se ajusta en consecuencia.
En iOS y Android, se aplica un estilo especial a la primera letra del primer párrafo en contenedores de artículo, siguiendo a ciertos elementos como `.element-atom` o 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 el estilo con un color de pilar secundario. Tanto en iOS como en Android, los encabezados de artículo están ocultos, y el envoltorio de mobiliario tiene un relleno específico. Las etiquetas dentro del envoltorio de mobiliario usan una fuente en negrita y mayúsculas con un nuevo color de pilar. Los titulares se establecen en 32px, negrita, con relleno inferior y un color oscuro. Las figuras de imagen se posicionan relativamente, con márgenes de ancho completo y altura automática.
Para dispositivos Android, las imágenes dentro de los contenedores de artículo deben tener un fondo transparente, abarcar el ancho completo del viewport (teniendo en cuenta las barras de desplazamiento) y ajustar su altura automáticamente.
Tanto en iOS como en Android, el texto introductorio en los artículos debe tener un espaciado específico: 4 píxeles de relleno en la parte superior, 24 píxeles en la inferior y un margen negativo de 10 píxeles a la derecha.
Los párrafos dentro de este texto introductorio deben usar la familia de fuentes de titulares de The Guardian.
Los enlaces dentro de este texto deben tener el estilo con un color específico, un subrayado posicionado 6 píxeles debajo del texto y un color de subrayado gris claro. No deben tener imagen de fondo ni borde inferior. Al pasar el cursor sobre ellos, el subrayado debe cambiar para que coincida con el color del texto del enlace.
Además, la sección de metadatos del artículo debe tener un estilo consistente para ambos sistemas operativos.
Este código CSS establece estilos para contenedores de artículo en dispositivos Android e iOS. Ajusta márgenes, colores, relleno y visualización de botones para varios tipos de artículo y sus componentes.
En dispositivos iOS y Android, para contenedores de artículo de características, estándar y comentarios, las imágenes que no son miniaturas o inmersivas tienen un margen de cero, un ancho calculado a partir del viewport menos 24 píxeles y el ancho de la barra de desplazamiento, y una altura automática. Sus pies de foto no tienen relleno.
Las imágenes inmersivas en estos contenedores tienen un ancho calculado a partir del viewport menos el ancho de la barra de desplazamiento.
Dentro del texto principal del cuerpo del artículo, las citas en bloque citadas usan el nuevo color de pilar para su elemento decorativo. Los enlaces tienen el estilo con el color de pilar primario, un subrayado desplazado 6px y un color de borde para el subrayado, que cambia al nuevo color de pilar al pasar el cursor.
En modo oscuro, el color de fondo del envoltorio de mobiliario se establece en #1a1a1a.
Para dispositivos iOS y Android, las etiquetas de contenido en artículos de características, estándar y comentarios usan el nuevo color de pilar.
Tanto en iOS como en Android, el titular principal en estos tipos de artículo no tiene fondo y usa el color del borde del encabezado para el texto.
El texto standfirst en estos artículos también usa el color del borde del encabezado. Los enlaces dentro del standfirst, así como las líneas de autoría y sus enlaces, tienen el estilo con el nuevo color de pilar.
Los iconos en los metadatos del artículo usan el nuevo color de pilar para sus trazos.
Los pies de foto para imágenes de muestra en estos artículos usan el color de la fecha.
Finalmente, el texto citado dentro del cuerpo del artículo en iOS usa el estilo especificado.
Para dispositivos iOS y Android, el color del texto de los bloques citados dentro de los cuerpos de los artículos se establece en un color variable específico.
Además, el color de fondo para varios contenedores del cuerpo del artículo en iOS y Android se fuerza a un fondo oscuro usando una declaración importante.
Además, para dispositivos iOS, la primera letra que sigue a ciertos elementos como átomos, puertas de inicio de sesión o IDs específicos dentro de los cuerpos de los artículos tiene un estilo, aunque el estilo exacto se corta en el texto proporcionado.
Esto parece ser un selector CSS dirigido a la primera letra de los párrafos en contenedores de artículo específicos en dispositivos iOS y Android. El selector se aplica a varios tipos de artículo (estándar, características, comentarios) y tiene en cuenta diferentes estructuras de página y elementos de puertas de inicio de sesión.
Este código CSS establece estilos para elementos específicos en dispositivos Android e iOS. Define colores, relleno, márgenes y otras propiedades visuales para varios contenedores de artículo, botones y elementos de texto. El código también incluye preferencias de modo oscuro y establece que ciertos encabezados sean invisibles.
El código CSS establece estilos para contenedores de artículo en dispositivos iOS y Android. Elimina los márgenes de los envoltorios de mobiliario y ajusta los colores para etiquetas, titulares y enlaces según propiedades personalizadas. Los titulares se establecen en un color gris claro, mientras que los enlaces y etiquetas usan un color variable. Las secciones de metadatos presentan un patrón de fondo rayado y líneas de autoría en gris claro.
Para dispositivos iOS y Android, los enlaces dentro de la sección de metadatos de artículos de características, estándar y comentarios deben usar el nuevo color de pilar (o un color de característica de modo oscuro como respaldo).
De manera similar, los iconos SVG dentro del área miscelánea de la sección de metadatos deben tener su trazo establecido en el mismo color.
Las etiquetas de alerta dentro de la sección de metadatos
