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 i både normale og kursiv versjoner. Skriftene lastes fra Guardians servere i tre forskjellige filformater: WOFF2, WOFF og TrueType.
@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 kantlinje og spesifikk avstand for elementer. Avsnitt som følger visse elementer får 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. Forskjellige fargevariabler er definert for konsekvent tematisering.
Sitatblokker innenfor spesifikke beholdere skal ha en maksimal bredde på 620 piksler.
Bildetekster for utstillings-elementer i hovedartikler, reportasjer, standardartikler og kommentarer skal plasseres statisk, strekke seg over full bredde og også ha en maksimal bredde på 620 piksler.
Immersive elementer skal strekke seg over hele visningsbredden, minus rullefeltet. På større skjermer (over 71.24em) er deres maksimale bredde 978px, med justert bildetekstutfylling ved forskjellige brytepunkter. På mellomstore skjermer (mellom 46.25em og 61.24em) er maksimalbredden 738px. På mindre skjermer (under 46.24em) skal disse elementene ikke ha venstremargin og skal justeres til venstre kant, med justerte marginer og bildetekstutfylling for svært små skjermer.
For møbelinnpakningen på store skjermer (over 61.25em) brukes et rutenettlayout med definerte kolonner og rader. Overskrifter får en toppkantlinje, metainformasjon er plassert relativt, og ingress-tekst har spesifikk stil for lenker og avstand. Figurer innenfor denne innpakningen har justerte marginer og en maksimal bredde på 630px for innebygde elementer. På ekstra store skjermer (over 71.25em) justeres rutenettmalen til å inkludere flere kolonner.
CSS-en definerer et rutenettlayout for en sidehode med områder for tittel, overskrift, ingress, metainformasjon og et portrett. Den setter spesifikke dimensjoner og posisjoner for disse elementene ved forskjellige skjermstørrelser. Stilen inkluderer kantlinjer, skrifter og farger, med justeringer for sosiale medie-ikoner, bildetekster og responsiv oppførsel på mobil- og datamaskinvisninger.
CSS-koden definerer stiler for en nettsidelayout, med fokus på en komponent kalt "furniture-wrapper." Denne komponenten har en mørk bakgrunn og justerer marginer og utfylling basert på skjermstørrelse. For større skjermer legger den til dekorative sidefelt.
Innenfor denne innpakningen er elementer som artikkelhoder, overskrifter og metainformasjon (som knapper for deling på sosiale medier) utformet. Overskrifter bruker en lysegrå farge og fet skrift. Sosiale knapper har fargede kantlinjer som samsvarer med en temafarge, og de endres til en solid farge ved hover.
Koden håndterer også synligheten til bildetekster og en bildetekst-vekslingsknapp for medieelementer. Totalt sett sikrer stilene at layouten er responsiv og visuelt konsistent på tvers av forskjellige enheter.
Denne CSS-koden definerer stiler for en nettsidekomponent, sannsynligvis et sidefelt eller en innholdspakker. Den setter tekstfarger, lenkeutseende og layoutjusteringer for forskjellige skjermstørrelser. Lenker er utformet med spesifikke farger og understrekninger, og layouten inkluderer bakgrunnselementer som justeres basert på visningsbredde. Koden håndterer også kantlinjer og avstand for ulike elementer innenfor komponenten.
CSS-koden definerer stiler for artikkelelementer og laster tilpassede skrifter. Den setter kantlinjefargen for kommentarer til å samsvare med hodets kantlinjefarge. For artikkeloverskrifter bruker den en lett skriftvekt som standard, men bytter til fet når overskriften inneholder en sterk tagg.
I tillegg importerer den Guardian Headline Full-skriftfamilien i forskjellige vekter og stiler (lett, vanlig, mellom, halvfet, hver med normale og kursiv versjoner) fra Guardians servere, og spesifiserer flere filformater for nettleserkompatibilitet.
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, hostet på Guardians servere.
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 og spesifikke funksjonsfarger. I mørk modus justeres funksjonsfargen tilsvarende.
På iOS og Android brukes spesifikke CSS-regler for å style den første bokstaven i det første avsnittet i visse artikkelbeholdere, etter spesifikke 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 er artikkelhoder skjult, 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 visningsbredden (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 og 24 piksler på bunnen, med en negativ margin på 10 piksler til høyre.
Avsnittene innenfor denne introduksjonsteksten skal bruke Guardians overskriftsskriftfamilie.
Lenker innenfor denne teksten skal være utformet med en spesifikk farge, en understrekning plassert 6 piksler under teksten, og en lysegrå understrekningsfarge, uten bakgrunnsbilde eller kantlinje. Når de holdes over med musepekeren, skal understrekningen endres til å samsvare med lenkens tekstfarge.
I tillegg skal metadata-delen i artikler på både iOS og Android motta spesifikk styling.
Denne CSS-koden setter stiler for artikkelbeholdere på iOS- og Android-enheter. Den justerer marginer, farger, utfylling og knappvisning for ulike artikkeltyper og deres komponenter.
På iOS- og Android-enheter, for reportasje-, standard- og kommentarartikkelbeholdere, er bilder som ikke er miniatyrer eller immersive utformet til å ikke ha margin, en bredde beregnet fra visningen minus 24 piksler og rullefeltbredden, og en automatisk høyde. Deres bildetekster har ingen utfylling.
Immersive bilder i disse beholdere er satt til en bredde som er visningsbredden minus rullefeltbredden.
Innenfor artikkelkroppens prosa viser sitater i blokksitat en farget markør ved hjelp av en tilpasset CSS-variabel. Lenker er utformet med en spesifikk farge, en understrekning med 6 piksler avstand, og en dekorasjonsfarge fra en variabel. Ved hover endres understrekningsfargen til en annen variabel.
I mørk modus er bakgrunnsfargen til møbelinnpakningen i disse beholdere satt til en mørkegrå (#1a1a1a).
For iOS- og Android-enheter bruker innholdsmerkene i reportasje-, standard- og kommentarartikler den nye søylefargen. Overskrifter i disse artiklene har ingen bakgrunn og bruker hodets kantlinjefarge. Ingress-teksten og lenker, sammen med forfatterbyline, tar også i bruk den nye søylefargen. Ikoner i meta-delen er utformet med samme farge. Bildetekster for utstillingsbilder bruker datolinjefargen, og sitert tekst innenfor artikkelkroppen følger samme stil.
For iOS- og Android-enheter er tekstfargen til sitatblokker innenfor artikkelkropper satt til en spesifikk søylefarge. I tillegg er bakgrunnsfargen for ulike artikkelkropsbeholdere tvunget til en mørk bakgrunn. På iOS er den første bokstaven etter visse elementer i disse beholdere utformet med en innledende versal-effekt.
Dette ser ut til å være en CSS-velger som sikter mot den første bokstaven i avsnitt i spesifikke artikkelbeholdere på iOS- og Android-enheter. Velgeren gjelder for ulike artikkeltyper (standard, reportasje, kommentar) og tar hensyn til forskjellige sidestrukturer og påloggingsport-elementer.
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å en mediespørring for mørk modus som justerer farger n
