Dette er en blokk med CSS-kode som definerer egendefinerte fonter for et nettsted. Den setter opp skriftfamilien "Guardian Headline Full" med forskjellige stiler og vekter, som lys, vanlig, medium og semibold, hver med normale og kursivversjoner. Koden spesifiserer hvor fontfilene skal lastes ned fra, ved å bruke forskjellige formater som WOFF2, WOFF og TTF for å sikre kompatibilitet på tvers av nettlesere.Dette er en blokk med CSS-kode, ikke en tekstpassasje. Den definerer fontstiler og layoutregler for et nettsted. Her er en forklaring på vanlig engelsk av hva den gjør:
Koden setter opp egendefinerte fonter for Guardian-nettstedet, inkludert "Guardian Headline Full" i ulike vekter (fet, svart, og deres kursivversjoner) og "Guardian Titlepiece" i fet. Disse fontene lastes fra Guardians asset-server i flere formater (WOFF2, WOFF og TTF) for å sikre kompatibilitet på tvers av nettlesere.
Den inneholder også responsive designregler for en spesifikk sidelayout kalt "content__main-column--interactive." På bredere skjermer (over 71.25em) får denne kolonnen en venstremarg på 160px, og på enda bredere skjermer (over 81.25em) øker margen til 240px. Inne i denne kolonnen er visse elementer som "element-atom" begrenset til en maksimal bredde på 620px, men på mindre skjermer (under 46.24em) kan de ta opp full bredde.
For "element-showcase"-elementer er det ingen venstremarg på mobil, men på mellomstore skjermer (46.25em og oppover) er de begrenset til 620px brede, og på store skjermer (71.25em og oppover) kan de utvides til 860px. "Element-immersive"-elementer er designet for å være fullbredde: på mobil strekker de seg over hele viewporten, på mellomstore skjermer forskyves de litt og strekker seg utover kolonnen, og på store skjermer justeres de normalt med en maksimal bredde på 1260px.
Til slutt er avsnitt og lister i denne kolonnen også begrenset til 620px brede, og det er et dekorativt pseudo-element (":before") som strekker seg over hele høyden av kolonnen pluss 15px, med en minimumshøyde på 100px, plassert øverst..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;
}
.content__main-column--interactive .element-atom:first-of-type + p:first-of-type,
.content__main-column--interactive .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
.content__main-column--interactive .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
.content__main-column--interactive .element-atom:first-of-type + .element-atom + p:first-of-type,
.content__main-column--interactive hr:not(.last-horizontal-rule) + p,
.content__main-column--interactive hr:not(.last-horizontal-rule) + .ad-slot-container + p,
#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 .element-atom:first-of-type + .element-atom + p:first-of-type,
#article-body > div hr {
/ Ingen spesifikke stiler definert her; selectorlisten er sannsynligvis ment å målrette disse elementene for et eller annet formål. /
}Det første avsnittet etter en horisontal linje eller et element-atom får ekstra topputfylling, med mindre det er den siste horisontale linjen. Dette gjelder på tvers av ulike seksjoner som artikkelbrødtekst, interaktivt innhold, kommentarer og feature-seksjoner.
På samme måte er den første bokstaven i det første avsnittet stylet med en drop cap-effekt, men bare i spesifikke sammenhenger som den interaktive hovedkolonnen, artikkelbrødteksten og kommentarseksjonene.Her er den omskrevne teksten i flytende, naturlig engelsk:
---
Følgende CSS-regler gjelder for den første bokstaven i visse avsnitt, og gir dem en stor, fet, versal drop cap-stil. Dette påvirker avsnitt som kommer rett etter spesifikke elementer som horisontale linjer eller innholdsblokker, men bare når de er det første avsnittet i brødtekst- eller feature-seksjonene. Stylingen bruker Guardian-headline-fonten, setter skriftstørrelsen til 111 piksler, og justerer bokstaven til venstre med en liten marg. Fargen styres av en egendefinert egenskap, med en fallback til pillar-fargen.
For interaktivt innhold og artikkelbrødtekster har avsnitt som følger en horisontal linje eller en annonsebeholdercontainer ingen ekstra topputfylling.
Pull quotes i brødtekst-, feature-, kommentar- og interaktive seksjoner er begrenset til en maksimal bredde på 620 piksler.
Bildetekster for showcase-bilder er normalt statisk plassert og tar opp full bredde, opptil 620 piksler. På bredere skjermer (over 71.25em) blir de imidlertid absolutt plassert med en maksimal bredde på 140 piksler, og på enda bredere skjermer (over 81.25em) øker maksimalbredden til 220 piksler.
Immersive elementer strekker seg til full viewport-bredde, med hensyn til rullefeltbredde. På mindre skjermer (opptil 71.24em) er de begrenset til 978 piksler, og bildetekstene deres har horisontal utfylling som justeres basert på skjermstørrelse—10 piksler på veldig små skjermer og 20 piksler på mellomstore. Mellom 46.25em og 61.24em er maksimalbredden 738 piksler. På veldig små skjermer (opptil 46.24em) forskyves elementet til venstre med negative marger, og bildetekstutfyllingen er satt til 20 piksler på skjermer som er minst 30em brede.
For showcase-figurer i brødtekst- eller interaktive kolonner brukes en negativ venstremarg på 160 piksler på skjermer bredere enn 71.25em.
---
Gi meg beskjed hvis du trenger ytterligere justeringer.[body] .content__main-column--interactive figure.element.element--showcase.element-showcase {
margin-left: -240px !important;
}
.furniture-wrapper {
position: relative;
}
@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] .25fr [title-end headline-start] 1fr [headline-end standfirst-start] .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);
text-decoration-thickness: 1px;
}
.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: .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] .25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] .75fr [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
width: 620px;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name="standfirst"]:before {
/ Ingen flere stiler spesifisert /
}
}.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name="standfirst"]:before {
left: -0.5px;
}
.furniture-wrapper .article-header .content__labels > div,
.furniture-wrapper [data-gu-name="title"] .content__labels > div {
padding-top: 2px;
}
.furniture-wrapper #headline h1,
.furniture-wrapper [data-gu-name="headline"] h1,
.furniture-wrapper .headline h1 {
font-weight: 600;
max-width: 620px;
font-size: 32px;
}
@media (min-width: 71.25em) {
.furniture-wrapper #headline h1,
.furniture-wrapper [data-gu-name="headline"] h1,
.furniture-wrapper .headline h1 {
max-width: 540px;
font-size: 50px;
}
}
@media (min-width: 46.25em) {
.furniture-wrapper .keyline-4,
.furniture-wrapper [data-gu-name="lines"] {
margin-right: 0;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper .keyline-4,
.furniture-wrapper [data-gu-name="lines"] {
display: none;
}
}
.furniture-wrapper .keyline-4 svg,
.furniture-wrapper [data-gu-name="lines"] svg {
stroke: var(--headerBorder);
}
@media (min-width: 46.25em) {
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name="meta"] {
margin-right: 0;
}
}
.furniture-wrapper #meta .meta__social,
.furniture-wrapper #meta .meta__social ul li a span,
.furniture-wrapper #meta .meta__comment,
.furniture-wrapper [data-gu-name="meta"] .meta__social,
.furniture-wrapper [data-gu-name="meta"] .meta__social ul li a span,
.furniture-wrapper [data-gu-name="meta"] .meta__comment {
border-color: var(--headerBorder);
}
.furniture-wrapper #meta .content__meta-container_dcr > div > gu-island,
.furniture-wrapper [data-gu-name="meta"] .content__meta-container_dcr > div > gu-island {
display: none;
}
.furniture-wrapper .standfirst,
.furniture-wrapper #standfirst,
.furniture-wrapper [data-gu-name="standfirst"] {
margin-left: -10px;
padding-left: 10px;
position: relative;
}
@media (min-width: 46.25em) {
.furniture-wrapper .standfirst,
.furniture-wrapper #standfirst,
.furniture-wrapper [data-gu-name="standfirst"] {
padding-top: 2px;
}
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name="standfirst"] p {
font-weight: 400;
font-size: 20px;
padding-bottom: 14px;
}
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
position: relative;
margin-top: 0;
margin-bottom: 2px;
grid-area: portrait;
}
.furniture-wrapper #main-media div div,
.furniture-wrapper [data-gu-name="media"] div div {
width: 100%;
margin-inline: 0;
}
@media (min-width: 61.25em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
margin-bottom: 0;
}
}
@media (max-width: 46.24em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
width: calc(100vw - var(--scrollbar-width, 0px));
margin-left: -10px;
}
}
@media (max-width: 46.24em) and (min-width: 30em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
margin-left: -20px;
}
}
.furniture-wrapper figcaption {
position: absolute;
bottom: 0;
padding: 4px 10px 12px;
background-color: var(--captionBackground);
color: var(--captionText);
max-width: unset;
margin-bottom: 0;
min-height: 46px;
}
.furniture-wrapper figcaption span {
color: var(--headerBorder);
}
.furniture-wrapper figcaption span svg {
fill: var(--headerBorder);
}
.furniture-wrapper figcaption span:nth-of-type(1) {
display: none;
}
.furniture-wrapper figcaption span:nth-of-type(2) {
display: inline;
max-width: 90%;
}
@media (min-width: 30em) {
.furniture-wrapper figcaption {
padding: 4px 20px 12px;
}
}
.furniture-wrapper figcaption.hidden {
opacity: 0;
}
.furniture-wrapper #caption-button {
display: block;
position: absolute;
bottom: 10px;
right: 8px;
z-index: 30;
background-color: var(--captionBackground);
border: none;
border-radius: 50%;
padding: 6px 5px 5px;
}
.furniture-wrapper #caption-button svg {
transform: scale(0.85);
}
@media (min-width: 30em) {
.furniture-wrapper #caption-button {
right: 10px;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive:before {
top: -12px !important;
height: calc(100% + 24px) !important;
}
}
.content__main-column--interactive h2 {
max-width: 620px;
}
:root:has(.ios, .android) {
--darkBackground: #1a1a1a;
--feature: #c70000;
--darkmodeFeature: #ff5943;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}
@media (prefers-color-scheme: dark) {
:root:has(.ios, .android) {
--new-pillar-colour: var(--darkmode-pillar, var(--darkmodeFeature));
}
}
body.ios #feature-article-container .element-atom:first-of-type + p:fiFor det første avsnittet etter et element-atom i en artikkelcontainer, skal den første bokstaven bruke den sekundære pillar-fargen (eller svart som fallback). Dette gjelder for feature-, standard- og kommentarartikkelcontainere på både iOS- og Android-enheter, inkludert tilfeller der en påloggingsport vises før avsnittet.
På iOS og Android skal artikkeloverskriften i feature-, standard- og kommentarcontainere ha ingen høyde.
Furniture-wrapperen i disse containerne skal ha utfylling på 4px på toppen og 10px på sidene. Innholdsetikettene inne i den skal være fete, bruke Guardian Headline-skriftfamilien, matche pillar-fargen og være versaler.
Overskriften (h1) i furniture-wrapperen skal være 32px, fet, med 12px utfylling på bunnen, og farget mørk (#121212).
Bildefigurer inne i furniture-wrapperen skal vises som blokkelementer.wrapper 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 artikkeltyper (feature, standard, kommentar),
gjør bilder og deres containere fullbredde og transparente */
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, for alle artikkeltyper, juster standfirst-avstanden /
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, for alle artikkeltyper, sett fonten for standfirst-avsnitt /
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, for alle artikkeltyper, style lenker i standfirst /
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, for alle artikkeltyper, style hover-tilstander for lenker i standfirst /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #feature-article-container .furniture-wrapper .standfirVed hover vil lenker inne i standfirst (inkludert listeelementer og vanlige lenker) i artikkelcontainerne for iOS- og Android-enheter få understrekingsfargen satt til den nye pillar-fargen.
For meta-seksjonen i disse artikkelcontainerne på både iOS og Android er det ingen marg. Byline-teksten, inkludert forfatternavnet og relaterte spenn, vil også bruke den nye pillar-fargen.
meta__misc-seksjonen har ingen utfylling, og eventuelle SVG-ikoner i den vil også følge de samme stylingsreglene.ure-wrapper .meta__misc svg {
stroke: var(--new-pillar-colour);
}
body.ios #feature-article-container .furniture-wrapper .element--showcase #caption-button,
body.ios #standard-article-container .furniture-wrapper .element--showcase #caption-button,
body.ios #comment-article-container .furniture-wrapper .element--showcase #caption-button,
body.android #feature-article-container .furniture-wrapper .element--showcase #caption-button,
body.android #standard-article-container .furniture-wrapper .element--showcase #caption-button,
body.android #comment-article-container .furniture-wrapper .element--showcase #caption-button {
display: flex;
padding: 5px;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
right: 14px;
}
body.ios #feature-article-container .article__body,
body.ios #standard-article-container .article__body,
body.ios #comment-article-container .article__body,
body.android #feature-article-container .article__body,
body.android #standard-article-container .article__body,
body.android #comment-article-container .article__body {
padding: 0 12px;
}
body.ios #feature-article-container .article__body figure.element-image:not(.element--thumbnail):not(.element--immersive),
body.ios #standard-article-container .article__body figure.element-image:not(.element--thumbnail):not(.element--immersive),
body.ios #comment-article-container .article__body figure.element-image:not(.element--thumbnail):not(.element--immersive),
body.android #feature-article-container .article__body figure.element-image:not(.element--thumbnail):not(.element--immersive),
body.android #standard-article-container .article__body figure.element-image:not(.element--thumbnail):not(.element--immersive),
body.android #comment-article-container .article__body figure.element-image:not(.element--thumbnail):not(.element--immersive) {
margin: 0;
width: calc(100vw - 24px - var(--scrollbar-width, 0px));
height: auto;
}
body.ios #feature-article-container .article__body figure.element-image:not(.element--thumbnail):not(.element--immersive) figcaption,
body.ios #standard-article-container .article__body figure.element-image:not(.element--thumbnail):not(.element--immersive) figcaption,
body.ios #comment-article-container .article__body figure.element-image:not(.element--thumbnail):not(.element--immersive) figcaption,
body.android #feature-article-container .article__body figure.element-image:not(.element--thumbnail):not(.element--immersive) figcaption,
body.android #standard-article-container .article__body figure.element-image:not(.element--thumbnail):not(.element--immersive) figcaption,
body.android #comment-article-container .article__body figure.element-image:not(.element--thumbnail):not(.element--immersive) figcaption {
padding: 0;
}
body.ios #feature-article-container .article__body figure.element-image.element-immersive,
body.ios #standard-article-container .article__body figure.element-image.element-immersive,
body.ios #comment-article-container .article__body figure.element-image.element-immersive,
body.android #feature-article-container .article__body figure.element-image.element-immersive,
body.android #standard-article-container .article__body figure.element-image.element-immersive,
body.android #comment-article-container .article__body figure.element-image.element-immersive {
