Guardian Headline Full-typsnittsfamiljen innehÄller flera stilar, var och en med olika vikter och kursiver. Dessa typsnitt finns tillgÀngliga i flera format som woff2, woff och ttf, och Àr vÀrdbaserade pÄ Guardians servrar. Stilarna strÀcker sig frÄn lÀtt till halvfet, med bÄde vanliga och kursiva 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 huvudsakliga interaktiva innehÄllskolonnen har specifik styling för element. Element inom denna kolumn har ingen marginal ovanför eller under men inkluderar utfyllnad. NÀr ett stycke följer ett element justeras mellanrummet dÀrefter. Inline-element Àr begrÀnsade till en maximal bredd pÄ 620 pixlar.
För större skÀrmar Àr inline-figurer ocksÄ begrÀnsade till 620 pixlar. Videoelement med loopfunktion har anpassad knappstyling och positionering. SjÀlvvÀrdbaserade videor visas som block, tar upp hela bredden upp till 620 pixlar, med centrerad justering. Immersiva videoelement expanderar bortom denna grÀns, tar bort breddbegrÀnsningar och justerar marginaler. PÄ bredare skÀrmar strÀcker sig immersiva videor lÀngre ut, med vÀnstermarginaler justerade för justering.
FÀrgvariabler definierar olika temaelement, sÄsom datumlinje, kanter, bildtexter och funktionsfÀrger. Dessa anpassas för mörkt lÀgespreferenser. Inom artikelkroppen fÄr det första stycket efter vissa element extra topputfyllnad, och den första bokstaven kan vara stilistiskt distinkt.
CSS-koden definierar stilar för initialer, utdragscitat och olika layoutelement över olika sektioner pÄ en webbplats. Initialer Àr stiliserade med ett specifikt typsnitt, storlek och fÀrg, och flyter till vÀnster. Utdragscitat ges en maximal bredd. För showcase-element Àr bildtexter positionerade statiskt med en instÀlld bredd. Immersiva element Àr instÀllda pÄ full viewportbredd, med justeringar för olika skÀrmstorlekar, inklusive specifika marginaler och utfyllnad för mindre enheter. En furniture wrapper anvÀnder CSS Grid för layout pÄ större skÀrmar, skapar en flerkolumnsstruktur och definierar grid-omrÄden för element som rubrik och metainformation. Den lÀgger ocksÄ till en kantlinje ovanför det första barnet till rubrikelement.
Furniture wrappern sÀtter standfirst-innehÄllet att ha en relativ position med en topputfyllnad pÄ 2 pixlar och ingen höger marginal. Inom standfirst har huvudinnehÄllsomrÄdet en bottenmarginal pÄ 4 pixlar. Listobjekt inom standfirst anvÀnder en teckenstorlek pÄ 20 pixlar. LÀnkar inom standfirst, inklusive de i listobjekt, har ingen kantlinje, ingen bakgrundsbild och Àr understrukna med ett offset 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 standfirst 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. PÄ skÀrmar bredare Àn 61.25em har figurer ingen vÀnstermarginal och inline-element med en specifik roll Àr begrÀnsade till en maximal bredd pÄ 630 pixlar.
För skÀrmar minst 71.25em breda anvÀnder furniture wrappern en grid-layout med definierade kolumner och rader. En metasektion inkluderar en kantlinje ovanför skapad med ett pseudoelement som Àr 540 pixlar bredt. Stycken i standfirst har ingen kantlinje ovanför, och en vertikal linje lÀggs till före standfirst med ett annat pseudoelement.
PÄ Ànnu större skÀrmar (81.25em och uppÄt) justeras grid-layouten med olika kolumn- och radstorlekar. Metakantlinjen ovanför expanderar till 620 pixlar, och den vertikala linjen före standfirst flyttas nÄgot.
Etiketter inom artikelhuvudet eller rubriksektionen har en topputfyllnad pÄ 2 pixlar. Rubriken anvÀnder en fet teckenvikt, en maximal bredd pÄ 620 pixlar och en teckenstorlek pÄ 32 pixlar. För skÀrmar minst 71.25em breda justeras rubriken till en maximal bredd pÄ 540 pixlar och en teckenstorlek pÄ 50 pixlar.
PÄ medelskÀrmar (46.25em och uppÄt) har element med klassen keyline-4 eller ett specifikt dataattribut ingen höger marginal. För större skÀrmar (61.25em och uppÄt) Àr dessa element dolda. Deras SVG-innehÄll anvÀnder en anpassad fÀrg för streck.
Denna CSS-kod definierar stilar för en webbsidlayout, sÀrskilt för en furniture wrapper-sektion. Den sÀtter olika egenskaper för element som metainformation, standfirst-text, 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. Koden definierar ocksÄ anpassade fÀrgvariabler och sÀkerstÀller att vissa element Àr dolda eller visas baserat pÄ villkor. Sammantaget skapar den ett responsivt design som anpassar sig till olika enheter samtidigt som ett konsekvent visuellt tema bibehÄlls.
CSS-koden stiliserar 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 metasektionen. Text och sammanfattningar i metasektionen À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 metasektionen anvÀnder en specifik fÀrg och behÄller den vid hovring med matchande understrykningar. I standfirst-sektionen Àr lÀnkar understrukna med en ljusgrÄ fÀrg som Àndras vid hovring, och styckestext Àr ljusgrÄ. PÄ bredare skÀrmar kan det första stycket ha eller förlora en kantlinje ovanför. Listobjekt i standfirst Àr ocksÄ ljusgrÄ.
För skÀrmar bredare Àn 71.25em visas en linje före standfirst. PÄ skÀrmar bredare Àn 46.25em fÄr wrappern en mörk bakgrund och en höger kantlinje.
CSS definierar stilar för en layout wrapper med dekorativa sidofÀlt som justeras baserat pÄ viewportbredd. Den sÀtter kantlinjer, bakgrunder och positionerar pseudoelement (`:before` och `:after`) för att skapa dessa sidofÀlt, berÀknar deras bredd och placering i förhÄllande till viewport och en rullningslist. BreddberÀkningarna Àndras vid specifika brytpunkter (61.25em, 71.25em, 81.25em) för att rymma olika innehÄllsbredder (738px, 978px, 1138px, 1298px). Ytterligare regler stiliserar SVG-streck och grÀnser för sociala/metaelement med en anpassad egenskap för fÀrg. Rubrikstilar definieras för `h2`-element, gör dem teckenvikt 200 som standard och 700 om de innehÄller en `strong`-tagg. Slutligen deklareras anpassade typsnittsytor för "Guardian Headline Full", inklusive lÀtt, lÀtt kursiv, vanlig och vanlig kursiv variant med respektive typsnittsfiler och vikter.
@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/f
