Denne CSS-koden definerer en tilpasset skriftfamilie kalt "Guardian Headline Full" med flere stiler og vekter. Den inkluderer lette, vanlige, mellomtunge og halvfet versjoner, hver tilgjengelig i både normal og kursiv stil. Skriftfilene er lagret på nettet og tilbys i tre formater: WOFF2, WOFF og TrueType (TTF).
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-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/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-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/noalts-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-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/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Guardian Titlepiece;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/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) {
}
For interaktive innholdskolonner legges det til en venstre kantlinje med spesifikk posisjonering og z-indeks. På større skjermer justeres kantlinjens venstreposisjon litt. Innenfor disse kolonnene har atomiske elementer ingen topp- eller bunnmarginer, men inkluderer polstring. Når avsnitt kommer før atomiske elementer, fjernes polstringen og marger legges til i stedet. Inline-elementer er begrenset til en maksimal bredde på 620px.
For figurer med en loop-rolle settes bildetekster til en høyere z-indeks, og loop-knapper styles med spesifikke dimensjoner og justering. Selvhostede videoelementer settes til full bredde, begrenset til 620px, og inkluderer topp- og bunnmarginer. For immersive videolayout fjernes breddebegrensninger, og marger justeres. På bredere skjermer utvides immersive videoer i bredde og forskyves mot venstre.
Fargevariabler definerer stiler for datolinjer, kantlinjer, bildetekster og funksjonselementer. I mørk modus tilpasses tekst- og ikonfarger til et mørkt tema. Atomiske elementer innenfor innholdskolonner har ingen polstring. Spesifikke regler sikrer at det første avsnittet etter visse elementer eller horisontale linjer styles riktig på tvers av ulike innholdsseksjoner som artikler, kommentarer og funksjoner.Det første avsnittet etter en påloggingsport eller en horisontal linje (bortsett fra den siste) har en topppolstring på 14 piksler.
For den første bokstaven i det første avsnittet etter et første element, en påloggingsport eller en horisontal linje (bortsett fra den siste) innenfor ulike innholdskropper, brukes en spesifikk innledende versalbokstav-stil. Denne bruker Guardian-overskriftsskriften, er fet, 111 piksler i størrelse med 92 piksler linjehøyde. Den flyter til venstre, er med store bokstaver, bruker border-box-størrelsesberegning, har en 8-piksler høyremargin, justeres til toppen og bruker en tilpasset fargevariabel.
Avsnitt umiddelbart etter en horisontal linje innenfor disse innholdskroppene har ingen topppolstring.
Sitatblokk innenfor disse innholdskroppene har en maksimal bredde på 620 piksler.
Bildetekster for showcase-elementer i hovedinnhold og artikkelbeholdere er posisjonert statisk, tar full bredde opp til 620 piksler.
Immersive elementer spenner over hele visningsportens bredde, med hensyn til rullefeltet. På større skjermer (opp til 71.24em) er de begrenset til 978 piksler, med bildetekstpolstring justert ved ulike brytningspunkter. På mellomstore skjermer (46.25em til 61.24em) er maksimal bredde 738 piksler. På mindre skjermer (under 46.24em) justeres de til venstrekanten med justerte marger og bildetekstpolstring.
For furniture wrappers på store skjermer (61.25em og oppover) brukes et rutenettlayout med definerte kolonner og rader for posisjonering av overskriftselementer.CSS-stilene definerer layout og utseende for en nettsides toppseksjon, referert til som "furniture-wrapper." Den setter kantlinjer, avstand, typografi og rutenettstrukturer som tilpasser seg på tvers av ulike skjermstørrelser.
For større skjermer (over 71.25em) etableres et komplekst rutenettlayout med spesifikke kolonner og rader for elementer som tittel, overskrift, metainformasjon, ingress og portrett. Visuelle elementer som kantlinjer og linjer justeres eller fjernes ved visse brytningspunkter. Overskriftsskriftstørrelsen øker og dens maksimale bredde endres på større skjermer. Lenker innenfor ingressen styles med understrekninger som endrer farge ved hover.For skjermer bredere enn 740 piksler, skjul elementer med klassen `.keyline-4` eller attributtet `[data-gu-name="lines"]`. Innenfor `.furniture-wrapper`, stil SVG-stroken innenfor disse elementene til å bruke fargevariabelen `--headerBorder`.
På skjermer bredere enn 740 piksler, fjern høyre margin fra elementer med ID `#meta` eller attributtet `[data-gu-name="meta"]` inne i `.furniture-wrapper`. For disse metaelementene, sett kantlinjefargen på sosiale lenker, kommentarseksjoner og deres underordnede spenn til `--headerBorder`. Skjul også eventuelle `gu-island`-komponenter innenfor `.content__meta-container_dcr`.
For ingressseksjonen (valgt ved klasse, ID eller `data-gu-name`), bruk en negativ venstremargin og tilsvarende polstring, og sett dens posisjon til relativ. På bredere skjermer (over 740px), legg til en liten topppolstring. Stil avsnitt innenfor ingressen med en fontvekt på 400, en størrelse på 20 piksler og en bunnpolstring på 14 piksler.
Hovedmediaområdet (valgt ved ID eller `data-gu-name`) er posisjonert relativt, har ingen toppmarge, en liten bunnmargin, og plasseres i "portrett"-rutenettområdet. Sikre at dens indre div-er tar full bredde og har ingen horisontal margin. På svært brede skjermer (over 980px), fjern bunnmargen. På mindre skjermer (under 740px), sett bredden til full visningsportbredde minus eventuelt rullefelt, og bruk en negativ venstremargin. For skjermer mellom 480px og 740px, øk denne negative venstremarginen til -20px.
Stil figurbildetekster til å være posisjonert absolutt i bunnen, med spesifikk polstring og bakgrunns-/tekstfarger fra CSS-variabler. Sett bredden deres til 100% uten maksimal bredde, fjern bunnmargen, og sett en minimumshøyde. Fargelegg spenn innenfor bildeteksten ved å bruke `--headerBorder`, og fyll deres SVG-er med samme farge. Skjul det første spennet og vis det andre spennet som et blokkelement, og begrens bredden til 90%. På skjermer bredere enn 480px, øk bildetekstens horisontale polstring. En klasse på `.hidden` på bildeteksten setter dens opasitet til 0.
Bildetekstknappen vises som en blokk, posisjonert absolutt nær nederst til høyre, med høy z-indeks. Den har en sirkulær bakgrunn, ingen kantlinje, og spesifikk polstring. Skaler SVG-ikonet ned litt. På skjermer bredere enn 480px, juster dens høyre posisjon. For svært brede skjermer (over 1140px), juster toppen og høyden på `.content__main-column--interactive` pseudo-elementet. Begrens også maksimal bredde på h2-overskrifter innenfor denne kolonnen til 620 piksler.
For rotelementet når kroppen har en `.ios` eller `.android` klasse, definer et sett med mørk modus fargevariabler. I en mørk fargeoppsettpreferanse, oppdater `--new-pillar-colour` variabelen tilsvarende.
På iOS-enheter, mål det første avsnittet etter spesifikke første elementer i ulike artikkelbeholdere og stil deres første bokstav. Dette gjelder også hvis et påloggingsportelement vises mellom det første elementet og avsnittet.Den første bokstaven i det første avsnittet etter en påloggingsport, eller etter et atomelement etterfulgt av en påloggingsport, skal fargelegges ved hjelp av den sekundære søylevariabelen. Dette gjelder for funksjons-, standard- og kommentarartikkelbeholdere på både iOS og Android.
På iOS og Android skal artikkeltopphøyden settes til null i funksjons-, standard- og kommentarartikkelbeholdere.
Furniture wrapper i disse beholdere skal ha topppolstring på 4 piksler og horisontal polstring på 10 piksler. Innholdsetikettene innenfor skal bruke en fet, serif skriftfamilie, fargelegges med den nye søylevariabelen, og ha tekst med store bokstaver.
Overskrifter innenfor furniture wrapper skal være 32 piksler i størrelse, fete, ha en bunnpolstring på 12 piksler, og bruke fargen #121212.
Bildeelementer inne i furniture wrapper skal være posisjonert relativt, ha en toppmarge på 14 piksler, en venstremarge på -10 piksler, en bredde beregnet som visningsportbredde minus rullefeltbredde, og en automatisk høyde. Dette gjelder for den indre figuren, bildet og lenkeelementene innenfor funksjonsartikkelbeholdere på iOS.For iOS- og Android-enheter er bilder innenfor artikkelbeholdere satt til å ha en gjennomsiktig bakgrunn, med en bredde lik full visningsportbredde minus rullefeltbredde, og en automatisk høyde.
Ingressseksjonen i disse beholdere har en topppolstring på 4 piksler, en bunnpolstring på 24 piksler, og en høyre margin på -10 piksler.
Avsnitt innenfor ingressen bruker Guardian Headline-skriftfamilien.
Lenker inne i ingressen styles med en spesifikk farge, en understrekning plassert 6 piksler fra tek
