Ce code CSS définit une famille de polices personnalisée appelée "Guardian Headline Full" avec plusieurs épaisseurs et styles de police. Il inclut les épaisseurs light, regular, medium et semibold, chacune dans des versions normale et italique. Les polices sont chargées depuis les serveurs du Guardian dans trois formats de fichiers différents : WOFF2, WOFF et TrueType.
@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 colonne de contenu interactif a une bordure gauche et un espacement spécifique pour les éléments. Les paragraphes suivant certains éléments reçoivent un remplissage supérieur supplémentaire, et la première lettre de ces paragraphes est stylisée comme une lettrine grande et colorée. Les éléments en ligne et les figures sont limités à une largeur maximale. Diverses variables de couleur sont définies pour une thématique cohérente.
Les citations extraites (pullquotes) dans des conteneurs spécifiques doivent avoir une largeur maximale de 620 pixels.
Les légendes pour les éléments de présentation (showcase) dans les articles principaux, les reportages, les articles standard et les commentaires doivent être positionnées statiquement, occuper toute la largeur et avoir également une largeur maximale de 620 pixels.
Les éléments immersifs doivent occuper toute la largeur de la fenêtre d'affichage, moins la barre de défilement. Sur les écrans plus grands (plus de 71.24em), leur largeur maximale est de 978px, avec un ajustement du remplissage des légendes à différents points de rupture. Sur les écrans moyens (entre 46.25em et 61.24em), la largeur maximale est de 738px. Sur les écrans plus petits (moins de 46.24em), ces éléments ne doivent avoir aucune marge gauche et s'aligner sur le bord gauche, avec des marges ajustées et un remplissage des légendes pour les écrans très petits.
Pour l'enveloppe de présentation (furniture wrapper) sur les grands écrans (plus de 61.25em), une mise en page en grille est utilisée avec des colonnes et des lignes définies. Les titres obtiennent une bordure supérieure, les informations méta sont positionnées de manière relative, et le texte d'introduction (standfirst) a un style spécifique pour les liens et l'espacement. Les figures dans cette enveloppe ont des marges ajustées et une largeur maximale de 630px pour les éléments en ligne. Sur les écrans très grands (plus de 71.25em), le modèle de grille est ajusté pour inclure plus de colonnes.
Le CSS définit une mise en page en grille pour un en-tête de page avec des zones pour le titre, le titre principal, le texte d'introduction, les informations méta et un portrait. Il définit des dimensions et des positions spécifiques pour ces éléments à différentes tailles d'écran. Le style comprend des bordures, des polices et des couleurs, avec des ajustements pour les icônes des réseaux sociaux, les légendes et un comportement réactif sur les vues mobiles et de bureau.
Le code CSS définit des styles pour la mise en page d'une page web, en se concentrant sur un composant appelé "furniture-wrapper". Ce composant a un fond sombre et ajuste ses marges et son remplissage en fonction de la taille de l'écran. Pour les écrans plus grands, il ajoute des barres latérales décoratives.
À l'intérieur de cette enveloppe, des éléments comme les en-têtes d'articles, les titres et les informations méta (telles que les boutons de partage sur les réseaux sociaux) sont stylisés. Les titres utilisent une couleur gris clair et une police en gras. Les boutons sociaux ont des bordures colorées qui correspondent à une couleur thématique, et ils changent pour une couleur unie au survol.
Le code gère également la visibilité des légendes et d'un bouton de bascule pour les éléments multimédias. Dans l'ensemble, les styles garantissent que la mise en page est réactive et visuellement cohérente sur différents appareils.
Ce code CSS définit des styles pour un composant de page web, probablement une barre latérale ou un conteneur de contenu. Il définit les couleurs du texte, l'apparence des liens et des ajustements de mise en page pour différentes tailles d'écran. Les liens sont stylisés avec des couleurs spécifiques et des soulignements, et la mise en page comprend des éléments d'arrière-plan qui s'ajustent en fonction de la largeur de la fenêtre d'affichage. Le code gère également les bordures et l'espacement pour divers éléments à l'intérieur du composant.
Le code CSS définit des styles pour les éléments d'article et charge des polices personnalisées. Il définit la couleur de la bordure pour les commentaires pour qu'elle corresponde à la couleur de la bordure de l'en-tête. Pour les titres d'article, il utilise une épaisseur de police légère par défaut, mais passe en gras lorsque le titre contient une balise strong.
De plus, il importe la famille de polices Guardian Headline Full dans diverses épaisseurs et styles (light, regular, medium, semibold, chacun avec des versions normale et italique) depuis les serveurs du Guardian, en spécifiant plusieurs formats de fichiers pour la compatibilité du navigateur.
La police "Guardian Headline Full" est définie avec plusieurs styles : semibold italic (poids 600), bold (poids 700), bold italic (poids 700), black (poids 900) et black italic (poids 900). Chaque style inclut des fichiers de police aux formats WOFF2, WOFF et TrueType, hébergés sur les serveurs du Guardian.
De plus, la police "Guardian Titlepiece" est définie dans son style bold (poids 700), également avec des fichiers WOFF2, WOFF et TrueType.
Pour les appareils iOS et Android, une couleur de fond sombre et des couleurs de fonctionnalité spécifiques sont définies. En mode sombre, la couleur de fonctionnalité s'ajuste en conséquence.
Sur iOS et Android, des règles CSS spécifiques sont appliquées pour styliser la première lettre du premier paragraphe dans certains conteneurs d'article, suivant des éléments spécifiques comme `.element-atom` ou les portails de connexion.
Pour les appareils Android, la première lettre du premier paragraphe dans les articles standard et les commentaires est stylisée avec une couleur de pilier secondaire. Sur iOS et Android, les en-têtes d'article sont masqués, et l'enveloppe de présentation (furniture wrapper) a un remplissage spécifique. Les étiquettes à l'intérieur de l'enveloppe de présentation utilisent une police en gras, en majuscules, avec une nouvelle couleur de pilier. Les titres sont définis à 32px, en gras, avec un remplissage inférieur et une couleur sombre. Les figures d'images sont positionnées de manière relative, avec des marges sur toute la largeur et une hauteur automatique.
Pour les appareils Android, les images à l'intérieur des conteneurs d'article doivent avoir un fond transparent, occuper toute la largeur de la fenêtre d'affichage (en tenant compte des barres de défilement) et ajuster leur hauteur automatiquement.
Sur iOS et Android, le texte d'introduction dans les articles doit avoir un espacement spécifique : 4 pixels de remplissage en haut et 24 pixels en bas, avec une marge négative de 10 pixels à droite.
Les paragraphes à l'intérieur de ce texte d'introduction doivent utiliser la famille de polices de titre du Guardian.
Les liens à l'intérieur de ce texte doivent être stylisés avec une couleur spécifique, un soulignement positionné à 6 pixels sous le texte et une couleur de soulignement gris clair, sans image de fond ni bordure. Lorsqu'ils sont survolés, le soulignement doit changer pour correspondre à la couleur du texte du lien.
De plus, la section des métadonnées dans les articles sur iOS et Android doit recevoir un style spécifique.
Ce code CSS définit des styles pour les conteneurs d'article sur les appareils iOS et Android. Il ajuste les marges, les couleurs, le remplissage et l'affichage des boutons pour divers types d'articles et leurs composants.
Sur les appareils iOS et Android, pour les conteneurs d'article de type reportage, standard et commentaire, les images qui ne sont pas des miniatures ou immersives sont stylisées pour n'avoir aucune marge, une largeur calculée à partir de la fenêtre d'affichage moins 24 pixels et la largeur de la barre de défilement, et une hauteur automatique. Leurs légendes n'ont pas de remplissage.
Les images immersives dans ces conteneurs sont définies sur une largeur correspondant à la largeur de la fenêtre d'affichage moins la largeur de la barre de défilement.
Dans le corps de l'article (prose), les citations en bloc (blockquotes) affichent un marqueur coloré en utilisant une variable CSS personnalisée. Les liens sont stylisés avec une couleur spécifique, un décalage de soulignement de 6 pixels et une couleur de décoration provenant d'une variable. Au survol, la couleur du soulignement change pour une autre variable.
En mode sombre, la couleur de fond de l'enveloppe de présentation dans ces conteneurs est définie sur un gris foncé (#1a1a1a).
Pour les appareils iOS et Android, les étiquettes de contenu dans les articles de type reportage, standard et commentaire utilisent la nouvelle couleur de pilier. Les titres dans ces articles n'ont pas de fond et utilisent la couleur de la bordure de l'en-tête. Le texte d'introduction et les liens, ainsi que les mentions d'auteur, adoptent également la nouvelle couleur de pilier. Les icônes dans la section méta sont stylisées avec la même couleur. Les légendes pour les images de présentation utilisent la couleur de la date, et le texte cité dans le corps de l'article suit le même style.
Pour les appareils iOS et Android, la couleur du texte des blocs cités dans les corps d'article est définie sur une couleur de pilier spécifique. De plus, la couleur de fond pour divers conteneurs de corps d'article est forcée à un fond sombre. Sur iOS, la première lettre suivant certains éléments dans ces conteneurs est stylisée avec un effet de lettrine.
Il s'agit d'un sélecteur CSS ciblant la première lettre des paragraphes dans des conteneurs d'article spécifiques sur les appareils iOS et Android. Le sélecteur s'applique à divers types d'articles (standard, reportage, commentaire) et prend en compte différentes structures de page et éléments de portail de connexion.
Ce code CSS définit des styles pour des éléments spécifiques sur les appareils Android et iOS. Il définit des couleurs, un remplissage, des marges et d'autres propriétés visuelles pour divers conteneurs d'article, boutons et éléments de texte. Le code inclut également une requête média pour le mode sombre qui ajuste les couleurs lorsque l'utilisateur préfère un schéma de couleurs sombres. Certains éléments, comme les en-têtes d'article, sont masqués en définissant leur opacité à zéro.
Le code CSS définit des styles pour les conteneurs d'article sur
