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. For eksempel har atomer ingen top- eller bundmargin, men har 12px polstring. Når et afsnit følger et atom, fjernes atomets polstring, og margenerne sættes til 12px. Inline-elementer er begrænset til 620px bredde.
For figurer med en loop-rolle er billedteksten placeret med en z-index på 6. En loop-knap er styled til at være 32px bred, justeret nederst til højre med specifikke margener. Billedtekstknappen har en høj z-index på 100.
Selvhostede videoelementer er sat til 100% bredde, begrænset til 620px, og vist som en blok med 12px margener. Videoen og dens container tager også fuld bredde op til 620px og er centreret. Hvis videoen er immersiv, fjernes breddebegrænsningen og margenerne, så den strækker sig fuldt ud. På større skærme udvider immersive videoer sig til 1140px bredde med en negativ venstremargin, og ved endnu større størrelser bliver de 1300px brede med en større negativ margin.
Farvevariabler definerer forskellige temafarver, såsom datolinje-grå, header-kant, billedtekst og feature-rød. I mørk tilstand justeres nogle farver til en mørk temapalette.
Inden for artikelkroppen har det første afsnit efter et atom eller en vandret linje ekstra top-polstring. Derudover er det første bogstav i det første afsnit efter et atom styled, selvom den specifikke styling ikke er fuldt ud beskrevet her.CSS-koden definerer stilarter for drop caps, pullquotes og forskellige layoutelementer på tværs af forskellige sektioner på et websted. Drop caps er styled med en specifik skrifttype, størrelse og farve og flødes til venstre. Pullquotes får en maksimal bredde. For showcase-elementer er billedtekster sat til en statisk position med en fuld bredde og en maksimal bredde på 620px.
Immersive elementer er sat til at tage den fulde viewport-bredde minus scrollbaren. På skærme mindre end 71.24em justeres deres maksimale bredde til 978px, og billedtekstpolstring varierer med skærmstørrelsen. På mellemstore skærme (46.25em til 61.24em) er maksimalbredden 738px. På små skærme (under 46.24em) gives immersive elementer negative venstremargener for at strække sig til viewport-kanten, med billedtekstpolstring justeret i overensstemmelse hermed.
For større skærme (over 61.25em) bruges et grid-layout til furniture wrappers, der skaber en to-kolonne struktur med definerede rækker for titel, overskrift, standfirst, meta og portrætsektioner. En topkant tilføjes til det første barn af overskriftselementer, og meta-sektionens positionering er sat til absolut.Furniture wrappers sætter standfirst-indholdet til at have en relativ position med en top-polstring på 2 pixels og ingen højremargin. Inden for standfirst har hovedindholdsområdet en bundmargin på 4 pixels. Listeelementer inde i standfirst bruger en skriftstørrelse på 20 pixels. Links inden for standfirst, inklusive dem i listeelementer, har ingen kant, ingen baggrundsbillede og er understreget med en offset på 6 pixels, ved hjælp af en brugerdefineret farve til understregningen. Ved hover ændres understregningsfarven til en ny pillar-farve.
Det første afsnit i standfirst har en topkant og ingen bundpolstring. For større skærme (61.25em og derover), hvis skærmen også er mindst 71.25em bred, fjernes topkanten. For skærme mindst 61.25em brede har figurer ingen venstremargin og en maksimal bredde på 630 pixels, når de er inline.
På skærme 71.25em og bredere bruger furniture wrappers et grid-layout med specifikke kolonner og rækker. En dekorativ linje vises før meta-sektionen, 540 pixels bred. Afsnit i standfirst har ingen topkant, og en lodret linje tilføjes før standfirst-indholdet. For endnu større skærme (81.25em og derover) justeres griddet med flere kolonner og rækker, den dekorative linje før meta strækker sig til 620 pixels, og den lodrette linje før standfirst skifter lidt.
Etiketter i artikelheaderen eller titelsektionen har en top-polstring på 2 pixels. Overskriften bruger en fed skriftvægt, en maksimal bredde på 620 pixels og en skriftstørrelse på 32 pixels. På større skærme (71.25em og derover) justeres overskriften til en maksimal bredde på 540 pixels og en skriftstørrelse på 50 pixels.
For mellemstore skærme (46.25em og derover) har keylines eller linjeelementer ingen højremargin. På større skærme (61.25em og derover) er disse linjer skjulte. Linjerne bruger en brugerdefineret farve til stregen.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 for margener, polstring, farver og positionering, med specifikke regler for forskellige skærmstørrelser ved hjælp af media queries. Designet bruger brugerdefinerede CSS-variabler til farver, såsom `--darkBackground` og `--headerBorderColor`, og sikrer, at elementer er skjulte eller vist baseret på viewport-bredden. Wrapperen har en mørk baggrund og inkluderer responsiv adfærd for enheder fra mobil til desktop.CSS-koden styler elementer inden for en furniture-wrapper-klasse. Overskrifter (h1) er fedte 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-links og knapper har en farvet kant og bruger en specifik farve til tekst og ikoner, som ændres til en mørk baggrund ved hover.
Links i meta-sektionen bruger en specifik farve og bevarer den ved hover med matchende understregninger. I standfirst-sektionen er links understreget med en lysegrå farve, der ændres ved hover, og afsnitstekst er lysegrå. På bredere skærme kan det første afsnit have eller miste en topkant. Listeelementer i standfirst er også lysegrå.
For skærme bredere end 71.25em vises en linje før standfirst. På skærme bredere end 46.25em får wrappers en mørk baggrund og en højrekant.Furniture wrappers bruger pseudo-elementer til at skabe sidekanter. `:before`-elementet er placeret til venstre med en mørk baggrund og en venstrekant, mens dens bredde og venstreposition beregnes baseret på viewport-bredden, scrollbar-bredden og en fast basisbredde på 738px. `:after`-elementet spejler dette på højre side med en højrekant.
For større skærme (minimumsbredde 61.25em) justeres beregningerne til en basisbredde på 978px. Dette mønster fortsætter for endnu større breakpoints: 71.25em (1138px basis) og 81.25em (1298px basis).
Inden for wrappers er SVG-streger og visse sociale/meta-elementkanter sat til at bruge en brugerdefineret CSS-variabel til farve, `--headerBorderColor`.
I artikelkroppen har overskrifter på niveau to (`h2`) en skriftvægt på 200, men hvis de indeholder et `strong`-element, øges vægten til 700.
Endelig er flere `@font-face`-regler defineret for at indlæse "Guardian Headline Full"-skriftfamilien i forskellige vægte og stilarter (Light, Light Italic, Regular, Regular Italic) fra Guardians asset-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"),
