TÀmÀ on CSS-koodilohko, joka mÀÀrittelee verkkosivuston mukautetut fontit. Se mÀÀrittÀÀ "Guardian Headline Full" -fonttiperheen eri tyyleillÀ ja painoilla, kuten light, regular, medium ja semibold, joista jokaisella on normaali- ja kursiiviversiot. Koodi mÀÀrittÀÀ, mistÀ fonttitiedostot ladataan, kÀyttÀen eri formaatteja, kuten WOFF2, WOFF ja TTF, yhteensopivuuden varmistamiseksi eri selaimissa.TÀmÀ on CSS-tyylitiedosto, joka mÀÀrittelee fonttikasvot Guardianin typografiaa varten. Se lataa eri fonttitiedostoja (WOFF2-, WOFF- ja TTF-formaateissa) "Guardian Headline Full" - ja "Guardian Titlepiece" -fonttiperheille, mÀÀrittÀen eri painot (light, regular, bold, black) ja tyylit (normaali tai kursiivi) kullekin. URL-osoitteet osoittavat Guardianin resurssipalvelimella isÀnnöityihin fonttitiedostoihin.TÀmÀ on CSS-tyylitiedosto, joka mÀÀrittelee "Guardian Headline Full" -fonttiperheen. Se sisÀltÀÀ useita fonttitiedostoja eri painoille ja tyyleille, kuten regular, italic, medium, semibold, bold ja black. Jokainen fonttikasvo ladataan Guardianin resurssipalvelimelta eri formaateissa, kuten WOFF2, WOFF ja TTF, yhteensopivuuden varmistamiseksi eri selaimissa. Tyylit mÀÀrittÀvÀt fontin painon ja tyylin kullekin muunnokselle, vaihdellen 400:sta (normaali) 900:aan (black), vastaavilla kursiiviversioilla tarvittaessa.TÀmÀ on CSS-koodilohko, ei teksti, joka voitaisiin kirjoittaa uudelleen luonnollisella englannilla. Se mÀÀrittelee fonttityylit ja asettelusÀÀnnöt verkkosivulle. Jos tarkoitit antaa eri tekstin, jaa se, niin kirjoitan sen sujuvaksi, luonnolliseksi englanniksi.Interaktiivisissa ruudukkokuva-aihioissa, joissa on uppoavat kuvatekstit, kuvatekstin tyyliin sovelletaan 4px:n tÀytettÀ ylÀreunaan ja 0 alareunaan. PÀÀartikkelin rungossa, interaktiivisissa sisÀltöosioissa, kommenttiosioissa ja feature-runkoalueilla, rivien ja metatietojen ruudukkoelementit on sijoitettu ruudukkoalueelle, joka ulottuu riviltÀ 2, sarakkeesta 1 riville 5, sarakkeeseen 2. Rivielementin korkeus on asetettu sopimaan sen sisÀltöön 5px:n ylÀreunavÀlillÀ, kun taas metaelementin ylÀreunavÀli on 18px. NÀytön leveydellÀ 81,25em ja sitÀ suuremmilla, ruudukon sarakkeet on asetettu arvoihin 219px, 1px, 620px, 80px ja 300px. iOS- ja Android-laitteilla artikkelin otsikoiden standfirst-teksti kÀyttÀÀ Guardian Headline -fonttiperhettÀ keskiraskaalla painolla, ja osion kicker nÀytetÀÀn lohkona, jonka ensimmÀinen kirjain on suuri. keyline-4-luokka lisÀÀ ylimÀÀrÀistÀ ylÀreunatÀytettÀ 12px. Metiosion byline-tekijÀnimet kÀyttÀvÀt Guardian Headline -fonttia lihavalla painolla, ja niiden sisÀllÀ olevat linkit ovat myös lihavoituja. Artikkelin kuvioiden kuvien korkeus on asetettu automaattiseksi, ja elementtiatomien jÀlkeen tulevilla kappaleilla ei ole ylÀreunavÀliÀ. Guardian Headline Full -fontti on mÀÀritelty light- ja light italic -tyyleillÀ kÀyttÀen eri fonttitiedostoformaatteja.En pysty auttamaan tÀssÀ pyynnössÀ, koska antamasi teksti on CSS-koodia verkkofonttien mÀÀrittÀmiseen, ei luonnollista kieltÀ, joka voitaisiin kirjoittaa uudelleen sujuvaksi englanniksi. Jos sinulla on eri teksti, jonka haluat minun auttavan, jaa se, niin kirjoitan sen mielellÀni uudelleen.TÀssÀ on teksti kirjoitettuna sujuvaksi, luonnolliseksi englanniksi:
```
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 {
/ TÀssÀ ei ole mÀÀritelty erityisiÀ tyylejÀ, vain valitsin /
}TÀmÀ on CSS-koodilohko, ei teksti, joka voitaisiin kirjoittaa uudelleen luonnollisella englannilla. Se sisÀltÀÀ valitsimia ja tyylisÀÀntöjÀ verkkosivustolle, todennÀköisesti Guardianin artikkeli-sivuille. Jos haluat, voin selittÀÀ, mitÀ tÀmÀ CSS tekee selkokielellÀ, tai voit antaa eri tekstin uudelleenkirjoitettavaksi. Kerro, miten haluat edetÀ!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,
.furniturTÀssÀ on teksti kirjoitettuna sujuvaksi, luonnolliseksi englanniksi:
Standfirst-osion kÀÀreellÀ on pieni vasen siirtymÀ. Artikkelin otsikon ja otsikko-osan tunnisteissa on hieman ylimÀÀrÀistÀ tÀytettÀ ylÀreunassa. Otsikko kÀyttÀÀ lihavoitua fonttia, jonka enimmÀisleveys on 620 pikseliÀ ja fonttikoko 32 pikseliÀ. Suuremmilla nÀytöillÀ (yli 71,25em) otsikko on hieman kapeampi, 540 pikseliÀ, mutta suurempi, 50 pikseliÀ. Keskikokoisilla nÀytöillÀ (yli 46,25em) keyline- ja lines-elementeillÀ ei ole oikeaa marginaalia, mutta suuremmilla nÀytöillÀ (yli 61,25em) ne ovat kokonaan piilotettuja. Lines-elementit kÀyttÀvÀt headerBorder-muuttujan mÀÀrittelemÀÀ viivavÀriÀ.
Meta-osiolla ei ole oikeaa marginaalia keskikokoisilla nÀytöillÀ. Sosiaalisen median kuvakkeet, kommenttiosio ja niiden reunukset kÀyttÀvÀt kaikki headerBorder-vÀriÀ. Jotkin meta-sÀiliön elementit ovat piilotettuja. Standfirst-osio on sijoitettu pienellÀ vasemmalla marginaalilla ja tÀytteellÀ, ja keskikokoisilla nÀytöillÀ se saa hieman ylÀreunatÀytettÀ. Standfirst-teksti on normaalipainoista, 20 pikseliÀ, ja siinÀ on hieman alareunatÀytettÀ.
PÀÀmediaosio on sijoitettu suhteellisesti, ilman ylÀreunavÀliÀ ja pienellÀ alareunavÀlillÀ. Se vie koko sÀiliönsÀ leveyden. Suuremmilla nÀytöillÀ alareunavÀli poistetaan, mutta pienemmillÀ nÀytöillÀ (alle 46,24em) se laajenee koko nÀkymÀn leveyteen negatiivisella vasemmalla marginaalilla. Kuvateksti on sijoitettu median alareunaan, taustavÀrillÀ, tekstivÀrillÀ ja tÀytteellÀ. Kuvateksti sisÀltÀÀ piilotetun elementin ja nÀkyvÀn elementin, joka vie suurimman osan leveydestÀ. PienemmillÀ nÀytöillÀ kuvatekstillÀ on enemmÀn vaakasuuntaista tÀytettÀ. SiellÀ on myös painike kuvatekstin vaihtamiseen, sijoitettuna oikeaan alakulmaan, pyöreÀllÀ muodolla ja hieman pienennetyllÀ kuvakkeella.
ErittÀin suurilla nÀytöillÀ interaktiivisen sisÀllön pÀÀsarakkeella on hieman sÀÀdetty ylÀasento ja korkeus. TÀmÀn sarakkeen otsikoilla on enimmÀisleveys 620 pikseliÀ. Mobiililaitteille (iOS ja Android) on mukautettuja vÀrimuuttujia tummaa tilaa varten, feature-vÀrillÀ ja tumman tilan muunnoksella. Uusi pilari-vÀri kÀyttÀÀ nÀitÀ muuttujia, ja tummassa tilassa se vaihtuu tumman tilan feature-vÀriin. Lopuksi iOS:ssÀ on sÀÀntö, joka kohdistuu ensimmÀiseen kappaleeseen elementtiatomin jÀlkeen feature-artikkelisÀiliössÀ.TÀmÀ on tekninen CSS-tyylitiedosto, ei teksti, joka on tarkoitettu uudelleenkirjoitettavaksi. Se sisÀltÀÀ valitsimia ja tyylisÀÀntöjÀ verkkosivustolle. Jos haluat, voin selittÀÀ, mitÀ se tekee, tai auttaa yksinkertaistamaan tai muotoilemaan sen uudelleen. Kerro, miten haluat edetÀ.figure.element-image {
position: relative;
margin: 14px 0 0 -10px;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto;
}
/ iOS- ja Android-laitteilla, kaikissa artikkelityypeissÀ, tee kuvista ja niiden sÀiliöistÀ tÀysleveitÀ ja lÀpinÀkyviÀ /
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;
}
/ iOS- ja Android-laitteilla, sÀÀdÀ standfirstin (johdantokappaleen) vÀlistystÀ ja tasausta /
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;
}
/ iOS- ja Android-laitteilla, aseta fontti standfirstin sisÀllÀ oleville kappaleille /
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;
}
/ iOS- ja Android-laitteilla, tyylitÀ standfirstin sisÀllÀ olevat linkit (mukaan lukien luettelokohteet) /
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;
}
/ iOS- ja Android-laitteilla, tyylitÀ nÀiden linkkien hover-tila /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #feature-article-container .furniture-wrapper .standfirst__inneKun hover-tilassa ollaan linkkien pÀÀllÀ standfirst-osiossa feature-, standard- ja kommenttiartikkeleissa iOS- ja Android-laitteilla, alleviivauksen vÀrin tulisi vastata uutta pilari-vÀriÀ. Meta-osio nÀissÀ artikkelisÀiliöissÀ ei saa olla marginaalia. Byline-teksti, mukaan lukien tekijÀnimet ja linkit, tulisi myös kÀyttÀÀ uutta pilari-vÀriÀ. Meta-misc-aluella ei saa olla tÀytettÀ, eivÀtkÀ sen sisÀllÀ olevat SVG-kuvakkeet saa muuttua.per .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
