Ö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
