Este código CSS define una fuente personalizada llamada "Guardian Headline Full" con múltiples estilos y pesos. Incluye versiones ligera, regular, media y seminegra, cada una en estilos normal y cursiva. Los archivos de fuente se proporcionan en tres formatos—WOFF2, WOFF y TrueType—y están 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://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/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, 0px));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width, 0px)) !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;
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
left: -11px;
}
}
.content__main-column--interactive .element-atom {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 12px;
padding-top: 12px;
}
.content__main-column--interactive p + .element-atom {
padding-top: 0;
padding-bottom: 0;
margin-top: 12px;
margin-bottom: 12px;
}
.content__main-column--interactive .element-inline {
max-width: 620px;
}
@media (min-width: 61.25em) {
figure[data-spacefinder-role="inline"].element {
max-width: 620px;
}
}
:root {
--dateline: #606060;
--headerBorder: #dcdcdc;
--captionText: #999;
--captionBackground: hsla(0, 0%, 7%, 0.72);
--feature: #c70000;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}
:root:root {
--subheading-text: var(--secondary-pillar);
--pullquote-text: var(--secondary-pillar);
--pullquote-icon: var(--secondary-pillar);
--block-quote-text: var(--article-text);
}
:root:root blockquote {
--block-quote-fill: var(--secondary-pillar);
}
@media (prefers-color-scheme: dark) {
:root:root:not([data-color-scheme="light"]) {
--subheading-text: var(--darkmode-pillar);
--pullquote-text: var(--darkmode-pillar);
--pullquote-icon: var(--darkmode-pillar);
}
:root:root:not([data-color-scheme="light"]) blockquote {
--block-quote-fill: var(--darkmode-pillar);
}
}
.content__main-column--interactive .element.element-atom,
.element.element-atom {
padding: 0;
}
#article-body > div .element-atom:first-of-type + p:first-of-type,
#article-body > div .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
#article-body > div .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
#article-body > div hr:not(.last-horizontal-rule) + p,
.content--interactive > div .element-atom:first-of-type + p:first-of-type,
.content--interactive > div .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
.content--interactive > div .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
.content--interactive > div hr:not(.last-horizontal-rule) + p,
#comment-body .element-atom:first-of-type + p:first-of-type,
#comment-body .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
#comment-body .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
#comment-body hr:not(.last-horizontal-rule) + p,
[data-gu-name="body"] .element-atom:first-of-type + p:first-of-type,
[data-gu-name="body"] .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
[data-gu-name="body"] .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
[data-gu-name="body"] hr:not(.last-horizontal-rule) + p,
#feature-body .element-atom:first-of-type + p:first-of-type,
#feature-body .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
#feature-body .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
#feature-body hr:not(.last-horizontal-rule) + p {
padding-top: 14px;
}
#article-body > div .element-atom:first-of-type + p:first-of-type:first-letter,
#article-body > div .element-atom:first-of-type + .sign-in-gate + p:first-of-type:first-letter,
#article-body > div .element-atom:first-of-type + #sign-in-gate + p:first-of-type:first-letter,
#article-body > div hr:not(.last-horizontal-rule) + p:first-letter,
.content--interactive > div .element-atom:first-of-type + p:first-of-type:first-letter,
.content--interactive > div .element-atom:first-of-type + .sign-in-gate + p:first-of-type:first-letter,
.content--interactive > div .element-atom:first-of-type + #sign-in-gate + p:first-of-type:first-letter,
.content--interactive > div hr:not(.last-horizontal-rule) + p:first-letter,
#comment-body .element-atom:first-of-type + p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type + .sign-in-gate + p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type + #sign-in-gate + p:first-of-type:first-letter,
#comment-body hr:not(.last-horizontal-rule) + p:first-letter,
[data-gu-name="body"] .element-atom:first-of-type + p:first-of-type:first-letter,
[data-gu-name="body"] .element-atom:first-of-type + .sign-in-gate + p:first-of-type:first-letter,
[data-gu-name="body"] .element-atom:first-of-type + #sign-in-gate + p:first-of-type:first-letter,
[data-gu-name="body"] hr:not(.last-horizontal-rule) + p:first-letter,
#feature-body .element-atom:first-of-type + p:first-of-type:first-letter,La primera letra del primer párrafo en el cuerpo del artículo, o después de ciertos elementos como puertas de inicio de sesión o reglas horizontales, tiene el estilo de una letra capitular grande. Utiliza fuentes de titular específicas, es negrita, en mayúsculas y de color, con un tamaño de 111px y una altura de línea de 92px, flotando a la izquierda con un margen derecho.
Los párrafos que siguen a reglas horizontales no tienen relleno superior. Las citas destacadas dentro del cuerpo del artículo están limitadas a un ancho máximo de 620px.
Los pies de foto para elementos de exhibición se posicionan estáticamente y se establecen a un ancho completo, hasta 620px.
Los elementos inmersivos abarcan el ancho completo del viewport, menos la barra de desplazamiento. En pantallas más pequeñas que 71.24em, su ancho máximo es de 978px, con el relleno del pie de foto ajustado en diferentes puntos de ruptura. Por debajo de 46.24em, los elementos inmersivos se alinean al borde izquierdo con márgenes negativos.
Para pantallas más grandes (por encima de 61.25em), el contenedor de mobiliario utiliza un diseño de cuadrícula CSS con columnas y filas definidas. Estiliza el borde del titular, el posicionamiento de los metadatos y los enlaces del standfirst—eliminando bordes y subrayados predeterminados, mientras añade subrayados personalizados que cambian de color al pasar el cursor.Para pantallas con un ancho mínimo de 61.25em, el primer párrafo dentro del elemento standfirst tendrá un borde superior y ningún relleno inferior. Cuando la pantalla tenga al menos 61.25em y también al menos 71.25em de ancho, se eliminará este borde superior.
Para pantallas de al menos 61.25em de ancho, las figuras dentro del contenedor de mobiliario no tienen margen izquierdo, y las figuras en línea con un rol específico tienen un ancho máximo de 630px.
Con un ancho mínimo de 71.25em, el contenedor de mobiliario utiliza un diseño de cuadrícula con columnas y filas definidas. Aparece una línea decorativa antes del elemento meta, y los párrafos del standfirst pierden su borde superior, reemplazado por una línea vertical en el lado izquierdo.
Cuando el viewport alcanza 81.25em, la plantilla de la cuadrícula ajusta sus columnas y filas, la línea decorativa antes del elemento meta se ensancha y la línea vertical en el standfirst se desplaza ligeramente.
Los titulares tienen un ancho y tamaño de fuente máximos que cambian en el punto de ruptura de 71.25em. Ciertas líneas clave están ocultas en pantallas más grandes (61.25em+), y los bordes de los elementos sociales/metadatos coinciden con el color del borde del encabezado. Algunos elementos contenedores de metadatos están ocultos.
La sección standfirst tiene un margen izquierdo y relleno, con sus párrafos estilizados para peso, tamaño y relleno inferior. El área de medios principal se posiciona dentro de la cuadrícula y tiene márgenes superior e inferior específicos.El código CSS establece estilos para varios elementos. Hace que ciertos divs tengan un ancho completo sin márgenes laterales. Para pantallas más grandes, elimina los márgenes inferiores de los elementos multimedia. En pantallas más pequeñas, ajusta los anchos y márgenes de los medios, incluyendo márgenes izquierdos negativos en puntos de ruptura específicos.
Los pies de foto de las figuras se posicionan absolutamente en la parte inferior con relleno, fondo y colores de texto personalizados. Algunos spans de los pies de foto están ocultos o estilizados de manera diferente, con uno oculto y otro ocupando la mayor parte del ancho. Un botón de pie de foto se posiciona en la parte inferior derecha con un diseño circular.
Para las columnas de contenido interactivo, se realizan ajustes en el posicionamiento y los encabezados h2 se limitan en ancho. En dispositivos iOS y Android, se establecen variables de color personalizadas para el modo oscuro y tipos de artículo específicos. La primera letra del primer párrafo en los artículos se estiliza con un color de pilar secundario, y los encabezados de los artículos son objetivo para un mayor estilizado.Para dispositivos Android, establece la altura del encabezado del artículo en artículos de comentarios a cero.
Para dispositivos iOS y Android, aplica relleno al contenedor de mobiliario en artículos de reportaje
