Denna CSS-kod definierar en anpassad teckensnittsfamilj som heter "Guardian Headline Full" med flera teckensnittsvikter och stilar. Den inkluderar lätt, normal, medium och semifet vikt, var och en i både normal och kursiv stil. Teckensnittsfilerna tillhandahålls i WOFF2-, WOFF- och TrueType-format och är värdbaserade på Guardians tillgångsserver.
Teckensnittsfamiljen "Guardian Headline Full" innehåller flera stilar, var och en tillgänglig i flera format (WOFF2, WOFF och TTF). Stilarna är:
- Fet (vikt 700, normal stil)
- Fet kursiv (vikt 700, kursiv stil)
- Black (vikt 900, normal stil)
- Black kursiv (vikt 900, kursiv stil)
- Lätt (vikt 300, normal stil)
- Lätt kursiv (vikt 300, kursiv stil)
- Normal (vikt 400, normal stil)
- Normal kursiv (vikt 400, kursiv stil)
Dessutom är teckensnittet Guardian Titlepiece tillgängligt i Fet (vikt 700, normal stil).
Teckensnittsfamiljen "Guardian Headline Full" innehåller flera teckensnittsfiler i olika vikter och stilar. Varje teckensnitt finns tillgängligt i WOFF2-, WOFF- och TrueType-format, värdbaserade på de angivna URL:erna. Vikterna sträcker sig från 400 (normal) till 900 (black), med både normala och kursiva stilar tillhandahållna för varje vikt.
@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 {
/ Stil för bildtexter fortsätter här /
}
}
För immersiva bildtexter och interaktivt rutnätsinnehåll är utfyllnad satt till 4 pixlar överst och 0 på andra ställen. Element med namnen "lines" och "meta" inom interaktiva rutnät är placerade i ett specifikt rutnätsområde. "Lines"-elementen har en höjd anpassad efter deras innehåll och en toppmarginal på 5 pixlar, medan "meta"-elementen har en toppmarginal på 18 pixlar.
På skärmar bredare än 81,25 em använder interaktiva rutnät en femkolumnslayout med fasta och flexibla bredder.
På iOS- och Android-enheter använder artiklarubriker specifika teckensnitt och vikter för standfirst-text, sektionsetiketter och bylines. Sektionsetiketter skrivs med versaler, och nyckelrader har justerad utfyllnad. Bildfigureer har genomskinliga bakgrunder, och bilder flyttas något åt höger. Rubriker har genomskinliga bakgrunder, justerad utfyllnad och använder en 24-pixel teckensnittsstorlek med 115% radhöjd. För Android är huvud- och underrubriker inställda att visas som block. På både iOS och Android är underrubriker stiliserade med lätt teckensnittsvikt, vänsterjustering och balanserad textomslutning.
Artikelkickers har ingen utfyllnad, och deras text är dold.
Byline- och publiceringsdatumselement använder 17px teckensnitt med normal vikt och 130% radhöjd. Byline-text och författarlänkar är färgade #707070.
Standfirst-paragrafer är inställda på 20px, normal stil, lätt vikt och 115% radhöjd. Länkar inom standfirst-paragrafer är fetstilta, färgade #707070, med en nedre kantlinje och ingen bakgrundsbild.
Rubriktext är färgad #dcdcdc.
Bilder och deras behållare är inställda på en bredd av 100vw minus 20px, med auto-höjd och en maxbredd på 620px. Inre figurelement har deras höjd inställd på unset. Showcase-bilder har en maxbredd på 280px.
Vissa sektioner och sidopaneler efter navigeringen är dolda. Atomelement har ingen marginal eller utfyllnad.
Showcase-element och deras innehåll har en maxbredd på 210px, vilket ökar till 260px för visningsytor bredare än 61,25 em. Bildtextspan inom inline- och showcase-element är också stiliserade därefter.
För bildtexter inom brödtexten är span-texten inställd på 14px, en ljusgrå färg (#707070) och visas inline. Det första spanet i bildtexter för inline- och showcase-element är inställt på inline-block.
På skärmar bredare än 71,25 em är bildtexter för inline- och showcase-element relativa positionerade och har deras bredd återställd.
För interaktiva innehållsartiklar använder layouten rutnätsområden med namnen "header", "headline", "standfirst", "lines", "meta" och "body". På större skärmar (71,25 em och uppåt) ändras rutnätslayouten till tre kolumner med områden för "header", "meta", "border", "standfirst" och "body". Huvudkolumnmarginalen tas bort, den vänstra kantlinjen döljs och styckebredden sätts till 620px.
Rubrikelement har specifika teckensnittsinställningar: Guardian Headline eller liknande teckensnitt, 24px storlek, lätt vikt (300) och en ljusgrå färg (#dcdcdc). Utfyllnad är 0–10px på små skärmar, 0–20px på medelskärmar (30 em och uppåt) och tas bort på stora skärmar (71,25 em och uppåt).
Nyckelrader och linjer är dolda. På stora skärmar är artikelhuvudet absolut positionerat 20px från vänster.
Artikellänkar i huvudet använder 17px teckensnittsstorlek och normal stil. Huvudets topputfyllnad är 2px, och etiketter har en övre kantlinje och utfyllnad (0–10px på små skärmar, 0–20px på medelskärmar). På större skärmar (46,25 em och uppåt) tas den övre kantlinjen bort, och utfyllnaden sätts till 0 på de största skärmarna (71,25 em och uppåt).
Denna CSS-kod stiliserar element inom en interaktiv artikel.
För artikeltitlar och länkar sätter den radhöjden till 115% och textfärgen till #ff5943. När man hovrar över titellänkar ändras understrykningsfärgen till #dcdcdc.
Standfirst (artikelsammanfattning) använder specifika teckensnitt, en grå färg (#606060), 24px teckensnittsstorlek, normal stil, 400 vikt och 115% radhöjd. Den har utfyllnad som anpassas baserat på skärmbredd: 2px 10px för mindre skärmar, 2px 20px för skärmar 30 em och bredare, och ingen utfyllnad för skärmar 71,25 em och uppåt. Länkar i standfirst är #707070 och får en 2px nedre kantlinje vid hovring.
Sociala medieknappar i metasektionen har ingen övergångseffekt. Vid hovring blir deras bakgrund #121212, kantlinje blir #121212, text blir #dcdcdc, och eventuella SVG-ikoner ändras också till #dcdcdc fyllning med #121212 bakgrund.
Delningsknappar är dolda. Ett litet 4px inline-mellanrumselement definieras. För artikelbrödtext använder en namngiven rutnätsbehållare en tvåkolningslayout med en maxbredd på 620px.
För skärmar bredare än 46,25 em använder namngivna rutnätsbehållare två kolumner, var och en 310px bred. Udda numrerade objekt i rutnätet har 5px högerutfyllnad (10px på bredare skärmar), medan jämnt numrerade objekt har 5px vänsterutfyllnad (10px på bredare skärmar).
Rubriker (h2) inom rutnätet har 17px teckensnittsstorlek, en övre kantlinje, 2px topputfyllnad och en maxbredd på 620px. Listobjekten efter dessa rubriker har ingen utfyllnad eller marginal, med det första objektet som använder en annan textfärg. Listobjektsmarkörer är dolda, och stycketext använder en specifik teckensnittsfamilj, 14px storlek och 130% radhöjd.
Immersiva figurer har en mörk bakgrund, och bilder inuti dem börjar helt genomskinliga. När klassen "fade-in" appliceras blir bilderna helt opaka med en mjuk 1-sekunds övergång.
Minneshuvudet sträcker sig över hela visningsytans bredd (minus rullningslistans bredd), har en mörk bakgrund, vit text och negativa vänstermarginaler som justeras baserat på skärmstorlek. På medelstora och större skärmar inkluderar den centrerad utfyllnad och en kantlinje. Namnsektionen har en minsta höjd på 200px och inga övre eller nedre kantlinjer, medan möbelsektionen är fast vid botten med ytterligare utfyllnad och vänsterjusteringsjusteringar på större skärmar. Den inre möbelsektionen inkluderar vänsterutfyllnad och en kantlinje på bredare skärmar.
/
* Serif-teckensnittsstack
*/
/
* Rubrikteckensnittsstack
*/
/
* Sans-serif-textteckensnittsstack
*/
/
* Sans-serif-rubrikteckensnittsstack
*/
/
* Standardinställningar för teckensnittsskala
* Se font-scale.html och font-scale.png för visuella exempel
*/
/
* Hämta alla nivåer av en teckensnittsskala
*
* @param {String} $name - Namn på teckensnittsskalan (t.ex., headline)
* @param {Map} $font-scale ($font-scale)
*
* @example
* font-size: get-scale(header);
*
* @return {Map}
*/
/
* Hämta info för en specifik nivå av en teckensnittsskala
*
* @param {String} $name - Namn på teckensnittsskalan (t.ex., headline)
* @param {Number} $level - Nivå i skalan
* @param {Map} $font-scale ($font-scale)
*
* @example
* font-size: get-scale-level(header, 1);
*
* @return {Map}
*/
/
* Hämta en teckensnittsstorlek för en nivå i teckensnittsskalan
*
* @param {String} $name - Namn på teckensnittsskalan (t.ex., headline)
* @param {Number} $level - Nivå i skalan
* @param {Map}
