Ce code CSS définit la famille de polices « Guardian Headline Full » avec plusieurs styles et graisses. Il inclut les versions light (300), regular (400), medium (500) et semibold (600), chacune dans les styles normal et italique. Pour chaque style, il fournit des fichiers de police aux formats WOFF2, WOFF et TrueType depuis le serveur de ressources du Guardian.
Ce code CSS définit plusieurs faces de police pour les familles de polices « Guardian Headline Full » et « Guardian Titlepiece ». Chaque face de police spécifie différentes graisses et styles (normal ou italique) et fournit plusieurs formats de fichiers (WOFF2, WOFF et TrueType) pour une compatibilité multiplateforme. Les polices sont hébergées aux URL données et incluent des variations des graisses light à black, avec les versions italiques correspondantes le cas échéant.
Ce code CSS définit plusieurs faces de police pour la famille de polices « Guardian Headline Full », chacune avec différentes graisses et styles (normal et italique). Pour chaque variation, il spécifie les fichiers sources aux formats WOFF2, WOFF et TrueType depuis le serveur de ressources du Guardian, ainsi que la graisse de police correspondante (400 pour regular, 500 pour medium, 600 pour semibold, 700 pour bold, 900 pour black) et le style de police (normal ou italique).
Ce texte semble être du code CSS définissant les styles de police et les grilles de mise en page pour un site web, probablement celui du Guardian. Il spécifie les fichiers de police pour différentes graisses et styles, et configure des dispositions de grille réactives qui changent à différentes tailles d'écran. Le code contrôle la façon dont les éléments comme les titres, les titres principaux, les médias et le contenu du corps sont agencés sur différentes largeurs d'appareil.
Pour les figures de grille interactives avec des légendes immersives dans des zones de contenu spécifiques, le remplissage de la légende est défini à 4 pixels en haut et 0 ailleurs.
Les éléments nommés « lines » et « meta » dans les grilles interactives sont positionnés dans la zone de grille de la ligne 2 à 5 et de la colonne 1 à 2. Les éléments « lines » ont une hauteur qui s'ajuste à leur contenu et une marge supérieure de 5 pixels, tandis que les éléments « meta » ont une marge supérieure de 18 pixels.
Sur les écrans plus larges (81,25 em et plus), la grille interactive utilise une disposition à cinq colonnes avec des largeurs spécifiques.
Pour les appareils iOS et Android, les en-têtes d'article utilisent la famille de polices Guardian Headline avec une graisse medium pour les paragraphes standfirst et affichent les section kickers avec les premières lettres en majuscules. Les keylines ont un remplissage supérieur accru, et les bylines utilisent une police grasse. Les images dans les articles ont une hauteur automatique, et les paragraphes suivant les éléments atomiques n'ont pas de marge supérieure.
Les faces de police pour Guardian Headline Full sont définies avec les graisses light et light italic, sourcées à partir de fichiers woff2, woff et ttf.
Ce texte définit une famille de polices personnalisée appelée « Guardian Headline Full » avec divers styles et graisses. Il inclut les versions regular, medium, semibold et bold, chacune dans les styles normal et italique. Les fichiers de police sont fournis aux formats WOFF2, WOFF et TrueType depuis le site web du Guardian.
@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-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 (min-width: 61.25em) {
figure[data-spacefinder-role="inline"].element {
max-width: 620px;
}
}
:root {
--dateline: #606060;
--headerBorder: #dcdcdc;
--captionText: #999;
--captionBackground: hsla(0, 0%, 7%, 0.72);
--feature: #c70000;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}
.content__main-column--interactive .element.element-atom,
.element.element-atom {
padding: 0;
}
#article-body > div .element-atom:first-of-type + p:first-of-type,
#article-body > div .element-atom:first-of-type + .sign-in-ga {
/ Des styles supplémentaires peuvent être ajoutés ici si nécessaire /
}
Ce code CSS applique des styles spécifiques à divers éléments d'une page web. Il ajoute 14 pixels de remplissage en haut de certains paragraphes, comme le premier paragraphe suivant des éléments spécifiques ou des règles horizontales dans différentes zones de contenu comme les articles, les commentaires et les features.
Pour la première lettre de ces paragraphes, il utilise une police grande, grasse, en majuscules de la famille Guardian Headline ou des familles serif similaires, avec une taille de 111 pixels et une hauteur de ligne de 92 pixels. Cette lettre est flottée à gauche, a une marge de 8 pixels à droite, et sa couleur est définie par une variable CSS pour les lettrines.
De plus, il supprime le remplissage supérieur des paragraphes qui viennent juste après des règles horizontales. Les légendes pour les éléments showcase sont positionnées statiquement avec une largeur maximale de 620 pixels. Les éléments immersifs sont définis pour occuper la pleine largeur de la fenêtre moins la barre de défilement, avec une largeur maximale de 978 pixels sur les écrans plus larges. Sur les écrans moyens à larges, les légendes pour les éléments immersifs ont un remplissage horizontal de 20 pixels, tandis que sur les écrans plus petits jusqu'à 30em, c'est 10 pixels. Pour les écrans entre 46,25em et 61,24em, les éléments immersifs ont une largeur maximale spécifiée.
@media (max-width: 46.24em) {
.element.element--immersive.element-immersive {
margin-left: -10px !important;
margin-right: 0 !important;
left: 0;
}
}
@media (max-width: 46.24em) and (min-width: 30em) {
.element.element--immersive.element-immersive {
margin-left: -20px !important;
}
.element.element--immersive.element-immersive figcaption {
padding-inline: 20px;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 0px;
grid-template-columns: [title-start headline-start meta-start standfirst-start] repeat(5, 1fr) [title-end headline-end meta-end standfirst-end portrait-start] repeat(5, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] .25fr [title-end headline-start] 1fr [headline-end standfirst-start] .75fr [standfirst-end meta-start] auto [meta-end portrait-end];
}
.furniture-wrapper #headline > div:first-child,
.furniture-wrapper [data-gu-name=headline] > div:first-child,
.furniture-wrapper .headline > div:first-child {
border-top: 1px solid var(--headerBorder);
}
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name=meta] {
position: relative;
padding-top: 2px;
margin-right: 0;
}
.furniture-wrapper .standfirst .content__standfirst,
.furniture-wrapper #standfirst .content__standfirst,
.furniture-wrapper [data-gu-name=standfirst] .content__standfirst {
margin-bottom: 4px;
}
.furniture-wrapper .standfirst ul li,
.furniture-wrapper #standfirst ul li,
.furniture-wrapper [data-gu-name=standfirst] ul li {
font-size: 20px;
}
.furniture-wrapper .standfirst li a,
.furniture-wrapper .standfirst a,
.furniture-wrapper #standfirst li a,
.furniture-wrapper #standfirst a,
.furniture-wrapper [data-gu-name=standfirst] li a,
.furniture-wrapper [data-gu-name=standfirst] a {
border-bottom: none;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
}
.furniture-wrapper .standfirst li a:hover,
.furniture-wrapper .standfirst a:hover,
.furniture-wrapper #standfirst li a:hover,
.furniture-wrapper #standfirst a:hover,
.furniture-wrapper [data-gu-name=standfirst] li a:hover,
.furniture-wrapper [data-gu-name=standfirst] a:hover {
text-decoration-color: var(--new-pillar-colour);
}
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name=standfirst] p:first-of-type {
border-top: 1px solid var(--headerBorder);
padding-bottom: 0;
}
}
@media (min-width: 61.25em) and (min-width: 71.25em) {
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name=standfirst] p:first-of-type {
border-top: unset;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper figure {
margin: 0 0 0 -10px;
}
.furniture-wrapper figure[data-spacefinder-role=inline].element {
max-width: 630px;
}
}
@media (min-width: 71.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(2, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(7, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 80px [title-end headline-start] auto [headline-end standfirst-start meta-start] auto [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name=meta]:before {
content: "";
width: 540px;
position: absolute;
top: 0;
background-color: var(--headerBorder);
height: 1px;
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name=standfirst] p {
border-top: unset;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name=standfirst]:before {
content: "";
width: 1px;
background-color: var(--headerBorder);
height: 100%;
position: absolute;
top: 0;
left: .5px;
}
}
@media (min-width: 81.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(3, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(8, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] .25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] .75fr [standfirst-end meta-end portrait-end];
}
}
Le code CSS définit les styles pour une mise en page de page web, ajustant des éléments comme les titres, les mét
