Guardian Headline Full-skriftfamilien inkluderer flere stilarter, hver med forskellige vægte og kursiver. Disse skrifter er tilgængelige i flere formater som woff2, woff og ttf, hostet på Guardians servere. Stilarterne spænder fra let til halvfed, med både almindelige og kursiverede versioner.@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, tilpasses afstanden tilsvarende. 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. Videoelementer med loop-funktion har brugerdefineret knapstyling og positionering. Selvhostede videoer vises som blokke, der optager den fulde bredde op til 620 pixels, med centreret justering. Immersive videoelementer udvider sig ud over denne grænse, fjerner breddebegrænsninger og justerer margener. På bredere skærme udvider immersive videoer sig yderligere, med venstremarginer justeret for justering.
Farvevariabler definerer forskellige temaelementer, såsom datolinje, kanter, billedtekster og funktionsfarver. Disse tilpasses for præferencer for mørk tilstand. I artikelkroppen modtager det første afsnit efter visse elementer ekstra top-polstring, og det første bogstav kan være designet særskilt.CSS-koden definerer stilarter for drop caps, pullquotes og forskellige layoutelementer på tværs af forskellige sektioner af en hjemmeside. Drop caps er designet med en specifik skrifttype, størrelse og farve og flødes til venstre. Pullquotes får en maksimal bredde. For showcase-elementer er billedtekster positioneret statisk med en fastsat bredde. Immersive elementer er sat til fuld viewport-bredde, med justeringer for forskellige skærmstørrelser, herunder specifikke margener og polstring for mindre enheder. En furniture wrapper bruger CSS Grid til layout på større skærme, skaber en flersøjlet struktur og definerer grid-områder for elementer som overskriften og metainformation. Den tilføjer også en topkant til det første barn af overskriftelementer.Furniture wrapper'en sætter standfirst-indholdet til at have en relativ position med en top-polstring på 2 pixels og ingen højremargin. I standfirst'en har hovedindholdsområdet en bundmargin på 4 pixels. Listeelementer inde i standfirst'en bruger en skriftstørrelse på 20 pixels. Links i standfirst'en, inklusive dem i listeelementer, har ingen kant, ingen baggrundsbillede og er understreget med en offset på 6 pixels, ved brug af en brugerdefineret farve til understregningen. Ved hover ændres understregningsfarven til en ny pillar-farve.
Det første afsnit i standfirst'en 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. På skærme bredere end 61.25em har figurer ingen venstremargin, og inline-elementer med en specifik rolle er begrænset til en maksimal bredde på 630 pixels.
For skærme mindst 71.25em brede bruger furniture wrapper'en et grid-layout med definerede kolonner og rækker. En metasektion inkluderer en topkant skabt med et pseudo-element, der er 540 pixels bredt. Afsnit i standfirst'en har ingen topkant, og en lodret linje tilføjes før standfirst'en ved hjælp af et andet pseudo-element.
På endnu større skærme (81.25em og derover) justerer grid-layoutet sig med forskellige kolonne- og rækkestørrelser. Meta-topkanten udvides til 620 pixels, og den lodrette linje før standfirst'en forskydes let.
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. For skærme mindst 71.25em brede justeres overskriften til en maksimal bredde på 540 pixels og en skriftstørrelse på 50 pixels.
På mellemstore skærme (46.25em og derover) har elementer med klassen keyline-4 eller et specifikt data-attribut ingen højremargin. For større skærme (61.25em og derover) er disse elementer skjulte. Deres SVG-indhold bruger en brugerdefineret farve til streger.Denne CSS-kode definerer stilarter for en websidelayout, især for en furniture wrapper-sektion. 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 brug af media queries. Koden definerer også brugerdefinerede farvevariabler og sikrer, at visse elementer er skjulte eller vist baseret på betingelser. Overordnet skaber den et responsivt design, der tilpasser sig forskellige enheder, samtidig med at det bevarer et konsistent visuelt tema.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 metasektionen. Tekst og resuméer i metasektionen 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 metasektionen 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'en er også lysegrå.
For skærme bredere end 71.25em vises en linje før standfirst'en. På skærme bredere end 46.25em får wrapper'en en mørk baggrund og en højrekant.CSS'en definerer stilarter for en layout-wrapper med dekorative sidebjælker, der justeres baseret på viewport-bredde. Den sætter kanter, baggrunde og positionerer pseudo-elementer (`:before` og `:after`) for at skabe disse sidebjælker, beregner deres bredde og placering i forhold til viewport og en rullebjælke. Breddeberegningerne ændres ved specifikke breakpoints (61.25em, 71.25em, 81.25em) for at imødekomme forskellige indholdsbredder (738px, 978px, 1138px, 1298px). Yderligere regler styler SVG-streger og grænser for sociale/metaelementer ved brug af en brugerdefineret egenskab for farve. Overskriftstilarter er defineret for `h2`-elementer, der gør dem skriftvægt 200 som standard og 700, hvis de indeholder en `strong`-tag. Endelig deklareres brugerdefinerede skrifttyper for "Guardian Headline Full", inklusive let, let kursiv, almindelig og almindelig kursiv varianter med respektive skriftfiler og vægte.@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.
