Denna CSS-kod definierar en anpassad teckensnittsfamilj som heter "Guardian Headline Full" med flera teckensnittsvikter och stilar. Den inkluderar lätt, normal, medium och semifet vikt, var och en i både normal och kursiv version. Teckensnitten laddas från Guardians servrar i WOFF2-, WOFF- och TrueType-format för att säkerställa kompatibilitet mellan olika webbläsare.
@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) {
}
För interaktiva innehållskolumner läggs en vänsterkantlinje till med specifik positionering och z-index. På större skärmar justeras kantlinjens vänsterposition något. Inom dessa kolumner har atomära element inga marginaler ovanför eller under men inkluderar utfyllnad. När stycken föregår atomära element tas utfyllnaden bort och marginaler läggs istället till. Inline-element begränsas till en maximal bredd.
För inline-figurer på medelskärmar och större sätts en maximal bredd. I mediasektioner som innehåller loop-figurer lagerläggs bildtexter ovanpå, och loop-knappar stylas med specifika dimensioner och justering. Bildtextknappar placeras ovanpå.
I brödtextsektionen tar självhostade videoöar full bredd upp till ett maximum, med centrerade marginaler. Loop-figurer och videor inom dessa öar tar också full bredd. För immersiva videoelement tas breddbegränsningar bort och marginaler justeras. På större skärmar expanderar immersiva videor i bredd och förskjuts åt vänster, med bildtexter indragna därefter.
Färgvariabler definierar olika UI-element som datumlinjer, kanter, bildtexter och funktionsfärger, med pelarfärger som påverkar underrubriker, dragcitat och blockcitat. I mörkt läge anpassas dessa färger till det mörka temat.
Atomära element inom innehållskolumner har ingen utfyllnad. Specifika regler justerar de första styckena efter vissa element eller horisontella linjer över olika innehållsområden som artiklar, interaktivt innehåll, kommentarer och funktioner, vilket säkerställer korrekt avstånd och layout.
Det första stycket efter en inloggningsgrind eller en horisontell linje (förutom den sista) har en topputfyllnad på 14 pixlar.
För den första bokstaven i det första stycket efter specifika element som ett atom-element, en inloggningsgrind eller en horisontell linje (inte den sista) i olika innehållsområden (artikelbrödtext, interaktivt innehåll, kommentarer, funktioner eller element med ett `data-gu-name` av "body") tillämpas en speciell initialstil. Denna stil använder specifika rubrikteckensnitt, sätter teckenstorleken till 111px med en radhöjd på 92px, flyter den till vänster, gör den versal, lägger till en höger marginal på 8px, justerar den till toppen av texten och färglägger den med en anpassad variabel för initialer.
Stycken omedelbart efter en horisontell linje i dessa innehållsområden ska inte ha någon topputfyllnad.
Dragcitat inom dessa innehållsområden begränsas till en maximal bredd på 620 pixlar.
Bildtexter för showcase-element i huvudinnehåll, funktionsartiklar, standardartiklar och kommentarsektioner är positionerade statiskt, tar full bredd upp till ett maximum på 620 pixlar.
Immersiva element sträcker sig över hela viewportens bredd, med hänsyn till scrollbaren. På större skärmar (upp till 71.24em) är deras maximala bredd 978px, med bildtextutfyllnad justerad vid olika brytpunkter. På medelskärmar (mellan 46.25em och 61.24em) är den maximala bredden 738px. På mindre skärmar (under 46.24em) justeras immersiva element till vänsterkanten med justerade marginaler och bildtextutfyllnad.
För bredare skärmar (över 61.25em) använder möbelomslaget en CSS Grid-layout med definierade kolumner och rader för att positionera element som titel, rubrik, metadata, ingress och porträtt.
CSS-stilarna definierar en layout-omslutning för artikelkomponenter. Rubriker har en överkantlinje och justeras i storlek från 32px till 50px på större skärmar, med en maximal bredd som också ändras. Metainformation inkluderar en dekorativ överlinje på breda skärmar. Ingresssektionen har understrukna länkar med en anpassad färg som ändras vid hovring, och dess första stycke har en överkantlinje på mindre skärmar som tas bort på större. En vertikal separatorlinje visas i ingressen på breda skärmar.
Layoutrutnät definieras för skärmar 71.25em och bredare, och igen för 81.25em och bredare, vilket specificerar kolumn- och radmallar för att positionera element som titelområdet, rubrikområdet, metaområdet, ingressområdet och porträttområdet. Figurer har specifika marginaler och maximala bredder. Sammantaget styr stilarna den responsiva presentationen av artikelhuvuden och inledande innehåll.
För skärmar bredare än 740px, dölj element med klassen `.keyline-4` eller attributet `[data-gu-name="lines"]`. Inom `.furniture-wrapper`, styla SVG-strecken inuti dessa element med en anpassad färgvariabel.
På medelskärmar och större, ta bort den högra marginalen från element med ID `#meta` eller attributet `[data-gu-name="meta"]`.
Inuti metasektionen, sätt kantfärgen för sociala länkar, kommentarselement och deras underordnade span till en anpassad variabel. Dölj också alla `gu-island`-element inom en specifik container.
För ingresssektionen, justera dess positionering och utfyllnad, lägg till en vänsterförskjutning. På medelskärmar, lägg till en liten topputfyllnad. Styla stycket inuti med en normal teckensnittsvikt, en storlek på 20px och bottenutfyllnad.
Huvudmediaområdet är relativt positionerat, placerat i 'porträtt'-rutnätsområdet och ges specifika marginaler. Se till att dess inre div-taggar tar full bredd. På större skärmar, ta bort bottenmarginalen. På mindre skärmar, justera bredden och vänstermarginalen, med en ytterligare justering för medelsmå skärmar.
Styla figurtexter så att de visas längst ner med en anpassad bakgrund och textfärg, åsidosätt standardbredd och marginaler. Dölj det första span-elementet inuti och visa det andra, begränsa dess bredd. På medelskärmar, justera bildtextutfyllnaden. Ett dolt tillstånd gör bildtexten genomskinlig.
En bildtextknapp är positionerad längst ner till höger, stylad med en cirkulär bakgrund och skalad ikon, med dess position justerad på medelskärmar.
För interaktiva artikelkolumner på mycket stora skärmar, justera ett pseudoelements position och höjd. Begränsa också bredden på rubriker på nivå 2.
För iOS eller Android, definiera en uppsättning mörka temafärgvariabler. I mörkt läge, justera den primära färgvariabeln.
För iOS-enheter, rikta in det första stycket efter specifika element i olika artikelcontainrar och styla dess första bokstav.
Den första bokstaven i det första stycket efter en inloggningsgrind, eller det första stycket efter ett atom-element i olika artikelcontainrar på iOS och Android, ska färgläggas med den sekundära pelarvariabeln (standard svart).
På både iOS och Android ska artikelhuvudets höjd i funktions-, standard- och kommentarsartikelcontainrar sättas till noll.
Möbelomslaget inom dessa artikelcontainrar på båda plattformarna ska ha en topputfyllnad på 4 pixlar och horisontell utfyllnad på 10 pixlar.
Etiketter inom möbelomslaget ska vara fetstilta, använda den angivna teckensnittsstacken, ta sin färg från den nya pelarvariabeln och vara versaler.
Rubriker (h1) inom möbelomslaget ska vara 32 pixlar i storlek, fetstilta, ha 12 pixlar bottenutfyllnad och vara färgade #121212.
Bildfigurer inom möbelomslaget ska vara relativt positionerade, ha en toppmarginal på 14 pixlar, en vänstermarginal på -10 pixlar, en bredd beräknad som viewportbredden minus scrollbar-bredden och en automatisk höjd.
För funktionsartiklar på iOS, ska det inre figurelementet, bilden och länken inom dessa bildfigurer också följa dessa stilregler.
För iOS- och Android-enheter gäller följande CSS-regler:
För bilder inom artikelcontainrar:
- Sätt bakgrunden till genomskinlig.
- Gör bredden lika med hela viewportbredden minus scrollbar-bredden.
- Se till att höjden justeras automatiskt.
För artikelns ingresssektion:
- Lägg till 4px utfyllnad överst och 24px längst ner.
- Applicera en negativ höger marginal på 10px.
För stycken inom ingressen:
- Använd Guardian-rubrik- och serif-teckensnittsfamiljer.
För länkar inom ingressen:
- Sätt färgen till en specifik variabel.
- Ta bort eventuell bakgrundsbild.
- Applicera en understrykning med 6px offset och en specifik kantfärg.
- Ta bort eventuell underkantslinje.
För hovringseffekter på dessa länkar:
- Applicera samma styling som ovan.
För Android-enheter, när man hovrar över länkar inom ingresssektionen i kommentarsartiklar, ska textens understrykningsfärg matcha den nya pelarfärgen.
På både iOS- och Android-en
