Denna CSS-kod definierar en anpassad teckensnittsfamilj som heter "Guardian Headline Full" med flera teckensnittsvikter och stilar. Den inkluderar lÀtt, normal, medium och semibold vikter, var och en med normala och kursiva varianter. Teckensnittsfilerna tillhandahÄlls i WOFF2, WOFF och TrueType-format, vÀrd pÄ Guardians servrar.
@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://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://interactive.guim.co.uk/fonts/garnett/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-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
Den interaktiva innehÄllskolonnen har en vÀnsterkantlinje och specifikt avstÄnd för element. Stycken som följer vissa element har extra topputfyllnad, och den första bokstaven i dessa stycken Àr formgiven som en stor, fÀrgad initial. Inline-element och figurer Àr begrÀnsade till en maximal bredd pÄ 620px pÄ större skÀrmar. Olika fÀrgvariabler definieras för konsekvent tematisering.
Utdrag inom specifika behÄllare ska ha en maximal bredd pÄ 620 pixlar.
Bildtexter för showcase-element i huvudinnehÄll och artikelbehÄllare ska vara positionerade statiskt, med en full bredd upp till 620 pixlar.
Immersiva element ska strÀcka sig över hela viewportens bredd, minus scrollbaren. PÄ större skÀrmar Àr de begrÀnsade till 978 pixlar, med bildtextutfyllnad anpassad för medelskÀrmar. PÄ mellanstora skÀrmar Àr den maximala bredden 738 pixlar. PÄ mindre skÀrmar justeras immersiva element till vÀnsterkanten med anpassade marginaler och bildtextutfyllnad.
För furniture wrappers pÄ större skÀrmar anvÀnds en grid-layout med definierade kolumner och rader. Rubriker har en toppkantlinje, metasektioner Àr positionerade relativt, och standfirst-innehÄll inkluderar specifik styling för lÀnkar och stycken. Figurer inom wrappern har ingen vÀnstermarginal och en maximal bredd pÄ 630 pixlar nÀr de Àr inline. PÄ extra stora skÀrmar justeras grid-mallens kolumner.
CSS:en definierar en grid-layout för en artikelhuvud med specifika omrÄden för titel, rubrik, standfirst, metainformation och en portrÀttbild. Den sÀtter stilar för kantlinjer, typografi och avstÄnd, och justerar dessa egenskaper över olika skÀrmstorlekar med hjÀlp av media queries. Till exempel ökar rubrikens teckensnittsstorlek pÄ större skÀrmar, och vissa element döljs eller ompositioneras nÀr viewporten Àndras. Huvudmediadelen Àr konfigurerad att vara fullbredd pÄ mobila enheter.
CSS-koden definierar stilar för en webbsidas layout, med fokus pÄ ett furniture wrapper-element. Den sÀtter bakgrundsfÀrger, marginaler, utfyllnad och responsivt beteende för olika skÀrmstorlekar. Stilarna inkluderar anpassade egenskaper för fÀrger, sÄsom mörkt lÀge och huvudkantlinjer. Specifika regler styr utseendet pÄ bildtexter, knappar, rubriker och metainformation, med justeringar för hover-effekter och sociala medie-ikoner. Media queries sÀkerstÀller att layouten anpassar sig frÄn mobil till desktop-vy, inklusive bredare skÀrmar dÀr sidobakgrunder lÀggs till.
Denna CSS-kod definierar stilar för en webbsidekomponent, troligen en sidopanel eller innehÄllswrapper. Den sÀtter fÀrger, kantlinjer och layoutjusteringar för olika element som lÀnkar, text och sociala medie-ikoner. Stilarna anpassar sig till olika skÀrmstorlekar med hjÀlp av media queries, Àndrar bredder och kantlinjer för att passa större skÀrmar. FÀrger hanteras med CSS-variabler för teman, sÄsom mörkt lÀge.
CSS-koden definierar stilar för artikeldelar och laddar anpassade teckensnitt. Den sÀtter kantlinjefÀrgen för kommentarer sÄ att den matchar huvudkantlinjens fÀrg. För artikelrubriker anvÀnds en lÀtt teckensnittsvikt, men rubriker med stark text görs fetstilade. Koden importerar ocksÄ Guardian Headline-teckensnittsfamiljen i olika vikter och stilar, inklusive lÀtt, normal, medium och semibold, i bÄde normala och kursiva versioner.
Teckensnittet "Guardian Headline Full" definieras med flera stilar: semibold kursiv (vikt 600), fet (vikt 700), fet kursiv (vikt 700), black (vikt 900) och black kursiv (vikt 900). Varje stil inkluderar teckensnittsfiler i WOFF2, WOFF och TrueType-format.
Dessutom definieras teckensnittet "Guardian Titlepiece" i dess feta stil (vikt 700), ocksÄ med WOFF2, WOFF och TrueType-filer.
För iOS- och Android-enheter sÀtts en mörk bakgrundsfÀrg (#1a1a1a) och specifika funktionsfÀrger. I mörkt lÀge justeras funktionsfÀrgen dÀrefter.
PÄ iOS och Android appliceras speciell styling pÄ den första bokstaven i det första stycket i artikelbehÄllare, efter vissa element som `.element-atom` eller inloggningsgrindar.
För Android-enheter Àr den första bokstaven i det första stycket i standard- och kommentarartiklar formgiven med en sekundÀr pelarfÀrg. PÄ bÄde iOS och Android döljs artikelhuvuden, och furniture wrappern har specifik utfyllnad. Etiketter inom furniture wrappern anvÀnder ett fetstilat, versalt teckensnitt med en ny pelarfÀrg. Rubriker sÀtts till 32px, fetstil, med bottenutfyllnad och en mörk fÀrg. Bildfigurer Àr positionerade relativt, med fullbreddsmarginaler och automatisk höjd.
För Android-enheter ska bilder inom artikelbehÄllare ha en genomskinlig bakgrund, strÀcka sig över hela viewportens bredd (med hÀnsyn till scrollbars) och justera sin höjd automatiskt.
PÄ bÄde iOS och Android ska introduktionstexten i artiklar ha specifikt avstÄnd: 4 pixlar utfyllnad pÄ toppen, 24 pixlar pÄ botten och en negativ marginal pÄ 10 pixlar till höger.
Styckena inom denna introduktionstext ska anvÀnda Guardians rubrikteckensnittsfamilj.
LÀnkar inom denna text ska vara formgivna med en specifik fÀrg, en understrykning positionerad 6 pixlar under texten och en ljusgrÄ understrykningsfÀrg. De ska inte ha nÄgon bakgrundsbild eller bottenkantlinje. Vid hovring ska understrykningen Àndras till att matcha lÀnkens textfÀrg.
Dessutom ska artikelmetadata-sektionen vara formgiven konsekvent för bÄda operativsystemen.
Denna CSS-kod sÀtter stilar för artikelbehÄllare pÄ Android- och iOS-enheter. Den justerar marginaler, fÀrger, utfyllnad och knappvisning för olika artikltyper och deras komponenter.
PÄ iOS- och Android-enheter, för feature-, standard- och kommentarartikelbehÄllare, har bilder som inte Àr miniatyrer eller immersiva en marginal pÄ noll, en bredd berÀknad frÄn viewporten minus 24 pixlar och scrollbar-bredden, och en automatisk höjd. Deras bildtexter har ingen utfyllnad.
Immersiva bilder i dessa behÄllare har en bredd berÀknad frÄn viewporten minus scrollbar-bredden.
Inom artikelns brödtexts prose anvÀnder citerade blockcitat den nya pelarfÀrgen för sitt dekorativa element. LÀnkar Àr formgivna med den primÀra pelarfÀrgen, en understrykning med 6px offset och en kantlinjefÀrg som understrykning, vilken Àndras till den nya pelarfÀrgen vid hovring.
I mörkt lÀge sÀtts furniture wrapperns bakgrundsfÀrg till #1a1a1a.
För iOS- och Android-enheter anvÀnder innehÄllsetiketter i feature-, standard- och kommentarartiklar den nya pelarfÀrgen.
PÄ bÄde iOS och Android har huvudrubriken i dessa artikltyper ingen bakgrund och anvÀnder huvudkantlinjens fÀrg för texten.
Standfirst-texten i dessa artiklar anvÀnder ocksÄ huvudkantlinjens fÀrg. LÀnkar inom standfirst, samt författarsignaturer och deras lÀnkar, Àr formgivna med den nya pelarfÀrgen.
Ikoner i artikelmetadata anvÀnder den nya pelarfÀrgen för sina streck.
Bildtexter för showcase-bilder i dessa artiklar anvÀnder datumlinjens fÀrg.
Slutligen har citerad text inom artikelns brödtext pÄ iOS den angivna styling.
För iOS- och Android-enheter sÀtts textfÀrgen för citerade block inom artikelbrödtexter till en specifik variabelfÀrg.
Dessutom tvingas bakgrundsfÀrgen för olika artikelbrödtextsbehÄllare pÄ bÄde iOS och Android till en mörk bakgrund med en important-deklaration.
Vidare, för iOS-enheter, Àr den första bokstaven efter vissa element som atomer, inloggningsgrindar eller specifika ID:n inom artikelbrödtexter formgiven, Àven om den exakta styling Àr avklippt i den medföljande texten.
Detta verkar vara en CSS-selektor som riktar sig mot den första bokstaven i stycken i specifika artikelbehÄllare pÄ iOS- och Android-enheter. Selektorn appliceras pÄ olika artikltyper (standard, feature, comment) och tar hÀnsyn till olika sidstrukturer och inloggningsgrindselement.
Denna CSS-kod sÀtter stilar för specifika element pÄ Android- och iOS-enheter. Den definierar fÀrger, utfyllnad, marginaler och andra visuella egenskaper för olika artikelbehÄllare, knappar och textelement. Koden inkluderar ocksÄ preferenser för mörkt lÀge och sÀtter vissa huvuden att vara osynliga.
CSS-koden sÀtter stilar för artikelbehÄllare pÄ iOS- och Android-enheter. Den tar bort marginaler frÄn furniture wrappers och justerar fÀrger för etiketter, rubriker och lÀnkar baserat pÄ anpassade egenskaper. Rubriker sÀtts till en ljusgrÄ fÀrg, medan lÀnkar och etiketter anvÀnder en
