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 normala och kursiva versioner. Teckensnitten laddas från Guardians servrar i tre olika filformat: WOFF2, WOFF och TrueType.
@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 specifika avstånd för element. Stycken som följer vissa element får 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. 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 huvudartiklar, features, standardartiklar och kommentarer ska vara positionerade statiskt, sträcka sig över hela bredden och även ha en maximal bredd på 620 pixlar.
Immersiva element ska sträcka sig över hela viewport-bredden, minus scrollbaren. På större skärmar (över 71.24em) är deras maximala bredd 978px, med justerad bildtextutfyllnad vid olika brytpunkter. På medelstora skärmar (mellan 46.25em och 61.24em) är den maximala bredden 738px. På mindre skärmar (under 46.24em) ska dessa element inte ha någon vänstermarginal och ska justeras till vänsterkanten, med justerade marginaler och bildtextutfyllnad för mycket små skärmar.
För furniture-wrappern på stora skärmar (över 61.25em) används en grid-layout med definierade kolumner och rader. Rubriker får en toppkantlinje, metainformation är positionerad relativt, och standfirst-text har specifik styling för länkar och avstånd. Figurer inom denna wrapper har justerade marginaler och en maximal bredd på 630px för inline-element. På extra stora skärmar (över 71.25em) justeras grid-mallen för att inkludera fler kolumner.
CSS:en definierar en grid-layout för en sidhuvud med områden för titel, rubrik, standfirst, metainformation och ett porträtt. Den sätter specifika dimensioner och positioner för dessa element vid olika skärmstorlekar. Styling inkluderar kantlinjer, teckensnitt och färger, med justeringar för sociala medie-ikoner, bildtexter och responsivt beteende i mobil- och desktopvyer.
CSS-koden definierar stilar för en webbsideslayout, med fokus på en komponent som heter "furniture-wrapper". Denna komponent har en mörk bakgrund och justerar sina marginaler och utfyllnad baserat på skärmstorlek. För större skärmar lägger den till dekorativa sidopaneler.
Inom denna wrapper stylas element som artikelhuvuden, rubriker och metainformation (som knappar för delning i sociala medier). Rubriker använder en ljusgrå färg och fetstil. Sociala knappar har färgade kantlinjer som matchar en temafärg, och de ändras till en solid färg vid hovring.
Koden hanterar också synligheten för bildtexter och en bildtextväxlingsknapp för mediaelement. Sammantaget säkerställer stilarna att layouten är responsiv och visuellt konsekvent över olika enheter.
Denna CSS-kod definierar stilar för en webbsidekomponent, troligen en sidopanel eller innehållswrapper. Den sätter textfärger, länkutseenden och layoutjusteringar för olika skärmstorlekar. Länkar stylas med specifika färger och understrykningar, och layouten inkluderar bakgrundselement som justeras baserat på viewport-bredd. Koden hanterar också kantlinjer och avstånd för olika element inom komponenten.
CSS-koden definierar stilar för artikeldelar och laddar anpassade teckensnitt. Den sätter kantlinjefärgen för kommentarer så att den matchar huvudets kantlinjefärg. För artikelrubriker används en lätt teckensnittsvikt som standard, men den byter till fetstil när rubriken innehåller en strong-tagg.
Dessutom importerar den teckensnittsfamiljen Guardian Headline Full i olika vikter och stilar (lätt, normal, medium, semifet, var och en med normala och kursiva versioner) från Guardians servrar, och specificerar flera filformat för webbläsarkompatibilitet.
Teckensnittet "Guardian Headline Full" definieras med flera stilar: semikursiv (vikt 600), fet (vikt 700), fet kursiv (vikt 700), svart (vikt 900) och svart kursiv (vikt 900). Varje stil inkluderar teckensnittsfiler i WOFF2-, WOFF- och TrueType-format, värd på Guardians servrar.
Dessutom definieras teckensnittet "Guardian Titlepiece" i sin feta stil (vikt 700), också med WOFF2-, WOFF- och TrueType-filer.
För iOS- och Android-enheter sätts en mörk bakgrundsfärg och specifika funktionsfärger. I mörkt läge justeras funktionsfärgen därefter.
På iOS och Android tillämpas specifika CSS-regler för att styla den första bokstaven i det första stycket i vissa artikelbehållare, efter specifika element som `.element-atom` eller inloggningsgrindar.
För Android-enheter stylas den första bokstaven i det första stycket i standard- och kommentarsartiklar 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 fett, 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 helbreddsmarginaler och automatisk höjd.
För Android-enheter ska bilder inom artikelbehållare ha en genomskinlig bakgrund, sträcka sig över hela viewport-bredden (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 överst och 24 pixlar underst, med en negativ marginal på 10 pixlar till höger.
Styckena inom denna introduktionstext ska använda Guardians rubrikteckensnittsfamilj.
Länkar inom denna text ska stylas med en specifik färg, en understrykning positionerad 6 pixlar under texten och en ljusgrå understrykningsfärg, utan bakgrundsbild eller kantlinje. Vid hovring ska understrykningen ändras till att matcha länkens textfärg.
Dessutom ska metadataavsnittet i artiklar på både iOS och Android få specifik styling.
Denna CSS-kod sätter stilar för artikelbehållare på iOS- och Android-enheter. Den justerar marginaler, färger, utfyllnad och knappvisning för olika artiklestyper och deras komponenter.
På iOS- och Android-enheter, för feature-, standard- och kommentarsartikelbehållare, stylas bilder som inte är miniatyrer eller immersiva så att de inte har någon marginal, 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 sätts till en bredd som är viewport-bredden minus scrollbar-bredden.
Inom artikelns brödtexts prose visar citerade blockcitat en färgad markör med en anpassad CSS-variabel. Länkar stylas med en specifik färg, en understrykning med 6 pixlars offset och en dekorationsfärg från en variabel. Vid hovring ändras understrykningsfärgen till en annan variabel.
I mörkt läge sätts bakgrundsfärgen för furniture-wrappern i dessa behållare till en mörkgrå (#1a1a1a).
För iOS- och Android-enheter använder innehållsetiketterna i feature-, standard- och kommentarsartiklar den nya pelarfärgen. Rubriker i dessa artiklar har ingen bakgrund och använder huvudets kantlinjefärg. Standfirst-texten och länkar, tillsammans med författarbyline, antar också den nya pelarfärgen. Ikoner i meta-avsnittet stylas med samma färg. Bildtexter för showcase-bilder använder datumlinjefärgen, och citerad text inom artikelns brödtext följer samma styling.
För iOS- och Android-enheter sätts textfärgen för citerade block inom artikelbrödtexter till en specifik pelarfärg. Dessutom tvingas bakgrundsfärgen för olika artikelbrödtextsbehållare till en mörk bakgrund. På iOS stylas den första bokstaven efter vissa element i dessa behållare med en initialeffekt.
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 tillämpas på olika artiklestyper (standard, feature, kommentar) 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å en media query för mörkt läge som justerar färger när användaren föredrar ett mörkt färgschema. Vissa element, som artikelhuvuden, döljs genom att deras opacitet sätts till noll.
CSS-koden sätter stilar för artikelbehållare
