Denne CSS-koden definerer en tilpasset skriftfamilie kalt "Guardian Headline Full" med flere skriftvekter og stiler. Den inkluderer lette, vanlige, mellomtunge og halvfet skriftvekter, hver med normale og kursiv varianter. Skriftfilene leveres i WOFF2, WOFF og TrueType-formater, hostet på Guardians servere.
@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://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));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width)) !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;
}
}
Den interaktive innholdskolonnen har en venstre kant og spesifikk avstand for elementer. Avsnitt som følger visse elementer har ekstra topputfylling, og den første bokstaven i disse avsnittene er utformet som en stor, farget innledende versal. Innebygde elementer og figurer er begrenset til en maksimal bredde på 620px på større skjermer. Ulike fargevariabler er definert for konsekvent tematisering.
Sitatblokker innenfor spesifikke beholdere skal ha en maksimal bredde på 620 piksler.
Bildetekster for utstillings-elementer i hovedinnhold og artikkelbeholdere skal plasseres statisk, med full bredde opp til 620 piksler.
Immersive elementer skal strekke seg over hele visningsportens bredde, minus rullefeltet. På større skjermer er de begrenset til 978 piksler, med bildetekstutfylling justert for mellomstore skjermer. På mellomstore skjermer er maksimal bredde 738 piksler. På mindre skjermer justeres immersive elementer til venstre kant med justerte marginer og bildetekstutfylling.
For møbelinnpakning på større skjermer brukes et rutenettlayout med definerte kolonner og rader. Overskrifter har en toppkant, metaseksjoner er plassert relativt, og ingressinnhold inkluderer spesifikk stil for lenker og avsnitt. Figurer innenfor innpakningen har ingen venstremargin og en maksimal bredde på 630 piksler når de er innebygd. På ekstra store skjermer justeres rutenettmalens kolonner.
CSS-en definerer et rutenettlayout for en artikkeltopptekst med spesifikke områder for tittel, overskrift, ingress, metainformasjon og et portrettbilde. Den setter stiler for kanter, typografi og avstand, og justerer disse egenskapene på tvers av ulike skjermstørrelser ved hjelp av medieforespørsler. For eksempel øker overskriftens skriftstørrelse på større skjermer, og visse elementer skjules eller omplasseres når visningsporten endres. Hovedmediaområdet er konfigurert til å være fullbredde på mobile enheter.
CSS-koden definerer stiler for en nettsidelayout, med fokus på et møbelelement. Den setter bakgrunnsfarger, marginer, utfylling og responsiv oppførsel for ulike skjermstørrelser. Stilene inkluderer egendefinerte egenskaper for farger, som mørkmodusfunksjoner og topptekstkanter. Spesifikke regler styrer utseendet til bildetekster, knapper, overskrifter og metainformasjon, med justeringer for hover-effekter og sosiale medie-ikoner. Medieforespørsler sikrer at layouten tilpasser seg fra mobil til desktop-visninger, inkludert bredere skjermer der sidebakgrunner legges til.
Denne CSS-koden definerer stiler for en nettsidekomponent, sannsynligvis en sidepanel eller innholdspakke. Den setter farger, kanter og layoutjusteringer for ulike elementer som lenker, tekst og sosiale medie-ikoner. Stilene tilpasser seg ulike skjermstørrelser ved hjelp av medieforespørsler, og endrer bredder og kanter for å passe større skjermer. Farger administreres ved hjelp av CSS-variabler for temaer, som mørk modus.
CSS-koden definerer stiler for artikkelelementer og laster tilpassede skrifter. Den setter kantfargen for kommentarer til å matche topptekstkantfargen. For artikkeloverskrifter bruker den en lett skriftvekt, men gjør overskrifter med sterk tekst fet. Koden importerer også Guardian Headline-skriftfamilien i ulike vekter og stiler, inkludert lett, vanlig, mellomtung og halvfet, i både normale og kursiv versjoner.
Skriften "Guardian Headline Full" er definert med flere stiler: halvfet kursiv (vekt 600), fet (vekt 700), fet kursiv (vekt 700), svart (vekt 900) og svart kursiv (vekt 900). Hver stil inkluderer skriftfiler i WOFF2, WOFF og TrueType-formater.
I tillegg er skriften "Guardian Titlepiece" definert i sin fete stil (vekt 700), også med WOFF2, WOFF og TrueType-filer.
For iOS- og Android-enheter settes en mørk bakgrunnsfarge (#1a1a1a) og spesifikke funksjonsfarger. I mørk modus justeres funksjonsfargen tilsvarende.
På iOS og Android brukes spesiell stil på den første bokstaven i det første avsnittet i artikkelbeholdere, etter visse elementer som `.element-atom` eller påloggingsporter.
For Android-enheter er den første bokstaven i det første avsnittet i standard- og kommentarartikler utformet med en sekundær søylefarge. På både iOS og Android skjules artikkeltopptekster, og møbelinnpakningen har spesifikk utfylling. Etiketter innenfor møbelinnpakningen bruker en fet, kapitalisert skrift med en ny søylefarge. Overskrifter er satt til 32px, fet, med bunnutfylling og en mørk farge. Bilde-figurer er plassert relativt, med fullbreddemarginer og automatisk høyde.
For Android-enheter skal bilder innenfor artikkelbeholdere ha en gjennomsiktig bakgrunn, strekke seg over hele visningsportens bredde (med hensyn til rullefelt), og justere høyden automatisk.
På både iOS og Android skal introduksjonsteksten i artikler ha spesifikk avstand: 4 piksler utfylling på toppen, 24 piksler på bunnen, og en negativ margin på 10 piksler til høyre.
Avsnittene innenfor denne introduksjonsteksten skal bruke Guardians overskriftsskriftfamilie.
Lenker innenfor denne teksten skal utformes med en spesifikk farge, en understreking plassert 6 piksler under teksten, og en lys grå understrekingsfarge. De skal ha ingen bakgrunnsbilde eller bunnkant. Når de holdes over, skal understrekningen endres til å matche lenkens tekstfarge.
I tillegg skal artikkelmetadata-seksjonen utformes konsekvent for begge operativsystemer.
Denne CSS-koden setter stiler for artikkelbeholdere på Android- og iOS-enheter. Den justerer marginer, farger, utfylling og knappvisning for ulike artikkeltyper og deres komponenter.
På iOS- og Android-enheter, for funksjons-, standard- og kommentarartikkelbeholdere, har bilder som ikke er miniatyrer eller immersive en margin på null, en bredde beregnet fra visningsporten minus 24 piksler og rullefeltets bredde, og en automatisk høyde. Deres bildetekster har ingen utfylling.
Immersive bilder i disse beholdere har en bredde beregnet fra visningsporten minus rullefeltets bredde.
Innenfor artikkelkroppens prosatekst bruker sitatblokker den nye søylefargen for deres dekorative element. Lenker er utformet med den primære søylefargen, en understrekning med 6px avstand, og en kantfarge-understrekning, som endres til den nye søylefargen ved hover.
I mørk modus er møbelinnpakningens bakgrunnsfarge satt til #1a1a1a.
For iOS- og Android-enheter bruker innholdsetikettene i funksjons-, standard- og kommentarartikler den nye søylefargen.
På både iOS og Android har hovedoverskriften i disse artikkeltypene ingen bakgrunn og bruker topptekstkantfargen for teksten.
Ingressen i disse artiklene bruker også topptekstkantfargen. Lenker innenfor ingressen, samt forfatterbyline og deres lenker, er utformet med den nye søylefargen.
Ikoner i artikkelmetadataen bruker den nye søylefargen for strekene deres.
Bildetekster for utstillingsbilder i disse artiklene bruker datolinjefargen.
Til slutt har sitert tekst innenfor artikkelkroppen på iOS den spesifiserte stilen.
For iOS- og Android-enheter er tekstfargen på sitatblokker innenfor artikkelkropper satt til en spesifikk variabelfarge.
I tillegg er bakgrunnsfargen for ulike artikkelkroppsbeholdere på både iOS og Android tvunget til en mørk bakgrunn ved hjelp av en viktig erklæring.
Videre, for iOS-enheter, er den første bokstaven etter visse elementer som atomer, påloggingsporter eller spesifikke ID-er innenfor artikkelkropper utformet, selv om den nøyaktige stilen er avkortet i den oppgitte teksten.
Dette ser ut til å være en CSS-velger som sikter på den første bokstaven i avsnitt i spesifikke artikkelbeholdere på iOS- og Android-enheter. Velgeren gjelder for ulike artikkeltyper (standard, funksjon, kommentar) og tar hensyn til ulike sidestrukturer og påloggingsportelementer.
Denne CSS-koden setter stiler for spesifikke elementer på Android- og iOS-enheter. Den definerer farger, utfylling, marginer og andre visuelle egenskaper for ulike artikkelbeholdere, knapper og tekstelementer. Koden inkluderer også mørk modus-preferanser og setter visse topptekster til å være usynlige.
CSS-koden setter stiler for artikkelbeholdere på iOS- og Android-enheter. Den fjerner marginer fra møbelinnpakning og
