Hii ni kizuizi cha msimbo wa CSS unaofafanua fonti maalum za tovuti. Inaanzisha familia ya fonti ya "Guardian Headline Full" kwa mitindo na uzani tofauti, kama vile nyepesi, ya kawaida, ya kati, na nusu-nzito, kila moja ikiwa na matoleo ya kawaida na ya italiki. Msimbo unabainisha mahali pa kupakia faili za fonti kutoka, kwa kutumia miundo tofauti kama WOFF2, WOFF, na TTF kwa upatanifu katika vivinjari mbalimbali.
Hii ni karatasi ya mitindo ya CSS inayofafanua nyuso za fonti za typografia ya Guardian. Inapakia faili mbalimbali za fonti (katika miundo ya WOFF2, WOFF, na TTF) kwa familia za fonti za "Guardian Headline Full" na "Guardian Titlepiece", ikibainisha uzani tofauti (nyepesi, ya kawaida, nzito, nyeusi) na mitindo (ya kawaida au italiki) kwa kila moja. URL zinaelekeza kwenye faili za fonti zilizowekwa kwenye seva ya mali za Guardian.
Hii ni karatasi ya mitindo ya CSS inayofafanua familia ya fonti ya "Guardian Headline Full". Inajumuisha faili nyingi za fonti kwa uzani na mitindo tofauti, kama vile ya kawaida, italiki, ya kati, nusu-nzito, nzito, na nyeusi. Kila uso wa fonti hupakiwa kutoka kwenye seva ya mali za Guardian katika miundo mbalimbali kama WOFF2, WOFF, na TTF ili kuhakikisha upatanifu katika vivinjari tofauti. Mitindo inabainisha uzani wa fonti na mtindo kwa kila lahaja, kuanzia 400 (ya kawaida) hadi 900 (nyeusi), pamoja na matoleo yanayolingana ya italiki inapohitajika.
Hii ni kizuizi cha msimbo wa CSS, si maandishi ya kubadilishwa katika Kiingereza asilia. Inafafanua mitindo ya fonti na sheria za mpangilio kwa ukurasa wa wavuti. Ikiwa ulimaanisha kutoa maandishi tofauti, tafadhali yashiriki, nami nitayaandika upya kwa Kiingereza fasaha na asilia.
Kwa takwimu za gridi shirikishi zenye maelezo ya kuvutia, mtindo wa maelezo unatumika kwa nafasi ya 4px juu na 0 chini. Katika sehemu kuu ya makala, sehemu za maudhui shirikishi, sehemu za maoni, na maeneo ya kipengele, vipengele vya gridi kwa mistari na taarifa za meta vimewekwa katika eneo la gridi linaloanzia safu ya 2, safu ya 1 hadi safu ya 5, safu ya 2. Kipengele cha mistari kina urefu uliowekwa kutoshea maudhui yake na ukingo wa juu wa 5px, wakati kipengele cha meta kina ukingo wa juu wa 18px. Katika upana wa skrini wa 81.25em na zaidi, safu za gridi zimewekwa kuwa 219px, 1px, 620px, 80px, na 300px. Kwenye vifaa vya iOS na Android, maandishi ya utangulizi katika vichwa vya makala hutumia familia ya fonti ya Guardian Headline kwa uzani wa kati, na kichocheo cha sehemu kinaonyeshwa kama kizuizi na herufi ya kwanza ikiwa kubwa. Darasa la keyline-4 linaongeza nafasi ya juu ya 12px. Majina ya waandishi katika sehemu ya meta hutumia fonti ya Guardian Headline kwa uzani nzito, na viungo vyovyote ndani yake pia viko nzito. Picha katika takwimu za makala zina urefu wao umewekwa kiotomatiki, na aya zinazofuata atomi za vipengele hazina ukingo wa juu. Fonti ya Guardian Headline Full inafafanuliwa kwa mitindo nyepesi na nyepesi ya italiki, kwa kutumia miundo mbalimbali ya faili za fonti.
Siwezi kusaidia na ombi hili kwa sababu maandishi uliyotoa ni msimbo wa CSS wa kufafanua fonti za wavuti, si maudhui ya lugha asilia yanayoweza kuandikwa upya kwa Kiingereza fasaha. Ikiwa una maandishi tofauti unayotaka nikusaidie nayo, tafadhali yashiriki, nami nitafurahi kuyaandika upya kwako.
Hapa kuna maandishi yaliyoandikwa upya kwa Kiingereza fasaha na asilia:
```
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 {
/ Hakuna mitindo maalum iliyofafanuliwa hapa, tu kiteuzi /
}
Hii ni kizuizi cha msimbo wa CSS, si maandishi ya kubadilishwa katika Kiingereza asilia. Ina viteuzi na sheria za mitindo kwa tovuti, pengine kurasa za makala za Guardian. Ikiwa ungependa, naweza kueleza msimbo huu wa CSS unafanya nini kwa Kiingereza rahisi, au unaweza kutoa maandishi tofauti ya kuandikwa upya. Nijulishe jinsi ungependa kuendelea!
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,
.furnitur
Hapa kuna maandishi yaliyoandikwa upya kwa Kiingereza fasaha na asilia:
Kifungu cha sehemu ya standfirst kina ukingo mdogo wa kushoto. Lebo katika sehemu za kichwa cha makala na kichwa kikuu zina nafasi kidogo ya ziada juu. Kichwa kikuu kinatumia fonti nzito, na upana wa juu wa pikseli 620 na ukubwa wa fonti wa pikseli 32. Kwenye skrini kubwa (zaidi ya 71.25em), kichwa kikuu ni chembamba kidogo kwa pikseli 540 lakini kikubwa kwa pikseli 50. Kwenye skrini za kati (zaidi ya 46.25em), vipengele vya keyline na mistari havina ukingo wa kulia, lakini kwenye skrini kubwa (zaidi ya 61.25em), vimefichwa kabisa. Mistari hutumia rangi ya mpaka wa kichwa iliyofafanuliwa na kigezo.
Sehemu ya meta haina ukingo wa kulia kwenye skrini za kati. Aikoni za kijamii, sehemu ya maoni, na mipaka yake yote hutumia rangi ya mpaka wa kichwa. Vipengele vingine ndani ya kontena la meta vimefichwa. Sehemu ya standfirst imewekwa kwa ukingo mdogo wa kushoto na nafasi, na kwenye skrini za kati, inapata nafasi kidogo ya juu. Maandishi ya standfirst ni ya uzani wa kawaida, pikseli 20, na nafasi ndogo chini.
Sehemu kuu ya media imewekwa kwa msimamo wa jamaa, bila ukingo wa juu na ukingo mdogo wa chini. Inachukua upana kamili wa kontena lake. Kwenye skrini kubwa, ukingo wa chini huondolewa, lakini kwenye skrini ndogo (chini ya 46.24em), inapanuka hadi upana kamili wa viewport na ukingo hasi wa kushoto. Maelezo yamewekwa chini ya media, na rangi ya usuli, rangi ya maandishi, na nafasi. Maelezo yanajumuisha kipengele kilichofichwa na kipengele kinachoonekana kinachochukua sehemu kubwa ya upana. Kwenye skrini ndogo, maelezo yana nafasi zaidi ya mlalo. Pia kuna kitufe cha kubadilisha maelezo, kilichowekwa chini kulia, na umbo la duara na aikoni iliyopunguzwa kidogo.
Kwenye skrini kubwa sana, safu kuu ya maudhui shirikishi ina msimamo wa juu uliorekebishwa kidogo na urefu. Vichwa ndani ya safu hii vina upana wa juu wa pikseli 620. Kwa vifaa vya rununu (iOS na Android), kuna vigezo maalum vya rangi kwa hali ya giza, na rangi ya kipengele na lahaja ya hali ya giza. Rangi mpya ya nguzo hutumia vigezo hivi, na katika hali ya giza, inabadilika hadi rangi ya kipengele ya hali ya giza. Hatimaye, kwenye iOS, kuna sheria inayolenga aya ya kwanza baada ya atomi ya kipengele katika kontena la makala ya kipengele.
Hii ni karatasi ya mitindo ya CSS ya kiufundi, si maandishi yaliyokusudiwa kuandikwa upya. Ina viteuzi na sheria za mitindo kwa tovuti. Ikiwa ungependa, naweza kueleza inafanya nini au kukusaidia kurahisisha au kuibadilisha. Nijulishe jinsi ungependa kuendelea.
figure.element-image {
position: relative;
margin: 14px 0 0 -10px;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto;
}
/ Kwenye iOS na Android, kwa aina zote za makala, fanya picha na kontena zake ziwe za upana kamili na zisizo na uwazi /
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;
}
/ Kwenye iOS na Android, rekebisha nafasi na mpangilio wa standfirst (aya ya utangulizi) /
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;
}
/ Kwenye iOS na Android, weka fonti kwa aya ndani ya 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;
}
/ Kwenye iOS na Android, pamba viungo ndani ya standfirst (pamoja na vipengee vya orodha) /
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;
}
/ Kwenye iOS na Android, pamba hali ya kuelea kwa viungo hivyo /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #feature-article-container .furniture-wrapper .standfirst__inne
Kwa hali za kuelea kwa viungo ndani ya sehemu ya standfirst ya makala za kipengele, za kawaida, na za maoni kwenye iOS na Android, rangi ya mstari wa chini inapaswa kuendana na rangi mpya ya nguzo. Sehemu ya meta katika kontena hizi za makala haipaswi kuwa na ukingo. Maandishi ya byline, pamoja na majina ya waandishi na viungo, yanapaswa pia kutumia rangi mpya
