**Rubrik:** Guardian Headline Full-typsnittsfamiljen innehÄller flera stilar, var och en med olika vikter och kursiverade versioner. Den lÀtta versionen (vikt 300) finns i bÄde vanlig och kursiv stil, liksom den vanliga versionen (vikt 400). Medium- (vikt 500) och semibold-stilarna (vikt 600) har ocksÄ bÄde vanliga och kursiva alternativ. Varje typsnittsfil finns tillgÀnglig i WOFF2-, WOFF- och TrueType-format frÄn Guardians servrar.
@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 huvudsakliga interaktiva innehÄllskolonnen har specifik styling för element. Till exempel har atomer ingen marginal ovanför eller under men har 12px utfyllnad. NÀr ett stycke följer efter en atom tas atomens utfyllnad bort och marginaler sÀtts till 12px. Inline-element Àr begrÀnsade till 620px bredd.
För figurer med en loop-roll Àr bildtexten positionerad med ett z-index pÄ 6. En loop-knapp Àr stylad för att vara 32px bred, justerad till nedre högra hörnet med specifika marginaler. Bildtextknappen har ett högt z-index pÄ 100.
SjÀlvhostade videoelement sÀtts till 100% bredd, begrÀnsade till 620px, och visas som ett block med 12px marginaler. Videon och dess behÄllare tar ocksÄ full bredd upp till 620px och Àr centrerade. Om videon Àr immersiv tas breddgrÀnsen och marginalerna bort, sÄ den strÀcker sig helt. PÄ större skÀrmar expanderar immersiva videor till 1140px bredd med en negativ vÀnstermarginal, och vid Ànnu större storlekar blir de 1300px breda med en större negativ marginal.
FÀrgvariabler definierar olika temafÀrger, sÄsom dateline-grÄ, rubrikkant, bildtext och feature-röd. I mörkt lÀge justeras vissa fÀrger till ett mörkt temapalett.
Inom artikelkroppen har det första stycket efter en atom eller horisontell linje extra topputfyllnad. Dessutom Àr den första bokstaven i det första stycket efter en atom stylad, Àven om den specifika stylingen inte Àr fullstÀndigt detaljerad hÀr.
CSS-koden definierar stilar för initialer, utdrag och olika layoutelement över olika delar av en webbplats. Initialer Àr stylade med ett specifikt typsnitt, storlek och fÀrg, och flyter till vÀnster. Utdrag ges en maximal bredd. För showcase-element sÀtts bildtexter till en statisk position med full bredd och en maxbredd pÄ 620px.
Immersiva element sÀtts för att ta hela viewportens bredd, minus scrollbaren. PÄ skÀrmar mindre Àn 71.24em justeras deras maximala bredd till 978px, och bildtextutfyllnad varierar med skÀrmstorlek. PÄ medelstora skÀrmar (46.25em till 61.24em) Àr maxbredden 738px. PÄ smÄ skÀrmar (under 46.24em) ges immersiva element negativa vÀnstermarginaler för att strÀcka sig till viewportens kant, med bildtextutfyllnad justerad dÀrefter.
För större skÀrmar (över 61.25em) anvÀnds en grid-layout för furniture-wrappern, vilket skapar en tvÄkolumnsstruktur med definierade rader för titel, rubrik, ingress, meta och portrÀttsektioner. En kantlinje lÀggs till ovanför det första barnet till rubrikelement, och meta-sektionens positionering sÀtts till absolut.
Furniture-wrappern sÀtter ingressinnehÄllet att ha en relativ position med en topputfyllnad pÄ 2 pixlar och ingen höger marginal. Inom ingressen har huvudinnehÄllsomrÄdet en bottenmarginal pÄ 4 pixlar. Listobjekt inom ingressen anvÀnder en teckenstorlek pÄ 20 pixlar. LÀnkar inom ingressen, inklusive de i listobjekt, har ingen kantlinje, ingen bakgrundsbild och Àr understrukna med ett avstÄnd pÄ 6 pixlar, med en anpassad fÀrg för understrykningen. Vid hovring Àndras understrykningsfÀrgen till en ny pelarfÀrg.
Det första stycket i ingressen har en kantlinje ovanför och ingen bottenutfyllnad. För större skÀrmar (61.25em och uppÄt), om skÀrmen ocksÄ Àr minst 71.25em bred, tas kantlinjen ovanför bort. För skÀrmar minst 61.25em breda har figurer ingen vÀnstermarginal och en maximal bredd pÄ 630 pixlar nÀr de Àr inline.
PÄ skÀrmar 71.25em och bredare anvÀnder furniture-wrappern en grid-layout med specifika kolumner och rader. En dekorativ linje visas före meta-sektionen, 540 pixlar bred. Stycken i ingressen har ingen kantlinje ovanför, och en vertikal linje lÀggs till före ingressinnehÄllet. För Ànnu större skÀrmar (81.25em och uppÄt) justeras griden med fler kolumner och rader, den dekorativa linjen före meta strÀcker sig till 620 pixlar, och den vertikala linjen före ingressen flyttas nÄgot.
Etiketter i artikelhuvudet eller titelsektionen har en topputfyllnad pÄ 2 pixlar. Rubriken anvÀnder en fet teckenvikt, en maximal bredd pÄ 620 pixlar och en teckenstorlek pÄ 32 pixlar. PÄ större skÀrmar (71.25em och uppÄt) justeras rubriken till en maximal bredd pÄ 540 pixlar och en teckenstorlek pÄ 50 pixlar.
För medelstora skÀrmar (46.25em och uppÄt) har keylines eller linjeelement ingen höger marginal. PÄ större skÀrmar (61.25em och uppÄt) Àr dessa linjer dolda. Linjerna anvÀnder en anpassad fÀrg för strecket.
Denna CSS-kod definierar stilar för en webbsideslayout, sÀrskilt för en furniture-tematisk wrapper. Den sÀtter olika egenskaper för element som metainformation, ingress, huvudmedia och bildtexter. Stilarna inkluderar justeringar för marginaler, utfyllnad, fÀrger och positionering, med specifika regler för olika skÀrmstorlekar med hjÀlp av media queries. Designen anvÀnder anpassade CSS-variabler för fÀrger, sÄsom `--darkBackground` och `--headerBorderColor`, och sÀkerstÀller att element Àr dolda eller visas baserat pÄ viewportens bredd. Wrappern har en mörk bakgrund och inkluderar responsivt beteende för enheter frÄn mobil till desktop.
CSS-koden stylar element inom en furniture-wrapper-klass. Rubriker (h1) Àr feta och ljusgrÄ (#dcdcdc). Figurer i rubriker har ingen toppmarginal och en liten bottenmarginal.
För skÀrmar bredare Àn 71.25em visas en fÀrgad linje före meta-sektionen. Text och sammanfattningar i meta-sektionen Àr ljusgrÄ. Sociala medielÀnkar och knappar har en fÀrgad kantlinje och anvÀnder en specifik fÀrg för text och ikoner, som Àndras till en mörk bakgrund vid hovring.
LÀnkar i meta-sektionen anvÀnder en specifik fÀrg och behÄller den vid hovring med matchande understrykningar. I ingresssektionen Àr lÀnkar understrukna med en ljusgrÄ fÀrg som Àndras vid hovring, och stycketext Àr ljusgrÄ. PÄ bredare skÀrmar kan det första stycket ha eller förlora en kantlinje ovanför. Listobjekt i ingressen Àr ocksÄ ljusgrÄ.
För skÀrmar bredare Àn 71.25em visas en linje före ingressen. PÄ skÀrmar bredare Àn 46.25em fÄr wrappern en mörk bakgrund och en höger kantlinje.
Furniture-wrappern anvÀnder pseudo-element för att skapa sidokantlinjer. `:before`-elementet Àr positionerat till vÀnster med en mörk bakgrund och en vÀnster kantlinje, medan dess bredd och vÀnsterposition berÀknas baserat pÄ viewportens bredd, scrollbar-bredd och en fast basbredd pÄ 738px. `:after`-elementet speglar detta pÄ höger sida med en höger kantlinje.
För större skÀrmar (minsta bredd 61.25em) justeras berÀkningarna till en basbredd pÄ 978px. Detta mönster fortsÀtter för Ànnu större brytpunkter: 71.25em (1138px bas), och 81.25em (1298px bas).
Inom wrappern sÀtts SVG-streck och vissa sociala/meta-elementkantlinjer till att anvÀnda en anpassad CSS-variabel för fÀrg, `--headerBorderColor`.
I artikelkroppen har rubriker pÄ nivÄ tvÄ (`h2`) en teckenvikt pÄ 200, men om de innehÄller ett `strong`-element ökar vikten till 700.
Slutligen definieras flera `@font-face`-regler för att ladda "Guardian Headline Full"-typsnittsfamiljen i olika vikter och stilar (Light, Light Italic, Regular, Regular Italic) frÄn Guardians assetservrar.
@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(
