Ce code CSS définit la famille de polices "Guardian Headline Full" avec différentes épaisseurs et styles, fournissant plusieurs formats de fichiers (WOFF2, WOFF, TTF) pour chaque variante afin d'assurer la compatibilité entre les différents navigateurs.
Ce code CSS définit plusieurs familles de polices pour les fontes Guardian Headline et Guardian Titlepiece, en spécifiant leurs sources dans différents formats (WOFF2, WOFF et TrueType) ainsi que leur graisse et style. Il inclut également des règles de conception responsive pour la colonne de contenu principal dans les mises en page interactives, ajustant les marges, largeurs et positionnement selon la taille de la fenêtre. Par exemple, sur les écrans 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 les éléments comme les paragraphes, listes et composants immersifs s'adaptent correctement sur tous les appareils.
Pour la colonne principale interactive, une bordure gauche est ajoutée avant le contenu, positionnée à 11 pixels à gauche. Les éléments dans cette colonne n'ont pas de marge haute ou basse mais incluent un remplissage de 12 pixels en haut et en bas. Lorsqu'un paragraphe est suivi d'un élément, 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, etc., avec une couleur caractéristique définie sur rouge et une nouvelle couleur pilier par défaut sur le pilier principal ou la couleur caractéristique.
Les éléments avec la classe 'element-atom' n'ont pas de remplissage. Des conditions spécifiques s'appliquent au premier paragraphe suivant certains éléments ou filets horizontaux dans différentes zones de contenu, ajoutant 14 pixels de remplissage en haut. De plus, la première lettre de ces paragraphes est stylisée avec une police grande, grasse, majuscule d'une couleur spécifique, flottant à gauche avec une marge.
Les filets horizontaux suivis de paragraphes dans ces zones n'ont pas de remplissage en haut.
Les citations dans des zones de contenu spécifiques sont limitées à une largeur maximale de 620 pixels.
Pour les éléments vitrine dans les articles principaux, les features, les articles standard et les commentaires, les légendes sont positionnées statiquement avec une pleine largeur jusqu'à 620 pixels.
Les éléments immersifs s'étendent sur la pleine largeur de la fenêtre moins la largeur de la barre de défilement. Sur les écrans jusqu'à 71.24em de large, ces éléments sont limités à 978px avec un remplissage de légende de 10px. Entre 30em et 71.24em, le remplissage de légende augmente à 20px. Pour les écrans moyens (46.25em à 61.24em), la largeur maximale est de 738px. Sur les écrans plus petits (jusqu'à 46.24em), les éléments immersifs s'alignent sur le bord gauche avec des marges et remplissages ajustés.
Le wrapper de mobilier utilise une mise en page grid sur les écrans larges (61.25em et plus), organisant les sections titre, manchette, méta-informations, chapô et portrait. Les manchettes comportent une bordure supérieure, les sections meta ont un remplissage supérieur, et le texte du chapô inclut un style spécifique pour les liens et bordures. Les figures dans le wrapper n'ont pas de marge gauche et une largeur maximale de 630px lorsqu'elles sont en ligne. Sur les très grands écrans (71.25em et plus), les colonnes de la grille sont reconfigurées pour une mise en page différente.
La mise en page utilise une grille avec des colonnes et lignes spécifiques pour différentes tailles d'écran. Pour les écrans plus petits, la grille a trois colonnes et lignes avec des hauteurs fixes et automatiques. Une fine ligne apparaît au-dessus de la section meta, et la section chapô a une ligne verticale sur son côté gauche sans bordure supérieure sur les paragraphes.
Sur les écrans plus larges, la grille s'étend à plus de colonnes et des hauteurs de ligne fractionnaires. La ligne meta s'élargit, et la ligne verticale du chapô se décale légèrement vers la gauche. Les manchettes ont une largeur et une taille de police maximales qui augmentent sur les grands écrans, avec les plus grands écrans affichant une police de 50px.
Certains éléments comme les lignes et les fonctionnalités de commentaires sociaux sont masqués ou ajustés sur les écrans moyens et grands. La section chapô a des marges négatives et du remplissage, avec des styles de police spécifiques et du remplissage sous les paragraphes.
Les images média principales sont positionnées de manière relative, prenant toute la largeur et ajustant les marges selon la taille de l'écran, avec les légendes positionnées absolument en bas avec un arrière-plan et des couleurs de texte personnalisés.
Le code CSS définit les styles pour un composant wrapper de mobilier, incluant sa mise en page, couleurs et comportement responsive sur différentes tailles d'écran. Il définit les couleurs d'arrière-plan, couleurs de texte et styles de bordure en utilisant des propriétés personnalisées CSS pour les thèmes comme le mode sombre. Le wrapper ajuste les marges, remplissages et positionnement sur les écrans plus larges, et inclut des règles pour masquer ou afficher des éléments tels que les légendes et boutons de médias sociaux. Les manchettes et informations meta sont stylisées avec des polices et couleurs spécifiques, et les éléments interactifs ont des effets au survol pour l'engagement utilisateur. Les media queries assurent que la conception s'adapte des vues mobiles aux vues bureau.
Ce code CSS définit les styles pour les éléments dans un conteneur avec la classe "furniture-wrapper". Il définit les couleurs de texte en gris clair (#dcdcdc) pour les éléments meta et paragraphes de chapô, et utilise des propriétés personnalisées pour les couleurs de liens qui s'adaptent au mode sombre ou aux thèmes pilier. Les liens dans la section chapô sont soulignés avec des décalages et couleurs spécifiques, supprimant bordures et images d'arrière-plan.
Pour les écrans plus larges (min-width: 61.25em), le premier paragraphe dans le chapô obtient une bordure supérieure, qui est supprimée sur les écrans encore plus larges (71.25em). Le code crée également des barres latérales décoratives en utilisant des pseudo-éléments (:before et :after) qui ajustent leur largeur et position selon la taille de la fenêtre, avec des arrière-plans sombres et des bords bordurés.
De plus, il stylise les éléments SVG avec des traits correspondant à la couleur de bordure de l'en-tête et assure que les éléments sociaux et de commentaires dans la section meta héritent des couleurs appropriées sans effets d'arrière-plan supplémentaires.
La section de commentaires a une couleur de bordure qui correspond à la couleur de bordure de l'en-tête.
Dans les articles, les titres de deuxième niveau (h2) dans le corps principal utilisent une graisse de police légère de 200. Cependant, si un h2 contient un élément strong, il passe à une graisse grasse de 700.
La famille de polices Guardian Headline Full inclut divers styles et graisses, chacun avec des sources de fichiers spécifiques aux formats WOFF2, WOFF et TrueType :
- Light (graisse 300, style normal)
- Light Italic (graisse 300, style italique)
- Regular (graisse 400, style normal)
- Regular Italic (graisse 400, style italique)
- Medium (graisse 500, style normal)
- Medium Italic (graisse 500, style italique)
- Semibold (graisse 600, style normal)
- Semibold Italic (graisse 600, style italique)
Ce code CSS définit plusieurs font-faces pour la famille de polices "Guardian Headline Full", chacune avec différentes graisses et styles (normal et italique), allant de semibold (600) à black (900). Il spécifie les URLs source pour chaque police aux formats WOFF2, WOFF et TrueType. De plus, il définit la police "Guardian Titlepiece" avec une graisse bold (700) et un style normal.
Le code définit également des propriétés personnalisées CSS (variables) pour les arrière-plans en mode sombre et les couleurs caractéristiques, les ajustant selon le schéma de couleur préféré de l'utilisateur ou lorsque le site est vu sur des appareils iOS ou Android. Il inclut un style spécifique pour la première lettre des paragraphes dans les conteneurs d'articles sur les plateformes iOS et Android, particulièrement lorsqu'ils suivent certains éléments comme des atoms ou des portails de connexion.
Pour les appareils Android, la première lettre du premier paragraphe dans les articles standard et commentaires est stylisée avec une couleur pilier secondaire. Sur iOS et Android, les en-têtes d'articles sont masqués, et le wrapper de mobilier a un remplissage spécifique. Les étiquettes dans le wrapper de mobilier utilisent une police grasse, capitalisée dans un style de manchette avec une nouvelle couleur pilier. Les manchettes sont définies à 32px, en gras, avec un remplissage inférieur et une couleur sombre. Les images dans le wrapper de mobilier sont positionnées de manière relative, avec des marges et largeur ajustées, et leurs éléments internes, images et liens sont 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 la pleine largeur de la fenêtre moins la barre de défilement, et ajuster leur hauteur automatiquement.
Sur iOS et Android, les sections de résumé d'article ont un remplissage supérieur et inférieur de 4px et 24px respectivement, avec une marge droite décalée de -10px.
Le texte dans ces résumés utilise la famille de polices Guardian Headline ou des polices serif similaires.
Les liens dans les résumés sont stylisés avec une couleur spécifique, soulignés avec un décalage de 6px, et utilisent une couleur désignée pour le soulignement, supprimant toute image d'arrière-plan ou bordure. Lorsqu'ils sont survolés, la couleur du soulignement change pour correspondre à la couleur du lien.
De plus, les sections de métadonnées dans les articles sur les deux systèmes d'exploitation ont un style cohérent.
Pour les appareils Android, la section meta dans les conteneurs d'articles standard et commentaires n'a pas de marge.
Sur les appareils iOS, les informations d'auteur et de byline dans les articles feature, standard et commentaires utilisent la nouvelle couleur pilier. Cela s'applique également aux appareils Android pour les articles feature.
Pour iOS et Android, la section meta divers dans les articles feature, standard et commentaires n'a pas de remplissage, et toute icône SVG utilise la nouvelle couleur pilier.
Le bouton de légende dans les éléments vitrine pour les articles feature, standard et commentaires sur iOS et Android est affiché comme un conteneur flex, centré avec 5px de remplissage, 28px en largeur et hauteur, et positionné à 14px de la droite.
Le corps de l'article dans les articles feature, standard et commentaires sur iOS et Android a 12px de remplissage sur les côtés gauche et droit.
Pour les appareils iOS et Android, dans les conteneurs d'articles feature, standard et commentaires, les images qui ne sont pas des miniatures ou immersives n'auront pas de marge, une largeur de la pleine fenêtre 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 la pleine 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é utilisant la nouvelle couleur pilier.
Les liens dans le corps de l'article seront stylisés avec la couleur 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 pour la nouvelle couleur pilier.
En mode sombre, l'arrière-plan du wrapper de mobilier sera défini sur un gris foncé (#1a1a1a).
Pour les appareils iOS et Android, les styles suivants s'appliquent aux conteneurs d'articles feature, standard et commentaires :
- Les étiquettes de contenu utilisent la nouvelle couleur pilier.
- Les manchettes n'ont pas d'arrière-plan et utilisent la couleur de bordure de l'en-tête.
- Les paragraphes et liens de chapô utilisent la couleur de bordure de l'en-tête.
- Les noms d'auteur et liens dans la section meta utilisent la nouvelle couleur pilier.
- Les icônes dans la section meta ont un trait dans la nouvelle couleur pilier.
- Les légendes pour les images vitrine utilisent la couleur de date.
- Les citations en bloc dans le corps de l'article...
Pour les appareils iOS et Android, la couleur du texte des blocs cités dans les corps d'articles est définie sur une nouvelle couleur pilier.
De plus, la couleur d'arrière-plan pour diverses sections du corps d'article sur iOS et Android est changée pour un arrière-plan sombre, utilisant un flag important pour s'assurer qu'elle écrase les autres styles.
De plus, pour la première lettre suivant des éléments spécifiques dans les corps d'articles sur iOS, un style spécial est appliqué, bien que le style exact ne soit pas spécifié ici.
Ceci apparaît être un sélecteur CSS ciblant la première lettre des paragraphes qui suivent des éléments spécifiques dans divers conteneurs d'articles sur les plateformes iOS et Android. Le sélecteur s'applique à différentes sections comme les corps d'articles, les corps de features, les sections de commentaires et les zones de contenu interactif, cherchant spécifiquement les paragraphes qui viennent après des éléments avec la classe "element-atom" ou des portails de connexion.
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 de chapô dans les articles commentaires, définit les tailles de police pour les titres h2, et modifie le remplissage pour les boutons de légende.
Pour le mode sombre, il change les couleurs de texte et d'icônes en des teintes plus claires et définit une couleur d'arrière-plan sombre. De plus, il masque les en-têtes d'articles en les rendant complètement transparents et applique des styles aux wrappers de mobilier, bien que le code soit incomplet pour ce dernier.
Pour les appareils iOS et Android, le wrapper de mobilier du conteneur d'article n'a pas de marge. Dans ce wrapper, les étiquettes de contenu dans les articles feature, standard et commentaires utilisent une couleur définie par la variable de nouvelle couleur pilier, par défaut la couleur caractéristique du mode sombre.
Les manchettes dans ces articles sont définies sur une couleur gris clair (#dcdcdc) et sont marquées comme importantes.
Les liens dans l'en-tête d'article ou ceux avec l'attribut de données pour le titre adoptent également la nouvelle couleur pilier, avec la même alternative en mode sombre.
Avant la section meta ou les éléments avec l'attribut de données meta, un dégradé linéaire répété est appliqué comme arrière-plan, créant un effet de ligne pointillée utilisant la couleur de bordure de l'en-tête.
Le texte de byline dans la section meta est affiché en gris clair (#dcdcdc).
Pour les appareils iOS et Android, les styles suivants s'appliquent aux liens dans la section meta des conteneurs d'articles feature, standard et commentaires :
- Les liens sont colorés en utilisant la nouvelle couleur pilier ou une couleur caractéristique 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 en gris clair (#dcdcdc) avec une priorité importante.
- Les spans avec des attributs data-icon adoptent également la nouvelle couleur pilier ou la couleur caractéristique en mode sombre.
Pour les appareils iOS et Android, la couleur des icônes dans la section meta des conteneurs d'articles feature, standard et commentaires est définie sur la nouvelle couleur pilier ou une couleur caractéristique en mode sombre.
Sur les écrans plus larges (71.25em et plus), la section meta dans ces conteneurs affiche une bordure supérieure utilisant la nouvelle couleur pilier ou la couleur de bordure de l'en-tête. De plus, les éléments
