Ce texte définit une famille de polices personnalisée appelée "Guardian Headline Full" avec plusieurs épaisseurs et styles de police. Il spécifie les fichiers de police dans différents formats (WOFF2, WOFF et TrueType) et leurs emplacements en ligne pour que le navigateur les charge en cas de besoin. Les définitions incluent les épaisseurs light, regular, medium et semibold, chacune avec des styles normal et italique.
Ce code CSS définit plusieurs familles de polices pour les polices Guardian Headline et Guardian Titlepiece, en spécifiant leurs sources dans différents formats (WOFF2, WOFF et TrueType) ainsi que leurs épaisseurs et styles. Il inclut également des règles de conception réactive pour la colonne de contenu principal dans les mises en page interactives, ajustant les marges, largeurs et positionnement en fonction de la taille de la fenêtre. Par exemple, sur les écrans plus larges, il ajoute une marge gauche et une bordure, tandis que sur les écrans plus petits, il ajuste les largeurs et positions des éléments pour s'adapter à l'affichage. Les styles garantissent que des éléments comme les paragraphes, listes et contenus immersifs s'adaptent correctement sur tous les appareils.
Pour la colonne de contenu interactif principal, une bordure gauche est ajoutée avant l'élément, positionnée à 11 pixels à gauche. Dans cette colonne, les atomes n'ont pas de marge haute ou basse mais un remplissage de 12 pixels aux deux extrémités. Lorsqu'un paragraphe suit un atome, le remplissage est supprimé et des marges de 12 pixels sont appliquées à la place. Les éléments en ligne sont limités à une largeur maximale de 620 pixels, et pour les écrans plus larges que 61.25em, les figures en ligne avec un rôle spécifique respectent également cette limite de largeur.
Des variables de couleur sont définies pour divers éléments, tels que la date, la bordure d'en-tête, le texte de légende et l'arrière-plan, avec une couleur de fonctionnalité définie sur rouge et une nouvelle couleur de pilier par défaut définie sur la couleur de fonctionnalité. Les atomes dans la colonne principale ou ailleurs n'ont pas de remplissage.
Pour le premier paragraphe suivant des éléments spécifiques comme les atomes, les portails de connexion ou les traits horizontaux dans différentes zones de contenu (corps d'article, contenu interactif, commentaires, fonctionnalités), un remplissage supérieur de 14 pixels est ajouté. De plus, la première lettre de ces paragraphes est stylisée avec une famille de polices spécifique, une épaisseur grasse, une grande taille de police, un texte en majuscules, flottant à gauche et coloré en utilisant une variable pour les lettrines ou la nouvelle couleur de pilier.
Si un paragraphe vient après un trait horizontal dans ces zones de contenu, le remplissage supérieur est fixé à zéro. Les citations dans des zones de contenu spécifiques ne doivent pas dépasser 620 pixels de largeur.
Pour les éléments de présentation dans les articles principaux, les fonctionnalités, les articles standards et les commentaires, les légendes doivent rester dans leur position normale, s'étendre sur toute la largeur et être limitées à 620 pixels.
Les éléments immersifs doivent s'étendre sur toute la largeur de la fenêtre, en tenant compte des barres de défilement. Sur les écrans plus petits que 71.24em, ces éléments sont limités à 978 pixels de large avec un remplissage latéral de 10px pour les légendes. Entre 30em et 71.24em, le remplissage des légendes augmente à 20px.
Entre 46.25em et 61.24em, les éléments immersifs atteignent un maximum de 738 pixels. En dessous de 46.24em, ils s'alignent sur le bord gauche sans marge droite et avec un décalage gauche de 10px, augmentant à 20px entre 30em et 46.24em, où les légendes obtiennent également un remplissage de 20px.
Pour les écrans plus larges (61.25em et plus), le conteneur de mobilier utilise une mise en page en grille avec des colonnes et des lignes définies. Les titres obtiennent une bordure supérieure, les informations meta sont positionnées relativement avec un remplissage supérieur, et le texte d'introduction a un style spécifique : éléments de liste à 20px de taille de police, liens soulignés sans bordures ni arrière-plans, changeant de couleur au survol, et premiers paragraphes avec bordures supérieures sauf sur les très grands écrans (71.25em+).
Les figures dans le conteneur n'ont pas de marge inférieure et un décalage gauche de 10px, avec des éléments en ligne limités à 630 pixels. Sur les plus grands écrans, la grille ajuste sa structure de colonnes.
La mise en page utilise une grille avec des colonnes et des lignes spécifiques pour différentes tailles d'écran. Pour les écrans plus petits, la grille a trois colonnes et des lignes avec des hauteurs fixes et automatiques, tandis que les écrans plus larges ajustent les hauteurs des lignes proportionnellement.
Des éléments comme la section meta ont une ligne de bordure supérieure, et la section d'introduction présente une ligne verticale à gauche. Les titres sont stylisés avec une largeur maximale et une taille de police qui augmente sur les écrans plus larges, et certains éléments sont masqués ou ajustés en marge et remplissage en fonction de la fenêtre.
La zone média principale est positionnée dans la grille et s'étend sur toute la largeur sur les appareils mobiles, avec des légendes stylisées pour apparaître en bas avec une couleur d'arrière-plan. Les éléments sociaux et de commentaires dans la section meta ont des bordures correspondant à la couleur de l'en-tête, et certains composants ne sont pas affichés.
Le conteneur de mobilier définit un arrière-plan sombre et ajuste les marges et le remplissage pour différentes tailles d'écran. Sur les écrans plus larges, il ajoute des barres latérales avec des arrière-plans et bordures correspondants.
Les titres utilisent un texte gris clair en gras, tandis que les titres d'articles et les boutons sociaux adoptent une couleur personnalisée (comme une couleur de fonctionnalité en mode sombre). Les boutons sociaux ont une bordure et changent de couleur au survol, avec l'arrière-plan et la couleur des icônes échangés.
Les légendes sont stylisées avec des couleurs spécifiques et des contrôles de visibilité, y compris un bouton de bascule qui apparaît comme un petit cercle en bas à droite. Les requêtes média ajustent le remplissage et le positionnement des éléments pour les tablettes et ordinateurs, garantissant un espacement et un alignement appropriés sur tous les appareils.
Ce code CSS stylise les éléments dans une classe de conteneur de mobilier, définissant les couleurs, bordures et mise en page pour différentes tailles d'écran. Il définit les couleurs des liens et les effets de survol en utilisant des variables CSS pour les sections meta et d'introduction, avec des décorations de texte et décalages. Les requêtes média ajustent la mise en page pour diverses largeurs de fenêtre, créant des barres latérales avec des bordures et couleurs d'arrière-plan qui s'adaptent en conséquence. Les éléments sociaux et de commentaires dans la section meta sont également stylisés, avec les traits SVG correspondant à la couleur de la bordure de l'en-tête.
La section de commentaires a une couleur de bordure qui correspond à la couleur de la bordure de l'en-tête.
Pour les titres d'articles (h2) dans le corps principal ou le contenu interactif, l'épaisseur de la police est définie sur light (200). Cependant, si un titre h2 contient un élément strong, il utilise une épaisseur de police grasse (700).
De plus, la famille de polices Guardian Headline Full est définie avec divers poids et styles, y compris light, regular, medium et semibold, sous forme normale et italique. Chaque fichier de police est sourcé à partir d'URL spécifiques aux formats WOFF2, WOFF et TrueType.
Ce code CSS définit plusieurs familles de polices et leurs variations pour le site Guardian. Il spécifie différents poids et styles de police (comme gras, italique) pour la police "Guardian Headline Full", fournissant plusieurs formats de fichiers (WOFF2, WOFF, TTF) pour la compatibilité multiplateforme. De plus, il inclut la police "Guardian Titlepiece" en poids gras.
Le code établit également des propriétés personnalisées CSS (variables) pour les couleurs, les ajustant pour les préférences de mode sombre sur les appareils iOS et Android. Il inclut un style spécifique pour la première lettre des paragraphes dans les conteneurs d'articles sur ces plateformes mobiles, garantissant un traitement typographique cohérent dans différents contextes.
Pour les appareils Android, la première lettre du premier paragraphe dans les articles standards et de commentaires est stylisée avec une couleur de pilier secondaire. Sur iOS et Android, les en-têtes d'articles sont masqués, et les conteneurs de mobilier ont un remplissage spécifique. Les étiquettes dans ces conteneurs utilisent une police grasse, en majuscules, dans un style de titre avec une nouvelle couleur de pilier. Les titres sont définis à 32px, en gras, avec un remplissage inférieur et une couleur sombre. Les images dans les conteneurs de mobilier sont positionnées relativement, s'étendent à la largeur de la fenêtre moins la largeur de la barre de défilement et ont une hauteur automatique, avec des éléments internes et des liens stylisés en conséquence.
Pour les appareils Android, les images dans les conteneurs d'articles sont définies pour avoir un arrière-plan transparent, s'étendre sur toute la largeur de la fenêtre moins la barre de défilement et ajuster leur hauteur automatiquement.
Sur iOS et Android, la section d'introduction dans les articles a un remplissage supérieur et inférieur de 4px et 24px respectivement, avec un décalage de marge droite de -10px. Le texte à l'intérieur utilise la famille de polices Guardian Headline ou des polices serif de secours.
Les liens dans l'introduction sur les deux plateformes sont stylisés avec une couleur spécifique, soulignés avec un décalage de 6px et utilisent un soulignement gris clair qui change en couleur de pilier au survol. Ils n'ont pas d'image d'arrière-plan ni de bordure.
De plus, la section meta dans les conteneurs d'articles s'applique aux appareils iOS et Android.
Pour les appareils Android, supprimez les marges des éléments meta dans les conteneurs d'articles standards et de commentaires.
Pour les appareils iOS, définissez la couleur des éléments de ligne d'auteur et d'auteur dans les conteneurs d'articles de fonctionnalités, standards et de commentaires sur la nouvelle couleur de pilier. De plus, supprimez le remplissage des éléments meta divers et définissez le trait de leurs icônes SVG sur la nouvelle couleur de pilier. En outre, stylisez le bouton de légende dans les éléments de présentation avec un affichage, un remplissage, un alignement et des dimensions spécifiques.
Pour iOS et Android, définissez le remplissage du corps de l'article à 0 sur les côtés et 12px en haut et en bas dans les conteneurs d'articles de fonctionnalités, standards et de commentaires.
Pour les appareils iOS et Android, dans les conteneurs d'articles de fonctionnalités, standards et de commentaires, les images qui ne sont pas des vignettes ou immersives n'auront pas de marge, une largeur de la fenêtre complète moins 24 pixels et la largeur de la barre de défilement, et une hauteur automatique. Leurs légendes n'auront pas de remplissage.
Les images immersives dans ces conteneurs s'étendront sur toute la largeur de la fenêtre moins la largeur de la barre de défilement.
Les citations en bloc dans le corps de l'article afficheront un marqueur coloré en utilisant la nouvelle couleur de pilier.
Les liens dans le corps de l'article seront stylisés avec la couleur de pilier primaire, soulignés avec un décalage et utiliseront la couleur de bordure de l'en-tête pour le soulignement. Au survol, la couleur du soulignement change en nouvelle couleur de pilier.
En mode sombre, l'arrière-plan du conteneur de mobilier sera défini sur un gris foncé (#1a1a1a).
Pour les appareils iOS et Android, appliquez les styles suivants aux conteneurs d'articles de fonctionnalités, standards et de commentaires :
- Définissez la couleur du texte des étiquettes de contenu sur la nouvelle couleur de pilier.
- Supprimez la couleur d'arrière-plan des titres et définissez leur couleur de texte sur la couleur de bordure de l'en-tête, en garantissant que cela ait la priorité.
- Faites correspondre le texte dans les paragraphes d'introduction à la couleur de bordure de l'en-tête.
- Utilisez la nouvelle couleur de pilier pour les liens dans les sections d'introduction et pour les lignes d'auteur (y compris les noms d'auteurs liés).
- Appliquez la nouvelle couleur de pilier au trait des icônes de métadonnées diverses.
- Définissez la couleur des légendes pour les images de présentation sur la couleur de la date.
- Pour le texte cité dans le corps de l'article, utilisez le style approprié.
Pour les appareils iOS et Android, la couleur du texte des blocs cités dans les corps d'articles est définie sur une couleur de pilier spécifique.
De plus, la couleur d'arrière-plan pour diverses sections du corps d'article sur iOS et Android est changée en un arrière-plan sombre, garantissant qu'elle remplace tout autre style.
De plus, pour la première lettre suivant certains éléments dans les corps d'articles sur iOS, un style spécial est appliqué, bien que le style exact ne soit pas spécifié ici.
Ce code CSS cible la première lettre des paragraphes qui suivent des éléments spécifiques dans divers conteneurs d'articles sur les appareils iOS et Android. Il s'applique à différentes sections comme les corps d'articles, les corps de fonctionnalités, les sections de commentaires et le contenu interactif, garantissant un style cohérent pour les lettrines ou le formatage des lettres initiales sur la plateforme.
Ce code CSS définit des styles pour des éléments spécifiques sur les appareils Android et iOS. Il définit la couleur de la première lettre dans les paragraphes suivant certains éléments en blanc ou une couleur de variable personnalisée. Il ajuste également le remplissage et les marges pour les éléments d'introduction dans les articles de commentaires, définit les tailles de police pour les titres h2 et modifie le remplissage pour les boutons de légende différemment sur iOS et Android.
Pour les préférences de mode sombre, il change diverses variables de couleur en teintes plus claires et définit une couleur d'arrière-plan sombre. De plus, il rend les en-têtes d'articles invisibles en définissant leur opacité à zéro et applique ces styles aux conteneurs de mobilier dans les conteneurs d'articles de fonctionnalités, standards et de commentaires sur les deux systèmes d'exploitation.
Pour les appareils iOS et Android, le conteneur de mobilier de l'article n'a pas de marge. Les étiquettes dans les articles de fonctionnalités, standards et de commentaires utilisent une variable de couleur spécifique. Les titres dans ces articles sont définis sur une couleur gris clair. Les liens dans les en-têtes d'articles et les sections de titre adoptent la même variable de couleur que les étiquettes. Un dégradé linéaire répétitif est appliqué comme arrière-plan avant les sections meta, créant une bordure à motif. Le texte de la ligne d'auteur dans les zones meta est également affiché en gris clair.
Pour les appareils iOS et Android, les styles suivants s'appliquent aux liens dans la section meta des conteneurs d'articles de fonctionnalités, standards et de commentaires :
- Les liens sont colorés en utilisant la nouvelle couleur de pilier ou une couleur de fonctionnalité en mode sombre.
- Les icônes SVG dans la section meta divers ont leur trait défini sur la même couleur.
- Les étiquettes d'alerte s'affichent dans une couleur gris clair (#dcdcdc) avec une priorité importante.
- Les spans avec des attributs data-icon adoptent également la nouvelle couleur de pilier ou la couleur de fonctionnalité en mode sombre.
Pour les appareils iOS et Android, la couleur des icônes dans la section meta des conteneurs d'articles de fonctionnalités, standards et de commentaires est définie sur la nouvelle couleur de pilier ou une couleur de fonctionnalité en mode sombre.
Sur les écrans plus larges (71.25em et plus), la section meta dans ces conteneurs affiche une bordure supérieure en utilisant la nouvelle couleur de pilier ou la couleur de bordure de l'en-tête. Le contenu meta divers est ensuite décalé de 20 pixels vers la droite sans autres marges.
De plus, les paragraphes et les listes dans le corps de l'article de ces conteneurs sont limités
