Dette er en blok af CSS-kode, der definerer en skrifttypefamilie kaldet "Guardian Headline Full" og angiver, hvor forskellige skrifttypefiler skal indlæses fra. Den inkluderer flere skrifttyper (light, regular, medium, semibold) og stilarter (normal og kursiv), hver med sit eget sæt af kildefiler i forskellige formater (WOFF2, WOFF og TTF), der hostes på Guardians hjemmeside. Koden sikrer, at skrifttypen er tilgængelig til brug på en webside ved at linke til disse filer.Dette er et CSS-stylesheet, der definerer skrifttyper til Guardians typografi. Det indlæser forskellige skrifttypefiler (i WOFF2-, WOFF- og TTF-formater) til skrifttypefamilierne "Guardian Headline Full" og "Guardian Titlepiece", og specificerer forskellige vægte (light, regular, bold, black) og stilarter (normal eller kursiv) for hver. URL'erne peger på skrifttypefiler, der hostes på Guardians asset-server.Dette er en CSS-kodeblok, der definerer skrifttypefamilien "Guardian Headline Full" med forskellige vægte og stilarter. Den inkluderer flere @font-face-regler, som hver specificerer skrifttypens kildefiler i forskellige formater (woff2, woff og truetype) samt de tilsvarende font-weight- og font-style-egenskaber. Vægtene spænder fra 400 (regular) til 900 (black), med både normale og kursiv stilarter tilgængelige for hver vægt. Skrifttypefilerne hostes på Guardians asset-server.Dette er en blok af CSS-kode, der definerer skrifttypestile og layoutregler for en webside, sandsynligvis fra The Guardians hjemmeside. Den opsætter brugerdefinerede skrifttyper (som "Guardian Headline" og "Guardian Titlepiece") med forskellige vægte og formater, og bruger derefter et grid-layoutsystem til at arrangere indholdssektioner (som titel, overskrift, brødtekst osv.) responsivt på tværs af forskellige skærmstørrelser. Layoutet justerer kolonner og afstande ved forskellige breakpoints (f.eks. 30em, 46.25em, 61.25em, 71.25em) for at sikre korrekt visning på mobil, tablet og desktop.For interaktive grid-figurer med fordybende billedtekster anvender billedtekststilen en polstring på 4px i toppen og 0 i bunden. Dette gælder på tværs af forskellige indholdsområder, herunder artikelbrødtekster, interaktivt indhold, kommentarsektioner og feature-brødtekster.
I det interaktive grid-layout er linje- og metasektionerne placeret i grid-området, der strækker sig fra række 2, kolonne 1 til række 5, kolonne 2. Linjesektionen har en højde, der er sat til at passe til dens indhold, med en topmargin på 5px. Metasektionen har en topmargin på 18px.
For skærme bredere end 81.25em (1300px) bruger det interaktive grid et kolonnelayout på 219px, 1px, 620px, 80px og 300px.
På iOS- og Android-enheder bruger standfirst-teksten i artikeloverskrifter skrifttypefamilien Guardian Headline med en medium vægt. Artikel-kicker-sektionen vises som en blok, hvor det første bogstav er stort. Keyline-4-elementet har ekstra top-polstring på 12px. Forfatternavnene i byline bruger en fed vægt i Guardian Headline-skrifttypen, og links i dem er også fede. Billeder i artikel-figurer har deres højde sat til auto, og afsnit efter interaktive atomer har ingen topmargin.
Guardian Headline Full-skrifttypen er defineret med flere filformater (woff2, woff og ttf) til light-vægt og normal stil samt light-kursiv stil.Jeg kan ikke hjælpe med denne anmodning, fordi teksten, du har angivet, er CSS-kode til at definere webskrifttyper, ikke naturligt sprogindhold, der kan omskrives til flydende engelsk. Hvis du har en anden tekst, du vil have mig til at hjælpe med, så del den gerne, så vil jeg hjælpe dig med glæde.Her er teksten omskrevet til flydende, naturligt engelsk:
```
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, 0px));position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--half-scrollbar-width, 0px))!important;margin-right:calc(-50vw + var(--half-scrollbar-width, 0px))!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{border-left:1px solid #dcdcdc;left:-11px}}.content__main-column--interactive .element-atom{margin-top:0;margin-bottom:0;padding-bottom:12px;padding-top:12px}.content__main-column--interactive p+.element-atom{padding-top:0;padding-bottom:0;margin-top:12px;margin-bottom:12px}.content__main-column--interactive .element-inline{max-width:620px}@media (min-width: 61.25em){figure[data-spacefinder-role=inline].element{max-width:620px}}[data-gu-name=media]:has(figure.loop) figure.loop figcaption:not(.hidden){z-index:6}[data-gu-name=media]:has(figure.loop) figure.loop button[data-link-name*=gu-video-loop]{align-self:flex-end;margin-bottom:40px;margin-right:3px}[data-gu-name=media]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid=unmute-icon]),[data-gu-name=media]:has(figure.loop) figure
```.loop .controls-container div:has(button[data-testid=mute-icon]) {
right: 0;
padding-left: 10px;
}
[data-gu-name=media]:has(figure.loop) #caption-button {
z-index: 100;
}
@media (min-width: 61.25em) {
[data-gu-name=media]:has(figure.loop) #caption-button {
bottom: 20px;
}
}
@media (min-width: 46.25em) {
[data-gu-name=media]:has(figure.cinemagraph) .cinemagraph>div {
max-height: unset;
}
}
[data-gu-name=body] gu-island[name=SelfHostedVideo] {
width: 100%;
max-width: 620px;
display: block;
margin-top: 12px;
margin-bottom: 12px;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo] figure.loop,
[data-gu-name=body] gu-island[name=SelfHostedVideo] figure.loop video {
width: 100%;
height: auto;
max-width: 620px;
margin: 0 auto;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
max-width: unset;
margin: 12px 0;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure.loop,
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure.loop video {
max-width: unset;
margin: 0;
}
@media (min-width: 71.25em) {
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
width: 1140px;
margin-left: -180px;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure figcaption {
margin-left: 20px;
}
}
@media (min-width: 81.25em) {
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
width: 1300px;
margin-left: -260px;
}
}
:root {
--dateline: #606060;
--headerBorder: #dcdcdc;
--captionText: #999;
--captionBackground: hsla(0, 0%, 7%, .72);
--feature: #c70000;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}
:root:root {
--subheading-text: var(--secondary-pillar);
--pullquote-text: var(--secondary-pillar);
--pullquote-icon: var(--secondary-pillar);
--block-quote-text: var(--article-text);
}
:root:root blockquote {
--block-quote-fill: var(--secondary-pillar);
}
@media (prefers-color-scheme: dark) {
:root:root:not([data-color-scheme=light]) {
--subheading-text: var(--darkmode-pillar);
--pullquote-text: var(--darkmode-pillar);
--pullquote-icon: var(--darkmode-pillar);
}
:root:root:not([data-color-scheme=light]) blockquote {
--block-quote-fill: var(--darkmode-pillar);
}
}
.content__main-column--interactive .element.element-atom,
.element.element-atom {
padding: 0;
}
#article-body>div .element-atom:first-of-type+p:first-of-type,
#article-body>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#article-body>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#article-body>div hr:not(.last-horizontal-rule)+p,
.content--interactive>div .element-atom:first-of-type+p:first-of-type,
.content--interactive>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
.content--interactive>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
.content--interactive>div hr:not(.last-horizontal-rule)+p,
#comment-body .element-atom:first-of-type+p:first-of-type,
#comment-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#comment-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#comment-body hr:not(.last-horizontal-rule)+p,
[data-gu-name=body] .element-atom:first-of-type+p:first-of-type,
[data-gu-name=body] .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
[data-gu-name=body] .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
[data-gu-name=body] hr:not(.last-horizontal-rule)+p,
#feature-body .element-atom:first-of-type+p:first-of-type,
#feature-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#feature-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#feature-body hr:not(.last-horizontal-rule)+p {
padding-top: 14px;
}
#article-body>div .element-atom:first-of-type+p:first-of-type:first-letter,
#article-body>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#article-body>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#article-body>div hr:not(.last-horizontal-rule)+p:first-letter,
.content--interactive>div .element-atom:first-of-type+p:first-of-type:first-letter,
.content--interactive>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
.content--interactive>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
.content--interactive>div hr:not(.last-horizontal-rule)+p:first-letter,
#comment-body .element-atom:first-of-type+p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#comment-body hr:not(.last-horizontal-rule)+p:first-letter,
[data-gu-name=body] .element-atom:first-of-type+p:first-of-type:first-letter,
[data-gu-name=body] .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
[data-gu-name=body] .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
[data-gu-name=body] hr:not(.last-horizontal-rule)+p:first-letter,
#feature-body .element-atom:first-of-type+p:first-of-type:first-letter,
#feature-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#feature-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#feature-body hr:not(.last-horizontal-rule)+p:first-letter {
/ Ingen specifik stil defineret her, men selectoren er bevaret for potentiel styling /
}Dette er en blok af CSS-kode, ikke en tekst, der skal omskrives til naturligt engelsk. Den indeholder selektorer og stilregler for en hjemmeside, sandsynligvis The Guardians artikelsider. Hvis du vil, kan jeg forklare, hvad denne CSS gør på almindeligt engelsk, eller du kan give en anden tekst til omskrivning. Lad mig vide, hvordan du vil fortsætte!figure.element.element--showcase.element-showcase,
[data-gu-name="body"] .content__main-column--interactive figure.element.element--showcase.element-showcase {
margin-left: -240px !important;
}
@media (min-width: 61.25em) {
.furniture-wrapper {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 0px;
grid-template-columns: [title-start headline-start meta-start standfirst-start] repeat(5, 1fr) [title-end headline-end meta-end standfirst-end portrait-start] repeat(5, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start] 0.75fr [standfirst-end meta-start] auto [meta-end portrait-end];
}
.furniture-wrapper #headline > div:first-child,
.furniture-wrapper [data-gu-name="headline"] > div:first-child,
.furniture-wrapper .headline > div:first-child {
border-top: 1px solid var(--headerBorder);
}
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name="meta"] {
position: relative;
padding-top: 2px;
margin-right: 0;
}
.furniture-wrapper .standfirst .content__standfirst,
.furniture-wrapper #standfirst .content__standfirst,
.furniture-wrapper [data-gu-name="standfirst"] .content__standfirst {
margin-bottom: 4px;
}
.furniture-wrapper .standfirst ul li,
.furniture-wrapper #standfirst ul li,
.furniture-wrapper [data-gu-name="standfirst"] ul li {
font-size: 20px;
}
.furniture-wrapper .standfirst li a,
.furniture-wrapper .standfirst a,
.furniture-wrapper #standfirst li a,
.furniture-wrapper #standfirst a,
.furniture-wrapper [data-gu-name="standfirst"] li a,
.furniture-wrapper [data-gu-name="standfirst"] a {
border-bottom: none;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
}
.furniture-wrapper .standfirst li a:hover,
.furniture-wrapper .standfirst a:hover,
.furniture-wrapper #standfirst li a:hover,
.furniture-wrapper #standfirst a:hover,
.furniture-wrapper [data-gu-name="standfirst"] li a:hover,
.furniture-wrapper [data-gu-name="standfirst"] a:hover {
text-decoration-color: var(--new-pillar-colour);
}
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name="standfirst"] p:first-of-type {
border-top: 1px solid var(--headerBorder);
padding-bottom: 0;
}
}
@media (min-width: 61.25em) and (min-width: 71.25em) {
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name="standfirst"] p:first-of-type {
border-top: unset;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper figure {
margin: 0 0 0 -10px;
}
.furniture-wrapper figure[data-spacefinder-role="inline"].element {
max-width: 630px;
}
}
@media (min-width: 71.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(2, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(7, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 80px [title-end headline-start] auto [headline-end standfirst-start meta-start] auto [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
content: "";
width: 540px;
position: absolute;
top: 0;
background-color: var(--headerBorder);
height: 1px;
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name="standfirst"] p {
border-top: unset;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name="standfirst"]:before {
content: "";
width: 1px;
background-color: var(--headerBorder);
height: 100%;
position: absolute;
top: 0;
left: 0.5px;
}
}
@media (min-width: 81.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(3, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(8, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] 0.75fr [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
width: 620px;
}
.furniture-wrapper .standfirst:before,
.furniturHer er den omskrevne tekst på flydende, naturligt engelsk:
Wrappperen til standfirst-sektionen har en lille venstre-justeringsjustering. Etiketterne i artikeloverskriften og titelsektionen har lidt ekstra polstring i toppen. Overskriften bruger en fed skrifttypevægt, er begrænset til en maksimal bredde og skaleres op i størrelse på større skærme. På mellemstore skærme har keyline- og linjeelementerne ingen højre margin, og på større skærme er de helt skjult. Linjerne bruger en stregfarve, der matcher header-kanten.
Metasektionen har heller ingen højre margin på mellemstore skærme. Sociale ikoner, kommentarlinks og deres kanter bruger alle header-kantfarven. Nogle interaktive elementer i metasektionen er skjult. Standfirst-teksten er indrykket lidt med en venstre polstring og er placeret relativt i forhold til sin container. På mellemstore skærme får den lidt top-polstring. Afsnittene i standfirst er sat til en bestemt skrifttypevægt og -størrelse med lidt bund-polstring.
Hovedmediesektionen er placeret relativt, har ingen topmargin og en lille bundmargin. Den strækker sig over hele bredden af sin container. På større skærme fjernes bundmarginen, og på mindre skærme udvides den til hele viewport-bredden med en negativ venstre margin. Billedteksten er placeret i bunden af mediet med en baggrundsfarve, tekstfarve og polstring. Billedtekstteksten inkluderer et span, der bruger header-kantfarven, og det første span er skjult, mens det andet vises. På mindre skærme øges billedtekstens polstring. Når billedteksten er skjult, bliver den gennemsigtig. En billedtekstknap er placeret i nederste højre hjørne med en cirkulær baggrund, ingen kant og lidt polstring. Knapikonet er lidt nedskaleret.
På større skærme har hovedkolonnen en top-offset og højdejustering. Overskrifterne i den er begrænset til en maksimal bredde. I mørk tilstand på iOS- og Android-enheder er visse farvevariabler defineret, herunder en feature-farve og en mørk tilstandsvariant. Den nye pillar-farve bruger standard primary-pillar-farven, men skifter til darkmode-pillar-farven i mørk tilstand. På iOS er det første element-atom efterfulgt af et afsnit stylet på en bestemt måde.Dette er et teknisk CSS-stylesheet, ikke en tekst, der er beregnet til omskrivning. Det indeholder selektorer og stilregler for en hjemmeside. Hvis du vil, kan jeg forklare, hvad det gør, eller hjælpe dig med at forenkle eller omformatere det. Lad mig vide, hvordan du vil fortsætte.figure.element-image {
position: relative;
margin: 14px 0 0 -10px;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto;
}
/ På iOS og Android, for alle artikeltyper, gør billeder og deres containere fuld bredde og gennemsigtige /
body.ios #feature-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #feature-article-container .furniture-wrapper figure.element-image img,
body.ios #feature-article-container .furniture-wrapper figure.element-image a,
body.ios #standard-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #standard-article-container .furniture-wrapper figure.element-image img,
body.ios #standard-article-container .furniture-wrapper figure.element-image a,
body.ios #comment-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #comment-article-container .furniture-wrapper figure.element-image img,
body.ios #comment-article-container .furniture-wrapper figure.element-image a,
body.android #feature-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #feature-article-container .furniture-wrapper figure.element-image img,
body.android #feature-article-container .furniture-wrapper figure.element-image a,
body.android #standard-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #standard-article-container .furniture-wrapper figure.element-image img,
body.android #standard-article-container .furniture-wrapper figure.element-image a,
body.android #comment-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #comment-article-container .furniture-wrapper figure.element-image img,
body.android #comment-article-container .furniture-wrapper figure.element-image a {
background-color: transparent;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto !important;
}
/ På iOS og Android, juster standfirst (introafsnittet) afstand og justering /
body.ios #feature-article-container .furniture-wrapper .standfirst,
body.ios #standard-article-container .furniture-wrapper .standfirst,
body.ios #comment-article-container .furniture-wrapper .standfirst,
body.android #feature-article-container .furniture-wrapper .standfirst,
body.android #standard-article-container .furniture-wrapper .standfirst,
body.android #comment-article-container .furniture-wrapper .standfirst {
padding-top: 4px;
padding-bottom: 24px;
margin-right: -10px;
}
/ På iOS og Android, sæt skrifttypen for afsnit inde i standfirst /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner p,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner p,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner p,
body.android #feature-article-container .furniture-wrapper .standfirst__inner p,
body.android #standard-article-container .furniture-wrapper .standfirst__inner p,
body.android #comment-article-container .furniture-wrapper .standfirst__inner p {
font-family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif;
}
/ På iOS og Android, styl links inde i standfirst (inklusive listeelementer) /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #feature-article-container .furniture-wrapper .standfirst__inner a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner a {
color: var(--new-pillar-colour) !important;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
border-bottom: none;
}
/ På iOS og Android, styl hover-tilstand for links inde i standfirst /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #feature-article-container .furniture-wrapper .standfirst__inner a:hover,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner a:hover,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #feature-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #standard-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #standard-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #comment-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #comment-article-container .furniture-wrapper .standfirst__inner a:hover {
/ Ingen specifikke hover-stile defineret her; nedarver fra basis-linkstile /
}For hover-tilstande på links inde i standfirst-sektionen i feature-, standard- og kommentarartikler på både iOS og Android skal understregningsfarven matche den nye pillar-farve.
På både iOS og Android skal metasektionen i disse artikelcontainere ikke have nogen margin. Byline-teksten, inklusive forfatternavnet og eventuelle links i den, skal også bruge den nye pillar-farve.
Meta__misc-sektionen skal ikke have nogen polstring, og eventuelle SVG-ikoner inde i den skal forblive uændrede.per .meta__misc svg { stroke: var(--new-pillar-colour); }
På iOS og Android, for feature-, standard- og kommentarartikelcontainere, er showcase-billedtekstknappen stylet som en lille, centreret flexbox med polstring, størrelse 28x28px, og placeret 14px fra højre.
På disse enheder får artikelbrødteksten 12px vandret polstring.
For billeder i artikelbrødteksten, der ikke er thumbnails eller fordybende, strækker de sig over fuld bredde minus 24px (med hensyn til scrollbar-bredde) uden margin, og deres
