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
