Guardian Headline Full-skriftfamilien inkluderer flere stiler, hver med forskjellige tykkelser og kursiver. Disse skriftene er tilgjengelige i flere formater som woff2, woff og ttf, og er hostet på Guardians servere. Stilene varierer fra lett til halvfet, med både vanlige og kursiverte versjoner.
@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;
}
}
Hovedkolonnen for interaktivt innhold har spesifikk stil for elementer. Elementer innenfor denne kolonnen har ingen topp- eller bunnmargin, men inkluderer padding. Når et avsnitt følger et element, justeres avstanden deretter. Inline-elementer er begrenset til en maksimal bredde på 620 piksler.
For større skjermer er inline-figurer også begrenset til 620 piksler. Videoelementer med loop-funksjonalitet har egendefinert knappestil og posisjonering. Selvhostede videoer vises som blokker, tar opp full bredde opp til 620 piksler, med sentrert justering. Immersive videoelementer utvider seg utover denne grensen, fjerner breddebegrensninger og justerer marger. På bredere skjermer strekker immersive videoer seg lenger, med venstremarg justert for justering.
Fargevariabler definerer ulike temaelementer, som datolinje, rammer, bildetekster og funksjonsfarger. Disse tilpasses for preferanser for mørk modus. Innenfor artikkelteksten mottar det første avsnittet etter visse elementer ekstra topp-padding, og den første bokstaven kan være stilistisk distinktiv.
CSS-koden definerer stiler for innledende store bokstaver, siterte blokker og ulike layoutelementer på tvers av forskjellige seksjoner på et nettsted. Innledende store bokstaver er stilert med en spesifikk skrifttype, størrelse og farge, og flytes til venstre. Siterte blokker får en maksimal bredde. For showcase-elementer er bildetekster posisjonert statisk med en fastsatt bredde. Immersive elementer settes til full visningsportbredde, med justeringer for forskjellige skjermstørrelser, inkludert spesifikke marger og padding for mindre enheter. En furniture wrapper bruker CSS Grid for layout på større skjermer, og skaper en flerkolonnestruktur og definerer grid-områder for elementer som overskrift og metainformasjon. Den legger også til en toppramme til det første barnet av overskriftselementer.
Furniture wrapper-en setter standfirst-innholdet til å ha en relativ posisjon med en topp-padding på 2 piksler og ingen høyre margin. Innenfor standfirst har hovedinnholdsområdet en bunnmargin på 4 piksler. Listeelementer inne i standfirst bruker en skriftstørrelse på 20 piksler. Lenker innenfor standfirst, inkludert de i listeelementer, har ingen ramme, ingen bakgrunnsbilde og er understreket med en forskyvning på 6 piksler, ved bruk av en egendefinert farge for understrekingen. Ved hover endres understrekingsfargen til en ny pillar-farge.
Det første avsnittet i standfirst har en toppramme og ingen bunn-padding. For større skjermer (61.25em og oppover), hvis skjermen også er minst 71.25em bred, fjernes topprammen. På skjermer bredere enn 61.25em har figurer ingen venstremargin og inline-elementer med en spesifikk rolle er begrenset til en maksimal bredde på 630 piksler.
For skjermer minst 71.25em brede bruker furniture wrapper-en et grid-oppsett med definerte kolonner og rader. En metaseksjon inkluderer en toppramme laget med et pseudo-element som er 540 piksler bredt. Avsnitt i standfirst har ingen toppramme, og en vertikal linje legges til før standfirst ved bruk av et annet pseudo-element.
På enda større skjermer (81.25em og oppover) justeres grid-oppsettet med forskjellige kolonne- og radstørrelser. Metatopprammen utvides til 620 piksler, og den vertikale linjen før standfirst flyttes litt.
Etiketter innenfor artikkelhodet eller tittelseksjonen har en topp-padding på 2 piksler. Overskriften bruker en fet skrifttykkelse, en maksimal bredde på 620 piksler og en skriftstørrelse på 32 piksler. For skjermer minst 71.25em brede justeres overskriften til en maksimal bredde på 540 piksler og en skriftstørrelse på 50 piksler.
På mellomstore skjermer (46.25em og oppover) har elementer med klassen keyline-4 eller et spesifikt dataattributt ingen høyre margin. For større skjermer (61.25em og oppover) er disse elementene skjult. Deres SVG-innhold bruker en egendefinert farge for streker.
Denne CSS-koden definerer stiler for en nettside-layout, spesielt for en furniture wrapper-seksjon. Den setter ulike egenskaper for elementer som metainformasjon, standfirst-tekst, hovedmedia og bildetekster. Stilene inkluderer justeringer for marger, padding, farger og posisjonering, med spesifikke regler for forskjellige skjermstørrelser ved bruk av media queries. Koden definerer også egendefinerte fargevariabler og sikrer at visse elementer er skjult eller vises basert på betingelser. Totalt sett skaper den et responsivt design som tilpasser seg ulike enheter samtidig som det opprettholder et konsekvent visuelt tema.
CSS-koden stilsetter elementer innenfor en furniture-wrapper-klasse. Overskrifter (h1) er fete og lysegrå (#dcdcdc). Figurer i overskrifter har ingen toppmargin og en liten bunnmargin.
For skjermer bredere enn 71.25em vises en farget linje før metaseksjonen. Tekst og sammendrag i metaseksjonen er lysegrå. Sosiale medie-lenker og knapper har en farget ramme og bruker en spesifikk farge for tekst og ikoner, som endres til en mørk bakgrunn ved hover.
Lenker i metaseksjonen bruker en spesifikk farge og beholder den ved hover med matchende understrekninger. I standfirst-seksjonen er lenker understreket med en lysegrå farge som endres ved hover, og avsnittstekst er lysegrå. På bredere skjermer kan det første avsnittet få eller miste en toppramme. Listeelementer i standfirst er også lysegrå.
For skjermer bredere enn 71.25em vises en linje før standfirst. På skjermer bredere enn 46.25em får wrapper-en en mørk bakgrunn og en høyre ramme.
CSS-en definerer stiler for en layout wrapper med dekorative sidefelt som justeres basert på visningsportbredde. Den setter rammer, bakgrunner og posisjonerer pseudo-elementer (:before og :after) for å skape disse sidefeltene, og beregner deres bredde og plassering i forhold til visningsporten og en rullelinje. Breddeberegningene endres ved spesifikke brytepunkter (61.25em, 71.25em, 81.25em) for å tilpasse seg forskjellige innholdsbredder (738px, 978px, 1138px, 1298px). Ytterligere regler stilsetter SVG-streker og grenser for sosiale/metaelementer ved bruk av en egendefinert egenskap for farge. Overskriftstiler er definert for h2-elementer, og gjør dem skrifttykkelse 200 som standard og 700 hvis de inneholder en strong-tag. Til slutt deklareres egendefinerte skrifttyper for "Guardian Headline Full", inkludert lette, lette kursiver, vanlige og vanlige kursiverte varianter med respektive skriftfiler og vekter.
@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:
