La famille de polices Guardian Headline Full comprend plusieurs styles, chacun avec différentes graisses et italiques. La version light (graisse 300) existe en styles régulier et italique, tout comme la version régulière (graisse 400). Les styles medium (graisse 500) et semibold (graisse 600) ont également des options régulières et italiques. Chaque fichier de police est disponible aux formats WOFF2, WOFF et TrueType sur les serveurs du Guardian.@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Guardian Titlepiece;
src: url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://interactive.guim.co.uk/fonts/garnett/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, 0px));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width, 0px)) !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-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
}
}La colonne de contenu interactif principal a des styles spécifiques pour les éléments. Par exemple, les atomes n'ont pas de marge supérieure ou inférieure mais ont un remplissage de 12px. Lorsqu'un paragraphe suit un atome, le remplissage de l'atome est supprimé et les marges sont fixées à 12px. Les éléments en ligne sont limités à une largeur de 620px.
Pour les figures avec un rôle de boucle, la légende est positionnée avec un z-index de 6. Un bouton de boucle est stylisé pour avoir une largeur de 32px, aligné en bas à droite avec des marges spécifiques. Le bouton de légende a un z-index élevé de 100.
Les éléments vidéo auto-hébergés sont définis à une largeur de 100%, plafonnés à 620px, et affichés en bloc avec des marges de 12px. La vidéo et son conteneur prennent également toute la largeur jusqu'à 620px et sont centrés. Si la vidéo est immersive, elle supprime la limite de largeur et les marges, s'étendant complètement. Sur les écrans plus larges, les vidéos immersives s'élargissent à 1140px de large avec une marge gauche négative, et à des tailles encore plus grandes, elles deviennent larges de 1300px avec une marge négative plus importante.
Les variables de couleur définissent diverses couleurs de thème, telles que le gris de la date, la bordure d'en-tête, le texte de légende et le rouge de la rubrique. En mode sombre, certaines couleurs s'ajustent à une palette de thème sombre.
Dans le corps de l'article, le premier paragraphe après un atome ou une règle horizontale a un remplissage supérieur supplémentaire. De plus, la première lettre du premier paragraphe après un atome est stylisée, bien que le style spécifique ne soit pas entièrement détaillé ici.Le code CSS définit des styles pour les lettrines, les citations en exergue et divers éléments de mise en page à travers différentes sections d'un site web. Les lettrines sont stylisées avec une police, une taille et une couleur spécifiques, et sont flottées à gauche. Les citations en exergue se voient attribuer une largeur maximale. Pour les éléments de vitrine, les légendes sont définies sur une position statique avec une largeur complète et une largeur maximale de 620px.
Les éléments immersifs sont définis pour prendre toute la largeur de la fenêtre d'affichage, moins la barre de défilement. Sur les écrans plus petits que 71.24em, leur largeur maximale est ajustée à 978px, et le remplissage des légendes varie selon la taille de l'écran. Sur les écrans moyens (46.25em à 61.24em), la largeur maximale est de 738px. Sur les petits écrans (moins de 46.24em), les éléments immersifs reçoivent des marges gauches négatives pour s'étendre jusqu'au bord de la fenêtre d'affichage, avec un remplissage de légende ajusté en conséquence.
Pour les écrans plus larges (plus de 61.25em), une mise en page en grille est utilisée pour le wrapper de mobilier, créant une structure à deux colonnes avec des lignes définies pour les sections de titre, de manchette, de chapô, de méta et de portrait. Une bordure supérieure est ajoutée au premier enfant des éléments de manchette, et le positionnement de la section méta est défini sur absolu.Le wrapper de mobilier définit le contenu du chapô pour avoir une position relative avec un remplissage supérieur de 2 pixels et aucune marge droite. Dans le chapô, la zone de contenu principal a une marge inférieure de 4 pixels. Les éléments de liste à l'intérieur du chapô utilisent une taille de police de 20 pixels. Les liens dans le chapô, y compris ceux dans les éléments de liste, n'ont pas de bordure, pas d'image de fond et sont soulignés avec un décalage de 6 pixels, utilisant une couleur personnalisée pour le soulignement. Au survol, la couleur du soulignement change pour une nouvelle couleur de rubrique.
Le premier paragraphe dans le chapô a une bordure supérieure et aucun remplissage inférieur. Pour les écrans plus larges (61.25em et plus), si l'écran fait également au moins 71.25em de large, la bordure supérieure est supprimée. Pour les écrans d'au moins 61.25em de large, les figures n'ont pas de marge gauche et une largeur maximale de 630 pixels lorsqu'elles sont en ligne.
Sur les écrans de 71.25em et plus, le wrapper de mobilier utilise une mise en page en grille avec des colonnes et des lignes spécifiques. Une ligne décorative apparaît avant la section méta, large de 540 pixels. Les paragraphes dans le chapô n'ont pas de bordure supérieure, et une ligne verticale est ajoutée avant le contenu du chapô. Pour les écrans encore plus larges (81.25em et plus), la grille s'ajuste avec plus de colonnes et de lignes, la ligne décorative avant la méta s'étend à 620 pixels, et la ligne verticale avant le chapô se décale légèrement.
Les étiquettes dans l'en-tête de l'article ou la section de titre ont un remplissage supérieur de 2 pixels. La manchette utilise une graisse de police en gras, une largeur maximale de 620 pixels et une taille de police de 32 pixels. Sur les écrans plus larges (71.25em et plus), la manchette s'ajuste à une largeur maximale de 540 pixels et une taille de police de 50 pixels.
Pour les écrans moyens (46.25em et plus), les filets ou éléments de ligne n'ont pas de marge droite. Sur les écrans plus larges (61.25em et plus), ces lignes sont masquées. Les lignes utilisent une couleur personnalisée pour le trait.Ce code CSS définit des styles pour la mise en page d'une page web, en particulier pour un wrapper de type mobilier. Il définit diverses propriétés pour des éléments comme les informations méta, le texte du chapô, le média principal et les légendes. Les styles incluent des ajustements pour les marges, le remplissage, les couleurs et le positionnement, avec des règles spécifiques pour différentes tailles d'écran utilisant des requêtes média. Le design utilise des variables CSS personnalisées pour les couleurs, telles que `--darkBackground` et `--headerBorderColor`, et assure que les éléments sont masqués ou affichés en fonction de la largeur de la fenêtre d'affichage. Le wrapper a un arrière-plan sombre et inclut un comportement réactif pour les appareils allant du mobile au bureau.Le code CSS stylise les éléments dans une classe de wrapper de mobilier. Les manchettes (h1) sont en gras et gris clair (#dcdcdc). Les figures dans les manchettes n'ont pas de marge supérieure et une petite marge inférieure.
Pour les écrans plus larges que 71.25em, une ligne colorée apparaît avant la section méta. Le texte et les résumés dans la section méta sont gris clair. Les liens de médias sociaux et les boutons ont une bordure colorée et utilisent une couleur spécifique pour le texte et les icônes, qui change pour un arrière-plan sombre au survol.
Les liens dans la section méta utilisent une couleur spécifique et la conservent au survol avec des soulignements correspondants. Dans la section du chapô, les liens sont soulignés avec une couleur gris clair qui change au survol, et le texte des paragraphes est gris clair. Sur les écrans plus larges, le premier paragraphe peut avoir ou perdre une bordure supérieure. Les éléments de liste dans le chapô sont également gris clair.
Pour les écrans plus larges que 71.25em, une ligne apparaît avant le chapô. Sur les écrans plus larges que 46.25em, le wrapper obtient un arrière-plan sombre et une bordure droite.Le wrapper de mobilier utilise des pseudo-éléments pour créer des bordures latérales. L'élément `:before` est positionné à gauche avec un arrière-plan sombre et une bordure gauche, tandis que sa largeur et sa position gauche sont calculées en fonction de la largeur de la fenêtre d'affichage, de la largeur de la barre de défilement et d'une largeur de base fixe de 738px. L'élément `:after` reflète cela sur le côté droit avec une bordure droite.
Pour les écrans plus larges (largeur minimale 61.25em), les calculs s'ajustent à une largeur de base de 978px. Ce modèle continue pour des points de rupture encore plus grands : 71.25em (base 1138px), et 81.25em (base 1298px).
Dans le wrapper, les traits SVG et certaines bordures d'éléments sociaux/méta sont définis pour utiliser une variable CSS personnalisée pour la couleur, `--headerBorderColor`.
Dans le corps de l'article, les titres de niveau deux (`h2`) ont une graisse de police de 200, mais s'ils contiennent un élément `strong`, la graisse augmente à 700.
Enfin, plusieurs règles `@font-face` sont définies pour charger la famille de polices "Guardian Headline Full" dans diverses graisses et styles (Light, Light Italic, Regular, Regular Italic) depuis les serveurs d'actifs du Guardian.@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.ttf) format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/
