Tämä on CSS-tyylitiedosto, joka määrittelee "Guardian Headline Full" -fonttiperheen. Se sisältää useita font-face-sääntöjä, joista jokainen määrittelee eri painon ja tyylin fontille sekä URL-osoitteet fonttitiedostoille eri formaateissa (WOFF2, WOFF ja TTF). Painot vaihtelevat kevyestä (300) puolilihavaan (600), ja sekä normaali että kursiivi-tyylit sisältyvät. Fonttitiedostot on isännöity Guardianin omaisuuspalvelimella.Tämä teksti näyttää olevan CSS-koodia, ei luonnollista kieltä. Se määrittelee fonttityylejä ja asettelusääntöjä verkkosivulle. Koska se on teknistä koodia, sen uudelleenkirjoittaminen sujuvaksi englanniksi ei ole sovellettavissa. Jos tarkoitit jakaa eri tekstin, toimita se, niin autan mielelläni.vasen: -11px.
Interaktiivisten artikkelien pääsisältösarakkeessa ei ole marginaaleja tai täytteitä upotettujen elementtien ympärillä, ja ylä- ja alareunassa on 12px:n täyte. Kun kappaletta seuraa upotettu elementti, täyte poistetaan ja korvataan 12px:n marginaaleilla. Sisäiset elementit on rajoitettu enintään 620px:n leveyteen.
Näytöillä, jotka ovat leveämpiä kuin 61.25em, sisäiset kuvat rajoitetaan myös 620px:iin.
Mediasektioissa, joissa on silmukkavideoita, kuvateksti on sijoitettu muiden elementtien yläpuolelle, ja silmukkapainike on kohdistettu oikeaan alakulmaan lisätilalla. Mykistys- ja äänenpoistopainikkeet on sijoitettu oikealle vasemmalla täytteellä. Kuvatekstipainike on kaiken yläpuolella, ja suuremmilla näytöillä se on sijoitettu lähelle alareunaa.
Sinemagrafeille (eräs silmukkavideotyyppi) korkeusrajoitus poistetaan näytöillä, jotka ovat leveämpiä kuin 46.25em.
Body-osiossa itse isännöidyt videot näytetään lohkoina, joiden enimmäisleveys on 620px ja 12px:n marginaalit. Video ja sen silmukkakuva vievät koko leveyden, ja videon korkeus säätyy automaattisesti.
Kun video on asetettu immersiiviseen tilaan, se laajenee täyttämään käytettävissä olevan tilan poistaen leveysrajoituksen ja marginaalit. Erittäin leveillä näytöillä (yli 71.25em) videosäiliö on 1140px leveä ja siirretty vasemmalle 180px, ja kuvateksti on sisennetty. Vielä leveämmillä näytöillä (yli 81.25em) siitä tulee 1300px leveä ja se siirtyy vasemmalle 260px.
Suunnittelussa käytetään tiettyjä värejä: harmaa päivämääräriveille, vaalea harmaa reunuksille, vaaleampi harmaa kuvateksteille ja läpinäkyvä tumma tausta kuvatekstitekstille. Pääominaisuusväri on tummanpunainen, joka voidaan korvata mukautetulla pilarivärillä.
Alaotsikot, nostolainaukset ja lohkolainaukset käyttävät toissijaista pilariväriä, jota voidaan säätää tummassa tilassa.
Upotetuilla elementeillä ei ole täytettä. Kun upotettu elementti ilmestyy heti toisen elementin tai vaakaviivan jälkeen, seuraava kappale ei saa ylimääräistä ylämarginaalia, mikä varmistaa tasaisen välistyksen. Tämä koskee eri sisältöosioita ja interaktiivisia asetteluja.Tämä on CSS-valitsinluettelo, joka kohdistuu tiettyihin kappaleisiin verkkosivun asettelussa. Se soveltaa 14 pikselin ylätäytettä kappaleisiin, jotka tulevat heti tiettyjen elementtien, kuten "element-atom", "sign-in-gate" tai vaakaviivojen jälkeen (mutta ei viimeisen). Valitsimet kattavat sivun eri osiot, kuten pääsisällön, kommenttiosan ja ominaisuusosan.
CSS:n toinen osa käyttää `:first-letter`-pseudo-elementtiä tyylittääkseen samojen kappaleiden ensimmäisen kirjaimen, todennäköisesti pudotuskirjainefektin luomiseksi. Se soveltaa tätä tyyliä eri säiliöissä, kuten pääsarakkeessa, artikkelin rungossa ja interaktiivisissa sisältöosioissa.Tässä on uudelleenkirjoitettu teksti sujuvaksi, luonnolliseksi englanniksi:
---
CSS-säännöt soveltavat pudotuskirjaintyyliä ensimmäisen kappaleen ensimmäiseen kirjaimeen tiettyjen elementtien, kuten vaakaviivojen tai mainossäiliöiden jälkeen tietyillä sisältöalueilla. Pudotuskirjain käyttää Guardian Headline -fonttia, on lihavoitu, suuri (111px) ja kelluu vasemmalle isoilla kirjaimilla. Sillä on oikea marginaali, se kohdistuu pystysuunnassa ylös ja käyttää mukautettua värimuuttujaa.
Interaktiivisessa sisällössä ja muissa osioissa vaakaviivoja seuraavilla kappaleilla ei ole ylätäytettä.
Nostolainaukset näillä sisältöalueilla on rajoitettu enintään 620px:n leveyteen.
Esittelyelementtien kuvatekstit on sijoitettu staattisesti ja ne vievät koko leveyden, enintään 620px. Leveämmillä näytöillä (yli 71.25em) ne muuttuvat absoluuttisesti sijoitetuiksi, enimmäisleveydellä 140px, ja vielä leveämmillä näytöillä (yli 81.25em) enimmäisleveys kasvaa 220px:iin.
Immersiiviset elementit ulottuvat koko näkymän leveydelle ottaen huomioon vierityspalkin leveyden. Pienemmillä näytöillä niillä on enimmäisleveys 978px, ja kuvateksteillä on vaakasuuntainen täyte. Keskikokoisilla näytöillä enimmäisleveys on 738px. Erittäin pienillä näytöillä elementti siirretään vasemmalle negatiivisilla marginaaleilla, ja kuvatekstit saavat lisätäytettä.
Esittelykuville body-sisällössä on negatiivisia vasempia marginaaleja suuremmilla näytöillä niiden kohdistamiseksi oikein.
Huonekalujen kääre on sijoitettu suhteellisesti, ja näytöillä, jotka ovat leveämpiä kuin 61.25em, lisätyyliä sovelletaan (vaikka sääntö on epätäydellinen)..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);
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: 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,
.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 {
--new-pillar-colour: var(--darkmode-pillar, var(--darkModeFeature)) !important;
--headerBorderColor: #606060;
--darkModeFeature: #ff5943;
}
nav + section {
display: none;
}
nav + aside {
display: none;
}
aside + section {
display: none;
}
.furniture-wrapper {
background-color: var(--darkBackground);
margin: 0 -10px;
padding: 0 10px 4px;
}
@media (min-width: 30em) {
.furniture-wrapper {
margin: 0 -20px;
padding: 0 20px 8px;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper {
padding: 0 20px;
}
}
@media (min-width: 81.25em) {
.furniture-wrapper:before {
content: "";
width: calc((100vw - 1298px) / 2);
height: 100%;
}
}eight:100%;position:absolute;left:calc((100vw - 1298px)/-2);background-color:var(--darkBackground);border-right:1px solid var(--headerBorderColor)}.furniture-wrapper:after{content:"";width:calc((100vw - 1298px)/2);height:100%;position:absolute;right:calc((100vw - 1298px)/-2);background-color:var(--darkBackground)}.furniture-wrapper .article-header,.furniture-wrapper [data-gu-name=title] a,.furniture-wrapper [data-gu-name=title] span{color:var(--new-pillar-colour, --darkModeFeature)}@media (min-width: 61.25em){.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(--headerBorderColor)}}.furniture-wrapper #headline h1,.furniture-wrapper [data-gu-name=headline] h1,.furniture-wrapper .headline h1{font-weight:700;color:#dcdcdc}.furniture-wrapper #headline figure,.furniture-wrapper [data-gu-name=headline] figure,.furniture-wrapper .headline figure{margin-top:0;margin-bottom:2px}@media (min-width: 71.25em){.furniture-wrapper #meta:before,.furniture-wrapper [data-gu-name=meta]:before{background-color:var(--headerBorderColor)}}.furniture-wrapper #meta details,.furniture-wrapper #meta summary,.furniture-wrapper #meta summary span,.furniture-wrapper [data-gu-name=meta] details,.furniture-wrapper [data-gu-name=meta] summary,.furniture-wrapper [data-gu-name=meta] summary span{color:#dcdcdc}.furniture-wrapper #meta .meta__social a,.furniture-wrapper #meta .meta__social button,.furniture-wrapper [data-gu-name=meta] .meta__social a,.furniture-wrapper [data-gu-name=meta] .meta__social button{border-color:var(--headerBorderColor);color:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper #meta .meta__social a svg,.furniture-wrapper #meta .meta__social button svg,.furniture-wrapper [data-gu-name=meta] .meta__social a svg,.furniture-wrapper [data-gu-name=meta] .meta__social button svg{fill:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper #meta .meta__social a:hover,.furniture-wrapper #meta .meta__social button:hover,.furniture-wrapper [data-gu-name=meta] .meta__social a:hover,.furniture-wrapper [data-gu-name=meta] .meta__social button:hover{color:var(--darkBackground);background-color:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper #meta .meta__social a:hover svg,.furniture-wrapper #meta .meta__social button:hover svg,.furniture-wrapper [data-gu-name=meta] .meta__social a:hover svg,.furniture-wrapper [data-gu-name=meta] .meta__social button:hover svg{fill:var(--darkBackground)}.furniture-wrapper #meta div,.furniture-wrapper [data-gu-name=meta] div{color:#dcdcdc}.furniture-wrapper #meta a,.furniture-wrapper [data-gu-name=meta] a{color:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper #meta a:hover,.furniture-wrapper [data-gu-name=meta] a:hover{color:var(--new-pillar-colour, --darkModeFeature);text-decoration-color:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper .standfirst a,.furniture-wrapper .standfirst li a,.furniture-wrapper #standfirst a,.furniture-wrapper #standfirst li a,.furniture-wrapper [data-gu-name=standfirst] a,.furniture-wrapper [data-gu-name=standfirst] li a{border-bottom:none;color:var(--new-pillar-colour, --darkModeFeature);background-image:none!important;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--headerBorder, #dcdcdc);text-decoration-thickness:1px}.furniture-wrapper .standfirst a:hover,.furniture-wrapper .standfirst li a:hover,.furniture-wrapper #standfirst a:hover,.furniture-wrapper #standfirst li a:hover,.furniture-wrapper [data-gu-name=standfirst] a:hover,.furniture-wrapper [data-gu-name=standfirst] li a:hover{border-bottom:none;text-decoration-color:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper .standfirst p,.furniture-wrapper #standfirst p,.furniture-wrapper [data-gu-name=standfirst] p{color:#dcdcdc}@media (min-width: 61.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{boEn pysty kirjoittamaan tätä tekstiä uudelleen, koska se näyttää olevan CSS-koodia, ei luonnollista kieltä. Voisitko antaa englanninkielisen tekstin, jonka haluaisit minun muotoilevan uudelleen?Tässä on uudelleenkirjoitettu teksti sujuvaksi, luonnolliseksi englanniksi:
Tämä on joukko font-face-sääntöjä "Guardian Headline Full" -fonttiperheelle. Jokainen sääntö määrittelee eri tyylin tai painon fontille käyttäen Guardianin verkkosivustolla isännöityjä tiedostoja. Formaatit sisältävät WOFF2-, WOFF- ja TTF-muodot selainten yhteensopivuuden varmistamiseksi. Painot vaihtelevat tavallisesta (400) mustaan (900), ja sekä normaali että kursiivi-tyylit ovat saatavilla.Tämä teksti näyttää olevan CSS-koodia, ei luonnollista kieltä. Se määrittelee fonttityylejä ja asettelusääntöjä verkkosivustolle, todennäköisesti Guardianin. Koska se on teknistä koodia, sen uudelleenkirjoittaminen "sujuvaksi, luonnolliseksi englanniksi" ei ole sovellettavissa—se on tarkoitettu selaimille, ei ihmisille. Jos haluat, voin selittää, mitä tämä koodi tekee selkokielellä.iOS- ja Android-laitteille artikkelisäiliön huonekalujen kääreen sisällä olevat tunnisteet on tyylitelty lihavoidulla tekstillä, käyttäen Guardian headline -fonttiperhettä, ja ne on värjätty pilarivärin mukaan isoilla kirjaimilla.
Sekä iOS:llä että Androidilla huonekalujen kääreen pääotsikko on asetettu 32 pikseliin, lihavoitu, 12 pikselin alustäytteellä, ja se on värjätty tummaksi (lähes mustaksi).
Kuville huonekalujen kääreessä molemmilla alustoilla ne on sijoitettu suhteellisesti, 14 pikselin ylämarginaalilla ja hieman negatiivisella vasemmalla marginaalilla, ja ne ulottuvat näytön koko leveydelle (ottaen huomioon mahdollisen vierityspalkin). Itse kuvat, niiden linkit ja sisäsäiliöt ovat läpinäkyvällä taustalla ja säilyttävät luonnollisen korkeutensa.
Huonekalujen kääreen johdantoteksti (standfirst) molemmilla alustoilla sisältää hieman täytettä ylä- ja alareunassa sekä hieman negatiivisen oikean marginaalin kohdistuakseen oikein näytön reunaan..ment-article-container .furniture-wrapper .standfirst__inner p {
font-family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif;
}
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;
}
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 {
text-decoration-color: var(--new-pillar-colour);
}
body.ios #feature-article-container .furniture-wrapper .meta,
body.ios #standard-article-container .furniture-wrapper .meta,
body.ios #comment-article-container .furniture-wrapper .meta,
body.android #feature-article-container .furniture-wrapper .meta,
body.android #standard-article-container .furniture-wrapper .meta,
body.android #comment-article-container .furniture-wrapper .meta {
margin: 0;
}
body.ios #feature-article-container .furniture-wrapper .meta .byline,
body.ios #feature-article-container .furniture-wrapper .meta .byline__author,
body.ios #feature-article-container .furniture-wrapper .meta span.byline__author a,
body.ios #feature-article-container .furniture-wrapper .meta .meta__byline span,
body.ios #standard-article-container .furniture-wrapper .meta .byline,
body.ios #standard-article-container .furniture-wrapper .meta .byline__author,
body.ios #standard-article-container .furniture-wrapper .meta span.byline__author a,
body.ios #standard-article-container .furniture-wrapper .meta .meta__byline span,
body.ios #comment-article-container .furniture-wrapper .meta .byline,
body.ios #comment-article-container .furniture-wrapper .meta .byline__author,
body.ios #comment-article-container .furniture-wrapper .meta span.byline__author a,
body.ios #comment-article-container .furniture-wrapper .meta .meta__byline span,
body.android #feature-article-container .furniture-wrapper .meta .byline,
body.android #feature-article-container .furniture-wrapper .meta .byline__author,
body.android #feature-article-container .furniture-wrapper .meta span.byline__author a,
body.android #feature-article-container .furniture-wrapper .meta .meta__byline span,
body.android #standard-article-container .furniture-wrapper .meta .byline,
body.android #standard-article-container .furniture-wrapper .meta .byline__author,
body.android #standard-article-container .furniture-wrapper .meta span.byline__author a,
body.android #standard-article-container .furniture-wrapper .meta .meta__byline span,
body.android #comment-article-container .furniture-wrapper .meta .byline,
body.android #comment-article-container .furniture-wrapper .meta .byline__author,
body.android #comment-article-container .furniture-wrapper .meta span.byline__author a,
body.android #comment-article-container .furniture-wrapper .meta .meta__byline span {
/ Tässä ei ole määritelty erityisiä tyylejä /
}Androidilla artikkelin ja kommenttiosioiden kirjoittajarivi ja kirjoittajalinkit käyttävät pilariväriä tekstissään. iOS:llä sama tyyli sovelletaan.
Sekä iOS:llä että Androidilla näiden osioiden metatietoalueella ei ole ylimääräistä täytettä. Kaikki kuvakkeet (kuten SVG-elementit) tällä alueella käyttävät pilariväriä viivassaan.
Esittelyelementtien kuvatekstipainike on tyylitelty samalla tavalla molemmilla alustoilla: se on pieni, keskitetty painike (28 x 28 pikseliä) 5 pikselin täytteellä, sijoitettuna 14 pikseliä oikeasta reunasta.
Pääartikkelin runko sekä iOS:llä että Androidilla sisältää 12 pikselin täytteen vasemmalla ja oikealla puolella.
Artikkelin rungossa olevat kuvat, jotka eivät ole pikkukuvia tai immersiivisiä (kuten vakio- tai esittelykuvat), vievät koko näytön leveyden miinus 24 pikseliä (täytteen huomioon ottamiseksi) ja mahdollisen vierityspalk
