Denne CSS-koden definerer en egendefinert skriftfamilie kalt "Guardian Headline Full" med flere skriftsnittvekter og stiler. Den spesifiserer skriftfilene i forskjellige formater (WOFF2, WOFF og TrueType) og deres nettbaserte plasseringer for at nettleseren skal laste ned og bruke dem. Skriften inkluderer lette (300), vanlige (400), mellomtunge (500) og halvfet (600) vekter, hver med normale og kursivstiler.
@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;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
left: -10px;
}
}
For den interaktive hovedkolonnen legges det til en venstre kantlinje før innholdet, plassert 11 piksler til venstre. Elementer innenfor denne kolonnen har ingen topp- eller bunnmargin, men inkluderer 12 piksler polstring både på toppen og bunnen. Når et avsnitt følges av et element, fjernes polstringa, og marger på 12 piksler brukes i stedet. Inline-elementer er begrenset til en maksimal bredde på 620 piksler, noe som også gjelder for inline-figurer på skjermer bredere enn 61.25em.
Egendefinerte egenskaper definerer farger for ulike elementer, som datolinje, header-kantlinje, bildetekst og bakgrunn, med en funksjonsfarge satt til rød og en ny søylefarge som standard bruker primær- eller funksjonsfargen. Elementer med atom-klassen har ingen polstring.
For det første avsnittet etter spesifikke elementer eller en horisontal linje i ulike innholdsområder, legges det til en topppolstring på 14 piksler. Den første bokstaven i disse avsnittene er stilert med en stor, fet, versal skrift i en spesifikk farge, flyter til venstre med en margin og vertikal justering.
I tillegg har avsnitt umiddelbart etter en horisontal linje i disse områdene ingen topppolstring. Sitatblokkeringer innenfor spesifikke innholdsområder har en maksimal bredde på 620 piksler.
Utstillings-element-bildetekster i hovedinnhold og artikkelbeholdere er posisjonert statisk med full bredde, også begrenset til 620 piksler.
Immersive elementer spenner over full visningsportbredde minus rullefeltet. På skjermer opptil 71.24em brede er disse elementene begrenset til 978 piksler, med bildetekstpolstring på 10px på mindre skjermer og 20px på mellomstore. Mellom 46.25em og 61.24em er maksimal bredde 738 piksler. Under 46.24em justeres immersive elementer til venstre kant med justerte marger og 20px bildetekstpolstring på mellomstore skjermer.
For møbelinnpakning på større skjermer (61.25em og oppover) brukes et rutenettlayout med definerte kolonner og rader. Overskrifter har en toppkantlinje, metaseksjoner har topppolstring, og standfirst-elementer inkluderer stiliserte lenker med understrekninger som endrer farge ved sveving. Opprinnelig har det første avsnittet i standfirst en toppkantlinje, som fjernes på bredere skjermer (71.25em og over). Figurer innenfor innpakningen har ingen bunnmargin og en venstre forskyvning, med inline-elementer begrenset til 630 piksler. På de største skjermene justerer rutenettet kolonnestrukturen for bedre layout.
Layoutet bruker et rutenett med spesifikke kolonner og rader for ulike skjermstørrelser. På større skjermer justerer rutenettet seg til å ha tre like kolonner for tittel, overskrift og metaseksjoner, etterfulgt av fem for standfirst, og åtte for portrett, med radhøyder satt som brøker. En tynn linje vises over metaseksjonen, og standfirst har en vertikal linje på venstre side.
Overskrifter er fete og endrer størrelse og bredde avhengig av skjermen: opptil 620px bred og 32px skriftstørrelse på mindre skjermer, og 540px bred med 50px skriftstørrelse på større. Noen dekorative linjer skjules på større skjermer, og sosiale delings- og kommentarelementer har kantlinjer som samsvarer med headerens farge.
Standfirst-teksten er normal vekt, 20px i størrelse, med polstring i bunnen, og den er forskjøvet litt til venstre med venstre polstring. Hovedmediebilder fyller bredden og justerer marger for ulike skjermstørrelser, med bildetekster plassert i bunnen med en bakgrunnsfarge og egendefinert tekstfarge. På veldig små skjermer spenner mediet over full visningsportbredde minus rullefeltet.
Møbelinnpakningen setter en mørk bakgrunn og justerer marger og polstring for ulike skjermstørrelser. På større skjermer legger den til dekorative sidefelt. Overskrifter er stilert med fet, lys grå tekst, og metainformasjon bruker lignende farger. Sosiale medie-knapper har en distinkt farge som endres ved sveving, og bytter tekst- og bakgrunnsfarger for kontrast. Bildetekster er skjult som standard, men kan veksles med en knapp, og ulike elementer tilpasser sin synlighet og layout basert på skjermbredde og andre forhold.
Elementer med klassen "furniture-wrapper" og deres underordnede har spesifikke stilregler:
- Metaseksjonslenker er fargelagt ved bruk av en egendefinert egenskap for søylefargen eller en mørk modus-funksjon, med samme farge brukt ved sveving for både tekst og understrekning.
- Standfirst-lenker har ingen kantlinje, bruker søylefargen eller mørk modus-funksjon for tekst, fjerner bakgrunnsbilder, og har understrekninger med 6px forskyvning og en header-kantlinjefarge. Ved sveving endres understrekningsfargen til søylefargen eller mørk modus-funksjonen.
- Standfirst-avsnitt og listeelementer er fargelagt lysegrå (#dcdcdc).
- For større skjermer (min-width: 61.25em) har det første avsnittet i standfirst en toppkantlinje, som fjernes ved enda større brytepunkter (min-width: 71.25em).
- Pseudo-elementer (:before og :after) brukes til å lage sidefelt med mørke bakgrunner og kantlinjer, og justerer bredden og posisjonen basert på visningsportstørrelse og rullefeltbredde for ulike skjermstørrelser.
- Hovedlinjer og sosiale/kommentarelementer i metaseksjonen bruker header-kantlinjefargen for streker og styling.
Kommentarseksjonen har en kantlinjefarge som samsvarer med headerens kantlinjefarge.
I artikler har andre nivå-overskrifter en lett skriftvekt på 200. Men hvis en andre nivå-overskrift inneholder et fet element, bruker den en tyngre skriftvekt på 700.
I tillegg er Guardian Headline Full-skriftfamilien definert med ulike stiler og vekter, inkludert lett, vanlig, mellomtung og halvfet, hver tilgjengelig i normale og kursiv versjoner. Disse skriftene hentes fra spesifikke URL-er i WOFF2-, WOFF- og TrueType-formater.
Denne CSS-koden definerer flere skriftfamilier og deres variasjoner for Guardian-nettstedet. Den spesifiserer ulike skriftvekter og stiler (som fet, kursiv, halvfet, svart) for "Guardian Headline Full"-skriften, hver med flere filformater (WOFF2, WOFF, TTF) for tverrnettleserkompatibilitet. I tillegg inkluderer den "Guardian Titlepiece"-skriften i fet stil.
Koden setter også opp CSS-egendefinerte egenskaper (variabler) for farger, justerer dem for mørk modus på iOS- og Android-enheter. Den inkluderer medieforespørsler for å håndtere preferanser for mørk modus og bruker spesifikk styling på den første bokstaven i avsnitt i artikkelbeholdere på iOS- og Android-plattformer, spesielt når de følger visse elementer som atomer eller påloggingsporter.
For Android- og iOS-enheter er den første bokstaven i det første avsnittet i standard- og kommentarartikler stilert med en sekundær søylefarge. Artikkelheaderens høyde er satt til null, mens møbelinnpakningen har polstring på 4px på toppen, 10px på sidene og ingen i bunnen.
Innholdsmerkelapper innenfor møbelinnpakningen bruker en fet, kapitalisert skrift fra Guardian-overskriftfamilien i den nye søylefargen. Overskrifter er 32px, fete, med 12px bunnpolstring og en mørk grå farge.
Bilder i møbelinnpakningen er posisjonert relativt, med en toppmargin på 14px, ingen bunnmargin, og en venstremargin på -10px. Bredden deres spenner over full visningsport minus rullefeltbredden, og høyden justeres automatisk. Indre figurelementer, bilder og lenker innenfor disse figurene arver samme stil.
For Android-enheter har bilder innenfor artikkelbeholdere en gjennomsiktig bakgrunn og justerer bredden til full visningsport minus rullefeltet, med automatisk høyde.
På både iOS og Android har standfirst-seksjonen i artikkelbeholdere topp- og bunnpolstring, med en negativ høyre margin. Teksten inni bruker spesifikke skriftfamilier, og lenker er stilert med en bestemt farge, understreket med en egendefinert forskyvning og farge, og uten bakgrunnsbilde eller kantlinje. Når de sveves
