Denna CSS-kod definierar en anpassad teckensnittsfamilj som heter "Guardian Headline Full" med flera stilar och vikter. Den inkluderar lätt, normal, medium och semibold-versioner, var och en tillgänglig i både normal och kursiv stil. Teckensnittsfilerna finns online och tillhandahålls i tre format: WOFF2, WOFF och TrueType (TTF).
@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 är begränsade till en maximal bredd på 620px.
För figurer med en loop-roll sätts bildtexter till ett högre z-index, och loopknappar stylas med specifika dimensioner och justering. Självhostade videoelement sätts till full bredd, begränsade till 620px, och inkluderar marginaler ovanför och under. För immersiva videolayouter tas breddbegränsningar bort, och marginaler justeras. På bredare skärmar expanderar immersiva videor i bredd och förskjuts åt vänster.
Färgvariabler definierar stilar för datumrader, kantlinjer, bildtexter och feature-element. I mörkt läge anpassas text- och ikonfärger till ett mörkt tema. Atomära element inom innehållskolumner har ingen utfyllnad. Specifika regler säkerställer att det första stycket efter vissa element eller horisontella linjer är korrekt stylat över olika innehållssektioner som artiklar, kommentarer och features. 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 ett initialt element, en inloggningsgrind eller en horisontell linje (förutom den sista) inom olika innehållskroppar, appliceras en specifik initialstil. Denna använder Guardian Headline-teckensnittet, är fetstilad, 111 pixlar stor med 92 pixlar radhöjd. Den flyter åt vänster, är versaler, använder border-box-storlek, har en marginal på 8 pixlar till höger, justeras mot toppen och använder en anpassad färgvariabel.
Stycken omedelbart efter en horisontell linje inom dessa innehållskroppar har ingen topputfyllnad.
Utdragscitat inom dessa innehållskroppar har en maximal bredd på 620 pixlar.
Bildtexter för showcase-element i huvudinnehåll och artikelbehållare är positionerade statiskt, tar full bredd upp till 620 pixlar.
Immersiva element sträcker sig över hela viewport-bredden, med hänsyn till scrollbaren. På större skärmar (upp till 71.24em) är de begränsade till 978 pixlar, med bildtextutfyllnad justerad vid olika brytpunkter. På medelstora skärmar (46.25em till 61.24em) är den maximala bredden 738 pixlar. På mindre skärmar (under 46.24em) justeras de mot vänsterkanten med justerade marginaler och bildtextutfyllnad.
För möbelomslagningar på stora skärmar (61.25em och uppåt) används en grid-layout med definierade kolumner och rader för positionering av rubrikkomponenter. CSS-stilarna definierar layout och utseende för en webbsidas rubriksektion, kallad "furniture-wrapper". Den sätter kantlinjer, mellanrum, typografi och grid-strukturer som anpassas över olika skärmstorlekar.
För större skärmar (över 71.25em) etableras en komplex grid-layout med specifika kolumner och rader för element som titel, rubrik, metainformation, ingress och porträtt. Visuella element som kantlinjer och linjer justeras eller tas bort vid vissa brytpunkter. Rubrikens teckenstorlek ökar och dess maximala bredd ändras på större skärmar. Länkar inom ingressen stylas med understrykningar som ändrar färg vid hovring. För skärmar bredare än 740 pixlar, dölj element med klassen `.keyline-4` eller attributet `[data-gu-name="lines"]`. Inom `.furniture-wrapper`, styla SVG-streck inom dessa element för att använda färgvariabeln `--headerBorder`.
På skärmar bredare än 740 pixlar, ta bort den högra marginalen från element med ID `#meta` eller attributet `[data-gu-name="meta"]` inuti `.furniture-wrapper`. För dessa metaelement, sätt kantlinjefärgen för sociala länkar, kommentarssektioner och deras underordnade span till `--headerBorder`. Dölj även alla `gu-island`-komponenter inom `.content__meta-container_dcr`.
För ingresssektionen (vald med klass, ID eller `data-gu-name`), applicera en negativ vänstermarginal och matchande utfyllnad, och sätt dess position till relativ. På bredare skärmar (över 740px), lägg till en liten topputfyllnad. Styla stycken inom ingressen med en teckensnittsvikt på 400, en storlek på 20 pixlar och en bottenutfyllnad på 14 pixlar.
Huvudmediadelen (vald med ID eller `data-gu-name`) är positionerad relativt, har ingen toppmarginal, en liten bottenmarginal och placeras i "porträtt"-grid-området. Se till att dess inre div-taggar tar full bredd och har ingen horisontell marginal. På mycket breda skärmar (över 980px), ta bort bottenmarginalen. På mindre skärmar (under 740px), sätt dess bredd till hela viewport-bredden minus eventuell scrollbar, och applicera en negativ vänstermarginal. För skärmar mellan 480px och 740px, öka denna negativa vänstermarginal till -20px.
Styla figurbildtexter för att vara positionerade absolut längst ner, med specifik utfyllnad och bakgrunds-/textfärger från CSS-variabler. Sätt deras bredd till 100% utan maximal bredd, ta bort bottenmarginalen och sätt en minsta höjd. Färglägg span inom bildtexten med `--headerBorder` och fyll deras SVG:er med samma färg. Dölj det första span-elementet och visa det andra span-elementet som ett blockelement, begränsat till 90% bredd. På skärmar bredare än 480px, öka bildtextens horisontella utfyllnad. En klass `.hidden` på bildtexten sätter dess opacitet till 0.
Bildtextknappen visas som ett block, positionerat absolut nära nedre högra hörnet, med ett högt z-index. Den har en cirkulär bakgrund, ingen kantlinje och specifik utfyllnad. Skala ner dess SVG-ikon något. På skärmar bredare än 480px, justera dess högerposition. För mycket breda skärmar (över 1140px), justera toppen och höjden på `.content__main-column--interactive` pseudo-elementet. Begränsa även den maximala bredden på h2-rubriker inom denna kolumn till 620 pixlar.
För rotelementet när kroppen har en `.ios` eller `.android` klass, definiera en uppsättning mörka lägesfärgvariabler. I ett mörkt färgschema, uppdatera variabeln `--new-pillar-colour` därefter.
På iOS-enheter, rikta in dig på det första stycket efter specifika initiala element i olika artikelbehållare och styla deras första bokstav. Detta gäller även om ett inloggningsgrindelement visas mellan det första elementet och stycket. Den första bokstaven i det första stycket efter en inloggningsgrind, eller efter ett elementatom följt av en inloggningsgrind, ska färgläggas med den sekundära pelarvariabeln. Detta gäller för feature-, standard- och kommentarsartikelbehållare på både iOS och Android.
På iOS och Android ska artikelrubrikens höjd sättas till noll i feature-, standard- och kommentarsartikelbehållare.
Möbelomslagningen i dessa behållare ska ha en topputfyllnad på 4 pixlar och horisontell utfyllnad på 10 pixlar. Innehållsetiketterna inom ska använda ett fetstilat serif-teckensnitt, vara färglagda med den nya pelarvariabeln och ha versaltext.
Rubriker inom möbelomslagningen ska vara 32 pixlar stora, fetstilade, ha en bottenutfyllnad på 12 pixlar och använda färgen #121212.
Bildelement inuti möbelomslagningen ska vara positionerade relativt, ha en toppmarginal på 14 pixlar, en vänstermarginal på -10 pixlar, en bredd beräknad som viewport-bredden minus scrollbar-bredden och en automatisk höjd. Detta gäller för den inre figuren, bilden och länkelementen inom feature-artikelbehållare på iOS. För iOS- och Android-enheter är bilder inom artikelbehållare inställda på att ha en genomskinlig bakgrund, med en bredd lika med hela viewport-bredden minus scrollbar-bredden och en automatisk höjd.
Ingresssektionen i dessa behållare har en topputfyllnad på 4 pixlar, en bottenutfyllnad på 24 pixlar och en höger marginal på -10 pixlar.
Stycken inom ingressen använder Guardian Headline-teckensnittsfamiljen.
Länkar inuti ingressen stylas med en specifik färg, en understrykning positionerad 6 pixlar från texten och en dekorativ linjefärg, utan kantlinje. För Android-enheter, när man hovrar över länkar i kommentarsartikelns ingresssektion, ska understrykningsfärgen matcha den nya pelarfärgen.
F
