Ce code CSS définit la famille de polices "Guardian Headline Full" avec plusieurs styles et graisses. Il inclut les variantes light (300), regular (400), medium (500) et semibold (600), chacune disponible en styles normal et italique. Pour chaque style, il fournit des fichiers de police aux formats WOFF2, WOFF et TrueType provenant du serveur de ressources du Guardian.
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 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 écrans plus petits, il ajuste les largeurs et positions des éléments pour s'adapter à l'affichage. Le code garantit que les éléments comme les paragraphes et les listes maintiennent une largeur maximale pour la lisibilité, et gère les éléments immersifs en les étendant sur toute la largeur sur les appareils mobiles tout en ajustant leur disposition sur les écrans plus grands.
Pour les colonnes de contenu interactives, une bordure gauche est ajoutée avec une couleur gris clair et positionnée légèrement à gauche. Les éléments dans ces colonnes n'ont pas de marges haut ou bas mais incluent un remplissage de 12px. Lorsqu'un paragraphe suit un élément, le remplissage est supprimé et les marges sont fixées à 12px. Les éléments en ligne sont limités à une largeur maximale de 620px, et sur les écrans plus larges, les figures avec un rôle spécifique respectent également cette limite de largeur.
Des variables de couleur sont définies pour divers éléments de texte et d'arrière-plan, incluant les dates, bordures d'en-tête, légendes et couleurs de feature, avec une couleur de feature par défaut définie sur rouge.
Les éléments stylisés comme atomes n'ont pas de remplissage. Des règles spécifiques s'appliquent au premier paragraphe suivant certains éléments ou filets horizontaux dans différentes zones de contenu, ajoutant un remplissage supérieur de 14px. De plus, la première lettre de ces paragraphes est stylisée avec une police grande, grasse, majuscule dans un style titre, colorée selon la couleur de feature définie, et flottante à gauche avec une marge.
Les filets horizontaux suivis de paragraphes dans diverses sections de contenu n'ont pas de remplissage supérieur.
Les citations dans des zones de contenu spécifiques ont une largeur maximale de 620 pixels.
Pour les éléments showcase dans divers conteneurs d'article, les légendes sont positionnées statiquement avec pleine largeur et une largeur maximale de 620 pixels.
Les éléments immersifs s'étendent sur la largeur totale de la fenêtre moins la barre de défilement. Sur les écrans jusqu'à 71.24em de large, ces éléments sont limités à 978 pixels, avec un remplissage de légende de 10 pixels. Entre 30em et 71.24em, le remplissage de légende augmente à 20 pixels. Pour les écrans entre 46.25em et 61.24em, la largeur maximale est de 738 pixels. En dessous de 46.24em, les éléments immersifs s'alignent à gauche avec des marges ajustées et un remplissage de légende de 20 pixels entre 30em et 46.24em.
Le wrapper furniture utilise une mise en page grid sur les écrans de 61.25em et plus, avec des colonnes et lignes définies pour organiser le contenu. Les titres comportent une bordure supérieure, les sections meta ont un remplissage supérieur, et les éléments standfirst incluent des liens stylisés avec des soulignements qui changent de couleur au survol. Initialement, le premier paragraphe du standfirst a une bordure supérieure et aucun remplissage inférieur, qui est supprimé sur les écrans de 71.25em et plus.
Les figures dans le wrapper furniture ont des marges gauches et une largeur maximale de 630 pixels pour les éléments en ligne. Sur les écrans plus larges (71.25em et plus), les colonnes de la grille sont reconfigurées pour un placement différent du contenu.
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 définit des zones pour le titre, le headline, le standfirst, les informations meta et le portrait, avec des lignes réglées sur des hauteurs fixes et automatiques. Une fine ligne apparaît au-dessus de la section meta, et le standfirst a une ligne verticale sur son côté gauche.
Sur les écrans plus larges, la grille s'ajuste pour utiliser des unités fractionnaires pour les lignes et étend les portées de colonnes. La taille de police du headline augmente et sa largeur maximale change, tandis que certains éléments comme les lignes sont masqués. Le texte du standfirst est stylisé avec une graisse et taille de police spécifiques, et la zone média principale est positionnée dans la grille, avec des ajustements de largeur et de marges sur les appareils plus petits. Les légendes sont positionnées absolument en bas avec une couleur d'arrière-plan et un remplissage.
Le code CSS définit les styles pour un composant wrapper furniture, incluant sa mise en page, couleurs et comportement responsive across 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 écrans plus larges, et inclut des éléments masqués et des boutons interactifs avec des effets de survol pour le partage social. Les headlines et informations meta sont stylisés avec des polices et couleurs spécifiques, assurant la cohérence du design.
Ce code CSS définit les styles pour les éléments dans une classe "furniture-wrapper", en se concentrant sur les sections d'informations meta et standfirst. Il définit les couleurs de texte en gris clair (#dcdcdc) et les couleurs de lien avec une teinte basée sur une variable, avec des effets de survol qui changent la couleur de décoration du texte. Les liens dans le standfirst sont soulignés avec un décalage et une couleur spécifiques, et les états de survol ajustent la couleur du soulignement en conséquence.
Pour les écrans plus larges (min-width: 61.25em), le premier paragraphe du standfirst gagne une bordure supérieure, qui est supprimée sur les écrans encore plus larges (min-width: 71.25em). Les éléments de liste dans le standfirst adoptent également la couleur de texte gris clair.
Le code inclut des éléments de conception responsive utilisant des media queries pour différentes largeurs d'écran (46.25em, 61.25em, 71.25em et 81.25em). Ceux-ci ajustent la largeur et le positionnement des pseudo-éléments (:before et :after) pour créer des zones d'arrière-plan avec des bordures, calculant les dimensions basées sur la largeur de la fenêtre et les ajustements de barre de défilement.
De plus, il stylise les éléments SVG dans les keylines et les éléments de médias sociaux ou de commentaires dans la section meta, en définissant leur trait et couleurs de texte pour correspondre au thème en utilisant des variables CSS.
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 ont une graisse de police légère de 200, mais s'ils contiennent un élément strong, ils utilisent une graisse grasse de 700.
De plus, la famille de polices Guardian Headline Full est définie avec divers styles et graisses, incluant light, regular, medium et semibold, chacun en versions normale et italique. Ces polices sont sourcées à partir d'URLs spécifiques aux formats WOFF2, WOFF et TrueType.
Ce code CSS définit plusieurs fontes 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 inclut également une fonte pour "Guardian Titlepiece" en gras. Les polices sont sourcées à partir d'URLs spécifiques aux formats WOFF2, WOFF et TrueType.
De plus, le code définit des propriétés personnalisées CSS (variables) pour les arrière-plans en mode sombre et les couleurs de feature, les ajustant basé sur la préférence de schéma de couleur de l'utilisateur ou lorsque le site est consulté sur des appareils iOS ou Android. Il inclut également le style pour la première lettre des paragraphes dans les conteneurs d'article sur ces plateformes mobiles, avec des sélecteurs spécifiques pour gérer les 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 de pilier secondaire. Sur iOS et Android, les en-têtes d'article sont masqués, et les wrappers furniture ont un remplissage spécifique. Les labels dans ces wrappers utilisent une police grasse, capitalisée dans un style titre avec une nouvelle couleur de pilier. Les headlines sont réglés sur 32px, gras, avec un remplissage inférieur et une couleur sombre. Les images dans les wrappers 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 réglées 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, 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 qui change au survol 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 marge des éléments meta dans les conteneurs d'article standard et commentaires est réglée à zéro.
Sur les appareils iOS, les informations de byline et d'auteur dans les conteneurs d'article feature, standard et commentaires apparaîtront dans la couleur de pilier désignée. De même, sur les appareils Android, les mêmes éléments dans les conteneurs d'article feature, standard et commentaires utiliseront également la couleur de pilier.
Pour iOS et Android, les informations meta diverses dans les conteneurs d'article feature, standard et commentaires n'ont pas de remplissage, et toutes les icônes SVG à l'intérieur sont stylisées avec la couleur de pilier comme leur trait.
Le bouton de légende dans les éléments showcase pour les articles feature, standard et commentaires sur iOS et Android est affiché comme un conteneur flex. Il est centré, mesure 28 par 28 pixels, et positionné à 14 pixels de la droite avec 5 pixels de remplissage.
Le corps de l'article dans les conteneurs feature, standard et commentaires pour iOS et Android a 12 pixels de remplissage horizontal et aucun remplissage vertical.
Pour les appareils iOS et Android, dans les conteneurs d'article feature, standard et commentaires, les images non miniature et non immersives dans le corps de l'article n'auront pas de marge, une largeur calculée comme la largeur totale de la 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 toute la largeur de la fenêtre moins la largeur de la barre de défilement.
Dans la prose du corps de l'article, les blockquotes cités afficheront un marqueur coloré utilisant la nouvelle couleur de pilier. Les liens 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 pour la nouvelle couleur de pilier.
En mode sombre, l'arrière-plan du wrapper furniture sera réglé sur un gris foncé (#1a1a1a).
Pour les appareils iOS et Android, appliquez les styles suivants aux conteneurs d'article feature, standard et commentaires :
- Définissez les labels de contenu pour utiliser la nouvelle couleur de pilier.
- Supprimez la couleur d'arrière-plan des headlines et définissez leur couleur de texte sur la couleur de bordure de l'en-tête, en assurant que cela prenne la priorité.
- Faites adopter aux paragraphes et liens du standfirst la couleur de bordure de l'en-tête.
- Utilisez la nouvelle couleur de pilier pour les auteurs de byline et leurs liens.
- Appliquez la nouvelle couleur de pilier au trait des icônes meta diverses.
- Définissez la couleur des légendes d'images showcase sur la couleur de dateline.
- Stylisez les blockquotes cités dans la prose du corps de l'article en conséquence.
Pour les appareils iOS et Android, la couleur de texte des blocs cités dans les corps d'article est réglée sur une couleur de pilier spécifique.
De plus, la couleur d'arrière-plan pour diverses sections du corps d'article sur les deux systèmes d'exploitation est forcée à un arrière-plan sombre.
Sur iOS, la première lettre suivant certains éléments dans les corps d'article est stylisée avec un effet de lettrine.
Ceci semble ê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 blanc ou une couleur de variable personnalisée. Il ajuste également le remplissage et les marges pour les éléments standfirst 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'article en les rendant complètement transparents et applique des styles aux wrappers furniture, bien que la dernière règle semble incomplète.
Pour les appareils iOS et Android, le wrapper furniture du conteneur d'article n'a pas de marge. Les labels dans les articles feature, standard et commentaires utilisent la nouvelle couleur de pilier ou une couleur de feature en mode sombre. Les headlines dans ces articles sont réglés sur une couleur gris clair. Les liens dans les en-têtes d'article ou sections de titre adoptent également la nouvelle couleur de pilier ou de feature en mode sombre.
Avant la section meta dans ces articles, un dégradé linéaire répété est appliqué comme arrière-plan, utilisant la couleur de bordure de l'en-tête pour créer un effet rayé. Le texte de byline dans la zone meta est affiché en gris clair.
Pour les appareils iOS et Android, les styles suivants s'appliquent aux liens dans la section meta des conteneurs d'article feature, standard et commentaires :
- Les liens sont colorés en utilisant la nouvelle couleur de pilier ou une couleur de feature en mode sombre.
- Les icônes SVG dans la section meta diverse ont leur trait réglé 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 de pilier ou de feature en mode sombre.
Pour les appareils iOS et Android, la couleur des icônes dans la section meta des conteneurs d'article feature, standard et commentaires est réglée sur une nouvelle couleur de pilier ou une couleur de feature en mode sombre.
Sur les écrans plus larges (71.25em et plus), la section meta dans ces conteneurs affiche une bordure supérieure utilisant les mêmes options de couleur. De plus, les éléments meta divers ont leur marge réinitialisée et une marge gauche de 20 pixels appliquée.
Les paragraphes et listes non ordonnées dans le corps de l'article de ces conteneurs sont limités à une largeur maximale de 620 pixels pour iOS et Android.
Les blockquotes avec la classe "quoted" dans la section prose du corps de l'article reçoivent également un style pour iOS et Android across tous les types d'article.
Pour les blocs cités dans les articles, la couleur avant
