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 depuis 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 un style spécifique pour les éléments. Les éléments dans cette colonne n'ont pas de marge supérieure ou inférieure mais incluent du remplissage. Lorsqu'un paragraphe suit un élément, l'espacement s'ajuste en conséquence. Les éléments en ligne sont limités à une largeur maximale de 620 pixels.
Pour les écrans plus larges, les figures en ligne sont également limitées à 620 pixels. Un style spécial s'applique aux boucles vidéo, incluant le placement des boutons et la position des légendes. Les vidéos auto-hébergées sont définies sur une largeur maximale de 620 pixels avec des marges centrées, tandis que les vidéos immersives s'étendent sur toute la largeur avec des marges ajustées sur les écrans plus larges.
Les variables de couleur définissent le thème, comme la date, les bordures d'en-tête et les couleurs des légendes. En mode sombre, ces couleurs s'adaptent à une palette plus foncée. Le premier paragraphe après certains éléments reçoit un remplissage supérieur supplémentaire, et la première lettre du premier paragraphe peut être stylisée distinctement.Le code CSS définit des styles pour les lettrines, les citations et divers éléments de mise en page à travers différentes sections d'un site web, comme les articles, les commentaires et les reportages. Il définit des polices, des tailles et des couleurs spécifiques pour la première lettre des paragraphes, ajuste la largeur et le positionnement des éléments immersifs et de présentation, et crée une disposition en grille réactive pour les écrans plus larges. Les styles incluent également des requêtes média pour adapter la mise en page à différentes tailles d'écran.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ô, les éléments de liste ont une taille de police de 20 pixels, et les liens n'ont pas de bordure, pas d'image de fond, un soulignement avec un décalage de 6 pixels et une couleur provenant de la propriété personnalisée `--headerBorder` (par défaut `#dcdcdc`). Au survol, le soulignement du lien change pour la couleur définie par `--new-pillar-colour`.
Pour les écrans plus larges (61.25em et plus), les figures n'ont pas de marge gauche, et les éléments en ligne avec un rôle spécifique sont limités à une largeur maximale de 630 pixels. À 71.25em et plus, la mise en page utilise une grille avec des colonnes et des lignes définies. Une ligne décorative apparaît avant la section méta, et une ligne verticale est ajoutée avant le chapô. Les bordures des paragraphes sont supprimées à ce point de rupture.
À 81.25em, la grille s'ajuste pour inclure plus de colonnes, et les lignes décoratives sont repositionnées.
Les titres ont une graisse de police de 600 et une largeur maximale de 620 pixels, avec une taille de police de 32 pixels. Sur les écrans plus larges (71.25em et plus), la taille de police du titre augmente à 50 pixels, et la largeur maximale se réduit à 540 pixels.
Pour les écrans moyens (46.25em et plus), les éléments avec la classe `keyline-4` ou l'attribut `data-gu-name=lines` n'ont pas de marge droite. Sur les écrans plus larges (61.25em et plus), ces éléments sont masqués. Leurs traits SVG utilisent la couleur `--headerBorder`.Ce code CSS définit des styles pour la mise en page d'une page web, en particulier pour un wrapper à thème 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, comme les fonctionnalités du mode sombre et les nuances d'arrière-plan, et assure un comportement réactif sur tous les appareils.Le code CSS stylise les éléments dans une classe furniture-wrapper. Les titres (h1) sont en gras et gris clair (#dcdcdc). Les figures dans les titres 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 boutons de médias sociaux ont une bordure et une icône colorées, l'icône et le texte changeant de couleur au survol.
Les liens dans la section méta utilisent une couleur de thème et conservent cette couleur au survol, avec un soulignement de la même couleur. Dans la section chapô, les liens sont soulignés avec une ligne gris clair qui change pour la couleur du thème au survol. Les paragraphes et les éléments de liste dans le chapô sont gris clair.
Sur les écrans plus larges que 61.25em, le premier paragraphe du chapô a une bordure supérieure, qui est supprimée sur les écrans plus larges que 71.25em. Sur ces écrans plus larges, une ligne colorée apparaît également avant le chapô.
Pour les écrans plus larges que 46.25em, le furniture-wrapper obtient un arrière-plan sombre et une bordure droite.Le CSS définit un `.furniture-wrapper` avec des pseudo-éléments qui créent des barres latérales. Celles-ci ajustent leur largeur et leur position en fonction de la taille de la fenêtre pour maintenir une zone de contenu centrée de largeurs fixes (738px, 978px, 1138px, 1298px) à différents points de rupture, en tenant compte de la largeur de la barre de défilement. Les bordures et les couleurs d'arrière-plan sont appliquées en utilisant des propriétés CSS personnalisées.
Pour les titres dans les articles, les éléments `h2` utilisent une graisse de police légère (200), mais passent en gras (700) s'ils contiennent un élément `strong`.
Les règles `@font-face` chargent la famille de polices "Guardian Headline Full" en plusieurs graisses et styles (Light, Light Italic, Regular, Regular Italic) depuis 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-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/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format("truetype");
font-weight: 400;
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-Medium.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.ttf) format("truetype");
font-weight: 500;
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-MediumItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.ttf) format("truetype");
font-weight: 500;
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-Semibold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Semibold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Semibold.ttf) format("truetype");
font-weight: 600;
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-SemiboldItalic.woff2) format("woff2"),
url
