Ce code CSS définit une famille de polices personnalisée appelée "Guardian Headline Full" avec plusieurs graisses et styles. Il inclut les graisses light, regular, medium et semibold, chacune dans des versions normale et italique. Les polices sont chargées depuis les serveurs du Guardian aux formats WOFF2, WOFF et TrueType pour assurer la compatibilité entre les différents navigateurs.
@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) {
}
Pour les colonnes de contenu interactif, une bordure gauche est ajoutée avec un positionnement et un z-index spécifiques. Sur les écrans plus larges, la position gauche de la bordure s'ajuste légèrement. Dans ces colonnes, les éléments atomiques n'ont pas de marges haut et bas mais incluent un remplissage. Lorsque des paragraphes précèdent des éléments atomiques, le remplissage est supprimé et des marges sont ajoutées à la place. Les éléments en ligne sont limités à une largeur maximale.
Pour les figures en ligne sur les écrans moyens et plus, une largeur maximale est définie. Dans les sections média contenant des figures en boucle, les légendes sont superposées au-dessus, et les boutons de boucle sont stylisés avec des dimensions et un alignement spécifiques. Les boutons de légende sont placés sur le dessus.
Dans la section body, les îlots vidéo auto-hébergés prennent toute la largeur jusqu'à un maximum, avec des marges centrées. Les figures et vidéos en boucle dans ces îlots prennent également toute la largeur. Pour les éléments vidéo immersifs, les contraintes de largeur sont supprimées et les marges sont ajustées. Sur les écrans plus larges, les vidéos immersives s'élargissent et se décalent vers la gauche, avec les légendes indentées en conséquence.
Les variables de couleur définissent divers éléments d'interface utilisateur comme les dates, les bordures, les légendes et les couleurs de fonctionnalités, les couleurs de pilier influençant les sous-titres, les citations et les blocs de citation. En mode sombre, ces couleurs s'adaptent au thème sombre.
Les éléments atomiques dans les colonnes de contenu n'ont pas de remplissage. Des règles spécifiques ajustent les premiers paragraphes après certains éléments ou des règles horizontales à travers différentes zones de contenu comme les articles, le contenu interactif, les commentaires et les fonctionnalités, assurant un espacement et une mise en page appropriés.
Le premier paragraphe après une porte d'authentification ou une règle horizontale (sauf la dernière) a un remplissage supérieur de 14 pixels.
Pour la première lettre du premier paragraphe suivant des éléments spécifiques comme un atome, une porte d'authentification, ou une règle horizontale (pas la dernière) dans diverses zones de contenu (corps d'article, contenu interactif, commentaires, fonctionnalités, ou éléments avec un `data-gu-name` de "body"), appliquez un style de lettrine spécial. Ce style utilise des polices de titre spécifiques, définit la taille de police à 111px avec une hauteur de ligne de 92px, la fait flotter à gauche, la met en majuscules, ajoute une marge droite de 8px, l'aligne sur le haut du texte, et la colore avec une variable personnalisée pour les lettrines.
Les paragraphes immédiatement après une règle horizontale dans ces zones de contenu ne doivent avoir aucun remplissage supérieur.
Les citations dans ces zones de contenu sont limitées à une largeur maximale de 620 pixels.
Les légendes pour les éléments de présentation dans le contenu principal, les articles de fonctionnalités, les articles standard et les sections de commentaires sont positionnées statiquement, prenant toute la largeur jusqu'à un maximum de 620 pixels.
Les éléments immersifs s'étendent sur toute la largeur de la fenêtre, en tenant compte de la barre de défilement. Sur les écrans plus larges (jusqu'à 71.24em), leur largeur maximale est de 978px, avec le remplissage des légendes ajusté à 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 (en dessous de 46.24em), les éléments immersifs s'alignent sur le bord gauche avec des marges ajustées et un remplissage de légende ajusté.
Pour les écrans plus larges (au-dessus de 61.25em), le wrapper de mobilier utilise une mise en page CSS Grid avec des colonnes et des lignes définies pour positionner des éléments comme le titre, le titre principal, les métadonnées, le chapô et la zone portrait.
Les styles CSS définissent un wrapper de mise en page pour les composants d'article. Les titres principaux ont une bordure supérieure et s'ajustent en taille de 32px à 50px sur les écrans plus larges, avec une largeur maximale qui change également. Les informations méta incluent une ligne décorative supérieure sur les écrans larges. La section chapô présente des liens soulignés avec une couleur personnalisée qui change au survol, et son premier paragraphe a une bordure supérieure sur les écrans plus petits qui est supprimée sur les plus grands. Une ligne de séparation verticale apparaît dans le chapô sur les écrans larges.
Des grilles de mise en page sont définies pour les écrans de 71.25em et plus, et à nouveau pour 81.25em et plus, spécifiant des modèles de colonnes et de lignes pour positionner des éléments comme les zones de titre, de titre principal, de méta, de chapô et de portrait. Les figures ont des marges et des largeurs maximales spécifiques. Globalement, les styles contrôlent la présentation réactive des en-têtes d'article et du contenu introductif.
Pour les écrans plus larges que 740px, masquez les éléments avec la classe `.keyline-4` ou l'attribut `[data-gu-name="lines"]`. Dans le `.furniture-wrapper`, stylisez les traits SVG à l'intérieur de ces éléments avec une variable de couleur personnalisée.
Sur les écrans moyens et plus, supprimez la marge droite des éléments avec l'ID `#meta` ou l'attribut `[data-gu-name="meta"]`.
Dans la section méta, définissez la couleur de bordure pour les liens sociaux, les éléments de commentaire et leurs spans enfants sur une variable personnalisée. Masquez également tout élément `gu-island` dans un conteneur spécifique.
Pour la section chapô, ajustez son positionnement et son remplissage, en ajoutant un décalage à gauche. Sur les écrans moyens, ajoutez un petit remplissage supérieur. Stylisez le paragraphe à l'intérieur avec une graisse de police régulière, une taille de 20px et un remplissage inférieur.
La zone média principale est positionnée de manière relative, placée dans la zone de grille 'portrait', et reçoit des marges spécifiques. Assurez-vous que ses divs internes prennent toute la largeur. Sur les écrans plus larges, supprimez la marge inférieure. Sur les écrans plus petits, ajustez la largeur et la marge gauche, avec un ajustement supplémentaire pour les écrans moyens-petits.
Stylisez les légendes de figure pour qu'elles apparaissent en bas avec un arrière-plan et une couleur de texte personnalisés, en remplaçant la largeur et les marges par défaut. Masquez le premier span à l'intérieur et affichez le second, en limitant sa largeur. Sur les écrans moyens, ajustez le remplissage de la légende. Un état masqué rend la légende transparente.
Un bouton de légende est positionné en bas à droite, stylisé avec un arrière-plan circulaire et une icône mise à l'échelle, sa position étant ajustée sur les écrans moyens.
Pour les colonnes d'article interactif sur les très grands écrans, ajustez la position et la hauteur d'un pseudo-élément. Limitez également la largeur des titres de niveau 2.
Sur iOS ou Android, définissez un ensemble de variables de couleur pour le thème sombre. En mode sombre, ajustez la variable de couleur primaire.
Pour les appareils iOS, ciblez le premier paragraphe après des éléments spécifiques dans différents conteneurs d'article et stylisez sa première lettre.
La première lettre du premier paragraphe suivant une porte d'authentification, ou le premier paragraphe après un atome d'élément dans divers conteneurs d'article sur iOS et Android, doit être colorée en utilisant la variable de pilier secondaire (par défaut noir).
Sur iOS et Android, la hauteur de l'en-tête d'article dans les conteneurs d'article de fonctionnalité, standard et de commentaire doit être définie à zéro.
Le wrapper de mobilier dans ces conteneurs d'article sur les deux plateformes doit avoir un remplissage supérieur de 4 pixels et un remplissage horizontal de 10 pixels.
Les étiquettes dans le wrapper de mobilier doivent être en gras, utiliser la pile de polices spécifiée, prendre leur couleur de la nouvelle variable de pilier, et être en majuscules.
Les titres principaux (h1) dans le wrapper de mobilier doivent avoir une taille de 32 pixels, être en gras, avoir un remplissage inférieur de 12 pixels, et être colorés en #121212.
Les figures d'image dans le wrapper de mobilier doivent être positionnées de manière relative, avoir une marge supérieure de 14 pixels, une marge gauche de -10 pixels, une largeur calculée comme la largeur de la fenêtre moins la largeur de la barre de défilement, et une hauteur automatique.
Pour les articles de fonctionnalité sur iOS, l'élément figure interne, l'image et le lien dans ces figures d'image doivent également suivre ces règles de style.
Pour les appareils iOS et Android, les règles CSS suivantes s'appliquent :
Pour les images dans les conteneurs d'article :
- Définissez l'arrière-plan sur transparent.
- Rendez la largeur égale à la largeur totale de la fenêtre moins la largeur de la barre de défilement.
- Assurez-vous que la hauteur s'ajuste automatiquement.
Pour la section chapô de l'article :
- Ajoutez 4px de remplissage en haut et 24px en bas.
- Appliquez une marge droite négative de 10px.
Pour les paragraphes dans le chapô :
- Utilisez les familles de polices Guardian headline et serif.
Pour les liens dans le chapô :
- Définissez la couleur sur une variable spécifique.
- Supprimez toute image d'arrière-plan.
- Appliquez un soulignement avec un décalage de 6px et une couleur de bordure spécifique.
- Supprimez toute bordure inférieure.
Pour les effets de survol sur ces liens :
- Appliquez le même style que ci-dessus.
Pour les appareils Android, lors du survol des liens dans la section chapô des articles de commentaire, la couleur du soulignement du texte doit correspondre à la nouvelle couleur de pilier.
Sur les appareils iOS et Android, pour les articles de fonctionnalité
