Denne CSS-koden definerer en egendefinert 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. For hver stil spesifiserer koden tre forskjellige skriftfilformater (woff2, woff og ttf) som er hostet på Guardians servere, noe som sikrer bred nettleserkompatibilitet.
@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));
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-cFor interaktive innholdskolonner legges det til en venstre kant med spesifikk posisjonering og z-indeks. På større skjermer justeres kantens posisjon litt. Innenfor disse kolonnene har atomelementer ingen topp- eller bunnmarginer, men inkluderer polstring. Når et avsnitt følger et atomelement, fjernes polstringen og marger legges til i stedet. Inline-elementer er begrenset til en maksimal bredde.
For figurer med en inline-rolle har de også en maksimal bredde på mellomstore skjermer og større.
Egendefinerte egenskaper definerer ulike farger for elementer som datolinjer, overskrifter, bildetekster og særstykker. Den primære søylefargen standardiseres til særstykkesfargen hvis den ikke er satt.
Atomelementer innenfor interaktive kolonner eller generelt har ingen polstring. Det første avsnittet etter spesifikke elementer eller horisontale linjer i ulike innholdskropper mottar ekstra topppolstring.
I tillegg blir den første bokstaven i disse avsnittene stilert som en innledende versalbokstav med en spesifikk skrift, størrelse, vekt og farge, ved bruk av egendefinerte egenskaper for fargesetting.For avsnitt som følger horisontale linjer i spesifikke innholdsområder, fjern topppolstring.
Begrens utdragsbredde til 620px i artikkel-, interaktiv-, kommentar- og særstykkeskroper.
For showcase-elementbildetekster i hovedinnhold og artikkelcontainere, sett posisjon til statisk, bredde til 100% og maksimal bredde til 620px.
Immersive elementer skal strekke seg over full visningsportbredde minus rullefeltet. På skjermer opp til 71.24em begrenses bredden deres til 978px. For bildetekster på disse skjermene legges det til 10px horisontal polstring, økende til 20px på skjermer mellom 30em og 71.24em.
På mellomstore skjermer (46.25em til 61.24em) begrenses immersive elementer til 738px. På mindre skjermer (opp til 46.24em) fjernes venstremargin, justeres til venstre kant og legges til en 10px negativ venstremargin (20px på skjermer 30em og bredere). Bildetekster på disse mindre skjermene får 20px horisontal polstring.
For furniture wrapper på store skjermer (61.25em og oppover), bruk et CSS-grid med definerte kolonner og rader. Stil det første barnet av overskrifter med en toppkant. Posisjoner metaseksjonen relativt med topppolstring og ingen høyre margin. I standfirst-seksjoner, juster bunnmarginer, sett listeelementskriftstørrelse til 20px, og stil lenker med understrek (ved bruk av en egendefinert farge for understreken som endres ved hover). Det første avsnittet i standfirst får en toppkant og ingen bunnpolstring, selv om denne kanten fjernes på svært store skjermer (71.25em og oppover).
Også, for figurer innenfor wraperen, fjern venstremargin og sett en maks-bredde på 630px for inline-elementer. På de største skjermene (71.25em og oppover) er grid-malens kolonner definert fra tittel, overskrift og meta.Layouten bruker et grid med kolonner og rader definert for ulike skjermstørrelser. På større skjermer har gridden tre kolonner for tittel-, overskrift- og metaseksjoner, fem kolonner for standfirst, og åtte kolonner for portrett, med radstørrelser proporsjonalt definert. På mellomstore skjermer justeres gridden til henholdsvis to, fem og sju kolonner, med spesifikke radhøyder.
Stilsetting inkluderer en toppkant for metaseksjonen og en venstrekant for standfirst, begge bruker en egendefinert fargevariabel. Overskrifter har en maksimal bredde og skriftstørrelse som endres med skjermstørrelse, og blir større på bredere skjermer. Noen elementer, som sosial deling og kommentarseksjoner, har kanter som matcher overskriftsfargen, mens andre er skjult på visse enheter.
Standfirst-teksten har spesifikk polstring og skriftegenskaper, og hovedmediaområdet er posisjonert innenfor gridden, med bredden justert på mindre skjermer for å ta hensyn til rullefelt og marger. Bildetekster er posisjonert absolutt.Furniture wrapperens figur-bildetekst er posisjonert absolutt i bunnen uten bunnmargin, med polstring, en bakgrunnsfarge og tekstfarge. Bredden er satt til 100% med en minimumshøyde på 46 piksler. Innenfor bildeteksten er det første spennet skjult, mens det andre vises og begrenses til 90% av maksimal bredde. Bildetekstens tekst og SVG-ikoner bruker en spesifikk fargevariabel.
På skjermer bredere enn 30em økes bildetekstens horisontale polstring. En dedikert bildetekstknapp er absolutt posisjonert nederst til høyre, med en sirkulær bakgrunn og skalert SVG-ikon, og justerer sin høyre posisjon på større skjermer.
For interaktive hovedkolonner på svært brede skjermer, justerer et pseudo-element sitt topp og høyde. Overskrifter innenfor disse kolonnene har en maksimal bredde.
På iOS og Android er mørk modus-fargevariabler definert, inkludert en særstykkesfarge som endres i mørk modus. Spesifikke artikkelcontainere på disse plattformene stiliserer den første bokstaven i det første avsnittet etter visse elementer med en sekundærfarge, setter artikkeloverskriftshøyden til null, justerer polstring for furniture wrapper, og skjuler innholdsmerkene innenfor den.For iOS- og Android-enheter gjelder følgende stiler for særstykke-, standard- og kommentarartikkelcontainere:
- Merkelapper: Bruk en fet, kapitalisert skrift i Guardian-overskrift eller serif-skrifttype, farget med den nye søylefargevariabelen.
- Overskrifter: Satt til 32px, fet, med 12px bunnpolstring, og en mørk gråfarge (#121212).
- Bilder: Posisjonert relativt, med en 14px toppmarg og negativ 10px venstremarg. Bredden strekker seg over hele visningsporten (tar hensyn til rullefelt), og høyden justeres automatisk. Indre elementer, bilder og lenker innenfor figuren har en gjennomsiktig bakgrunn, og matcher full visningsportbredde med automatisk høyde.
- Standfirst (artikkelsammendrag): Inkluderer 4px topppolstring, 24px bunnpolstring og en negativ 10px høyre marg. Avsnitt innenfor standfirst arver disse containerstilene.CSS-koden setter spesifikke stiler for artikkel-standfirsts og metadata på iOS- og Android-enheter. Den definerer skriftfamilier for standfirst-teksten og tilpasser lenkeutseender, inkludert farge, understrekstil og hover-effekter. Koden justerer også marger for metadataseksjoner og sikrer konsekvent stilsetting for bylinjer og forfatterlenker på tvers av ulike artikkeltyper.Forfatterens navn i furniture wrapperens metaseksjon, sammen med relaterte lenker og spenn på Android-enheter for både standard- og kommentarartikler, skal bruke den nye søylefargen. På iOS og Android skal den diverse metaseksjonen i særstykke-, standard- og kommentarartikler ha ingen polstring, og eventuelle SVG-ikoner innenfor skal stileres med den nye søylefargen som strek.
For showcase-elementer i særstykke-, standard- og kommentarartikler på både iOS og Android, skal bildetekstknappen vises som en flex-container. Den skal sentreres med 5px polstring, justert både horisontalt og vertikalt, størrelse 28x28 piksler, og posisjonert 14px fra høyre.
Artikkelteksten i særstykke-, standard- og kommentarartikler på iOS og Android skal ha 12px polstring på venstre og høyre side. Innenfor artikkelteksten skal bildefigurer som ikke er miniatyrer eller immersive ha ingen marg. Bredden deres skal være full visningsportbredde minus 24px og eventuell rullefeltbredde, med automatisk høyde. Bildetekstene for disse bildene skal også følge disse reglene.For iOS- og Android-enheter skal immersive bilder i særstykke-, standard- og kommentarartikler strekke seg over full visningsportbredde, med hensyn til rullefeltet.
Blokksitater innenfor artikkelteksten skal bruke nettstedets søylefarge for sitt dekorative element.
Lenker i artikkelteksten skal stileres med den primære søylefargen, en understrek, og ingen bakgrunnsbilde. Understreksfargen skal endres ved hover.
I mørk modus skal artikkeloverskriftsområdet ha en mørk bakgrunn. Merkelapper og overskriften skal bruke spesifikke farger for kontrast, og innledende tekst skal være lesbar mot det
