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. För varje stil specificerar koden tre olika teckensnittsfilformat (woff2, woff och ttf) som finns pÄ Guardians servrar, vilket sÀkerstÀller bred webblÀsarkompatibilitet.
@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));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width)) !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) {
.content__main-cFör interaktiva innehÄllskolumner lÀggs en vÀnsterkantlinje till med specifik positionering och z-index. PÄ större skÀrmar justeras kantlinjens position nÄgot. Inom dessa kolumner har atomelement inga marginaler ovanför eller under men inkluderar utfyllnad. NÀr ett stycke följer efter ett atomelement tas utfyllnaden bort och marginaler lÀggs till istÀllet. Inline-element begrÀnsas till en maximal bredd.
För figurer med en inline-roll har de ocksÄ en maximal bredd pÄ medelstora skÀrmar och större.
Anpassade egenskaper definierar olika fÀrger för element som datumrader, rubriker, bildtexter och features. Den primÀra pelarfÀrgen anvÀnder som standard feature-fÀrgen om den inte Àr instÀlld.
Atomelement inom interaktiva kolumner eller generellt har ingen utfyllnad. Det första stycket efter specifika element eller horisontella linjer i olika innehÄllskroppar fÄr extra topputfyllnad.
Dessutom Àr den första bokstaven i dessa stycken formaterad som en initial med ett specifikt teckensnitt, storlek, vikt och fÀrg, med anvÀndning av anpassade egenskaper för fÀrgsÀttning.För stycken som följer horisontella linjer i specifika innehÄllsomrÄden, ta bort topputfyllnad.
BegrÀnsa bredden pÄ utdragsblock till 620px i artikel-, interaktiv-, kommentar- och feature-kroppar.
För showcase-elementens bildtexter i huvudinnehÄll och artikelbehÄllare, sÀtt position till statisk, bredd till 100% och maxbredd till 620px.
Immersiva element bör strÀcka sig över hela visningsportens bredd minus rullningslisten. PÄ skÀrmar upp till 71.24em begrÀnsas deras bredd till 978px. För bildtexter pÄ dessa skÀrmar, lÀgg till 10px horisontell utfyllnad, vilket ökar till 20px pÄ skÀrmar mellan 30em och 71.24em.
PÄ mellanstora skÀrmar (46.25em till 61.24em) begrÀnsas immersiva element till 738px. PÄ mindre skÀrmar (upp till 46.24em) tas vÀnstermarginal bort, justeras till vÀnsterkanten och en negativ vÀnstermarginal pÄ 10px lÀggs till (20px pÄ skÀrmar 30em och bredare). Bildtexter pÄ dessa mindre skÀrmar fÄr 20px horisontell utfyllnad.
För furniture wrapper pÄ stora skÀrmar (61.25em och uppÄt) anvÀnds ett CSS-grid med definierade kolumner och rader. Formatera det första barnet till rubriker med en toppkantlinje. Positionera metasektionen relativt med topputfyllnad och ingen höger marginal. I standfirst-sektioner justeras bottenmarginaler, sÀtt listobjektets teckensnittsstorlek till 20px och formatera lÀnkar med understrykning (med en anpassad fÀrg för understrykningen som Àndras vid hovring). Det första stycket i standfirst fÄr en toppkantlinje och ingen bottenutfyllnad, Àven om denna kantlinje tas bort pÄ mycket stora skÀrmar (71.25em och uppÄt).
Dessutom, för figurer inom wrappern, ta bort vÀnstermarginal och sÀtt en maxbredd pÄ 630px för inline-element. PÄ de största skÀrmarna (71.25em och uppÄt) definieras grid-mallkolumnerna frÄn titel, rubrik och meta.Layouten anvÀnder ett grid med kolumner och rader definierade för olika skÀrmstorlekar. PÄ större skÀrmar har griddet tre kolumner för titel-, rubrik- och metasektioner, fem kolumner för standfirst och Ätta kolumner för portrÀtt, med proportionellt storleksbestÀmda rader. PÄ medelstora skÀrmar justeras griddet till tvÄ, fem respektive sju kolumner, med specifika radhöjder.
Formatering inkluderar en toppkantlinje för metasektionen och en vÀnsterkantlinje för standfirst, bÄda med en anpassad fÀrgvariabel. Rubriker har en maximal bredd och teckensnittsstorlek som Àndras med skÀrmstorleken och blir större pÄ bredare skÀrmar. Vissa element, som social delning och kommentarsektioner, har kantlinjer som matchar rubrikfÀrgen, medan andra Àr dolda pÄ vissa enheter.
Standfirst-texten har specifik utfyllnad och teckensnittsegenskaper, och huvudmediaomrÄdet Àr positionerat inom griddet, med dess bredd som justeras pÄ mindre skÀrmar för att ta hÀnsyn till rullningslister och marginaler. Bildtexter Àr absolutpositionerade.Furniture wrapperns figurtext Àr absolutpositionerad lÀngst ner utan bottenmarginal, med utfyllnad, en bakgrundsfÀrg och textfÀrg. Dess bredd Àr satt till 100% med en minsta höjd pÄ 46 pixlar. Inom bildtexten Àr det första spannet dolt, medan det andra visas och begrÀnsas till 90% av den maximala bredden. Bildtextens text och SVG-ikoner anvÀnder en specifik fÀrgvariabel.
PÄ skÀrmar bredare Àn 30em ökar bildtextens horisontella utfyllnad. En dedikerad bildtextknapp Àr absolutpositionerad lÀngst ner till höger, med en cirkulÀr bakgrund och skalad SVG-ikon, som justerar sin högerposition pÄ större skÀrmar.
För interaktiva huvudkolumner pÄ mycket breda skÀrmar justerar ett pseudoelement sin topp och höjd. Rubriker inom dessa kolumner har en maximal bredd.
PÄ iOS och Android definieras mörkt lÀges fÀrgvariabler, inklusive en feature-fÀrg som Àndras i mörkt lÀge. Specifika artikelbehÄllare pÄ dessa plattformar formaterar den första bokstaven i det första stycket efter vissa element med en sekundÀr fÀrg, sÀtter artikelrubrikens höjd till noll, justerar utfyllnad för furniture wrapper och döljer innehÄllsetiketterna inom den.För iOS- och Android-enheter gÀller följande stilar för feature-, standard- och kommentarartikelbehÄllare:
- Etiketter: AnvÀnder ett fetstilt, versalt teckensnitt i Guardian-rubrik eller serif-typ, fÀrgat med den nya pelarfÀrgsvariabeln.
- Rubriker: Satta till 32px, fetstil, med 12px bottenutfyllnad och en mörkgrÄ fÀrg (#121212).
- Bilder: Relativt positionerade, med 14px toppmarginal och negativ 10px vÀnstermarginal. Bredden strÀcker sig över hela visningsporten (med hÀnsyn till rullningslister) och höjden justeras automatiskt. Inre element, bilder och lÀnkar inom figuren har en transparent bakgrund, matchar hela visningsportens bredd med automatisk höjd.
- Standfirst (artikelsammanfattning): Inkluderar 4px topputfyllnad, 24px bottenutfyllnad och en negativ 10px höger marginal. Stycken inom standfirst Àrver dessa behÄllarstilar.CSS-koden sÀtter specifika stilar för artikelstandfirsts och metadata pÄ iOS- och Android-enheter. Den definierar teckensnittsfamiljer för standfirst-texten och anpassar lÀnkutseenden, inklusive fÀrg, understrykningsstil och hovringseffekter. Koden justerar ocksÄ marginaler för metadatasektioner och sÀkerstÀller konsekvent formatering för författarbyline och författarlÀnkar över olika artikltyper.Författarens namn i furniture wrapperns metasektion, tillsammans med relaterade lÀnkar och spann pÄ Android-enheter för bÄde standard- och kommentarartiklar, bör anvÀnda den nya pelarfÀrgen. PÄ iOS och Android bör den meta diverse-sektionen i feature-, standard- och kommentarartiklar ha ingen utfyllnad, och alla SVG-ikoner inom bör formateras med den nya pelarfÀrgen som streck.
För showcase-element i feature-, standard- och kommentarartiklar pÄ bÄde iOS och Android bör bildtextknappen visas som en flex-container. Den bör centreras med 5px utfyllnad, justerad bÄde horisontellt och vertikalt, storlek 28x28 pixlar och positionerad 14px frÄn höger.
Artikelkroppen i feature-, standard- och kommentarartiklar pÄ iOS och Android bör ha 12px utfyllnad till vÀnster och höger. Inom artikelkroppen ska bildfigurer som inte Àr miniatyrer eller immersiva ha ingen marginal. Deras bredd ska vara hela visningsportens bredd minus 24px och eventuell rullningslistbredd, med en automatisk höjd. Bildtexterna för dessa bilder ska ocksÄ följa dessa regler.För iOS- och Android-enheter bör immersiva bilder i feature-, standard- och kommentarartiklar strÀcka sig över hela visningsportens bredd, med hÀnsyn till rullningslisten.
Blockcitat inom artikelkroppen bör anvÀnda webbplatsens pelarfÀrg för sitt dekorativa element.
LÀnkar i artikeltexten bör formateras med den primÀra pelarfÀrgen, en understrykning och ingen bakgrundsbild. UnderstrykningsfÀrgen bör Àndras vid hovring.
I mörkt lÀge bör artikelrubriksomrÄdet ha en mörk bakgrund. Etiketter och rubriken bör anvÀnda specifika fÀrger för kontrast, och inledande text bör vara lÀsbar mot det mörka temat.Texten verkar vara ett fragment av CSS-kod, inte ett prosastycke att skriva om. Den innehÄller selektorer och stilregler som riktar sig mot specifika
