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 WOFF2, WOFF og TrueType-formater for å sikre kompatibilitet på tvers av forskjellige nettlesere.
@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 venstre posisjon 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.
For inline-figurer på mellomstore skjermer og større settes en maksimal bredde. I medieavsnitt som inneholder loop-figurer legges bildetekster lagvis over, og loop-knapper styles med spesifikke dimensjoner og justering. Bildeknapper plasseres på toppen.
I kroppsseksjonen tar selvhostede videoøyer full bredde opp til et maksimum, med sentrerte marger. Loop-figurer og videoer innenfor disse øyene tar også full bredde. For immersive videoelementer fjernes breddebegrensninger, og marger justeres. På større skjermer utvides immersive videoer i bredde og forskyves mot venstre, med bildetekster innrykket tilsvarende.
Fargevariabler definerer ulike UI-elementer som datolinjer, kantlinjer, bildetekster og funksjonsfarger, med søylefarger som påvirker underoverskrifter, sitatblokker og blokksitater. I mørk modus tilpasses disse fargene til det mørke temaet.
Atomiske elementer innenfor innholdskolonner har ingen polstring. Spesifikke regler justerer de første avsnittene etter visse elementer eller horisontale linjer på tvers av forskjellige innholdsområder som artikler, interaktivt innhold, kommentarer og funksjoner, for å sikre riktig avstand og layout.
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 spesifikke elementer som et atom, en påloggingsport eller en horisontal linje (ikke den siste) i ulike innholdsområder (artikkelkropp, interaktivt innhold, kommentarer, funksjoner eller elementer med en `data-gu-name` av "body"), bruk en spesiell innledende versalbokstav-stil. Denne stilen bruker spesifikke overskriftsskrifter, setter skriftstørrelsen til 111px med en linjehøyde på 92px, flyter den til venstre, gjør den til store bokstaver, legger til en 8px høyre marg, justerer den til toppen av teksten og farger den med en tilpasset variabel for innledende versalbokstaver.
Avsnitt umiddelbart etter en horisontal linje i disse innholdsområdene skal ikke ha topppolstring.
Sitatblokker innenfor disse innholdsområdene er begrenset til en maksimal bredde på 620 piksler.
Bildetekster for showcase-elementer i hovedinnhold, funksjonsartikler, standardartikler og kommentarseksjoner er posisjonert statisk, tar full bredde opp til et maksimum på 620 piksler.
Immersive elementer spenner over hele visningsportens bredde, med hensyn til rullefeltet. På større skjermer (opp til 71.24em) er deres maksimale bredde 978px, med bildetekstpolstring justert ved forskjellige brytepunkter. På mellomstore skjermer (mellom 46.25em og 61.24em) er maksimal bredde 738px. På mindre skjermer (under 46.24em) justeres immersive elementer til venstre kant med justerte marger og bildetekstpolstring.
For bredere skjermer (over 61.25em) bruker møbelinnpakningen et CSS Grid-oppsett med definerte kolonner og rader for å plassere elementer som tittel, overskrift, metadata, ingress og portrettområde.
CSS-stilene definerer en layout-innpakning for artikkelkomponenter. Overskrifter har en toppkantlinje og justeres i størrelse fra 32px til 50px på større skjermer, med en maksimal bredde som også endres. Metainformasjon inkluderer en dekorativ topplinje på brede skjermer. Ingressseksjonen har understrekede lenker med en tilpasset farge som endres ved sveving, og dens første avsnitt har en toppkantlinje på mindre skjermer som fjernes på større. En vertikal skillelinje vises i ingressen på brede skjermer.
Layout-grid er definert for skjermer 71.25em og bredere, og igjen for 81.25em og bredere, som spesifiserer kolonne- og radmaler for posisjonering av elementer som tittel, overskrift, meta, ingress og portrettområder. Figurer har spesifikke marger og maksimale bredder. Totalt sett kontrollerer stilene den responsive presentasjonen av artikkeloverskrifter og innledende innhold.
For skjermer bredere enn 740px, skjul elementer med klassen `.keyline-4` eller attributtet `[data-gu-name="lines"]`. Innenfor `.furniture-wrapper`, stil SVG-strekene innenfor disse elementene med en tilpasset fargevariabel.
På mellomstore skjermer og større, fjern høyre marg fra elementer med ID-en `#meta` eller attributtet `[data-gu-name="meta"]`.
Inne i metaseksjonen, sett kantlinjefargen for sosiale lenker, kommentarelementer og deres barne-spans til en tilpasset variabel. Skjul også eventuelle `gu-island`-elementer innenfor en spesifikk container.
For ingressseksjonen, juster dens posisjonering og polstring, og legg til et venstre forskyvning. På mellomstore skjermer, legg til en liten topppolstring. Stil avsnittet inni med en vanlig skriftvekt, en størrelse på 20px og bunnpolstring.
Hovedmediaområdet er posisjonert relativt, plassert i 'portrett'-grid-området, og gitt spesifikke marger. Sikre at de indre div-ene tar full bredde. På større skjermer, fjern bunnmargen. På mindre skjermer, juster bredden og venstremargen, med en ekstra justering for mellom-små skjermer.
Stil figurbildetekster til å vises nederst med en tilpasset bakgrunn og tekstfarge, overstyrer standard bredde og marger. Skjul det første span inni og vis det andre, begrens dens bredde. På mellomstore skjermer, juster bildetekstpolstringen. En skjult tilstand gjør bildeteksten gjennomsiktig.
En bildetekstknapp er posisjonert nederst til høyre, stilt med en sirkulær bakgrunn og skalert ikon, med dens posisjon justert på mellomstore skjermer.
For interaktive artikkelkolonner på svært store skjermer, juster et pseudo-elements posisjon og høyde. Begrens også bredden på nivå-2-overskrifter.
På iOS eller Android, definer et sett med mørkt tema fargevariabler. I mørk modus, juster den primære fargevariabelen.
For iOS-enheter, mål det første avsnittet etter spesifikke elementer i forskjellige artikkelcontainere og stil den første bokstaven.
Den første bokstaven i det første avsnittet etter en påloggingsport, eller det første avsnittet etter et atomelement i ulike artikkelcontainere på iOS og Android, skal farges ved hjelp av den sekundære søylevariabelen (standard til svart).
På både iOS og Android skal artikkeloverskriftshøyden i funksjon-, standard- og kommentarartikkelcontainere settes til null.
Møbelinnpakningen innenfor disse artikkelcontainerne på begge plattformer skal ha topppolstring på 4 piksler og horisontal polstring på 10 piksler.
Etiketter innenfor møbelinnpakningen skal være fet, bruke den spesifiserte skriftstakken, ta fargen fra den nye søylevariabelen, og være skrevet med store bokstaver.
Overskrifter (h1) innenfor møbelinnpakningen skal være 32 piksler i størrelse, fete, ha 12 piksler bunnpolstring, og være farget #121212.
Bildefigurer innenfor møbelinnpakningen skal være posisjonert relativt, ha en toppmarg på 14 piksler, en venstremarg på -10 piksler, en bredde beregnet som visningsportbredden minus rullefeltbredden, og en automatisk høyde.
For funksjonsartikler på iOS, skal det indre figurelementet, bildet og lenken innenfor disse bildefigurene også følge disse stilreglene.
For iOS- og Android-enheter gjelder følgende CSS-regler:
For bilder innenfor artikkelcontainere:
- Sett bakgrunnen til gjennomsiktig.
- Gjør bredden lik full visningsportbredde minus rullefeltbredden.
- Sikre at høyden justeres automatisk.
For artikkelingressseksjonen:
- Legg til 4px polstring på toppen og 24px på bunnen.
- Bruk en negativ høyre marg på 10px.
For avsnitt innenfor ingressen:
- Bruk Guardian-overskrift og serif skriftfamilier.
For lenker innenfor ingressen:
- Sett fargen til en spesifikk variabel.
- Fjern eventuell bakgrunnsbilder.
- Bruk en understrekning med 6px forskyvning og en spesifikk kantlinjefarge
