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 styles normal et italique. Les fichiers de police sont fournis aux formats WOFF2, WOFF et TrueType, hébergés sur le serveur d'assets du Guardian.
La famille de polices Guardian Headline Full comprend plusieurs styles, chacun disponible en plusieurs formats (WOFF2, WOFF et TTF). Les styles sont :
- Bold (poids 700, style normal)
- Bold Italic (poids 700, style italique)
- Black (poids 900, style normal)
- Black Italic (poids 900, style italique)
- Light (poids 300, style normal)
- Light Italic (poids 300, style italique)
- Regular (poids 400, style normal)
- Regular Italic (poids 400, style italique)
De plus, la police Guardian Titlepiece est disponible en Bold (poids 700, style normal).
La famille de polices "Guardian Headline Full" inclut plusieurs fichiers de police avec différents poids et styles. Chaque police est disponible aux formats WOFF2, WOFF et TrueType, hébergés aux URL spécifiées. Les poids vont de 400 (regular) à 900 (black), avec des styles normal et italique fournis pour chaque poids.
```css
@font-face {
font-family: Guardian Headline;
src: 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;
}
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-column-gap: 0px;
grid-template-columns: 100%;
grid-template-areas:
"media"
"title"
"headline"
"standfirst"
"lines"
"meta"
"body";
}
@media (min-width: 30em) {
#article-body>div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive>div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
padding: 0 20px;
max-width: 620px;
}
}
@media (min-width: 46.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 100%;
grid-column-gap: 10px;
grid-template-areas:
"title"
"headline"
"standfirst"
"media"
"lines"
"meta"
"body";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: 80px;
}
}
@media (min-width: 61.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 620px 300px;
grid-template-areas:
"title right-column"
"headline right-column"
"standfirst right-column"
"media right-column"
"lines right-column"
"meta right-column"
"body right-column"
". right-column";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: unset;
}
}
@media (min-width: 71.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 140px 1px 620px 300px;
grid-template-areas:
"title border headline right-column"
". border standfirst right-column"
". border media right-column"
". border body right-column"
". border . right-column";
}
#article-body>div .content--interactive-grid .content__standfirst,
.content--interactive>div .content--interactive-grid .content__standfirst,
#comment-body .content--interactive-grid .content__standfirst,
[data-gu-name=body] .content--interactive-grid .content__standfirst,
#feature-body .content--interactive-grid .content__standfirst {
padding-bottom: 0;
}
#article-body>div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive>div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
/ Le style des légendes continue ici /
}
}
```
Pour les légendes des figures immersives et le contenu des grilles interactives, le padding est défini à 4 pixels en haut et 0 ailleurs. Les éléments avec les noms "lines" et "meta" dans les grilles interactives sont positionnés dans une zone de grille spécifique. Les éléments "lines" ont une hauteur ajustée à 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 que 81,25 em, les grilles interactives utilisent une disposition à cinq colonnes avec des largeurs fixes et flexibles.
Sur les appareils iOS et Android, les en-têtes d'article utilisent des polices et poids spécifiques pour les textes de standfirst, les labels de section et les bylines. Les labels de section sont en majuscules, et les keylines ont un padding ajusté. Les images des figures ont des arrière-plans transparents, et les images sont légèrement décalées vers la droite. Les titres ont des arrière-plans transparents, un padding ajusté, et utilisent une taille de police de 24 pixels avec une hauteur de ligne de 115%.
Pour Android, les titres principaux et secondaires sont définis pour s'afficher en blocs. Sur iOS et Android, les sous-titres sont stylisés avec un poids de police light, un alignement à gauche et un retour à la ligne équilibré.
Les kickers d'article n'ont pas de padding, et leur copie est masquée.
Les éléments de byline et de date de publication utilisent une police de 17px avec un poids normal et une hauteur de ligne de 130%. Le texte du byline et les liens d'auteur sont colorés en #707070.
Les paragraphes de standfirst sont définis à 20px, style normal, poids light et une hauteur de ligne de 115%. Les liens dans les paragraphes de standfirst sont en gras, colorés #707070, avec une bordure inférieure et aucune image d'arrière-plan.
Le texte des titres est coloré en #dcdcdc.
Les images et leurs conteneurs sont définis à une largeur de 100vw moins 20px, avec une hauteur automatique et une largeur maximale de 620px. Les éléments de figure internes ont leur hauteur définie sur non définie. Les images showcase ont une largeur maximale de 280px.
Certaines sections et aside suivant la navigation sont masquées. Les éléments atom n'ont pas de marge ni de padding.
Les éléments showcase et leur contenu ont une largeur maximale de 210px, augmentant à 260px pour les viewports plus larges que 61,25em. Les spans de légende dans les éléments inline et showcase sont également stylisés en conséquence.
Pour les légendes dans le corps, le texte du span est défini à 14px, une couleur gris clair (#707070), et affiché en inline. Le premier span dans les légendes pour les éléments inline et showcase est défini en inline-block.
Sur les écrans plus larges que 71,25em, les légendes pour les éléments inline et showcase sont positionnées de manière relative et ont leur largeur réinitialisée.
Pour les articles de contenu interactif, la mise en page utilise des zones de grille nommées "header", "headline", "standfirst", "lines", "meta" et "body". Sur les écrans plus larges (71,25em et plus), la disposition en grille change en trois colonnes avec des zones pour "header", "meta", "border", "standfirst" et "body". La marge de la colonne principale est supprimée, la bordure gauche est masquée, et la largeur des paragraphes est définie à 620px.
Les éléments de titre ont des paramètres de police spécifiques : Guardian Headline ou polices similaires, taille 24px, poids light (300) et une couleur gris clair (#dcdcdc). Le padding est de 0-10px sur les petits écrans, 0-20px sur les écrans moyens (30em et plus) et supprimé sur les grands écrans (71,25em et plus).
Les keylines et lines sont masquées. Sur les grands écrans, l'en-tête de l'article est positionné absolument à 20px de la gauche.
Les liens d'en-tête d'article utilisent une taille de police de 17px et un style normal. Le padding supérieur de l'en-tête est de 2px, et les labels ont une bordure supérieure et un padding (0-10px sur les petits écrans, 0-20px sur les écrans moyens). Sur les écrans plus larges (46,25em et plus), la bordure supérieure est supprimée, et le padding est défini à 0 sur les plus grands écrans (71,25em et plus).
Ce code CSS style les éléments d'un article interactif.
Pour les titres d'article et les liens, il définit la hauteur de ligne à 115% et la couleur du texte à #ff5943. Lors du survol des liens de titre, la couleur de soulignement change en #dcdcdc.
Le standfirst (résumé d'article) utilise des polices spécifiques, une couleur grise (#606060), une taille de police de 24px, un style normal, un poids 400 et une hauteur de ligne de 115%. Il a un padding qui s'ajuste en fonction de la largeur d'écran : 2px 10px pour les petits écrans, 2px 20px pour les écrans de 30em et plus, et aucun padding pour les écrans de 71,25em et plus. Les liens dans le standfirst sont #707070 et obtiennent une bordure inférieure de 2px au survol.
Les boutons de médias sociaux dans la section meta n'ont pas d'effet de transition. Au survol, leur arrière-plan devient #121212, la bordure devient #121212, le texte devient #dcdcdc, et toutes les icônes SVG changent également en remplissage #dcdcdc avec un arrière-plan #121212.
Les boutons de partage sont masqués. Un petit élément d'espace inline de 4px est défini. Pour le corps de l'article, un conteneur de grille de noms utilise une disposition à deux colonnes avec une largeur maximale de 620px.
Pour les écrans plus larges que 46,25em, le conteneur de grille de noms utilise deux colonnes, chacune de 310px de large. Les éléments impairs de la grille ont un padding droit de 5px (10px sur les écrans plus larges), tandis que les éléments pairs ont un padding gauche de 5px (10px sur les écrans plus larges).
Les titres (h2) dans la grille ont une taille de police de 17px, une bordure supérieure, un padding supérieur de 2px et une largeur maximale de 620px. Les éléments de liste suivant ces titres n'ont pas de padding ni de marge, le premier élément utilisant une couleur de texte différente. Les marqueurs d'élément de liste sont masqués, et le texte des paragraphes utilise une famille de police spécifique, une taille de 14px et une hauteur de ligne de 130%.
Les figures immersives ont un arrière-plan sombre, et les images à l'intérieur commencent totalement transparentes. Lorsque la classe "fade-in" est appliquée, les images deviennent totalement opaques avec une transition fluide d'une seconde.
L'en-tête commémoratif couvre la largeur complète du viewport (moins la largeur de la barre de défilement), a un arrière-plan sombre, un texte blanc et des marges gauches négatives qui s'ajustent en fonction de la taille d'écran. Sur les écrans moyens et plus larges, il inclut un padding centré et une bordure. La section des noms a une hauteur minimale de 200px et aucune bordure supérieure ou inférieure, tandis que la section furniture est sticky en bas avec un padding supplémentaire et des ajustements d'alignement à gauche sur les écrans plus larges. La section furniture interne inclut un padding gauche et une bordure sur les écrans plus larges.
```css
/
* Empilement de polices serif
*/
/
* Empilement de polices de titres
*/
/
* Empilement de polices sans serif pour le texte
*/
/
* Empilement de polices sans serif pour les titres
*/
/
* Paramètres d'échelle de police par défaut
* Voir font-scale.html et font-scale.png pour des exemples visuels
*/
/
* Obtenir tous les niveaux d'une échelle de police
*
* @param {String} $name - Nom de l'échelle de police (ex: headline)
* @param {Map} $font-scale ($font-scale)
*
* @example
* font-size: get-scale(header);
*
* @return {Map}
*/
/
* Obtenir les informations pour un niveau spécifique d'une échelle de police
*
* @param {String} $name - Nom de l'échelle de police (ex: headline)
* @param {Number} $level - Niveau dans l'échelle
* @param {Map} $font-scale ($font-scale)
*
* @example
* font-size: get-scale-level(header, 1);
*
* @return {Map}
*/
/
* Obtenir une taille de police pour un niveau dans l'échelle de police
*
* @param {String} $name - Nom de l'échelle de police (ex: headline)
* @param {Number} $level - Niveau dans l'échelle
* @param {Map} $font-scale - Configuration
*
* @example
* font-size: get-font-size(header, 3);
*
* @return {Number}
*/
/
* Obtenir une hauteur de ligne pour un niveau dans l'échelle de police
*
* @param {String} $name - Nom de l'échelle de police (ex: headline)
* @param {Number} $level - Niveau dans l'échelle
* @param {Map} $font-scale - Configuration
*
* @example
* font-size: get-line-height(header, 3);
*
* @return {Number}
*/
/
* Convertir toute valeur en pixels
*
* @param {Number} $value
*
* @example
* font-size: convert-to-px(14); // 14px
*
* @return {Number}
*/
/
*
