**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(
