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
