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 fontes pour les familles de polices "Guardian Headline Full" et "Guardian Titlepiece". Chaque fonte spécifie différentes épaisseurs (comme 300 pour léger, 400 pour normal, 700 pour gras et 900 pour noir) et styles (normal ou italique). Elles sont sourcées à partir de divers formats de fichiers (WOFF2, WOFF et TrueType) hébergés à des URL spécifiques du domaine des assets du Guardian.
Ce code CSS définit plusieurs styles de police pour la famille de polices "Guardian Headline Full". Il inclut les épaisseurs normal, medium, semibold, gras et noir, chacune avec des variantes normale et italique. Pour chaque style, il spécifie les fichiers de police aux formats WOFF2, WOFF et TrueType, ainsi que leurs propriétés d'épaisseur et de style de police correspondantes. Les fichiers de police sont hébergés sur le serveur d'assets du Guardian.
Ce texte semble être du code CSS définissant des styles de police et des grilles de mise en page pour un site web, probablement celui du Guardian. Il spécifie des fichiers de police pour différentes épaisseurs et styles, et configure des dispositions de grille réactives qui changent à différentes tailles d'écran. Le code contrôle la façon dont les zones de contenu comme les titres, les manchettes, les médias et le corps de texte sont agencées sur différentes largeurs d'appareils.
Pour les figures de grille interactives avec légendes immersives dans des zones de contenu spécifiques, le remplissage de la légende est défini à 4 pixels en haut et 0 ailleurs.
Dans diverses sections de contenu, les éléments nommés "lines" et "meta" dans les grilles interactives sont positionnés dans la grille de la ligne 2 à 5 et de la colonne 1 à 2. Les éléments "lines" ajustent leur hauteur pour s'adapter à leur contenu et ont une marge supérieure de 5 pixels, tandis que les éléments "meta" ont une marge supérieure de 18 pixels.
Sur les écrans plus larges (81.25em et plus), les grilles interactives dans ces sections utilisent une disposition à cinq colonnes avec des largeurs spécifiques : 219px, 1px, 620px, 80px et 300px.
Pour les appareils iOS et Android, les en-têtes d'article ont des styles personnalisés :
- Les paragraphes standfirst utilisent des polices serif spécifiques avec une épaisseur moyenne.
- Les section kickers sont affichés en bloc et capitalisent leur première lettre.
- Les keylines ont un remplissage supérieur de 12 pixels.
- Les bylines d'auteur utilisent des polices serif grasses, les liens étant également en gras.
- Les figures d'image ont leur hauteur réglée sur auto.
- Les paragraphes suivant les figures atomiques n'ont pas de marge supérieure.
De plus, des fontes personnalisées pour "Guardian Headline Full" sont définies avec des épaisseurs léger et léger italique, sourcées à partir d'URL spécifiques aux formats woff2, woff et truetype.
Ce texte définit plusieurs styles de police pour la famille de polices "Guardian Headline Full", spécifiant différentes épaisseurs et styles (normal et italique) ainsi que leurs fichiers sources dans divers formats (WOFF2, WOFF et TrueType). Chaque entrée inclut l'épaisseur et le style de la police, et indique où les fichiers de police peuvent être trouvés en ligne.
Ce code CSS définit des styles de police et des ajustements de mise en page pour un site web, probablement pour The Guardian. Il spécifie des polices personnalisées avec différentes épaisseurs et styles, incluant des versions normales et italiques, et définit des règles de conception réactive pour différentes tailles d'écran. La mise en page ajuste les marges, largeurs et positionnements pour des éléments comme les colonnes, atomes, showcases et sections immersives pour assurer un affichage correct sur tous les appareils. Il inclut également des media queries pour gérer différentes largeurs de viewport, garantissant que les éléments redimensionnent et se repositionnent correctement pour les écrans mobiles, tablettes et ordinateurs. De plus, il définit les couleurs pour les datelines, en-têtes, légendes et features, et définit le remplissage et les marges pour les éléments de contenu pour maintenir une mise en page cohérente et lisible.
Le premier paragraphe après des éléments spécifiques comme les portails de connexion, les règles horizontales ou les atomes initiaux dans diverses zones de contenu (comme les corps d'article, contenu interactif, commentaires, features et sections data-gu-named) obtient un remplissage supérieur de 14 pixels.
Pour la première lettre de ces paragraphes, il utilise les polices Guardian Headline ou des serif similaires en gras, avec une grande taille de police de 111 pixels et une hauteur de ligne de 92 pixels. Il est stylisé pour flotter à gauche, être en majuscules, avoir une marge droite de 8 pixels, s'aligner en haut et prendre la couleur d'une variable CSS pour les lettrines.
Les paragraphes suivant les règles horizontales n'ont pas de remplissage supérieur.
Les éléments avec l'attribut data pour les pullquotes sont limités à une largeur maximale de 620 pixels.
Dans les éléments showcase au sein du contenu principal, des articles feature, des articles standard et des sections de commentaires, les légendes sont positionnées statiquement, couvrant la pleine largeur jusqu'à 620 pixels.
Les éléments immersifs s'étendent sur la pleine largeur du viewport moins la barre de défilement. Sur les écrans plus petits que 71.24 em, ils sont limités à une largeur maximale de 978 pixels, et leurs légendes ont un remplissage en ligne.
Ceci apparaît être du code CSS pour la conception web réactive, définissant différents styles pour diverses tailles d'écran. Il définit comment les éléments de page comme les manchettes, images et légendes doivent apparaître et s'adapter sur les appareils du mobile au bureau. Le code utilise des media queries pour appliquer des dispositions, espacements, bordures et structures de grille spécifiques lorsque le viewport répond à certaines conditions de largeur.
La disposition de grille utilise cinq colonnes de largeur égale pour les sections titre, manchette et standfirst, suivies de huit colonnes de largeur égale pour la section portrait. Les lignes sont définies avec des hauteurs spécifiques pour les zones titre, manchette, standfirst et meta.
Pour les éléments meta, une largeur fixe de 620px est définie, tandis que le contenu standfirst est légèrement décalé vers la gauche. Les labels dans le titre et la manchette ont un remplissage supérieur minimal.
Les manchettes sont en gras avec une largeur maximale de 620px et une taille de police de 32px, augmentant à 50px avec une largeur plus étroite sur les écrans plus larges. Sur les écrans moyens, les marges droites sont supprimées pour les lignes, et les lignes sont masquées sur les affichages plus larges, leur couleur correspondant à la bordure de l'en-tête.
Les sections meta perdent également leur marge droite sur les écrans moyens, et les éléments sociaux et de commentaires partagent la couleur de bordure de l'en-tête. Certains composants meta sont masqués.
Le texte standfirst est en retrait et positionné relativement, avec un poids normal, une taille de police de 20px et un remplissage inférieur. Sur les écrans moyens, il gagne un remplissage supérieur.
Le média principal est placé dans la zone de grille portrait, initialement sans marge supérieure et avec une petite marge inférieure, s'étendant à pleine largeur avec des marges ajustées sur les écrans plus petits. Les légendes sont positionnées en bas avec une couleur d'arrière-plan et une couleur de texte, masquant le premier span et affichant le second. Un bouton de bascule de légende est positionné en bas à droite avec un arrière-plan circulaire.
Sur les écrans très larges, la colonne de contenu principal est ajustée avec une position supérieure modifiée et une hauteur.
Les titres interactifs de la colonne principale ont une largeur maximale de 620 pixels. Pour les appareils iOS et Android, le schéma de couleurs utilise des arrière-plans sombres et des couleurs d'accent spécifiques, qui s'ajustent en mode sombre.
Sur ces plateformes mobiles, la première lettre du premier paragraphe dans divers types d'articles est stylisée avec une couleur secondaire. Les en-têtes d'article sont masqués, tandis que les wrappers de furniture ont un remplissage minimal. Les labels dans ces wrappers sont en gras, utilisent une famille de polices spécifique et sont colorés selon le thème actuel, les manchettes étant réglées sur une couleur gris foncé et une grande taille de police grasse.
Pour les appareils iOS et Android, les styles suivants s'appliquent aux conteneurs d'article (feature, standard et commentaire) :
- Les éléments image dans le wrapper de furniture sont positionnés relativement, avec une marge supérieure de 14px, une marge gauche de -10px et une largeur qui couvre le viewport complet moins la largeur de la barre de défilement. Leur hauteur s'ajuste automatiquement.
- L'élément figure intérieur, l'image et les éléments de lien ont un arrière-plan transparent, correspondent à la largeur complète du viewport moins la barre de défilement et maintiennent une hauteur automatique.
- Les sections standfirst ont un remplissage supérieur de 4px, un remplissage inférieur de 24px et une marge droite de -10px.
- Les paragraphes à l'intérieur du standfirst utilisent la famille de polices Guardian Headline ou des polices serif de repli.
- Les liens dans le standfirst, y compris ceux dans les éléments de liste, héritent de ces styles.
Pour les conteneurs d'article de commentaire, les liens dans le standfirst sont stylisés avec une couleur spécifique, soulignés avec un décalage, et sans image d'arrière-plan ni bordure. Sur les appareils iOS et Android, le survol de ces liens dans les articles feature, standard ou commentaire change la couleur de soulignement pour correspondre à la couleur du pilier. De plus, la section meta dans ces articles n'a pas de marge, et les éléments comme les bylines et les liens d'auteur utilisent la couleur du pilier pour le texte. La zone meta divers n'a pas de remplissage.
Pour les appareils iOS et Android, les styles suivants s'appliquent aux conteneurs d'article feature, standard et commentaire :
- Les icônes SVG dans la section meta divers utilisent la nouvelle couleur du pilier pour les strokes.
- Le bouton de légende dans les éléments showcase est affiché comme un conteneur flex, centré avec 5px de remplissage, 28px de dimensions et positionné à 14px de la droite.
- Le corps de l'article a 12px de remplissage horizontal.
- Les images non-vignettes, non-immersives dans le corps de l'article n'ont pas de marge, une largeur calculée comme la largeur du viewport moins 24px et la largeur de la barre de défilement, et une hauteur automatique, sans remplissage dans leurs légendes.
- Les images immersives couvrent la pleine largeur du viewport moins la largeur de la barre de défilement.
- Les blockquotes cités dans la section prose ont un pseudo-élément before stylisé en conséquence.
Pour les appareils iOS et Android, le style du texte cité et des liens dans les articles est ajusté. Le texte cité utilise une couleur spécifique, tandis que les liens sont soulignés avec une couleur particulière et un décalage. Lorsqu'ils sont survolés, le soulignement du lien change pour une couleur différente.
En mode sombre, l'arrière-plan des en-têtes d'article devient gris foncé. Les labels, manchettes et texte introductif adoptent des couleurs spécifiques pour un meilleur contraste. Les liens et noms d'auteur dans ces sections sont également stylisés pour maintenir la lisibilité et la cohérence avec le design global.
Ce code CSS définit des styles pour différents conteneurs d'article sur les appareils Android et iOS. Il définit la couleur des bylines d'auteur et du texte cité sur une variable spécifique, applique une couleur de stroke à certaines icônes et change la couleur de légende pour les images showcase. De plus, il assure que la couleur d'arrière-plan pour diverses zones de contenu utilise un thème sombre, et il stylise la première lettre des paragraphes suivant des éléments spécifiques.
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 appareils iOS et Android. Le sélecteur s'applique à différentes sections comme les articles feature, les articles standard et les sections de commentaire, se concentrant sur les paragraphes qui viennent après des éléments avec des classes comme "element-atom" ou des IDs comme "sign-in-gate."
Pour les appareils Android et iOS, la première lettre des paragraphes suivant des éléments spécifiques dans divers conteneurs d'article sera stylisée avec une variable de couleur personnalisée, par défaut blanche.
Pour les articles de commentaire sur iOS et Android, l'élément standfirst a un remplissage supérieur de 24 pixels et pas de marge supérieure. Les titres de niveau 2 dans la prose sont réglés à 24 pixels de taille.
Les boutons de légende dans les articles feature, standard et commentaire ont des remplissages différents : 6 pixels en haut, 5 pixels sur les côtés et 0 en bas sur iOS, tandis qu'Android utilise 4 pixels en haut et sur les côtés avec 0 en bas.
En mode sombre, diverses couleurs de texte et d'icône sont ajustées pour une meilleure lisibilité, comme l'utilisation de gris clair pour le texte de suivi et le standfirst, avec des couleurs spécifiques pour les liens et bylines.
Lorsque le wrapper de furniture inclut un logo de l'organisation Guardian, l'îlot de branding est affiché de manière proéminente.
Les labels et manchettes dans les conteneurs d'article reçoivent une épaisseur de police moyenne pour l'emphase.
L'arrière-plan de la page pour les essais du week-end est réglé sur une teinte rose clair (#fff4f2), qui s'applique également aux sections d'article et aux arrière-plans de sub-meta.
Les lignes sont masquées dans la mise en page, et le wrapper de furniture est positionné relativement. Sur les écrans plus larges, il utilise une disposition de grille avec des lignes définies pour les sections titre, manchette, standfirst et meta.
La zone d'en-tête ou de titre d'article a une hauteur fixe de 70 pixels et inclut des labels de contenu avec une image d'arrière-plan d'un GIF de livre dans le coin inférieur droit, qui s'agrandit sur les écrans plus larges. Une ligne horizontale est ajoutée sous les labels, couvrant la largeur du viewport moins la barre de défilement, avec des ajustements pour les écrans moyens et plus larges.
Pour les écrans plus larges que 71.25em, l'en-tête d'article et l'élément titre du wrapper de furniture auront une hauteur de 80px, augmentant à 125px pour les écrans de plus de 81.25em. Sur ces écrans plus larges, la manchette, sa contrepartie d'attribut data et la classe headline auront une marge supérieure de -2px.
Dans le wrapper de furniture, la manchette, sa version d'attribut data et la classe headline ont toutes des divs internes sans remplissage inférieur. Leur wrapper de manchette de média principal portrait est réglé sur pleine hauteur, positionné relativement, débordement masqué et 24px de remplissage inférieur. Les manchettes et liens à l'intérieur de ces wrappers n'ont pas de largeur maximale et affichent un soulignement de 2px d'épaisseur avec un décalage de 6px au survol.
Les éléments texte comme h1, liens et spans de byline dans le wrapper de manchette de média principal portrait utilisent une hauteur de ligne de 115%, une épaisseur de police moyenne et une taille de police de 36px, passant à 50px pour les écrans plus larges que 71.25em.
La section standfirst et ses équivalents sont positionnés relativement avec un remplissage supérieur de 4px, qui devient 0 pour les écrans de plus de 61.25em et 2px pour ceux de plus de 71.25em.
Dans la section meta, les îlots de branding dans le conteneur meta de contenu sont affichés en blocs.
Le furniture-wrapper positionne les éléments média relativement. Sur les écrans plus larges (plus de 61.25em), il leur assigne la zone de grille portrait.
Dans le conteneur média, les divs sont positionnées relativement, et les spans suivant les divs sont affich
