ĂversĂ€tt följande text frĂ„n engelska till svenska: Denna CSS-kod definierar en anpassad teckensnittsfamilj som heter "Guardian Headline Full" med flera teckensnittsvikter och stilar. Den specificerar teckensnittsfilerna i olika format (WOFF2, WOFF och TrueType) och deras webbplatser för webblĂ€saren att ladda ner och anvĂ€nda. Teckensnittet inkluderar lĂ€tt (300), normal (400), medium (500) och halvfet (600) vikt, varje med normal och kursiv stil.
@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;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
left: -10px;
}
}För den interaktiva huvudkolumnen lÀggs en vÀnsterkantlinje till före innehÄllet, placerad 11 pixlar till vÀnster. Element inom denna kolumn har ingen marginal ovanför eller under men inkluderar 12 pixlar utfyllnad ovanför och under. NÀr ett stycke följs av ett element tas utfyllnaden bort och marginaler pÄ 12 pixlar appliceras istÀllet. Inline-element Àr begrÀnsade till en maximal bredd pÄ 620 pixlar, vilket ocksÄ gÀller för inline-figurer pÄ skÀrmar bredare Àn 61.25em.
Anpassade egenskaper definierar fÀrger för olika element, sÄsom datumlinje, rubrikkantlinje, bildtext och bakgrund, med en feature-fÀrg satt till röd och en ny pelarfÀrg som standard anvÀnder primÀr- eller feature-fÀrgen. Element med klassen atom har ingen utfyllnad.
För det första stycket efter specifika element eller ett horisontellt streck i olika innehÄllsomrÄden lÀggs en topputfyllnad pÄ 14 pixlar till. Den första bokstaven i dessa stycken Àr formgiven med en stor, fet, versal skrift i en specifik fÀrg, flyter till vÀnster med en marginal och vertikal justering.
Dessutom har stycken omedelbart efter ett horisontellt streck i dessa omrÄden ingen topputfyllnad.Utdrag inom specifika innehÄllsomrÄden har en maximal bredd pÄ 620 pixlar.
Showcase-elementbildtexter i huvudinnehÄll och artikelbehÄllare Àr positionerade statiskt med full bredd, Àven begrÀnsade till 620 pixlar.
Immersiva element strÀcker sig över hela visningsportens bredd minus rullningslisten. PÄ skÀrmar upp till 71.24em breda Àr dessa element begrÀnsade till 978 pixlar, med bildtextutfyllnad pÄ 10px pÄ mindre skÀrmar och 20px pÄ medelstora. Mellan 46.25em och 61.24em Àr den maximala bredden 738 pixlar. Under 46.24em justeras immersiva element till vÀnsterkanten med anpassade marginaler och 20px bildtextutfyllnad pÄ medelstora skÀrmar.
För furniture-omslag pÄ större skÀrmar (61.25em och uppÄt) anvÀnds en grid-layout med definierade kolumner och rader. Rubriker har en överkantlinje, metasektioner har topputfyllnad och standfirst-element inkluderar formgivna lÀnkar med understrykningar som byter fÀrg vid hovring. Inledningsvis har det första stycket i standfirst en överkantlinje, som tas bort pÄ bredare skÀrmar (71.25em och ovan). Figurer inom omslaget har ingen bottenmarginal och en vÀnsterförskjutning, med inline-element begrÀnsade till 630 pixlar. PÄ de största skÀrmarna justeras gridets kolumnstruktur för bÀttre layout.Layouten anvÀnder ett grid med specifika kolumner och rader för olika skÀrmstorlekar. PÄ större skÀrmar justeras griddet till att ha tre lika kolumner för titel, rubrik och metasektioner, följt av fem för standfirst och Ätta för portrÀtt, med radhöjder satta som brÄkdelar. Ett tunt streck visas ovanför metasektionen och standfirst har ett vertikalt streck pÄ vÀnster sida.
Rubriker Àr feta och Àndras i storlek och bredd beroende pÄ skÀrm: upp till 620px bredd och 32px teckenstorlek pÄ mindre skÀrmar, och 540px bredd med 50px teckenstorlek pÄ större. Vissa dekorativa linjer Àr dolda pÄ större skÀrmar och social delning och kommentarselement har kantlinjer som matchar rubrikens fÀrg.
Standfirst-texten Àr normal vikt, 20px i storlek, med utfyllnad underifrÄn och den Àr nÄgot förskjuten Ät vÀnster med vÀnsterutfyllnad. Huvudmediabilder fyller bredden och justerar marginaler för olika skÀrmstorlekar, med bildtexter placerade lÀngst ner med en bakgrundsfÀrg och anpassad textfÀrg. PÄ mycket smÄ skÀrmar strÀcker sig mediet över hela visningsportens bredd minus rullningslisten.Furniture-omslaget sÀtter en mörk bakgrund och justerar marginaler och utfyllnad för olika skÀrmstorlekar. PÄ större skÀrmar lÀgger det till dekorativa sidofÀlt. Rubriker Àr formgivna med fet, ljusgrÄ text och metainformation anvÀnder liknande fÀrger. Sociala medie-knappar har en distinkt fÀrg som Àndras vid hovring, vilket vÀxlar text- och bakgrundsfÀrger för kontrast. Bildtexter Àr dolda som standard men kan vÀxlas med en knapp, och olika element anpassar sin synlighet och layout baserat pÄ skÀrmbredd och andra förhÄllanden.Element med klassen "furniture-wrapper" och deras underordnade har specifika stilregler:
- MetasektionslÀnkar Àr fÀrgade med en anpassad egenskap för pelarfÀrgen eller en mörkt lÀges-funktionsfÀrg, med samma fÀrg applicerad vid hovring för bÄde text och understrykning.
- Standfirst-lÀnkar har ingen kantlinje, anvÀnder pelarfÀrgen eller mörkt lÀges-funktion för text, tar bort bakgrundsbilder och har understrykningar med 6px förskjutning och en rubrikkantlinjefÀrg. Vid hovring Àndras understrykningsfÀrgen till pelarfÀrgen eller mörkt lÀges-funktion.
- Standfirst-stycken och listobjekt Àr fÀrgade ljusgrÄ (#dcdcdc).
- För större skÀrmar (min-width: 61.25em) har det första stycket i standfirst en överkantlinje, som tas bort vid Ànnu större brytpunkter (min-width: 71.25em).
- Pseudo-element (:before och :after) anvÀnds för att skapa sidofÀlt med mörka bakgrunder och kantlinjer, som justerar deras bredd och position baserat pÄ visningsportsstorlek och rullningslistbredd för olika skÀrmstorlekar.
- Nyckellinjer och sociala/kommentarselement i metasektionen anvÀnder rubrikkantlinjens fÀrg för streck och formgivning.Kommentarsektionen har en kantlinjefÀrg som matchar rubrikens kantlinjefÀrg.
I artiklar har rubriker pÄ nivÄ tvÄ ett lÀtt teckensnittsvikt pÄ 200. Men om en rubrik pÄ nivÄ tvÄ innehÄller ett fetstilt element anvÀnder den en tyngre teckensnittsvikt pÄ 700.
Dessutom Àr teckensnittsfamiljen Guardian Headline Full definierad med olika stilar och vikter, inklusive lÀtt, normal, medium och halvfet, varje tillgÀnglig i normal och kursiv version. Dessa teckensnitt hÀmtas frÄn specifika URL:er i WOFF2, WOFF och TrueType-format.Denna CSS-kod definierar flera teckensnittsfamiljer och deras variationer för Guardian-webbplatsen. Den specificerar olika teckensnittsvikter och stilar (som fet, kursiv, halvfet, svart) för teckensnittet "Guardian Headline Full", varje med flera filformat (WOFF2, WOFF, TTF) för webblÀsarkompatibilitet. Dessutom inkluderar den teckensnittet "Guardian Titlepiece" i fet stil.
Koden sÀtter ocksÄ upp CSS-anpassade egenskaper (variabler) för fÀrger, justerar dem för mörkt lÀge pÄ iOS- och Android-enheter. Den inkluderar media queries för att hantera mörkt lÀgesinstÀllningar och applicerar specifik formgivning pÄ den första bokstaven i stycken i artikelbehÄllare pÄ iOS- och Android-plattformar, sÀrskilt nÀr de följer vissa element som atomer eller inloggningsgrindar.För Android- och iOS-enheter Àr den första bokstaven i det första stycket i standard- och kommentarartiklar formgiven med en sekundÀr pelarfÀrg. Artikelhuvudets höjd Àr satt till noll, medan furniture-omslaget har utfyllnad pÄ 4px överst, 10px pÄ sidorna och ingen underifrÄn.
InnehÄllsetiketter inom furniture-omslaget anvÀnder ett fetstilt, versalt teckensnitt frÄn Guardian-rubrikfamiljen i den nya pelarfÀrgen. Rubriker Àr 32px, feta, med 12px bottenutfyllnad och en mörkgrÄ fÀrg.
Bilder i furniture-omslaget Àr positionerade relativt, med en toppmarginal pÄ 14px, ingen bottenmarginal och en vÀnstermarginal pÄ -10px. Deras bredd strÀcker sig över hela visningsporten minus rullningslistens bredd och deras höjd justeras automatiskt. Inre figurelement, bilder och lÀnkar inom dessa figurer Àrver samma formgivning.För Android-enheter har bilder inom artikelbehÄllare en genomskinlig bakgrund och justerar sin bredd till hela visningsporten minus rullningslisten, med automatisk höjd.
PÄ bÄde iOS och Android har standfirst-sektionen i artikelbehÄllare topp- och bottenutfyllnad, med en negativ höger marginal. Texten inuti anvÀnder specifika teckensnittsfamiljer och lÀnkar Àr formgivna med en specifik fÀrg, understrukna med en anpassad förskjutning och fÀrg, och utan en bakgrundsbild eller kantlinje. NÀr de hovras över Àndras underst
