Wannan wani CSS stylesheet ne wanda ke bayyana dangin font "Guardian Headline Full". Ya ƙunshi dokoki da yawa na font-face, kowanne yana ƙayyade nauyi da salo daban-daban na font, tare da URLs na fayilolin font a cikin nau'ikan daban-daban (WOFF2, WOFF, da TTF). Nauyin ya bambanta daga haske (300) zuwa semibold (600), kuma an haɗa salon al'ada da italic. Fayilolin font suna kan sabar kadarorin Guardian.
Wannan rubutu ya bayyana a matsayin lambar CSS, ba harshe na halitta ba. Yana bayyana salon font da dokokin shimfidar shafi don gidan yanar gizo. Tun da lambar fasaha ce, sake rubuta shi cikin Ingilishi mai kyau bai dace ba. Idan kana nufin raba wani rubutu daban, don Allah ka ba da shi, kuma zan yi farin cikin taimaka.
hagu: -11px.
Babban ginshiƙin abun ciki don labaran mu'amala ba shi da gefe ko tarko a kusa da abubuwan da aka haɗa, tare da 12px na tarko a sama da ƙasa. Lokacin da sakin layi ya biyo bayan abin da aka haɗa, ana cire tarko kuma a maye gurbinsa da 12px margins. Abubuwan da ke cikin layi suna iyakance ga iyakar faɗin 620px.
A kan allo mafi faɗi fiye da 61.25em, hotuna masu layi suma an iyakance su zuwa 620px.
Ga sassan kafofin watsa labarai tare da bidiyoyi masu juyawa, taken yana sama da sauran abubuwa, kuma maɓallin juyawa yana daidaita zuwa ƙasa dama tare da ƙarin tarko. Maɓallan shiru da kunna sauti ana sanya su a dama tare da ɗan tarko na hagu. Maɓallin taken yana sama da komai, kuma a kan manyan allo an sanya shi kusa da ƙasa.
Ga cinemagraphs (nau'in bidiyo mai juyawa), an cire iyakar tsayi akan allo mafi faɗi fiye da 46.25em.
A cikin sashin jiki, bidiyoyin da aka ɗauki nauyi ana nuna su azaman tubalan tare da iyakar faɗin 620px da 12px margins. Bidiyon da siffar juyawarsa suna ɗaukar cikakken faɗin, tare da tsayin bidiyon yana daidaitawa ta atomatik.
Lokacin da aka saita bidiyo zuwa yanayin nutsewa, yana faɗaɗa don cika sararin da ke akwai, yana cire iyakar faɗin da margins. A kan manyan allo (sama da 71.25em), kwandon bidiyon yana da faɗin 1140px kuma an matsar da shi hagu da 180px, tare da taken a ciki. A kan allon mafi faɗi (sama da 81.25em), ya zama 1300px faɗi kuma yana matsawa hagu da 260px.
Zane yana amfani da takamaiman launuka: launin toka don kwanakin, launin toka mai haske don iyakoki, launin toka mafi haske don taken, da duhu mai duhu mai tsaka-tsaki don rubutun taken. Babban launi na fasalin ja ne mai duhu, wanda za'a iya canza shi da launin ginshiƙi na al'ada.
Ƙananan taken, zance, da zance na toshe suna amfani da launin ginshiƙi na biyu, wanda za'a iya daidaita shi a yanayin duhu.
Abubuwan da aka haɗa ba su da tarko. Lokacin da abin da aka haɗa ya bayyana kai tsaye bayan wani abu ko layin kwance, sakin layi na gaba ba ya samun ƙarin tarko na sama, yana tabbatar da daidaiton tarko. Wannan ya shafi sassan abun ciki daban-daban da shimfidar mu'amala.
Wannan jerin zaɓin CSS ne wanda ke niyya ga takamaiman sakin layi a cikin shimfidar shafin yanar gizo. Yana amfani da tarko na sama na pixels 14 ga sakin layi waɗanda ke zuwa kai tsaye bayan wasu abubuwa kamar "element-atom", "sign-in-gate", ko layukan kwance (amma ba na ƙarshe ba). Zaɓin sun rufe sassan shafi daban-daban, kamar babban abun ciki, jikin sharhi, da jikin fasalin.
Kashi na biyu na CSS yana amfani da pseudo-element `:first-letter` don salo harafin farko na waɗannan sakin layi, mai yiwuwa don tasirin drop cap. Yana amfani da wannan salon a cikin kwantena daban-daban kamar babban ginshiƙi, jikin labarin, da sassan abun ciki na mu'amala.
Anan ga rubutun da aka sake rubuta cikin Ingilishi mai kyau, na halitta:
---
Dokokin CSS suna amfani da salon drop cap ga harafin farko na sakin layi na farko bayan wasu abubuwa, kamar layukan kwance ko kwantena talla, a cikin takamaiman wuraren abun ciki. Drop cap yana amfani da font ɗin Guardian Headline, yana da ƙarfi, babba (111px), kuma yana iyo hagu tare da rubutu mai girma. Yana da gefe a dama, yana daidaita a tsaye zuwa sama, kuma yana amfani da canjin launi na al'ada.
Ga abun ciki na mu'amala da sauran sassan, sakin layi da ke biye da layukan kwance ba su da tarko na sama.
Zance na jawo a cikin waɗannan wuraren abun ciki an iyakance su zuwa iyakar faɗin 620px.
Taken hoto don abubuwan nunin an sanya su a tsaye kuma suna ɗaukar cikakken faɗin, har zuwa 620px. A kan manyan allo (sama da 71.25em), sun zama cikakken matsayi tare da iyakar faɗin 140px, kuma a kan allon mafi faɗi (sama da 81.25em), iyakar faɗin yana ƙaruwa zuwa 220px.
Abubuwan nutsewa sun mamaye cikakken faɗin allo, la'akari da faɗin mashigin gungurawa. A kan ƙananan allo, suna da iyakar faɗin 978px, kuma taken suna da tarko a kwance. A kan matsakaicin allo, iyakar faɗin shine 738px. A kan ƙananan allo, an matsar da kashi hagu tare da mummunan margins, kuma taken suna samun ƙarin tarko.
Ga hotuna masu nunin a cikin jikin abun ciki, akwai mummunan margins na hagu akan manyan allo don daidaita su da kyau.
Kwandon kayan daki an sanya shi a matsayin dangi, kuma akan allon mafi faɗi fiye da 61.25em, ƙarin salon yana aiki (ko da yake dokar ba ta cika ba).
.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%;
}
}
height: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{bo
Ba zan iya sake rubuta wannan rubutu ba saboda ya bayyana a matsayin lambar CSS, ba harshe na halitta ba. Za ka iya ba da wani sakin rubutu na Ingilishi da kake so in sake rubuta shi?
Anan ga rubutun da aka sake rubuta cikin Ingilishi mai kyau, na halitta:
Wannan saitin dokokin font-face ne don dangin font "Guardian Headline Full". Kowane doka yana bayyana salo ko nauyi daban-daban na font, ta amfani da fayilolin da ke kan gidan yanar gizon Guardian. Nau'ikan sun haɗa da WOFF2, WOFF, da TTF don dacewa a cikin masu bincike. Nauyin ya bambanta daga na yau da kullun (400) zuwa baƙi (900), tare da salon al'ada da italic.
Wannan rubutu ya bayyana a matsayin lambar CSS, ba harshe na halitta ba. Yana bayyana salon font da dokokin shimfidar shafi don gidan yanar gizo, mai yiwuwa na Guardian. Tun da lambar fasaha ce, sake rubuta shi cikin "Ingilishi mai kyau, na halitta" bai dace ba—an yi shi ne don masu bincike su karanta, ba mutane ba. Idan kana so, zan iya bayyana abin da wannan lambar ke yi a cikin Ingilishi mai sauƙi.
Ga na'urorin iOS da Android, alamomin da ke cikin kwandon kayan daki na kwandon labarin an salo su da rubutu mai ƙarfi, ta amfani da dangin font ɗin Guardian headline, kuma an canza su da launin ginshiƙi, tare da rubutu mai girma.
A kan iOS da Android duka, babban taken a cikin kwandon kayan daki an saita shi zuwa pixels 32, mai ƙarfi, tare da tarko na pixels 12 a ƙasa, kuma an canza shi da duhu (kusan baƙi).
Ga hotuna a cikin kwandon kayan daki a kan duka nau'ikan, an sanya su a matsayin dangi, tare da gefe na pixels 14 a sama da ɗan mummunan gefe na hagu, kuma suna shimfiɗa zuwa cikakken faɗin allo (la'akari da kowane mashigin gungurawa). Hotunan da kansu, tare da hanyoyin su da kwantena na ciki, suna da bayyanar da ba ta bayyana ba kuma suna kiyaye tsayin su na halitta.
Standfirst (rubutun gabatarwa) a cikin kwandon kayan daki a kan duka nau'ikan yana da ɗan tarko a sama da ƙasa, da ɗan mummunan gefe na dama don daidaitawa da gefen allo.
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;
}
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 {
/** Babu takamaiman salon da aka bayyana anan **/
}
A kan Android, byline da hanyoyin marubuta a cikin sassan labarin da sharhi suna amfani da launin ginshiƙi don rubutun su. A kan iOS, salon ɗaya yana aiki.
Ga iOS da Android duka, yankin bayanin meta a cikin waɗannan sassan ba shi da ƙarin tarko. Duk wani gumaka (kamar abubuwan SVG) a wannan yankin suna amfani da launin ginshiƙi don layin su.
Maɓallin taken a cikin abubuwan nunin an salo shi daidai a kan duka nau'ikan: ƙaramin maɓalli ne mai tsakiya (28 da 28
