Denne CSS-kode definerer en brugerdefineret skrifttypefamilie kaldet "Guardian Headline Full" med flere skrifttykkelser og stilarter. Den inkluderer let, normal, medium og semibold tykkelser, hver i både normale og kursiverede versioner. Skrifttyperne indlæses fra Guardians servere i WOFF2, WOFF og TrueType formater for at sikre kompatibilitet på tværs af forskellige browsere.
@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 indholdskolonner tilføjes en venstre kant med specifik positionering og z-index. På større skærme justeres kantens venstre position let. Inden for disse kolonner har atomare elementer ingen top- eller bundmargener men inkluderer polstring. Når afsnit går forud for atomare elementer, fjernes polstring og margener tilføjes i stedet. Inline-elementer er begrænset til en maksimal bredde.
For inline-figurer på mellemstore skærme og derover er der sat en maksimal bredde. I medieafsnit, der indeholder loop-figurer, er billedtekster lagt ovenpå, og loop-knapper er designet med specifikke dimensioner og justering. Billedtekstknapper placeres øverst.
I brødtekstafsnittet tager selvhostede videoøer fuld bredde op til et maksimum, med centrerede margener. Loop-figurer og videoer inden for disse øer tager også fuld bredde. For immersive videoelementer fjernes breddebegrænsninger, og margener justeres. På større skærme udvides immersive videoer i bredden og forskydes mod venstre, med billedtekster indrykket i overensstemmelse hermed.
Farvevariabler definerer forskellige UI-elementer som datolinjer, kanter, billedtekster og funktionsfarver, med pillefarver, der påvirker underoverskrifter, citater og blokcitater. I mørk tilpasning tilpasses disse farver til det mørke tema.
Atomare elementer inden for indholdskolonner har ingen polstring. Specifikke regler justerer de første afsnit efter visse elementer eller vandrette streger på tværs af forskellige indholdsområder som artikler, interaktivt indhold, kommentarer og funktioner for at sikre korrekt afstand og layout.Det første afsnit efter en log-ind-port eller en vandret streg (undtagen den sidste) har en top-polstring på 14 pixels.
For det første bogstav i det første afsnit efter specifikke elementer som et atom, en log-ind-port eller en vandret streg (ikke den sidste) i forskellige indholdsområder (artikelbrødtekst, interaktivt indhold, kommentarer, funktioner eller elementer med et `data-gu-name` af "body"), anvendes en speciel drop cap-stil. Denne stil bruger specifikke overskriftsskrifttyper, sætter skriftstørrelsen til 111px med en linjehøjde på 92px, flyder den til venstre, gør den til store bogstaver, tilføjer en højremargin på 8px, justerer den til toppen af teksten og farver den med en brugerdefineret variabel for drop caps.
Afsnit umiddelbart efter en vandret streg i disse indholdsområder bør ikke have top-polstring.
Citater inden for disse indholdsområder er begrænset til en maksimal bredde på 620 pixels.
Billedtekster for showcase-elementer i hovedindhold, funktionsartikler, standardartikler og kommentarsektioner er positioneret statisk og tager den fulde bredde op til et maksimum på 620 pixels.
Immersive elementer spænder over hele viewport-bredden under hensyntagen til rullelinjen. På større skærme (op til 71.24em) er deres maksimale bredde 978px, med billedtekstpolstring justeret ved forskellige breakpoints. På mellemstore skærme (mellem 46.25em og 61.24em) er den maksimale bredde 738px. På mindre skærme (under 46.24em) justeres immersive elementer til venstre kant med justerede margener og billedtekstpolstring.
For bredere skærme (over 61.25em) bruger furniture-wrapper'en et CSS Grid-layout med definerede kolonner og rækker til at positionere elementer som titel, overskrift, metadata, standfirst og portræt.CSS-stilarterne definerer en layout-wrapper for artikelkomponenter. Overskrifter har en topkant og justeres i størrelse fra 32px til 50px på større skærme, med en maksimal bredde, der også ændres. Metainformation inkluderer en dekorativ topstreg på brede skærme. Standfirst-sektionen har understregede links med en brugerdefineret farve, der ændres ved hover, og dens første afsnit har en topkant på mindre skærme, som fjernes på større. En lodret separatorlinje vises i standfirst på brede skærme.
Layout-grid er defineret for skærme på 71.25em og bredere, og igen for 81.25em og bredere, der specificerer kolonne- og rækkemønstre for positionering af elementer som titel, overskrift, meta, standfirst og portrætområder. Figurer har specifikke margener og maksimale bredder. Overordnet styrer stilarterne den responsive præsentation af artikeloverskrifter og introducerende indhold.For skærme bredere end 740px, skjul elementer med klassen `.keyline-4` eller attributten `[data-gu-name="lines"]`. Inden for `.furniture-wrapper`, stil SVG-stregene inden i disse elementer med en brugerdefineret farvevariabel.
På mellemstore skærme og derover fjernes højremargenen fra elementer med ID'et `#meta` eller attributten `[data-gu-name="meta"]`.
Inde i meta-sektionen sættes kantfarven for sociale links, kommentarelementer og deres underordnede span til en brugerdefineret variabel. Skjul også eventuelle `gu-island`-elementer inden for en specifik container.
For standfirst-sektionen justeres dens positionering og polstring, og der tilføjes et venstre offset. På mellemstore skærme tilføjes en lille toppolstring. Stil afsnittet indeni med en normal skrifttykkelse, en størrelse på 20px og bundpolstring.
Hovedmedieområdet er positioneret relativt, placeret i 'portræt'-grid-området og får specifikke margener. Sørg for, at dets indre div'er tager fuld bredde. På større skærme fjernes bundmargenen. På mindre skærme justeres bredden og venstremargenen, med en yderligere justering for mellemsmå skærme.
Stil figur-billedtekster til at vises nederst med en brugerdefineret baggrund og tekstfarve, der tilsidesætter standardbredde og margener. Skjul det første span indeni og vis det andet, og begræns dets bredde. På mellemstore skærme justeres billedtekstpolstring. En skjult tilstand gør billedteksten gennemsigtig.
En billedtekstknap er placeret nederst til højre, designet med en cirkulær baggrund og skaleret ikon, med dens position justeret på mellemstore skærme.
For interaktive artikelkolonner på meget store skærme justeres et pseudo-elements position og højde. Begræns også bredden af overskrifter på niveau 2.
På iOS eller Android defineres et sæt mørke tema-farvevariabler. I mørk tilstand justeres den primære farvevariabel.
For iOS-enheder sigtes det første afsnit efter specifikke elementer i forskellige artikelcontainere, og dets første bogstav styles.Det første bogstav i det første afsnit efter en log-ind-port, eller det første afsnit efter et element-atom i forskellige artikelcontainere på iOS og Android, skal farves ved hjælp af den sekundære pille-variabel (standard sort).
På både iOS og Android skal artikelhøjden i funktions-, standard- og kommentarartikelcontainere sættes til nul.
Furniture-wrapper'en inden for disse artikelcontainere på begge platforme skal have en toppolstring på 4 pixels og en vandret polstring på 10 pixels.
Etiketter inden for furniture-wrapper'en skal være fedte, bruge den angivne skrifttype-stak, tage deres farve fra den nye pille-variabel og være med store bogstaver.
Overskrifter (h1) inden for furniture-wrapper'en skal være 32 pixels i størrelse, fede, have 12 pixels bundpolstring og være farvet #121212.
Billedefigurer inden for furniture-wrapper'en skal være positioneret relativt, have en topmargin på 14 pixels, en venstremargin på -10 pixels, en bredde beregnet som viewport-bredden minus rullelinjebredden og en automatisk højde.
For funktionsartikler på iOS skal det indre figurelement, billedet og linket inden for disse billedefigurer også følge disse stilregler.For iOS- og Android-enheder gælder følgende CSS-regler:
For billeder inden i artikelcontainere:
- Sæt baggrunden til gennemsigtig.
- Gør bredden lig med den fulde viewport-bredde minus rullelinjebredden.
- Sørg for, at højden justeres automatisk.
For artikel-standfirst-sektionen:
- Tilføj 4px polstring i toppen og 24px i bunden.
- Anvend en negativ højremargin på 10px.
For afsnit inden i standfirst:
- Brug Guardian-overskrift og serif skrifttypefamilier.
For links inden i standfirst:
- Sæt farven til en specifik variabel.
- Fjern enhver baggrundsbillede.
- Anvend en understregning med en 6px offset og en specifik kantfarve.
- Fjern enhver bundkant.
For hover-effekter på disse links:
- Anvend samme styling som ovenfor.For Android-enheder, når man holder over links inden i standfirst-sektionen af kommentarartikler, skal tekstunderstregningsfarven matche den nye pillefarve.
På både iOS- og Android-enheder,
