Ce code CSS définit une famille de polices personnalisée appelée "Guardian Headline Full" avec plusieurs poids et styles de police. Il inclut les poids light, regular, medium et semibold, chacun dans des versions normale et italique. Pour chaque style, le code spécifie trois formats de fichiers de police différents (woff2, woff et ttf) hébergés sur les serveurs du Guardian, garantissant une large compatibilité avec les navigateurs.
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.ttf) format("truetype");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf) format("truetype");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Guardian Titlepiece;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@media (min-width: 71.25em) {
.content__main-column--interactive {
margin-left: 160px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive {
margin-left: 240px;
}
}
.content__main-column--interactive .element-atom {
max-width: 620px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-atom {
max-width: 100%;
}
}
.content__main-column--interactive .element-showcase {
margin-left: 0;
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-showcase {
max-width: 620px;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-showcase {
max-width: 860px;
}
}
.content__main-column--interactive .element-immersive {
max-width: 1100px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-immersive {
width: calc(100vw - var(--scrollbar-width));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width)) !important;
}
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(-20px);
width: calc(100% + 60px);
}
}
@media (max-width: 71.24em) {
.content__main-column--interactive .element-immersive {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(0);
width: auto;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive .element-immersive {
max-width: 1260px;
}
}
.content__main-column--interactive p,
.content__main-column--interactive ul {
max-width: 620px;
}
.content__main-column--interactive:before {
position: absolute;
top: 0;
height: calc(100% + 15px);
min-height: 100px;
content: "";
}
@media (min-width: 71.25em) {
.content__main-cPour les colonnes de contenu interactif, une bordure gauche est ajoutée avec un positionnement et un z-index spécifiques. Sur les écrans plus larges, la position de la bordure s'ajuste légèrement. Dans ces colonnes, les éléments atom n'ont pas de marges supérieure ou inférieure mais incluent un remplissage. Lorsqu'un paragraphe suit un élément atom, le remplissage est supprimé et des marges sont ajoutées à la place. Les éléments en ligne sont limités à une largeur maximale.
Pour les figures avec un rôle en ligne, elles ont également une largeur maximale sur les écrans de taille moyenne et plus.
Les propriétés personnalisées définissent diverses couleurs pour des éléments comme les datelines, les en-têtes, les légendes et les features. La couleur de pilier principale prend par défaut la couleur de la feature si elle n'est pas définie.
Les éléments atom dans les colonnes interactives ou généralement n'ont pas de remplissage. Le premier paragraphe après des éléments spécifiques ou des règles horizontales dans divers corps de contenu reçoit un remplissage supérieur supplémentaire.
De plus, la première lettre de ces paragraphes est stylisée comme une lettrine avec une police, une taille, un poids et une couleur spécifiques, utilisant des propriétés personnalisées pour la coloration.Pour les paragraphes suivant des règles horizontales dans des zones de contenu spécifiques, supprimez le remplissage supérieur.
Limitez la largeur des citations à 620px dans les corps d'article, interactif, commentaire et feature.
Pour les légendes des éléments showcase dans le contenu principal et les conteneurs d'article, définissez la position sur statique, la largeur à 100% et la largeur maximale à 620px.
Les éléments immersifs doivent s'étendre sur toute la largeur de la fenêtre d'affichage moins la barre de défilement. Sur les écrans jusqu'à 71.24em, limitez leur largeur à 978px. Pour les légendes sur ces écrans, ajoutez 10px de remplissage horizontal, augmentant à 20px sur les écrans entre 30em et 71.24em.
Sur les écrans de gamme moyenne (46.25em à 61.24em), limitez les éléments immersifs à 738px. Sur les écrans plus petits (jusqu'à 46.24em), supprimez la marge gauche, alignez sur le bord gauche et ajoutez une marge gauche négative de 10px (20px sur les écrans de 30em et plus). Les légendes sur ces écrans plus petits reçoivent 20px de remplissage horizontal.
Pour le wrapper furniture sur les grands écrans (61.25em et plus), utilisez une grille CSS avec des colonnes et des lignes définies. Stylisez le premier enfant des titres avec une bordure supérieure. Positionnez la section meta de manière relative avec un remplissage supérieur et aucune marge droite. Dans les sections standfirst, ajustez les marges inférieures, définissez la taille de police des éléments de liste à 20px, et stylisez les liens avec des soulignements (utilisant une couleur personnalisée pour le soulignement qui change au survol). Le premier paragraphe du standfirst obtient une bordure supérieure et aucun remplissage inférieur, bien que cette bordure soit supprimée sur les très grands écrans (71.25em et plus).
De plus, pour les figures dans le wrapper, supprimez la marge gauche et définissez une largeur maximale de 630px pour les éléments en ligne. Sur les plus grands écrans (71.25em et plus), les colonnes du modèle de grille sont définies à partir du titre, du titre principal et de la meta.Le layout utilise une grille avec des colonnes et des lignes définies pour différentes tailles d'écran. Sur les écrans plus larges, la grille a trois colonnes pour les sections titre, titre principal et meta, cinq colonnes pour le standfirst, et huit colonnes pour le portrait, avec des lignes dimensionnées proportionnellement. Sur les écrans moyens, la grille s'ajuste à deux, cinq et sept colonnes respectivement, avec des hauteurs de ligne spécifiques.
Le style inclut une bordure supérieure pour la section meta et une bordure gauche pour le standfirst, toutes deux utilisant une variable de couleur personnalisée. Les titres principaux ont une largeur maximale et une taille de police qui change avec la taille de l'écran, devenant plus grande sur les écrans plus larges. Certains éléments, comme le partage social et les sections de commentaires, ont des bordures correspondant à la couleur de l'en-tête, tandis que d'autres sont masqués sur certains appareils.
Le texte du standfirst a des propriétés de remplissage et de police spécifiques, et la zone média principale est positionnée dans la grille, avec sa largeur s'ajustant sur les écrans plus petits pour tenir compte des barres de défilement et des marges. Les légendes sont positionnées de manière absolue.La légende de la figure du wrapper furniture est positionnée de manière absolue en bas sans marge inférieure, avec un remplissage, une couleur d'arrière-plan et une couleur de texte. Sa largeur est définie à 100% avec une hauteur minimale de 46 pixels. Dans la légende, le premier span est masqué, tandis que le second est affiché et limité à 90% de la largeur maximale. Le texte de la légende et les icônes SVG utilisent une variable de couleur spécifique.
Sur les écrans plus larges que 30em, le remplissage horizontal de la légende augmente. Un bouton de légende dédié est positionné de manière absolue en bas à droite, avec un arrière-plan circulaire et une icône SVG mise à l'échelle, ajustant sa position droite sur les écrans plus larges.
Pour les colonnes principales interactives sur les écrans très larges, un pseudo-élément ajuste son haut et sa hauteur. Les titres dans ces colonnes ont une largeur maximale.
Sur iOS et Android, des variables de couleur pour le mode sombre sont définies, incluant une couleur de feature qui change en mode sombre. Des conteneurs d'article spécifiques sur ces plateformes stylisent la première lettre du premier paragraphe après certains éléments avec une couleur secondaire, définissent la hauteur de l'en-tête de l'article à zéro, ajustent le remplissage pour le wrapper furniture, et masquent les labels de contenu à l'intérieur.Pour les appareils iOS et Android, les styles suivants s'appliquent aux conteneurs d'article de type feature, standard et commentaire :
- **Labels** : Utilisez une police en gras, en majuscules, de type Guardian headline ou serif, colorée avec la variable de nouvelle couleur de pilier.
- **Titres principaux** : Définis à 32px, en gras, avec 12px de remplissage inférieur, et une couleur gris foncé (#121212).
- **Images** : Positionnées de manière relative, avec une marge supérieure de 14px et une marge gauche négative de 10px. La largeur couvre toute la fenêtre d'affichage (en tenant compte des barres de défilement), et la hauteur s'ajuste automatiquement. Les éléments internes, images et liens dans la figure ont un arrière-plan transparent, correspondant à la largeur complète de la fenêtre d'affichage avec une hauteur automatique.
- **Standfirst (résumé de l'article)** : Inclut 4px de remplissage supérieur, 24px de remplissage inférieur et une marge droite négative de 10px. Les paragraphes à l'intérieur du standfirst héritent des styles de ce conteneur.Le code CSS définit des styles spécifiques pour les standfirsts d'article et les métadonnées sur les appareils iOS et Android. Il définit les familles de polices pour le texte du standfirst et personnalise l'apparence des liens, y compris la couleur, le style de soulignement et les effets de survol. Le code ajuste également les marges pour les sections de métadonnées et assure un style cohérent pour les bylines et les liens d'auteur à travers différents types d'articles.Le nom de l'auteur dans la section meta du wrapper furniture, ainsi que les liens et spans associés sur les appareils Android pour les articles standard et commentaire, doivent utiliser la nouvelle couleur de pilier. Sur iOS et Android, la section meta divers dans les articles feature, standard et commentaire ne doit avoir aucun remplissage, et toutes les icônes SVG à l'intérieur doivent être stylisées avec la nouvelle couleur de pilier comme trait.
Pour les éléments showcase dans les articles feature, standard et commentaire sur iOS et Android, le bouton de légende doit être affiché comme un conteneur flex. Il doit être centré avec 5px de remplissage, aligné horizontalement et verticalement, dimensionné à 28x28 pixels, et positionné à 14px de la droite.
Le corps de l'article dans les articles feature, standard et commentaire sur iOS et Android doit avoir 12px de remplissage à gauche et à droite. Dans le corps de l'article, les figures d'image qui ne sont pas des miniatures ou immersives ne doivent avoir aucune marge. Leur largeur doit être la largeur complète de la fenêtre d'affichage moins 24px et toute largeur de barre de défilement, avec une hauteur automatique. Les légendes pour ces images doivent également suivre ces règles.Pour les appareils iOS et Android, les images immersives dans les articles feature, standard et commentaire doivent couvrir toute la largeur de la fenêtre d'affichage, en tenant compte de la barre de défilement.
Les citations dans le corps de l'article doivent utiliser la couleur de pilier du site pour leur élément décoratif.
Les liens dans le texte de l'article doivent être stylisés avec la couleur de pilier principale, un soulignement et aucune image d'arrière-plan. La couleur du soulignement doit changer au survol.
En mode sombre, la zone d'en-tête de l'article doit avoir un arrière-plan sombre. Les labels et le titre principal doivent utiliser des couleurs spécifiques pour le contraste, et le texte introductif doit être lisible contre le thème sombre.Le texte semble être un fragment de code CSS, et non un passage en prose à réécrire. Il contient des sélecteurs et des règles de style ciblant des éléments spécifiques sur des pages web pour différentes plateformes (iOS et Android) et types d'articles (feature, standard, commentaire). Les règles définissent des couleurs et des styles pour les liens, les bylines d'auteur, les icônes, les légendes d'images et les citations en utilisant des propriétés personnalisées CSS (comme `--new-pillar-colour` et `--dateline`).
Puisqu'il s'agit de code, il ne peut pas être réécrit en "anglais flu
