Ce code CSS définit la famille de polices "Guardian Headline Full" avec différentes épaisseurs et styles, incluant light, regular, medium et semibold, chacun en versions normale et italique. 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 fontes pour les familles de polices "Guardian Headline Full" et "Guardian Titlepiece". Chaque fonte spécifie différentes épaisseurs et styles (normal ou italique) et fournit plusieurs formats de fichiers (WOFF2, WOFF et TrueType) pour une compatibilité multiplateforme. Les épaisseurs vont de light (300) à black (900), avec les versions italiques correspondantes le cas échéant.
Ce code CSS définit plusieurs styles de police pour la famille "Guardian Headline Full". Il inclut différentes épaisseurs et styles comme regular, medium, semibold, bold et black, chacun en versions normale et italique. Pour chaque style, il spécifie les fichiers de police aux formats WOFF2, WOFF et TrueType depuis le serveur d'assets du Guardian, avec les propriétés de poids et style correspondantes.
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érents poids et styles, et configure des grilles responsives qui changent selon différentes tailles d'écran. Le code gère l'agencement des zones de contenu comme les titres, en-têtes, médias et corps de texte across différentes largeurs d'appareils, des mobiles aux écrans de bureau.
Pour les figures de grille interactives avec légendes immersives dans des zones de contenu spécifiques, le padding des légendes est défini à 4 pixels en haut et 0 ailleurs.
Dans diverses sections de contenu, les éléments avec attributs de données pour lines et meta sont positionnés dans la grille de la ligne 2 à 5 et colonne 1 à 2. Les éléments lines ont une hauteur adaptée à leur contenu et une marge haute de 5 pixels, tandis que les éléments meta ont une marge haute de 18 pixels.
Sur les grands écrans avec une largeur minimale de 81.25em, la grille pour ces zones utilise des colonnes de 219px, 1px, 620px, 80px et 300px.
Pour les appareils iOS et Android, les en-têtes d'article utilisent des polices et styles spécifiques : le texte standfirst utilise Guardian Headline ou des polices serif similaires avec un poids medium, les section kickers s'affichent en bloc avec la première lettre capitalisée, les keylines ont 12 pixels de padding haut, et les bylines utilisent une police serif bold. Les images dans les articles ajustent leur hauteur automatiquement, et les paragraphes suivant des éléments atomic n'ont pas de marge haute.
Les fontes sont définies pour Guardian Headline Full en poids light et light italic, sourcées depuis des fichiers woff2, woff et ttf.
Ce texte définit une famille de police personnalisée "Guardian Headline Full" avec différents styles et poids. Il inclut des versions regular, medium, semibold et bold, chacune en styles normal et italique. Les fichiers de police sont fournis aux formats WOFF2, WOFF et TrueType depuis le site du Guardian.
Ce code CSS définit des styles de police et des ajustements de mise en page pour un site web. Il spécifie des polices personnalisées depuis les assets du Guardian, incluant leurs poids et styles, et établit des règles de design responsive pour différentes tailles d'écran. Les règles de mise en page contrôlent les marges, largeurs et positionnement de divers éléments comme les colonnes, atoms, showcases et sections immersives pour assurer un affichage correct sur tous les appareils. Il inclut aussi des variables de couleur et des ajustements de padding pour une apparence visuelle cohérente.
Le premier paragraphe dans diverses sections de contenu, comme les corps d'article, contenu interactif, commentaires et features, doit avoir un padding haut de 14 pixels. De plus, la première lettre de ces paragraphes doit être stylée avec une police spécifique, un poids bold, une grande taille, un texte uppercase et une couleur pouvant varier, tout en flottant à gauche avec une marge.
Pour les paragraphes suivant une règle horizontale, aucun padding haut n'est appliqué. Les pullquotes dans ces sections sont limités à une largeur maximale de 620 pixels.
Dans les éléments showcase, les légendes sont positionnées statiquement et ont aussi une largeur maximale de 620 pixels. Les éléments immersifs s'étendent sur la pleine largeur du viewport, ajustée pour les barres de défilement, et sur les écrans plus petits que 71.24em, ils sont limités à 978 pixels de large avec un padding de légende approprié.
Ceci apparaît comme du code CSS pour du design web responsive, définissant différents styles pour diverses tailles d'écran. Il définit comment les éléments de page comme les titres, images et légendes doivent apparaître et s'ajuster sur les appareils du mobile au desktop. Le code utilise des media queries pour appliquer des mises en page, espacements, bordures et structures de grille spécifiques quand le viewport rencontre certaines conditions de largeur.
La grille utilise cinq colonnes de largeur égale pour les sections titre, headline 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 de titre, headline, 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é à gauche. Les labels dans la zone titre ont un petit padding haut.
Les headlines sont en bold avec une largeur maximale de 620px et une taille de police de 32px, augmentant à 50px avec une largeur plus étroite sur les grands écrans. Sur les écrans moyens, les marges droites sont supprimées pour les lines, et les lines sont cachées sur les écrans plus larges, avec leur couleur correspondant à la bordure d'en-tête.
Les sections meta perdent aussi leur marge droite sur les écrans moyens, et les éléments sociaux et commentaires partagent la couleur de bordure d'en-tête. Certains composants meta sont cachés.
Le contenu standfirst est indenté et positionné relativement, avec un padding haut ajouté sur les écrans moyens. Les paragraphes à l'intérieur ont un poids normal, une taille de 20px et un padding bas.
Le média principal est positionné dans la zone de grille portrait, s'étend sur toute la largeur sans marges latérales et n'a pas de marge basse sur les grands écrans. Sur les petits écrans, il ajuste sa largeur et sa marge gauche.
Les légendes sont positionnées en bas avec une couleur d'arrière-plan et de texte, pleine largeur et une hauteur minimale. Le premier span est caché, tandis que le second est visible et limité à 90% de largeur, avec un padding augmentant sur les grands écrans. Les légendes cachées sont transparentes.
Un bouton de légende apparaît en bas à droite avec un arrière-plan circulaire, sans bordure et une icône mise à l'échelle, positionné plus à droite sur les grands écrans.
Pour le contenu interactif, un pseudo-élément est ajusté en position et hauteur sur les plus grands écrans.
Les titres interactifs de la colonne principale ont une largeur maximale de 620 pixels. Pour les appareils iOS et Android, la palette 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 après certains éléments dans les conteneurs d'article est stylée avec une couleur secondaire, et les en-têtes d'article sont cachés. Les furniture wrappers reçoivent un padding minimal, avec des labels dans une police bold, capitalisée utilisant la couleur pillar désignée, et les headlines sont larges, bold et sombres pour l'emphasis.
Pour les appareils iOS et Android, les styles suivants s'appliquent aux conteneurs d'article (feature, standard et comment) :
- Les éléments image dans le furniture wrapper sont positionnés relativement, avec une marge haute de 14px, une marge gauche de -10px et une largeur couvrant le viewport complet moins la largeur de la barre de défilement. Leur hauteur s'ajuste automatiquement.
- L'élément figure interne, image et liens ont un arrière-plan transparent, correspondent à la largeur du viewport moins la barre de défilement et maintiennent une hauteur auto.
- Les sections standfirst ont un padding haut de 4px, bas de 24px et une marge droite de -10px.
- Les paragraphes dans le standfirst utilisent la famille de police Guardian Headline ou similaire serif.
- Les liens dans le standfirst, y compris ceux dans les éléments de liste, sont stylés en conséquence.
Pour les conteneurs d'article comment, les liens dans le standfirst sont stylés avec une couleur spécifique, soulignés avec un offset, et sans image d'arrière-plan ni bordure. Sur iOS et Android, le survol de ces liens dans les articles feature, standard ou comment change la couleur de soulignement pour correspondre à la couleur pillar. De plus, la section meta dans ces articles n'a pas de marge, et les éléments comme les bylines et liens d'auteur utilisent la couleur pillar pour le texte. La section meta divers n'a pas de padding.
Pour les appareils iOS et Android, les styles suivants s'appliquent aux conteneurs d'article feature, standard et comment :
- Les icônes SVG dans la section meta divers utilisent la nouvelle couleur pillar pour les strokes.
- Le bouton de légende dans les éléments showcase est affiché comme un conteneur flex, centré avec 5px de padding, 28px de dimensions et positionné à 14px de la droite.
- Le corps d'article a 12px de padding horizontal.
- Les images non-vignettes, non-immersives dans le corps d'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 auto, sans padding dans leurs légendes.
- Les images immersives s'étendent sur 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 stylé 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 changent au survol.
En mode sombre, l'arrière-plan des en-têtes d'article devient gris foncé, et les éléments texte comme les labels, headlines et paragraphes standfirst adoptent des couleurs contrastées pour une meilleure lisibilité. Les liens et noms d'auteur dans ces sections suivent aussi ce schéma de couleurs pour maintenir la cohérence.
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 couleur pillar spécifique, applique la même couleur aux strokes SVG, et utilise une couleur dateline pour les légendes d'image. De plus, il assure que l'arrière-plan de divers éléments body est défini sur un arrière-plan sombre avec haute importance.
Ceci apparaît comme un sélecteur CSS ciblant la première lettre des paragraphes qui suivent des éléments spécifiques dans divers conteneurs d'article sur iOS et Android. Le sélecteur s'applique à différentes sections comme les articles feature, standard et les sections de commentaires, 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 stylée avec une variable de couleur personnalisée, par défaut blanc.
Pour les articles comment sur Android et iOS, la section standfirst a un padding haut de 24 pixels et pas de marge haute. Les titres de niveau 2 dans la prose sont définis à 24 pixels.
Les boutons de légende dans les articles feature, standard et comment ont différents padding sur iOS (6px haut, 5px côtés, 0 bas) et Android (4px haut et côtés, 0 bas).
En mode sombre, des couleurs spécifiques sont appliquées au texte follow, icônes, texte standfirst, liens et bylines pour une meilleure visibilité.
Quand le furniture wrapper inclut un logo d'organisation Guardian, l'élément branding est toujours affiché. Les labels de contenu et headlines dans divers types d'article sur iOS et Android, ainsi que les paragraphes standfirst, utilisent un poids de police medium.
L'arrière-plan de page pour les essais weekend est une teinte rose clair (#fff4f2), qui s'applique aussi aux sections d'article et arrière-plans sub-meta. Les lines sont cachées par défaut.
Le furniture wrapper est positionné relativement et utilise une grille sur les grands écrans avec des lignes définies pour les sections titre, headline, standfirst et meta.
La zone d'en-tête ou de titre d'article a une hauteur fixe de 70 pixels et contient des labels de contenu qui couvrent toute la hauteur. Un GIF décoratif de livre (70x70 pixels) apparaît dans le coin inférieur droit, s'agrandissant à 110x110 pixels sur les écrans plus larges. Une ligne horizontale s'étend en bas des labels de contenu, s'étendant à la largeur du viewport moins la barre de défilement sur les petits écrans et fixée à 738 pixels sur les écrans moyens, avec une indentation à gauche.
Pour les écrans plus larges que 71.25em, le furniture wrapper's article header et title element auront une hauteur de 80px, augmentant à 125px pour les écrans au-delà de 81.25em. Sur ces grands écrans, le headline, sa version data attribute et headline class auront une marge haute de -2px.
Dans le furniture wrapper, le headline, sa version data attribute et headline class ont tous des divs internes sans padding bas. Leur portrait main media headline wrapper est défini à pleine hauteur, positionné relativement, débordement caché et 24px de padding bas. Les headlines et liens inside ces wrappers n'ont pas de largeur maximale et affichent un soulignement de 2px d'épaisseur avec un offset de 6px au survol.
Les éléments texte incluant h1, liens et byline spans dans le portrait main media headline wrapper partagent un line height de 115%, un poids de police medium et une taille de police de 36px, qui augmente à 50px sur les écrans plus larges que 71.25em.
La section standfirst et ses équivalents sont positionnés relativement avec 4px de padding haut, supprimé sur les écrans au-delà de 61.25em et réduit à 2px sur ceux au-delà de 71.25em.
Dans la section meta, les éléments branding dans le content meta container sont affichés en blocs.
De plus, pour les écrans plus larges que 46.25em, les content labels après les divs dans l'article header et title sont cachés.
Le furniture-wrapper positionne les éléments media relativement. Sur les grands écrans (au-delà de 61.25em), le main media et media elements sont placés dans la zone de grille portrait.
Dans le main media et media elements, les divs sont positionnés relativement, et les spans suivant les divs sont affichés en blocs. Les figures prennent pleine hauteur avec une marge gauche de 10px.
Les images et légendes dans les figures ajustent leur largeur basée sur le viewport, prenant en compte les barres de défilement, avec une hauteur auto et des marges et padding spécifiques. Les légendes ont une marge basse et un padding supplémentaires.
Un cadre décoratif est ajouté avant chaque figure utilisant une image d'arrière-plan, dimensionnée pour s'adapter au conteneur et positionnée absolument.
Pour les écrans moyens (au-delà de 46.25em), les figures perdent leur marge gauche. Les images et le cadre s'ajustent à des largeurs fixes, avec des marges et padding modifiés. Les légences redimensionnent et se repositionnent aussi.
Sur les breakpoints plus larges (61.25em, 71.25em, 81.25em), le cadre, images et légendes adaptent leurs largeurs, marges et padding pour s'adapter aux différentes tailles d'écran.
Le bouton de légende est positionné en bas à droite, avec son placement changeant à divers breakpoints pour un placement optimal.
Pour le main media caption button et furniture wrapper avec media data attribute, le caption button est positionné à 30px du bas. Dans le furniture wrapper, quand il n'y a pas de media, le conteneur centre son contenu horizontalement et verticalement, prenant toute la largeur. Le texte inside a une taille de police de 24px, un poids bold, un line height de 115%, utilise une variable de couleur spécifique, est souligné et affiché en bloc.
Sur les écrans plus larges que 71.25em, la colonne principale interactive s'aligne à gauche sans aucun élément précédent
