Hii ni karatasi ya mitindo ya CSS inayofafanua familia ya fonti ya "Guardian Headline Full". Inajumuisha sheria nyingi za font-face, kila moja ikibainisha uzito na mtindo tofauti wa fonti, pamoja na URL za faili za fonti katika muundo mbalimbali (WOFF2, WOFF, na TTF). Uzito unatofautiana kutoka nyepesi (300) hadi nusu-nene (600), na mitindo ya kawaida na ya italiki imejumuishwa. Faili za fonti zinahifadhiwa kwenye seva ya mali ya The Guardian.
Maandishi haya yanaonekana kuwa msimbo wa CSS, si lugha ya asili. Inafafanua mitindo ya fonti na sheria za mpangilio kwa ukurasa wa wavuti. Kwa kuwa ni msimbo wa kiufundi, kuuandika upya kwa Kiingereza fasaha hakutumiki. Ikiwa ulimaanisha kushiriki maandishi tofauti, tafadhali yatoe, nami nitafurahi kusaidia.
kushoto: -11px.
Safu kuu ya maudhui kwa makala shirikishi haina ukingo au nafasi ya ndani kuzunguka vipengele vilivyopachikwa, ikiwa na nafasi ya ndani ya 12px juu na chini. Wakati aya inapofuatwa na kipengele kilichopachikwa, nafasi ya ndani huondolewa na kubadilishwa na ukingo wa 12px. Vipengele vya ndani vimewekewa kikomo cha upana wa juu wa 620px.
Kwenye skrini pana kuliko 61.25em, takwimu za ndani pia zimepunguzwa hadi 620px.
Kwa sehemu za media zilizo na video za kurudiarudia, maelezo ya picha yamewekwa juu ya vipengele vingine, na kitufe cha kurudia kimepangiliwa chini kulia na nafasi ya ziada. Vitufe vya kunyamazisha na kusikiliza vimewekwa kulia na nafasi ndogo ya kushoto. Kitufe cha maelezo ya picha kiko juu ya kila kitu, na kwenye skrini kubwa kimewekwa karibu na chini.
Kwa cinemagraphs (aina ya video ya kurudiarudia), kikomo cha urefu huondolewa kwenye skrini pana kuliko 46.25em.
Katika sehemu ya mwili, video zinazojisimamia zinaonyeshwa kama vitalu vilivyo na upana wa juu wa 620px na ukingo wa 12px. Video na takwimu yake ya kurudia huchukua upana kamili, na urefu wa video hurekebishwa kiotomatiki.
Wakati video imewekwa katika hali ya kuzama, inapanuka kujaza nafasi inayopatikana, kuondoa kikomo cha upana na ukingo. Kwenye skrini pana sana (zaidi ya 71.25em), chombo cha video kina upana wa 1140px na kuhuishwa kushoto kwa 180px, na maelezo ya picha yameingizwa ndani. Kwenye skrini pana zaidi (zaidi ya 81.25em), inakuwa 1300px kwa upana na kuhuishwa kushoto kwa 260px.
Muundo unatumia rangi maalum: kijivu kwa tarehe, kijivu nyepesi kwa mipaka, kijivu nyepesi zaidi kwa maelezo ya picha, na mandharinyuma ya giza yenye uwazi kwa maandishi ya maelezo ya picha. Rangi kuu ya kipengele ni nyekundu iliyokolea, ambayo inaweza kubadilishwa na rangi maalum ya nguzo.
Vichwa vidogo, manukuu ya kuvuta, na manukuu ya block hutumia rangi ya pili ya nguzo, ambayo inaweza kubadilishwa katika hali ya giza.
Vipengele vilivyopachikwa havina nafasi ya ndani. Wakati kipengele kilichopachikwa kinaonekana mara baada ya kipengele kingine au mstari wa mlalo, aya inayofuata haipati ukingo wa ziada wa juu, kuhakikisha nafasi thabiti. Hii inatumika katika sehemu mbalimbali za maudhui na mipangilio shirikishi.
Hii ni orodha ya viteuzi vya CSS inayolenga aya maalum katika mpangilio wa ukurasa wa wavuti. Inatumika nafasi ya juu ya 14 pixels kwa aya zinazokuja mara baada ya vipengele fulani kama "element-atom", "sign-in-gate", au mistari ya mlalo (lakini si ya mwisho). Viteuzi vinashughulikia sehemu mbalimbali za ukurasa, kama maudhui kuu, mwili wa maoni, na mwili wa kipengele.
Sehemu ya pili ya CSS inatumia kipengele cha `:first-letter` kupamba herufi ya kwanza ya aya hizo hizo, uwezekano kwa athari ya herufi kubwa ya mwanzo. Inatumika mtindo huu katika vyombo mbalimbali kama safu kuu, mwili wa makala, na sehemu za maudhui shirikishi.
---
Sheria za CSS zinatumika mtindo wa herufi kubwa ya mwanzo kwa herufi ya kwanza ya aya ya kwanza baada ya vipengele fulani, kama mistari ya mlalo au vyombo vya matangazo, ndani ya sehemu maalum za maudhui. Herufi kubwa ya mwanzo inatumia fonti ya Guardian Headline, ni nene, kubwa (111px), na inaelea kushoto na maandishi ya herufi kubwa. Ina ukingo wa kulia, inajipanga wima juu, na inatumia kigezo cha rangi maalum.
Kwa maudhui shirikishi na sehemu nyingine, aya zinazofuata mistari ya mlalo hazina nafasi ya juu.
Manukuu ya kuvuta ndani ya sehemu hizi za maudhui yamepunguzwa kwa upana wa juu wa 620px.
Maelezo ya picha kwa vipengele vya onyesho yamewekwa tuli na huchukua upana kamili, hadi 620px. Kwenye skrini pana (zaidi ya 71.25em), yanakuwa yamewekwa kabisa na upana wa juu wa 140px, na kwenye skrini pana zaidi (zaidi ya 81.25em), upana wa juu unaongezeka hadi 220px.
Vipengele vya kuzama vinachukua upana kamili wa viewport, kwa kuzingatia upana wa scrollbar. Kwenye skrini ndogo, vina upana wa juu wa 978px, na maelezo ya picha yana nafasi ya mlalo. Kwenye skrini za kati, upana wa juu ni 738px. Kwenye skrini ndogo sana, kipengele kinahuishwa kushoto na ukingo hasi, na maelezo ya picha hupata nafasi ya ziada.
Kwa takwimu za onyesho katika maudhui ya mwili, kuna ukingo hasi wa kushoto kwenye skrini kubwa ili kuzipanga vizuri.
Kifungu cha samani kimewekwa kwa njia ya jamaa, na kwenye skrini pana kuliko 61.25em, mtindo wa ziada unatumika (ingawa sheria haijakamilika).
.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
Siwezi kuandika maandishi haya upya kwa kuwa yanaonekana kuwa msimbo wa CSS, si maandishi ya lugha ya asili. Je, unaweza kutoa kifungu cha Kiingereza kilichoandikwa ambacho ungependa nikirekebishe?
Hii ni seti ya sheria za font-face kwa familia ya fonti ya "Guardian Headline Full". Kila sheria inafafanua mtindo au uzito tofauti wa fonti, kwa kutumia faili zinazohifadhiwa kwenye tovuti ya Guardian. Muundo unajumuisha WOFF2, WOFF, na TTF kwa upatanifu wa vivinjari. Uzito unatofautiana kutoka kawaida (400) hadi nyeusi (900), na mitindo ya kawaida na italiki inapatikana.
Maandishi haya yanaonekana kuwa msimbo wa CSS, si lugha ya asili. Inafafanua mitindo ya fonti na sheria za mpangilio kwa tovuti, uwezekano wa The Guardian. Kwa kuwa ni msimbo wa kiufundi, kuuandika upya kwa "Kiingereza fasaha cha asili" hakutumiki—inakusudiwa kusomwa na vivinjari, si watu. Ikiwa ungependa, naweza kueleza msimbo huu unafanya nini kwa Kiingereza rahisi.
Kwa vifaa vya iOS na Android, lebo ndani ya kifungu cha samani cha chombo cha makala zimepangiliwa kwa maandishi mazito, kwa kutumia familia ya fonti ya Guardian headline, na zina rangi kulingana na rangi ya nguzo, na maandishi ya herufi kubwa.
Kwenye iOS na Android, kichwa kikuu katika kifungu cha samani kimewekwa kwa saizi 32, nene, na nafasi ya ndani ya 12px chini, na rangi ya giza (karibu nyeusi).
Kwa picha katika kifungu cha samani kwenye majukwaa yote mawili, zimewekwa kwa njia ya jamaa, na ukingo wa 14px juu na ukingo hasi mdogo wa kushoto, na zinaenea hadi upana kamili wa skrini (kwa kuzingatia scrollbar yoyote). Picha zenyewe, pamoja na viungo vyake na vyombo vya ndani, vina mandharinyuma ya uwazi na vinahifadhi urefu wake wa asili.
Standfirst (maandishi ya utangulizi) katika kifungu cha samani kwenye majukwaa yote mawili ina nafasi ya ndani juu na chini, na ukingo hasi mdogo wa kulia ili kupangilia vizuri na makali ya skrini.
.ment-article-container .furniture-wrapper .standfirst__inner p {
font-family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif;
}
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #feature-article-container .furniture-wrapper .standfirst__inner a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner a {
color: var(--new-pillar-colour) !important;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
border-bottom: none;
}
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #feature-article-container .furniture-wrapper .standfirst__inner a:hover,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner a:hover,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #feature-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #standard-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #standard-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #comment-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #comment-article-container .furniture-wrapper .standfirst__inner a:hover {
text-decoration-color: var(--new-pillar-colour);
}
body.ios #feature-article-container .furniture-wrapper .meta,
body.ios #standard-article-container .furniture-wrapper .meta,
body.ios #comment-article-container .furniture-wrapper .meta,
body.android #feature-article-container .furniture-wrapper .meta,
body.android #standard-article-container .furniture-wrapper .meta,
body.android #comment-article-container .furniture-wrapper .meta {
margin: 0;
}
body.ios #feature-article-container .furniture-wrapper .meta .byline,
body.ios #feature-article-container .furniture-wrapper .meta .byline__author,
body.ios #feature-article-container .furniture-wrapper .meta span.byline__author a,
body.ios #feature-article-container .furniture-wrapper .meta .meta__byline span,
body.ios #standard-article-container .furniture-wrapper .meta .byline,
body.ios #standard-article-container .furniture-wrapper .meta .byline__author,
body.ios #standard-article-container .furniture-wrapper .meta span.byline__author a,
body.ios #standard-article-container .furniture-wrapper .meta .meta__byline span,
body.ios #comment-article-container .furniture-wrapper .meta .byline,
body.ios #comment-article-container .furniture-wrapper .meta .byline__author,
body.ios #comment-article-container .furniture-wrapper .meta span.byline__author a,
body.ios #comment-article-container .furniture-wrapper .meta .meta__byline span,
body.android #feature-article-container .furniture-wrapper .meta .byline,
body.android #feature-article-container .furniture-wrapper .meta .byline__author,
body.android #feature-article-container .furniture-wrapper .meta span.byline__author a,
body.android #feature-article-container .furniture-wrapper .meta .meta__byline span,
body.android #standard-article-container .furniture-wrapper .meta .byline,
body.android #standard-article-container .furniture-wrapper .meta .byline__author,
body.android #standard-article-container .furniture-wrapper .meta span.byline__author a,
body.android #standard-article-container .furniture-wrapper .meta .meta__byline span,
body.android #comment-article-container .furniture-wrapper .meta .byline,
body.android #comment-article-container .furniture-wrapper .meta .byline__author,
body.android #comment-article-container .furniture-wrapper .meta span.byline__author a,
body.android #comment-article-container .furniture-wrapper .meta .meta__byline span {
/ Hakuna mitindo maalum iliyofafanuliwa hapa /
}
Kwenye Android, byline na viungo vya waandishi katika sehemu za makala na maoni hutumia rangi ya nguzo kwa maandishi yao. Kwenye iOS, mtindo huo huo unatumika.
Kwa iOS na Android, eneo la habari za meta katika sehemu hizi halina nafasi ya ziada ya ndani. Aikoni zozote (kama vipengele vya SVG) katika eneo hilo hutumia rangi ya nguzo kwa mstari wao.
Kitufe cha maelezo ya picha katika vipengele vya onyesho kimepangiliwa kwa njia sawa kwenye majukwaa yote mawili: ni kitufe kidogo, kilicho katikati (28 kwa 28 pixels) na nafasi ya ndani ya 5 pixels, kimewekwa 14 pixels kutoka kulia.
Mwili kuu wa makala kwenye iOS na
