Wannan wani toshe 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 sauke fayilolin rubutu daga, ta amfani da nau'ikan tsari daban-daban kamar WOFF2, WOFF, da TTF don tabbatar da dacewa a cikin masu bincike.
Wannan toshe ne na lambar CSS, ba rubutu ba. Yana ayyana salon rubutu da ka'idojin shimfidar wuri don gidan yanar gizo. Ga bayanin da yake yi a Turanci mai sauƙi:
Lambar tana saita nau'ikan rubutu na musamman don gidan yanar gizon Guardian, gami da "Guardian Headline Full" a cikin nauyi daban-daban (bold, black, da nau'ikan italic ɗinsu) da "Guardian Titlepiece" a bold. Ana loda waɗannan nau'ikan rubutu daga uwar garken Guardian a cikin nau'ikan tsari da yawa (WOFF2, WOFF, da TTF) don tabbatar da dacewa a cikin masu bincike.
Har ila yau, yana ƙunshe da ka'idojin ƙira masu amsawa don takamaiman shimfidar wuri mai suna "content__main-column--interactive." A kan faffadan allo (sama da 71.25em), wannan ginshiƙi yana samun gefen hagu na 160px, kuma a kan ma faffadan allo (sama da 81.25em), gefen yana ƙaruwa zuwa 240px. A cikin wannan ginshiƙi, wasu abubuwa kamar "element-atom" an iyakance su zuwa iyakar faɗin 620px, amma a kan ƙananan allo (ƙasa da 46.24em), suna iya ɗaukar cikakken faɗin.
Ga abubuwan "element-showcase," ba su da gefen hagu a wayar hannu, amma a kan matsakaicin allo (46.25em da sama), an iyakance su zuwa 620px faɗi, kuma a kan manyan allo (71.25em da sama), suna iya faɗaɗa zuwa 860px. Abubuwan "Element-immersive" an tsara su don zama cikakken faɗi: a wayar hannu, suna shimfiɗa a duk faɗin allo, a kan matsakaicin allo suna ɗan motsawa kuma suna wuce ginshiƙin, kuma a kan manyan allo suna daidaita yadda ya kamata tare da iyakar faɗin 1260px.
A ƙarshe, sakin layi da jeri a cikin wannan ginshiƙi suma an iyakance su zuwa 620px faɗi, kuma akwai wani ɓangaren ƙawata (":before") wanda ya shimfiɗa tsawon cikakken tsayin ginshiƙin da 15px, tare da mafi ƙarancin tsayin 100px, wanda aka sanya a saman.
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
left: -11px;
}
}
.content__main-column--interactive .element-atom {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 12px;
padding-top: 12px;
}
.content__main-column--interactive p + .element-atom {
padding-top: 0;
padding-bottom: 0;
margin-top: 12px;
margin-bottom: 12px;
}
.content__main-column--interactive .element-inline {
max-width: 620px;
}
@media (min-width: 61.25em) {
figure[data-spacefinder-role="inline"].element {
max-width: 620px;
}
}
[data-gu-name="media"]:has(figure.loop) figure.loop figcaption:not(.hidden) {
z-index: 6;
}
[data-gu-name="media"]:has(figure.loop) figure.loop button[data-link-name*="gu-video-loop"] {
align-self: flex-end;
margin-bottom: 40px;
margin-right: 3px;
}
[data-gu-name="media"]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid="unmute-icon"]),
[data-gu-name="media"]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid="mute-icon"]) {
right: 0;
padding-left: 10px;
}
[data-gu-name="media"]:has(figure.loop) #caption-button {
z-index: 100;
}
@media (min-width: 61.25em) {
[data-gu-name="media"]:has(figure.loop) #caption-button {
bottom: 20px;
}
}
@media (min-width: 46.25em) {
[data-gu-name="media"]:has(figure.cinemagraph) .cinemagraph > div {
max-height: unset;
}
}
[data-gu-name="body"] gu-island[name="SelfHostedVideo"] {
width: 100%;
max-width: 620px;
display: block;
margin-top: 12px;
margin-bottom: 12px;
}
[data-gu-name="body"] gu-island[name="SelfHostedVideo"] figure.loop,
[data-gu-name="body"] gu-island[name="SelfHostedVideo"] figure.loop video {
width: 100%;
height: auto;
max-width: 620px;
margin: 0 auto;
}
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) {
max-width: unset;
margin: 12px 0;
}
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) figure.loop,
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) figure.loop video {
max-width: unset;
margin: 0;
}
@media (min-width: 71.25em) {
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) {
width: 1140px;
margin-left: -180px;
}
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) figure figcaption {
margin-left: 20px;
}
}
@media (min-width: 81.25em) {
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) {
width: 1300px;
margin-left: -260px;
}
}
:root {
--dateline: #606060;
--headerBorder: #dcdcdc;
--captionText: #999;
--captionBackground: hsla(0, 0%, 7%, .72);
--feature: #c70000;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}
:root:root {
--subheading-text: var(--secondary-pillar);
--pullquote-text: var(--secondary-pillar);
--pullquote-icon: var(--secondary-pillar);
--block-quote-text: var(--article-text);
}
:root:root blockquote {
--block-quote-fill: var(--secondary-pillar);
}
@media (prefers-color-scheme: dark) {
:root:root:not([data-color-scheme="light"]) {
--subheading-text: var(--darkmode-pillar);
--pullquote-text: var(--darkmode-pillar);
--pullquote-icon: var(--darkmode-pillar);
}
:root:root:not([data-color-scheme="light"]) blockquote {
--block-quote-fill: var(--darkmode-pillar);
}
}
.content__main-column--interactive .element.element-atom,
.element.element-atom {
padding: 0;
}
.content__main-column--interactive .element-atom:first-of-type + p:first-of-type,
.content__main-column--interactive .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
.content__main-column--interactive .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
.content__main-column--interactive .element-atom:first-of-type + .element-atom + p:first-of-type,
.content__main-column--interactive hr:not(.last-horizontal-rule) + p,
.content__main-column--interactive hr:not(.last-horizontal-rule) + .ad-slot-container + p,
#article-body > div .element-atom:first-of-type + p:first-of-type,
#article-body > div .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
#article-body > div .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
#article-body > div .element-atom:first-of-type + .element-atom + p:first-of-type,
#article-body > div hr {
/ Babu takamaiman salon da aka ayyana anan; jerin zaɓin yana yiwuwa an yi niyya don niyya waɗannan abubuwa don wata manufa. /
}
Sakin layi na farko bayan layin kwance ko atom ɗin abu yana samun ƙarin tazarar sama, sai dai idan shine layin kwance na ƙarshe. Wannan ya shafi sassa daban-daban kamar jikin labarin, abun ciki mai mu'amala, sharhi, da sassan fasali.
Hakazalika, harafin farko na wancan sakin layi na farko an yi masa salo da tasirin faɗuwar harafi, amma kawai a cikin takamaiman mahallin kamar babban ginshiƙin mu'amala, jikin labarin, da sassan sharhi.
Ga rubutun da aka sake rubuta shi cikin Ingilishi mai kyau, na halitta:
---
Ka'idojin CSS masu zuwa sun shafi harafin farko na wasu sakin layi, suna ba su babban, m, babban salo na faɗuwar harafi. Wannan ya shafi sakin layi waɗanda suka zo kai tsaye bayan wasu abubuwa kamar layukan kwance ko tubalan abun ciki, amma kawai lokacin da suke sakin layi na farko a cikin jiki ko sassan fasali. Salon yana amfani da rubutun Guardian headline, yana saita girman rubutu zuwa pixels 111, kuma yana daidaita harafin zuwa hagu tare da ɗan gefe. Launi ana sarrafa shi ta hanyar dukiya ta al'ada, tare da faɗuwa zuwa launin ginshiƙi.
Don abun ciki mai mu'amala da jikin labarin, sakin layi waɗanda suka bi layin kwance ko kwantena na wurin talla ba su da ƙarin tazarar sama.
Ƙuntatattun maganganu a cikin jiki, fasali, sharhi, da sassan mu'amala an iyakance su zuwa iyakar faɗin pixels 620.
Bayanan hotuna na nunin yawanci ana sanya su a tsaye kuma suna ɗaukar cikakken faɗin, har zuwa pixels 620. Koyaya, a kan faffadan allo (sama da 71.25em), suna zama cikakken matsayi tare da iyakar faɗin pixels 140, kuma a kan ma faffadan allo (sama da 81.25em), iyakar faɗin yana ƙaruwa zuwa pixels 220.
Abubuwan immersive suna shimfiɗa zuwa cikakken faɗin allo, la'akari da faɗin sandar gungurawa. A kan ƙananan allo (har zuwa 71.24em), an iyakance su zuwa pixels 978, kuma bayanan su suna da tazarar kwance wanda ke daidaita bisa girman allo—pixels 10 a kan ƙananan allo da pixels 20 a kan matsakaici. Tsakanin 46.25em da 61.24em, iyakar faɗin shine pixels 738. A kan ƙananan allo (har zuwa 46.24em), an matsar da abun zuwa hagu tare da ƙananan gefe, kuma tazarar bayanin an saita shi zuwa pixels 20 a kan allo aƙalla 30em faɗi.
Ga hotunan nunin a cikin jiki ko ginshiƙan mu'amala, an yi amfani da ƙananan gefen hagu na pixels 160 a kan faffadan allo sama da 71.25em.
---
Bari in sani idan kana buƙatar ƙarin gyare-gyare.
[body] .content__main-column--interactive figure.element.element--showcase.element-showcase {
margin-left: -240px !important;
}
.furniture-wrapper {
position: relative;
}
@media (min-width: 61.25em) {
.furniture-wrapper {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 0px;
grid-template-columns: [title-start headline-start meta-start standfirst-start] repeat(5, 1fr) [title-end headline-end meta-end standfirst-end portrait-start] repeat(5, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] .25fr [title-end headline-start] 1fr [headline-end standfirst-start] .75fr [standfirst-end meta-start] auto [meta-end portrait-end];
}
.furniture-wrapper #headline > div:first-child,
.furniture-wrapper [data-gu-name="headline"] > div:first-child,
.furniture-wrapper .headline > div:first-child {
border-top: 1px solid var(--headerBorder);
}
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name="meta"] {
position: relative;
padding-top: 2px;
margin-right: 0;
}
.furniture-wrapper .standfirst .content__standfirst,
.furniture-wrapper #standfirst .content__standfirst,
.furniture-wrapper [data-gu-name="standfirst"] .content__standfirst {
margin-bottom: 4px;
}
.furniture-wrapper .standfirst ul li,
.furniture-wrapper #standfirst ul li,
.furniture-wrapper [data-gu-name="standfirst"] ul li {
font-size: 20px;
}
.furniture-wrapper .standfirst li a,
.furniture-wrapper .standfirst a,
.furniture-wrapper #standfirst li a,
.furniture-wrapper #standfirst a,
.furniture-wrapper [data-gu-name="standfirst"] li a,
.furniture-wrapper [data-gu-name="standfirst"] a {
border-bottom: none;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
text-decoration-thickness: 1px;
}
.furniture-wrapper .standfirst li a:hover,
.furniture-wrapper .standfirst a:hover,
.furniture-wrapper #standfirst li a:hover,
.furniture-wrapper #standfirst a:hover,
.furniture-wrapper [data-gu-name="standfirst"] li a:hover,
.furniture-wrapper [data-gu-name="standfirst"] a:hover {
text-decoration-color: var(--new-pillar-colour);
}
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name="standfirst"] p:first-of-type {
border-top: 1px solid var(--headerBorder);
padding-bottom: 0;
}
}
@media (min-width: 61.25em) and (min-width: 71.25em) {
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name="standfirst"] p:first-of-type {
border-top: unset;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper figure {
margin: 0 0 0 -10px;
}
.furniture-wrapper figure[data-spacefinder-role="inline"].element {
max-width: 630px;
}
}
@media (min-width: 71.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(2, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(7, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 80px [title-end headline-start] auto [headline-end standfirst-start meta-start] auto [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
content: "";
width: 540px;
position: absolute;
top: 0;
background-color: var(--headerBorder);
height: 1px;
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name="standfirst"] p {
border-top: unset;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name="standfirst"]:before {
content: "";
width: 1px;
background-color: var(--headerBorder);
height: 100%;
position: absolute;
top: 0;
left: .5px;
}
}
@media (min-width: 81.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(3, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(8, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] .25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] .75fr [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
width: 620px;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name="standfirst"]:before {
/ Babu ƙarin salon da aka ƙayyade /
}
}
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name="standfirst"]:before {
left: -0.5px;
}
.furniture-wrapper .article-header .content__labels > div,
.furniture-wrapper [data-gu-name="title"] .content__labels > div {
padding-top: 2px;
}
.furniture-wrapper #headline h1,
.furniture-wrapper [data-gu-name="headline"] h1,
.furniture-wrapper .headline h1 {
font-weight: 600;
max-width: 620px;
font-size: 32px;
}
@media (min-width: 71.25em) {
.furniture-wrapper #headline h1,
.furniture-wrapper [data-gu-name="headline"] h1,
.furniture-wrapper .headline h1 {
max-width: 540px;
font-size: 50px;
}
}
@media (min-width: 46.25em) {
.furniture-wrapper .keyline-4,
.furniture-wrapper [data-gu-name="lines"] {
margin-right: 0;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper .keyline-4,
.furniture-wrapper [data-gu-name="lines"] {
display: none;
}
}
.furniture-wrapper .keyline-4 svg,
.furniture-wrapper [data-gu-name="lines"] svg {
stroke: var(--headerBorder);
}
@media (min-width: 46.25em) {
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name="meta"] {
margin-right: 0;
}
}
.furniture-wrapper #meta .meta__social,
.furniture-wrapper #meta .meta__social ul li a span,
.furniture-wrapper #meta .meta__comment,
.furniture-wrapper [data-gu-name="meta"] .meta__social,
.furniture-wrapper [data-gu-name="meta"] .meta__social ul li a span,
.furniture-wrapper [data-gu-name="meta"] .meta__comment {
border-color: var(--headerBorder);
}
.furniture-wrapper #meta .content__meta-container_dcr > div > gu-island,
.furniture-wrapper [data-gu-name="meta"] .content__meta-container_dcr > div > gu-island {
display: none;
}
.furniture-wrapper .standfirst,
.furniture-wrapper #standfirst,
.furniture-wrapper [data-gu-name="standfirst"] {
margin-left: -10px;
padding-left: 10px;
position: relative;
}
@media (min-width: 46.25em) {
.furniture-wrapper .standfirst,
.furniture-wrapper #standfirst,
.furniture-wrapper [data-gu-name="standfirst"] {
padding-top: 2px;
}
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name="standfirst"] p {
font-weight: 400;
font-size: 20px;
padding-bottom: 14px;
}
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
position: relative;
margin-top: 0;
margin-bottom: 2px;
grid-area: portrait;
}
.furniture-wrapper #main-media div div,
.furniture-wrapper [data-gu-name="media"] div div {
width: 100%;
margin-inline: 0;
}
@media (min-width: 61.25em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
margin-bottom: 0;
}
}
@media (max-width: 46.24em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
width: calc(100vw - var(--scrollbar-width, 0px));
margin-left: -10px;
}
}
@media (max-width: 46.24em) and (min-width: 30em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
margin-left: -20px;
}
}
.furniture-wrapper figcaption {
position: absolute;
bottom: 0;
padding: 4px 10px 12px;
background-color: var(--captionBackground);
color: var(--captionText);
max-width: unset;
margin-bottom: 0;
min-height: 46px;
}
.furniture-wrapper figcaption span {
color: var(--headerBorder);
}
.furniture-wrapper figcaption span svg {
fill: var(--headerBorder);
}
.furniture-wrapper figcaption span:nth-of-type(1) {
display: none;
}
.furniture-wrapper figcaption span:nth-of-type(2) {
display: inline;
max-width: 90%;
}
@media (min-width: 30em) {
.furniture-wrapper figcaption {
padding: 4px 20px 12px;
}
}
.furniture-wrapper figcaption.hidden {
opacity: 0;
}
.furniture-wrapper #caption-button {
display: block;
position: absolute;
bottom: 10px;
right: 8px;
z-index: 30;
background-color: var(--captionBackground);
border: none;
border-radius: 50%;
padding: 6px 5px 5px;
}
.furniture-wrapper #caption-button svg {
transform: scale(0.85);
}
@media (min-width: 30em) {
.furniture-wrapper #caption-button {
right: 10px;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive:before {
top: -12px !important;
height: calc(100% + 24px) !important;
}
}
.content__main-column--interactive h2 {
max-width: 620px;
}
:root:has(.ios, .android) {
--darkBackground: #1a1a1a;
--feature: #c70000;
--darkmodeFeature: #ff5943;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}
@media (prefers-color-scheme: dark) {
:root:has(.ios, .android) {
--new-pillar-colour: var(--darkmode-pillar, var(--darkmodeFeature));
}
}
body.ios #feature-article-container .element-atom:first-of-type + p:fi
Don sakin layi na farko bayan atom ɗin abu a cikin kwantena na labarin, harafin farko ya kamata ya yi amfani da launin ginshiƙi na biyu (ko baki a matsayin faɗuwa). Wannan ya shafi kwantenan labarin fasali, na yau da kullun, da sharhi akan na'urorin iOS da Android, gami da lokuta inda ƙofar shiga ta bayyana kafin sakin layi.
A kan iOS da Android, taken labarin a cikin kwantenan fasali, na yau da kullun, da sharhi bai kamata ya kasance da tsayi ba.
Kwantena na kayan daki a cikin waɗannan kwantenan ya kamata ya kasance da tazara na 4px a sama da 10px a gefe. Alamun abun ciki a ciki ya kamata su kasance m, su yi amfani da dangin rubutun Guardian Headline, su dace da launin ginshiƙi, kuma a yi musu babban harafi.
Taken (h1) a cikin kwantenan kayan daki ya kamata ya kasance 32px, m, tare da tazara na 12px a ƙasa, kuma launinsa ya zama duhu (#121212).
Hotunan hoto a cikin kwantenan kayan daki ya kamata a nuna su azaman tubalan abubuwa.
wrapper 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 (fasali, na yau da kullun, sharhi),
sanya hotuna da kwantenan su cikakken faɗi da kuma 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, ga duk nau'ikan labarai, daidaita tazarar standfirst /
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, ga duk nau'ikan labarai, saita rubutu don sakin layin 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, ga duk nau'ikan labarai, salo hanyoyin haɗi a cikin standfirst /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #feature-article-container .furniture-wrapper .standfirst__inner a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner a {
color: var(--new-pillar-colour) !important;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
border-bottom: none;
}
/ A kan iOS da Android, ga duk nau'ikan labarai, salo yanayin hover na hanyoyin haɗi a cikin standfirst /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #feature-article-container .furniture-wrapper .standfir
A kan hover, hanyoyin haɗi a cikin standfirst (gami da abubuwan jeri da hanyoyin haɗi na yau da kullun) a cikin kwantenan labarin don na'urorin iOS da Android za su saita launin layin ƙasa zuwa sabon launin ginshiƙi.
Ga ɓangaren meta a cikin waɗannan kwantenan labarin akan duka iOS da Android, babu gefe. Rubutun byline, gami da sunan marubuci da duk wani abin da ke da alaƙa, suma za su yi amfani da sabon launin ginshiƙi.
ɓangaren meta__misc ba shi da tazara, kuma duk wani gumakan SVG a cikinsa suma za su bi ka'idojin salo iri ɗaya.
ure-wrapper .meta__misc svg {
stroke: var(--new-pillar-colour);
}
body.ios #feature-article-container .furniture-wrapper .element--showcase #caption-button,
body.ios #standard-article-container .furniture-wrapper .element--showcase #caption-button,
body.ios #comment-article-container .furniture-wrapper .element--showcase #caption-button,
body.android #feature-article-container .furniture-wrapper .element--showcase #caption-button,
body.android #standard-article-container .furniture-wrapper .element--showcase #caption-button,
body.android #comment-article-container .furniture-wrapper .element--showcase #caption-button {
display: flex;
padding: 5px;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
right: 14px;
}
body.ios #feature-article-container .
