Guardian Headline Full-skriftfamilien inkluderer flere stilarter, hver med forskellige vægte og kursiveringer. Den lette version (vægt 300) findes i både almindelig og kursiv stil, ligesom den almindelige version (vægt 400). Medium (vægt 500) og semibold (vægt 600) stilarter har også almindelige og kursiv muligheder. Hver skriftfil er tilgængelig i WOFF2, WOFF og TrueType formater fra Guardians servere.@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;
}
}Den vigtigste interaktive indholdskolonne har specifik styling for elementer. Elementer i denne kolonne har ingen top- eller bundmargin men inkluderer polstring. Når et afsnit følger et element, justeres afstanden i overensstemmelse hermed. Inline-elementer er begrænset til en maksimal bredde på 620 pixels.
For større skærme er inline-figurer også begrænset til 620 pixels. Speciel styling gælder for videoloops, inklusive knapplacering og billedtekstpositionering. Selvhostede videoer er sat til en maksimal bredde på 620 pixels med centrerede margener, mens immersive videoer udvides til fuld bredde med justerede margener på større skærme.
Farvevariabler definerer temaet, såsom datolinje, headerkanter og billedtekstfarver. I mørk tilstand tilpasses disse farver til en mørkere palet. Det første afsnit efter visse elementer modtager ekstra top-polstring, og det første bogstav i det første afsnit kan være designet særskilt.CSS-koden definerer stilarter for drop caps, pullquotes og forskellige layoutelementer på tværs af forskellige sektioner på en hjemmeside, såsom artikler, kommentarer og features. Den sætter specifikke skrifttyper, størrelser og farver for det første bogstav i afsnit, justerer bredden og positioneringen af immersive og showcase-elementer og skaber et responsivt grid-layout til større skærme. Stilarterne inkluderer også medieforespørgsler for at tilpasse layoutet til forskellige skærmstørrelser.Furniture-wrapper'en sætter standfirst-indholdet til at have en relativ position med en top-polstring på 2 pixels og ingen højremargin. Inden for standfirst'en har listeelementer en skriftstørrelse på 20 pixels, og links har ingen kant, ingen baggrundsbillede, en understregning med en offset på 6 pixels og en farve fra den brugerdefinerede egenskab `--headerBorder` (standard `#dcdcdc`). Ved hover ændres linkets understregning til farven defineret af `--new-pillar-colour`.
For større skærme (61.25em og derover) har figurer ingen venstremargin, og inline-elementer med en specifik rolle er begrænset til en maksimal bredde på 630 pixels. Ved 71.25em og derover bruger layoutet et grid med definerede kolonner og rækker. En dekorativ linje vises før meta-sektionen, og en lodret linje tilføjes før standfirst'en. Afsnitskanter fjernes ved dette breakpoint.
Ved 81.25em justeres griddet til at inkludere flere kolonner, og de dekorative linjer ompositioneres.
Overskrifter har en skriftvægt på 600 og en maksimal bredde på 620 pixels med en skriftstørrelse på 32 pixels. På større skærme (71.25em og derover) øges overskriftens skriftstørrelse til 50 pixels, og den maksimale bredde reduceres til 540 pixels.
For medium skærme (46.25em og derover) har elementer med klassen `keyline-4` eller attributten `data-gu-name=lines` ingen højremargin. På større skærme (61.25em og derover) er disse elementer skjulte. Deres SVG-stregfarver bruger `--headerBorder`-farven.Denne CSS-kode definerer stilarter for en websidelayout, især for en furniture-themed wrapper. Den sætter forskellige egenskaber for elementer som metainformation, standfirst-tekst, hovedmedie og billedtekster. Stilarterne inkluderer justeringer af margener, polstring, farver og positionering med specifikke regler for forskellige skærmstørrelser ved hjælp af medieforespørgsler. Designet bruger brugerdefinerede CSS-variabler til farver, såsom mørk tilstand-funktioner og baggrundsfarver, og sikrer responsiv adfærd på tværs af enheder.CSS-koden styler elementer inden for en furniture-wrapper-klasse. Overskrifter (h1) er fed og lysegrå (#dcdcdc). Figurer i overskrifter har ingen topmargin og en lille bundmargin.
For skærme bredere end 71.25em vises en farvet linje før meta-sektionen. Tekst og resuméer i meta-sektionen er lysegrå. Sociale medie-knapper har en farvet kant og ikon, hvor ikonet og teksten skifter farve ved hover.
Links i meta-sektionen bruger en temafarve og beholder den farve ved hover, med en understregning i samme farve. I standfirst-sektionen er links understreget med en lysegrå linje, der skifter til temafarven ved hover. Afsnit og listeelementer i standfirst'en er lysegrå.
På skærme bredere end 61.25em har det første afsnit i standfirst'en en topkant, som fjernes på skærme bredere end 71.25em. På disse større skærme vises en farvet linje også før standfirst'en.
For skærme bredere end 46.25em får furniture-wrapper'en en mørk baggrund og en højrekant.CSS definerer en `.furniture-wrapper` med pseudo-elementer, der skaber sidebjælker. Disse justerer bredde og position baseret på viewport-størrelse for at opretholde et centreret indholdsområde med faste bredder (738px, 978px, 1138px, 1298px) på tværs af forskellige breakpoints, idet der tages højde for scrollbar-bredde. Kanter og baggrundsfarver anvendes ved hjælp af brugerdefinerede CSS-egenskaber.
For overskrifter inden for artikler bruger `h2`-elementer en let skriftvægt (200), men skifter til fed (700), hvis de indeholder et `strong`-element.
`@font-face`-reglerne indlæser skriftfamilien "Guardian Headline Full" i flere vægte og stilarter (Light, Light Italic, Regular, Regular Italic) fra Guardians servere.@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:
