Wannan wani yanki ne na lambar CSS wanda ke ayyana nau'ikan rubutu na musamman don gidan yanar gizo. Yana saita dangin rubutu na "Guardian Headline Full" tare da salo da nauyi daban-daban, kamar haske, na yau da kullun, matsakaici, da semibold, kowanne tare da nau'ikan al'ada da italic. Lambar ta ƙayyade inda za a loda fayilolin rubutu daga, ta amfani da nau'ikan tsari daban-daban kamar WOFF2, WOFF, da TTF don dacewa da masu bincike daban-daban.
Wannan takardar salon CSS ce wacce ke ayyana fuskar rubutu don rubutun Guardian. Tana loda fayilolin rubutu daban-daban (a cikin tsarin WOFF2, WOFF, da TTF) don dangin rubutu na "Guardian Headline Full" da "Guardian Titlepiece", tana ƙayyade nauyi daban-daban (haske, na yau da kullun, mai ƙarfi, baƙi) da salo (na al'ada ko italic) ga kowanne. URLs suna nuni zuwa fayilolin rubutu da ke kan sabar kadarorin Guardian.
Wannan takardar salon CSS ce wacce ke ayyana dangin rubutu na "Guardian Headline Full". Ta ƙunshi fayilolin rubutu da yawa don nauyi da salo daban-daban, kamar na yau da kullun, italic, matsakaici, semibold, mai ƙarfi, da baƙi. Kowace fuskar rubutu tana loda daga sabar kadarorin Guardian a cikin nau'ikan tsari daban-daban kamar WOFF2, WOFF, da TTF don tabbatar da dacewa a cikin masu bincike daban-daban. Salon sun ƙayyade nauyin rubutu da salo ga kowane bambance-bambance, daga 400 (na yau da kullun) zuwa 900 (baƙi), tare da nau'ikan italic masu dacewa inda ya cancanta.
Wannan wani yanki ne na lambar CSS, ba rubutu ba ne da za a sake rubuta shi cikin Ingilishi na halitta ba. Yana ayyana salon rubutu da dokokin shimfidar shafi don gidan yanar gizo. Idan kuna nufin samar da wani rubutu daban, don Allah ku raba shi, kuma zan sake rubuta shi cikin Ingilishi mai kyau, na halitta.
Don siffofi na grid masu mu'amala tare da bayanan nutsewa, salon bayanin yana amfani da tazarar 4px a sama da 0 a ƙasa. A cikin babban jikin labarin, sassan abun ciki masu mu'amala, sassan sharhi, da wuraren jikin fasali, abubuwan grid don layi da bayanan meta an sanya su a cikin yankin grid wanda ya tashi daga layi na 2, shafi na 1 zuwa layi na 5, shafi na 2. Abun layi yana da tsayi da aka saita don dacewa da abun cikinsa tare da tazarar sama na 5px, yayin da abun meta yana da tazarar sama na 18px. A faɗin allo na 81.25em da sama, ginshiƙan samfurin grid an saita su zuwa 219px, 1px, 620px, 80px, da 300px. A kan na'urorin iOS da Android, rubutun standfirst a cikin kawunan labarai yana amfani da dangin rubutu na Guardian Headline tare da nauyi na matsakaici, kuma an nuna kicker ɗin sashe azaman toshe tare da manyan haruffa na farko. Aji na keyline-4 yana ƙara ƙarin tazarar sama na 12px. Sunayen marubutan byline a cikin sashin meta suna amfani da rubutun Guardian Headline tare da nauyi mai ƙarfi, kuma duk wata hanyar haɗi a cikinsu ma tana da ƙarfi. Hotuna a cikin siffofin labarin suna da tsayinsu an saita zuwa auto, kuma sakin layi da ke bin abubuwan atom ba su da tazarar sama. An ayyana rubutun Guardian Headline Full tare da salon haske da haske italic, ta amfani da nau'ikan fayilolin rubutu daban-daban.
Ba zan iya taimakawa da wannan buƙatar ba saboda rubutun da kuka bayar lambar CSS ce don ayyana rubutun gidan yanar gizo, ba abun ciki na harshe na halitta ba ne da za a iya sake rubuta shi cikin Ingilishi mai kyau ba. Idan kuna da wani rubutu daban da kuke son taimako da shi, don Allah ku raba shi, kuma zan yi farin cikin sake rubuta muku shi.
Ga rubutun da aka sake rubuta shi cikin Ingilishi mai kyau, na halitta:
```
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 {
/ Babu takamaiman salo da aka ayyana anan, kawai zaɓin /
}Wannan wani yanki ne na lambar CSS, ba rubutu ba ne da za a sake rubuta shi cikin Ingilishi na halitta ba. Ya ƙunshi zaɓuɓɓuka da dokokin salo don gidan yanar gizo, mai yiwuwa shafukan labarin Guardian. Idan kuna so, zan iya bayyana abin da wannan CSS ke yi a cikin Ingilishi mai sauƙi, ko kuna iya samar da wani rubutu daban don sake rubutawa. Bari in san yadda kuke son ci gaba!
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,
.furniture-wrapper [data-gu-name="standfirst"]:before {
left: 0.5px;
}
}
Ga rubutun da aka sake rubuta shi cikin Ingilishi mai kyau, na halitta:
Kunshin sashin standfirst yana da ɗan ƙaramin tazara na hagu. Alamun a cikin kawunan labarin da sassan take suna da ɗan ƙarin tazara a sama. Babban taken yana amfani da rubutu mai ƙarfi, tare da iyakar faɗin 620 pixels da girman rubutu na 32 pixels. A kan manyan allon (sama da 71.25em), babban taken yana ɗan ƙarami a 540 pixels amma ya fi girma a 50 pixels. A kan matsakaicin allon (sama da 46.25em), abubuwan keyline da layi ba su da tazarar dama, amma a kan manyan allon (sama da 61.25em), an ɓoye su gaba ɗaya. Layukan suna amfani da launin shafin da aka ayyana ta hanyar canjin iyakar kai.
Sashin meta ba shi da tazarar dama a kan matsakaicin allon. Gumakan zamantakewa, sashin sharhi, da iyakokinsu duk suna amfani da launin iyakar kai. Wasu abubuwa a cikin kwantena meta an ɓoye su. Sashin standfirst yana da ɗan ƙaramin tazara na hagu da tazara, kuma a kan matsakaicin allon, yana samun ɗan tazara na sama. Rubutun standfirst nauyi ne na yau da kullun, 20 pixels, tare da ɗan tazara na ƙasa.
Babban sashin kafofin watsa labarai yana da matsayi na dangi, ba shi da tazarar sama kuma yana da ƙaramin tazara na ƙasa. Yana ɗaukar cikakken faɗin kwantenarsa. A kan manyan allon, an cire tazarar ƙasa, amma a kan ƙananan allon (ƙasa da 46.24em), yana faɗaɗa zuwa cikakken faɗin allo tare da mummunan tazara na hagu. Bayanin yana a ƙasan kafofin watsa labarai, tare da launin bango, launin rubutu, da ɗan tazara. Bayanin ya ƙunshi ɓoyayyen abu da abin da ake gani wanda ke ɗaukar mafi yawan faɗin. A kan ƙananan allon, bayanin yana da ƙarin tazara a kwance. Akwai kuma maɓallin don kunna/kashe bayanin, wanda yake a ƙasan dama, tare da siffar madauwari da ɗan ƙaramin gunkin da aka rage.
A kan manyan allon sosai, babban ginshiƙin abun ciki mai mu'amala yana da ɗan gyaran matsayi na sama da tsayi. Kanun labarai a cikin wannan ginshiƙin suna da iyakar faɗin 620 pixels. Don na'urorin hannu (iOS da Android), akwai canjin launi na al'ada don yanayin duhu, tare da launin fasali da bambancin yanayin duhu. Sabon launin ginshiƙi yana amfani da waɗannan canjin, kuma a yanayin duhu, yana canzawa zuwa launin fasalin yanayin duhu. A ƙarshe, akan iOS, akwai doka da ke niyya ga sakin layi na farko bayan abun atom a cikin kwantena labarin fasali.
Wannan takardar salon CSS ce ta fasaha, ba rubutu ba ne da aka yi nufin sake rubutawa ba. Ya ƙunshi zaɓuɓɓuka da dokokin salo don gidan yanar gizo. Idan kuna so, zan iya bayyana abin da yake yi ko taimaka muku sauƙaƙa ko sake tsara shi. Bari in san yadda kuke son ci gaba!
figure.element-image {
position: relative;
margin: 14px 0 0 -10px;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto;
}
/ A kan iOS da Android, ga duk nau'ikan labarai, sanya hotuna da kwantenan su cikakken faɗi da bayyananne /
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;
}
/ A kan iOS da Android, daidaita tazara da jeri na standfirst (sakin layi na gabatarwa) /
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;
}
/ A kan iOS da Android, saita rubutu don sakin layi a cikin 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;
}
/ A kan iOS da Android, salo hanyoyin haɗi a cikin standfirst (ciki har da abubuwan jeri) /
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;
}
/ A kan iOS da Android, salo yanayin hover don waɗannan hanyoyin haɗi /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #feature-article-container .furniture-wrapper .standfirst__inne
Don yanayin hover akan hanyoyin haɗi a cikin sashin standfirst na labaran fasali, na yau da k
