Le bouton de légende est stylisé comme un élément circulaire de 40 pixels de hauteur et de largeur, positionné en bas à droite de l'écran avec une marge de 10 pixels. Il possède un fond sombre semi-transparent et un z-index élevé pour rester au-dessus des autres contenus. Pour différentes tailles d'écran, sa position droite s'ajuste pour le centrer par rapport aux largeurs de contenu variables, en tenant compte de la barre de défilement si présente.
De plus, la famille de polices Guardian Headline Full est définie avec plusieurs poids et styles (light, regular, medium, semibold, chacun en normal et italique), provenant des ressources du Guardian aux formats WOFF2, WOFF et TTF pour une large compatibilité navigateur.@font-face {
font-family: 'Guardian Headline Full';
src: url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-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/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.woff2') format('woff2'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.woff') format('woff'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.ttf') format('truetype');
font-weight: 600;
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-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://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;
}
.Scrolly-header.svelte-ok2wri {
grid-area: header;
height: 100vh;
width: 100vw;
overflow: clip;
position: relative;
background-color: #121212;
margin-bottom: 20px;
margin-left: -10px;
padding: 0;
}
@media (min-width: 30em) {
.Scrolly-header.svelte-ok2wri {
margin-left: -20px;
}
}
@media (min-width: 46.25em) {
.Scrolly-header.svelte-ok2wri {
margin-left: calc((100vw - 740px - var(--scrollbar-width, 0px)) / 2 * -1 - 21px);
padding: 0 calc((100vw - 740px - var(--scrollbar-width, 0px)) / 2);
}
}
@media (min-width: 61.25em) {
.Scrolly-header.svelte-ok2wri {
margin-left: calc((100vw - 980px - var(--scrollbar-width, 0px)) / 2 * -1 - 21px);
}
}
@media (min-width: 71.25em) {
.Scrolly-header.svelte-ok2wri {
margin-left: calc((100vw - 1140px - var(--scrollbar-width, 0px)) / 2 * -1 - 21px);
}
}
@media (min-width: 81.25em) {
.Scrolly-header.svelte-ok2wri {
margin-left: calc((100vw - 1300px - var(--scrollbar-width, 0px)) / 2 * -1 - 21px);
}
}L'élément Scrolly-header a un remplissage qui s'ajuste en fonction de la largeur de la fenêtre, commençant à 0 et augmentant pour centrer le contenu dans une largeur maximale de 980px, 1140px ou 1300px pour les écrans plus larges, en tenant compte de la largeur de la barre de défilement.
Sur les écrans moyens et plus, la hauteur de l'en-tête est fixée à 90% de la hauteur de la fenêtre, et des lignes verticales sont ajoutées sur les côtés gauche et droit, positionnées pour s'aligner avec les bords de la zone de contenu, qui varient avec la taille de l'écran.
Le wrapper d'image est collant, couvrant initialement toute la fenêtre, et se réduit à des largeurs fixes (740px, 980px, 1140px ou 1300px) sur les écrans plus larges, avec une opacité réduite pour les utilisateurs préférant moins de mouvement.
L'image dans le wrapper est légèrement agrandie par défaut et centre l'arrière-plan, revenant à aucune mise à l'échelle pour les préférences de mouvement réduit, et ajuste sa largeur de manière responsive.
Le conteneur de texte est positionné de manière absolue, couvre toute la hauteur de la fenêtre et centre son contenu avec un remplissage responsive qui correspond à la mise en page de l'en-tête, s'ajustant également à 90% de la hauteur de la fenêtre sur les écrans moyens et plus.Pour les écrans plus larges que 71.25em, le conteneur de texte dans le Scrolly-header ajuste son remplissage pour centrer le contenu avec une largeur maximale de 800px, en tenant compte de la barre de défilement.
Le wrapper de texte dans l'en-tête commence transparent, couvre toute la largeur de la fenêtre et centre son contenu avec un remplissage inférieur de 80px. Initialement, il est caché et décalé vers le bas de 30%, mais il apparaît en fondu et remonte sur une demi-seconde. Si la réduction du mouvement est préférée, il apparaît immédiatement sans animation.
Sur les écrans moyens (46.25em et plus), la largeur du wrapper devient 740px, et sur les écrans plus larges (61.25em et plus), elle se réduit à 640px.
Le titre et le texte standfirst utilisent une famille de polices spécifique, sont blancs avec une ombre pour la lisibilité et ont un retour à la ligne équilibré. Ils incluent un effet d'arrière-plan sombre flou pour le contraste. Le titre est plus grand et plus gras, tandis que le standfirst est plus léger et apparaît en dessous avec une marge supérieure.
Aux tailles d'écran moyennes, les tailles de texte augmentent et les marges s'ajustent pour une meilleure mise en page. Sur les écrans plus larges, les marges sont légèrement réduites.
Lorsqu'il est animé, le wrapper d'image devient plus opaque et le wrapper de texte devient entièrement visible et centré. Sur iOS et Android, l'en-tête s'aligne à gauche sans marge.
Les polices pour Guardian Headline Full sont définies en poids light, light italic et regular, provenant d'URL spécifiques aux formats woff2, woff et ttf.Le site web du Guardian utilise une police personnalisée appelée "Guardian Headline Full" pour ses titres. Cette police est disponible en différents styles et poids, incluant regular, italic, medium, semi-bold, bold et black, chacun disponible en plusieurs formats de fichiers comme WOFF2, WOFF et TrueType pour une compatibilité across différents navigateurs.@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://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));
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-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;
left: -11px;
}
}
.content__main-column--interactive .element-atom {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 12px;
padding-top: 12px;
}
.content__main-column--interactive p + .element-atom {
padding-top: 0;
padding-bottom: 0;
margin-top: 12px;
margin-bottom: 12px;
}
.content__main-column--interactive .element-inline {
max-width: 620px;
}
@media (scripting: enabled) {
:root .content--interactive,
:root #article-header > div,
:root #feature-header > div,
:root #article-header > h1,
:root #feature-header > h1 {
opacity: 0;
}
:root.interactive-loaded .content--interactive,
:root.interactive-loaded #article-header > div,
:root.interactive-loaded #feature-header > div,
:root.interactive-loaded #article-header > h1,
:root.interactive-loaded #feature-header > h1 {
opacity: 1;
transition: opacity 0.2s ease;
}
}
nav + section {
display: none;
}
nav + aside {
display: none;
}
aside + section {
display: none;
}
header {
z-index: 3;
}
#maincontent {
margin-top: 0;
}
[data-gu-name=lines] {
display: none;
}
@media (min-width: 46.25em) {
[data-gu-name=lines] {
display: block;
}
}
.content--interactive-grid {
position: relative;
grid-template-areas: "title" "header" "media" "media" "lines" "meta" "body";
grid-template-rows: [title-start header-start media-start] auto [title-end header-end lines-start media-end] auto [lines-end meta-start] auto [meta-end standfirst-start] auto [body-start] auto [body-end];
}
.content--interactive-grid #headline,
.content--interactive-grid [data-gu-name=headline],
.content--interactive-grid .headline {
/ Styles pour les titres dans la mise en page de grille interactive /
}Pour les éléments avec la classe "content--interactive-grid", masquez la section standfirst et ses composants associés.
Définissez l'en-tête d'article, le
