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
