Ce code CSS définit la famille de polices "Guardian Headline Full" avec différentes graisses et styles, incluant light, regular, medium et semibold, chacun dans des versions normales et italiques. Il spécifie les fichiers de police aux formats WOFF2, WOFF et TrueType hébergés sur les serveurs du Guardian.
Ce code CSS définit plusieurs familles de polices pour les fontes Guardian Headline et Guardian Titlepiece, en précisant leurs sources dans différents formats (WOFF2, WOFF, TTF) ainsi que leurs graisses et styles. 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 positionnements en fonction de la taille de la fenêtre. Par exemple, sur les écrans larges, il ajoute une marge gauche et une bordure, tandis que sur les petits écrans, il étend les éléments à pleine largeur et les centre. Les styles assurent un formatage correct sur tous les appareils, avec des largeurs maximales définies pour différents types de contenu comme les atomes, les vitrines et les éléments immersifs.
Pour les colonnes de contenu interactif, une bordure gauche est ajoutée avant l'élément, positionnée à 11 pixels à gauche. Dans ces colonnes, les atomes (éléments) n'ont pas de marges haut et bas mais incluent un remplissage de 12 pixels en haut et en bas. 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 (plus de 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 les lignes de date, en-têtes, légendes et features, avec une couleur de feature par défaut définie sur rouge. Les atomes dans la colonne principale et ailleurs n'ont pas de remplissage.
Des règles spécifiques s'appliquent au premier paragraphe après certains éléments ou filets horizontaux dans différentes zones de contenu (corps d'article, contenu interactif, commentaires, features), ajoutant un remplissage supérieur de 14 pixels. De plus, la première lettre de ces paragraphes est stylisée avec une police grande, grasse, majuscule dans une typographie spécifique, colorée selon une variable, et flottante à gauche avec une marge.
Les filets horizontaux suivis de paragraphes dans ces sections n'ont pas de remplissage supérieur. Les citations dans des zones de contenu spécifiques sont limitées à une largeur maximale de 620 pixels.
Pour les éléments de vitrine dans divers conteneurs d'article, les légendes sont positionnées statiquement avec une pleine largeur jusqu'à 620 pixels.
Les éléments immersifs s'étendent sur la largeur totale 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 de largeur avec un remplissage de légende de 10px. Entre 30em et 71.24em, le remplissage de légende augmente à 20px. Pour les écrans entre 46.25em et 61.24em, la largeur maximale devient 738px. En dessous de 46.24em, les éléments immersifs s'alignent sur le bord gauche avec des marges ajustées et maintiennent un remplissage de légende de 20px entre 30em et 46.24em.
Le wrapper de furniture utilise une mise en page grid responsive sur les écrans de 61.25em et plus, organisant les sections titre, headline, méta-informations, standfirst et portrait. Les headlines comportent une bordure supérieure, les sections méta ont un remplissage supérieur, et le texte standfirst inclut un style spécifique pour les listes et liens avec des soulignements personnalisés qui changent de couleur au survol. Le premier paragraphe du standfirst a une bordure supérieure sur les grands écrans mais la supprime au-dessus de 71.25em.
Les figures dans le wrapper de furniture ont des marges alignées à gauche et les éléments en ligne sont limités à 630px de largeur. Au-dessus de 71.25em, la grille s'ajuste pour accueillir plus de colonnes pour le contenu portrait.
La mise en page utilise une grille avec des colonnes et lignes spécifiques pour différentes tailles d'écran. Pour les petits écrans, la grille a trois colonnes et des lignes qui s'ajustent automatiquement, avec une hauteur fixe de 80px pour les zones de titre et portrait. Une fine ligne apparaît au-dessus de la section méta, et la section standfirst a une ligne verticale sur son côté gauche.
Sur les grands écrans, la grille s'étend à plus de colonnes et lignes avec des unités fractionnaires pour la flexibilité. La ligne supérieure de la section méta s'élargit, et la ligne verticale du standfirst se décale légèrement. Les headlines ont une largeur et une taille de police maximales qui augmentent sur les grands écrans, tandis que certains éléments comme les lignes sont masqués ou ajustés en marges pour différents points de rupture.
Les éléments sociaux et de commentaires dans la section méta partagent la même couleur de bordure, et certains composants ne sont pas affichés. Le texte standfirst a un style spécifique avec une marge gauche et un remplissage réduits, et des propriétés de police. Les éléments médias principaux sont positionnés relativement, avec une pleine largeur et des marges ajustées sur divers appareils, et les légendes sont 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 furniture, 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 des thèmes comme le mode sombre. Le wrapper ajuste les marges, remplissages et positionnements sur les grands écrans, et inclut des règles pour masquer ou afficher des éléments tels que les légendes et boutons. Les headlines et méta-informations sont stylisés avec des polices et couleurs spécifiques, et les boutons de médias sociaux ont des effets de survol qui changent leur apparence. Les media queries assurent que la conception s'adapte à divers appareils.
Ce code CSS définit les styles pour la classe furniture-wrapper d'une page web, en se concentrant sur des éléments comme les sections de méta-informations et standfirst. Il définit la couleur du texte en gris clair (#dcdcdc) et la couleur des liens sur une teinte basée sur une variable, avec des effets de survol qui changent la couleur de décoration du texte. Les liens dans les zones standfirst ont des soulignements avec des décalages spécifiques et pas de bordures, tandis que les paragraphes et éléments de liste adoptent également la couleur gris clair.
Pour les grands écrans (min-width: 61.25em), le premier paragraphe du standfirst obtient une bordure supérieure, qui est supprimée sur les écrans encore plus grands (71.25em). Le code crée également des barres latérales décoratives en utilisant des pseudo-éléments (:before et :after) qui s'ajustent en largeur 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 couleurs de trait et des icônes de médias sociaux ou de commentaires dans les sections méta.
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 second niveau (h2) dans le corps principal ont une graisse de police de 200. Cependant, si un h2 contient un élément strong, il utilise une graisse de police 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" avec différentes graisses et styles (normal et italique), allant de semibold (600) à black (900). Chaque font-face spécifie des fichiers sources aux formats WOFF2, WOFF et TrueType provenant des serveurs de ressources du Guardian.
Il définit également la police "Guardian Titlepiece" avec une graisse bold (700) et un style normal, utilisant des formats de fichiers similaires depuis un sous-domaine différent.
Le code inclut des propriétés personnalisées CSS (variables) pour les schémas de couleurs, particulièrement pour le mode sombre sur les appareils iOS et Android. Il configure une couleur d'arrière-plan sombre, des couleurs de feature pour les modes clair et sombre, et utilise des media queries pour ajuster la couleur pilier selon le schéma de couleur préféré de l'utilisateur.
De plus, il y a des règles de style spécifiques pour la première lettre des paragraphes dans les conteneurs d'article sur les appareils iOS et Android, qui s'appliquent lorsqu'ils suivent certains éléments comme les atomes, les portails de connexion, ou des éléments de portail spécifiques.
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'article sont masqués, et les wrappers de furniture ont un remplissage spécifique. Les labels dans ces wrappers utilisent une police grasse, capitalisée dans un style headline avec une nouvelle couleur pilier. Les headlines sont définies à 32px, grasses, avec un remplissage inférieur et une couleur sombre. Les images dans les wrappers de furniture sont positionnées relativement, s'étendent sur la largeur de la fenêtre moins la barre de défilement, et ajustent leur hauteur automatiquement.
Pour les appareils Android, les images dans les conteneurs d'article 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, la section standfirst dans les articles a un remplissage supérieur et inférieur de 4px et 24px respectivement, avec une marge droite décalée de -10px. Le texte à l'intérieur utilise la famille de polices Guardian Headline ou des polices serif de secours.
Les liens dans le standfirst sur les deux plateformes 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 qui change au survol. L'image d'arrière-plan et la bordure inférieure sont supprimées.
De plus, la section méta dans les articles est stylisée de manière cohérente sur iOS et Android pour les conteneurs feature, standard et comment.
Pour les appareils Android, supprimez les marges des éléments méta dans les conteneurs d'article standard et comment.
Pour les appareils iOS, définissez la couleur des éléments de byline et auteur dans les conteneurs d'article feature, standard et comment sur la nouvelle couleur pilier. Aussi, supprimez le remplissage des éléments méta divers et définissez le trait des icônes SVG à l'intérieur sur la nouvelle couleur pilier. De plus, stylisez le bouton de légende dans les éléments de vitrine avec un affichage, remplissage, alignement et 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'article feature, standard et comment.
Pour les appareils iOS et Android, dans les conteneurs d'article feature, standard et comment, les images non miniature et non immersives dans le corps de l'article 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 largeur totale de la fenêtre moins la largeur de la barre de défilement.
Les blockquotes cités 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 de soulignement change vers la nouvelle couleur pilier.
En mode sombre, l'arrière-plan du wrapper de furniture sera gris foncé (#1a1a1a).
Pour les appareils iOS et Android, les styles suivants s'appliquent aux conteneurs d'article feature, standard et comment :
- Les labels de contenu utilisent la nouvelle couleur pilier.
- Les headlines n'ont pas d'arrière-plan et utilisent la couleur de bordure de l'en-tête pour le texte.
- Les paragraphes et liens standfirst utilisent la couleur de bordure de l'en-tête.
- Les bylines d'auteur et leurs liens utilisent la nouvelle couleur pilier.
- Les icônes de métadonnées diverses sont tracées avec la nouvelle couleur pilier.
- Les légendes d'image de vitrine utilisent la couleur de la ligne de date.
- Les blockquotes cités dans le corps de l'article sont stylisés avec la nouvelle couleur pilier.
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 pilier spécifique.
De plus, la couleur d'arrière-plan de diverses sections du corps d'article sur iOS et Android est changée pour 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'article sur iOS, un style spécial est appliqué, bien que l'effet 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'article sur les plateformes iOS et Android. Le sélecteur s'applique à différents types d'articles (standard, feature, comment) et prend en compte les portails de connexion qui pourraient apparaître entre les éléments.
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 certains paragraphes sur une couleur variable, ajuste le remplissage et les marges pour les éléments standfirst dans les articles commentaires, et stylise les titres avec une taille de police de 24px.
Pour les boutons de légende, il applique différentes valeurs de remplissage sur iOS et Android. En mode sombre, il change diverses variables de couleur vers des teintes plus sombres pour une meilleure lisibilité et définit une couleur d'arrière-plan sombre.
De plus, il masque les en-têtes d'article en les rendant complètement transparents sur les deux systèmes d'exploitation et applique des styles aux wrappers de furniture, bien que le code soit incomplet pour ce dernier.
Pour les appareils iOS et Android, le wrapper de furniture du conteneur d'article n'a pas de marge. Dans les articles feature, standard et comment, les labels de contenu utilisent une variable de couleur spécifique, tandis que les headlines sont définis sur une couleur gris clair. Les liens dans l'en-tête d'article ou la section titre adoptent également la variable de couleur désignée.
De plus, un dégradé linéaire répété est appliqué comme arrière-plan avant la section méta, créant un effet de bordure à motif. Le texte de byline dans la zone méta apparaît en gris clair, et les liens dans la section méta sont stylisés en conséquence.
Pour les appareils iOS et Android, les styles suivants s'appliquent aux liens dans la section méta des conteneurs d'article feature, standard et comment :
- Les liens sont colorés en utilisant la nouvelle couleur pilier ou une couleur de feature en mode sombre.
- Les icônes SVG dans la section méta divers ont leur trait défini sur la même couleur.
- Les labels 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 pilier ou la couleur de feature en mode sombre.
Pour les appareils iOS et Android, la couleur des icônes dans la section méta des conteneurs d'article feature, standard et comment est définie sur la nouvelle couleur pilier ou une couleur de feature en mode sombre.
Sur les écrans plus larges (71.25em et plus), la section méta 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 méta divers ont leur marge gauche ajustée à
