Seo bloca de chòd CSS a tha a’ mìneachadh teaghlach cruth-clò ris an canar “Guardian Headline Full” agus a’ sònrachadh càite an luchdaich thu diofar fhaidhlichean cruth-clò. Tha e a’ gabhail a-steach iomadh cuideam cruth-clò (aotrom, àbhaisteach, meadhanach, semibold) agus stoidhlichean (àbhaisteach agus eadailteach), gach fear le a sheata fhèin de fhaidhlichean stòiridh ann an diofar chruthan (WOFF2, WOFF, agus TTF) air an cumail air làrach-lìn an Guardian. Tha an còd a’ dèanamh cinnteach gu bheil an cruth-clò ri fhaighinn airson a chleachdadh air duilleag-lìn le bhith a’ ceangal ris na faidhlichean sin.
Seo duilleag-stoidhle CSS a tha a’ mìneachadh aghaidhean cruth-clò airson clò-sgrìobhadh an Guardian. Bidh e a’ luchdadh diofar fhaidhlichean cruth-clò (ann an cruthan WOFF2, WOFF, agus TTF) airson na teaghlaichean cruth-clò “Guardian Headline Full” agus “Guardian Titlepiece”, a’ sònrachadh diofar chuideaman (aotrom, àbhaisteach, trom, dubh) agus stoidhlichean (àbhaisteach no eadailteach) airson gach fear. Tha na URLan a’ comharrachadh faidhlichean cruth-clò air an cumail air frithealaiche maoin an Guardian.
Seo bloca de chòd CSS a tha a’ mìneachadh teaghlach cruth-clò “Guardian Headline Full” le diofar chuideaman agus stoidhlichean. Tha e a’ gabhail a-steach iomadh riaghailt @font-face, gach fear a’ sònrachadh faidhlichean stòiridh a’ chruth-clò ann an diofar chruthan (woff2, woff, agus truetype) agus na feartan font-weight agus font-style a fhreagras riutha. Tha na cuideaman a’ dol bho 400 (àbhaisteach) gu 900 (dubh), le gach cuid stoidhlichean àbhaisteach agus eadailteach rim faighinn airson gach cuideam. Tha na faidhlichean cruth-clò air an cumail air frithealaiche maoin an Guardian.
Seo bloca de chòd CSS a tha a’ mìneachadh stoidhlichean cruth-clò agus riaghailtean cruth airson duilleag-lìn, a rèir coltais bho làrach-lìn an Guardian. Bidh e a’ stèidheachadh chruthan-clò gnàthaichte (mar “Guardian Headline” agus “Guardian Titlepiece”) le diofar chuideaman agus chruthan, agus an uairsin a’ cleachdadh siostam cruth clèithe gus earrannan susbaint (mar tiotal, ceann-sgrìobhadh, bodhaig, msaa) a chuir air dòigh gu freagairteach thar diofar mheudan sgrìn. Bidh an cruth a’ gleusadh cholbhan agus astaran aig diofar bhreakpoints (m.e., 30em, 46.25em, 61.25em, 71.25em) gus dèanamh cinnteach à taisbeanadh ceart air fòn-làimhe, clàr, agus coimpiutair deasg.
Airson figearan clèithe eadar-ghnìomhach le fo-thiotalan bogaidh, tha stoidhle an fho-thiotal a’ cur padding de 4px air a’ mhullach agus 0 air a’ bhonn. Tha seo a’ buntainn thar diofar raointean susbaint, a’ gabhail a-steach bodhaigean artaigil, susbaint eadar-ghnìomhach, earrannan bheachdan, agus bodhaigean feart.
Ann an cruth clèithe eadar-ghnìomhach, tha na loidhnichean agus na h-earrannan meta air an suidheachadh anns an raon clèithe a’ sìneadh bho rèithe 2, colbh 1 gu rèithe 5, colbh 2. Tha àirde aig an earrann loidhnichean a fhreagras air a shusbaint, le iomall àrd de 5px. Tha iomall àrd de 18px aig an earrann meta.
Airson scrionaichean nas fharsainge na 81.25em (1300px), tha an clèithe eadar-ghnìomhach a’ cleachdadh cruth colbh de 219px, 1px, 620px, 80px, agus 300px.
Air innealan iOS agus Android, tha an teacsa standfirst ann an cinn artaigil a’ cleachdadh teaghlach cruth-clò Guardian Headline le cuideam meadhanach. Tha earrann kicker an artaigil air a thaisbeanadh mar bhloca, le ciad litir air a chalpaileadh. Tha padding àrd a bharrachd de 12px aig an eileamaid keyline-4. Tha ainmean ùghdaran byline a’ cleachdadh cuideam trom anns a’ chruth-clò Guardian Headline, agus tha ceanglaichean annta cuideachd trom. Tha àirde fèin-ghluasadach aig ìomhaighean ann am figearan artaigil, agus chan eil iomall àrd aig paragrafan a leanas ataman eadar-ghnìomhach.
Tha an cruth-clò Guardian Headline Full air a mhìneachadh le iomadh cruth faidhle (woff2, woff, agus ttf) airson cuideam aotrom agus stoidhle àbhaisteach, a bharrachd air stoidhle eadailteach aotrom.
Chan urrainn dhomh cuideachadh leis an iarrtas seo oir is e còd CSS a th’ anns an teacsa a thug thu seachad airson cruthan-clò lìn a mhìneachadh, chan e susbaint cànain nàdarra a ghabhas ath-sgrìobhadh gu Beurla fileanta. Ma tha teacsa eile agad a bu mhath leat gun cuidich mi thu leis, feuch an roinn thu e, agus bidh mi toilichte do chuideachadh.
Seo an teacsa air ath-sgrìobhadh ann am Beurla fileanta, nàdarra:
```
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 {
/ Chan eil stoidhle shònraichte air a mhìneachadh an seo, ach tha an taghadair air a chumail airson stoidhle a dh’fhaodadh a bhith ann /
}
Seo bloca de chòd CSS, chan e teacsa a dh’fheumar ath-sgrìobhadh ann am Beurla nàdarra. Tha taghadairean agus riaghailtean stoidhle ann airson làrach-lìn, a rèir coltais duilleagan artaigil an Guardian. Ma thogras tu, faodaidh mi mìneachadh dè a tha an CSS seo a’ dèanamh ann am Beurla shìmplidh, no faodaidh tu teacsa eadar-dhealaichte a thoirt seachad airson ath-sgrìobhadh. Leig fios dhomh ciamar a bu mhath leat a dhol air adhart!
figure.element.element--showcase.element-showcase,
[data-gu-name="body"] .content__main-column--interactive figure.element.element--showcase.element-showcase {
margin-left: -240px !important;
}
@media (min-width: 61.25em) {
.furniture-wrapper {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 0px;
grid-template-columns: [title-start headline-start meta-start standfirst-start] repeat(5, 1fr) [title-end headline-end meta-end standfirst-end portrait-start] repeat(5, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start] 0.75fr [standfirst-end meta-start] auto [meta-end portrait-end];
}
.furniture-wrapper #headline > div:first-child,
.furniture-wrapper [data-gu-name="headline"] > div:first-child,
.furniture-wrapper .headline > div:first-child {
border-top: 1px solid var(--headerBorder);
}
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name="meta"] {
position: relative;
padding-top: 2px;
margin-right: 0;
}
.furniture-wrapper .standfirst .content__standfirst,
.furniture-wrapper #standfirst .content__standfirst,
.furniture-wrapper [data-gu-name="standfirst"] .content__standfirst {
margin-bottom: 4px;
}
.furniture-wrapper .standfirst ul li,
.furniture-wrapper #standfirst ul li,
.furniture-wrapper [data-gu-name="standfirst"] ul li {
font-size: 20px;
}
.furniture-wrapper .standfirst li a,
.furniture-wrapper .standfirst a,
.furniture-wrapper #standfirst li a,
.furniture-wrapper #standfirst a,
.furniture-wrapper [data-gu-name="standfirst"] li a,
.furniture-wrapper [data-gu-name="standfirst"] a {
border-bottom: none;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
}
.furniture-wrapper .standfirst li a:hover,
.furniture-wrapper .standfirst a:hover,
.furniture-wrapper #standfirst li a:hover,
.furniture-wrapper #standfirst a:hover,
.furniture-wrapper [data-gu-name="standfirst"] li a:hover,
.furniture-wrapper [data-gu-name="standfirst"] a:hover {
text-decoration-color: var(--new-pillar-colour);
}
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name="standfirst"] p:first-of-type {
border-top: 1px solid var(--headerBorder);
padding-bottom: 0;
}
}
@media (min-width: 61.25em) and (min-width: 71.25em) {
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name="standfirst"] p:first-of-type {
border-top: unset;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper figure {
margin: 0 0 0 -10px;
}
.furniture-wrapper figure[data-spacefinder-role="inline"].element {
max-width: 630px;
}
}
@media (min-width: 71.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(2, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(7, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 80px [title-end headline-start] auto [headline-end standfirst-start meta-start] auto [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
content: "";
width: 540px;
position: absolute;
top: 0;
background-color: var(--headerBorder);
height: 1px;
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name="standfirst"] p {
border-top: unset;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name="standfirst"]:before {
content: "";
width: 1px;
background-color: var(--headerBorder);
height: 100%;
position: absolute;
top: 0;
left: 0.5px;
}
}
@media (min-width: 81.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(3, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(8, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] 0.75fr [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
width: 620px;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper [data-gu-name="standfirst"]:before {
left: 0.5px;
}
}
Seo an teacsa air ath-sgrìobhadh ann am Beurla fileanta, nàdarra:
Tha beagan atharrachadh clì air a’ chòmhdach airson earrann an standfirst. Tha beagan padding a bharrachd aig na bileagan ann an ceann artaigil agus earrannan tiotal aig a’ mhullach. Tha cuideam trom aig a’ cheann-sgrìobhadh, tha e air a chuingealachadh gu leud as àirde, agus bidh e a’ meudachadh air scrionaichean nas motha. Air scrionaichean meadhanach, chan eil iomall deas aig na h-eileamaidean keyline agus lines, agus air scrionaichean nas motha, tha iad air am falach gu tur. Bidh na loidhnichean a’ cleachdadh dath stròc a fhreagras air crìoch a’ chinn.
Chan eil iomall deas aig an earrann meta air scrionaichean meadhanach. Bidh na h-ìomhaighean sòisealta, ceanglaichean bheachdan, agus na crìochan aca uile a’ cleachdadh dath crìoch a’ chinn. Tha cuid de eileamaidean eadar-ghnìomhach anns an earrann meta air am falach. Tha teacsa an standfirst air a tharraing a-steach beagan le padding clì agus air a shuidheachadh an coimeas ris a’ ghobhar aige. Air scrionaichean meadhanach, gheibh e beagan padding àrd. Tha paragrafan anns an standfirst air an suidheachadh gu cuideam cruth-clò sònraichte agus meud, le beagan padding bunaiteach.
Tha am meadhan prìomh earrann air a shuidheachadh an coimeas, chan eil iomall àrd aige, agus tha iomall beag bunaiteach aige. Tha e a’ sìneadh thairis air làn leud a ghobhair. Air scrionaichean nas motha, tha an iomall bunaiteach air a thoirt air falbh, agus air scrionaichean nas lugha, bidh e a’ leudachadh gu làn leud an viewport le iomall clì àicheil. Tha an fo-thiotal air a chuir aig bonn a’ mheadhain, le dath cùl-fhiosrachaidh, dath teacsa, agus padding. Tha teacsa an fho-thiotal a’ gabhail a-steach span a chleachdas dath crìoch a’ chinn, agus tha a’ chiad span air fhalach fhad ‘s a tha an dàrna fear air a shealltainn. Air scrionaichean nas lugha, bidh padding an fho-thiotal a’ meudachadh. Nuair a tha an fo-thiotal air fhalach, bidh e follaiseach. Tha putan fo-thiotal air a shuidheachadh aig a’ bhonn deas, le cùl-fhiosrachadh cruinn, gun chrìoch, agus beagan padding. Tha ìomhaigh a’ phutan air a lughdachadh beagan.
Air scrionaichean nas motha, tha àrd-iomall agus atharrachadh àirde aig a’ phrìomh cholbh. Tha na cinn-sgrìobhaidhean na bhroinn air an cuingealachadh gu leud as àirde. Ann am modh dorcha air innealan iOS agus Android, tha caochladairean dath sònraichte air am mìneachadh, a’ gabhail a-steach dath feart agus caochladair modh dorcha. Tha dath a’ phrìomh cholbh ùr a’ cleachdadh dath prìomh cholbh a’ bhunait mar bhun-roghainn, ach bidh e ag atharrachadh gu dath colbh modh dorcha ann am modh dorcha. Air iOS, tha a’ chiad atom eileamaid air a leantainn le paragraf air a stoidhleachadh ann an dòigh shònraichte.
Is e duilleag-stoidhle CSS teignigeach a tha seo, chan e teacsa a tha air a dhealbhadh airson ath-sgrìobhadh. Tha taghadairean agus riaghailtean stoidhle ann airson làrach-lìn. Ma thogras tu, faodaidh mi mìneachadh dè a tha e a’ dèanamh no do chuideachadh ga shìmpleachadh no ga ath-dhealbhadh. Leig fios dhomh ciamar a bu mhath leat a dhol air adhart.
figure.element-image {
position: relative;
margin: 14px 0 0 -10px;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto;
}
/ Air iOS agus Android, airson gach seòrsa artaigil, dèan ìomhaighean agus na gobharan aca làn-leud agus follaiseach /
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;
}
/ Air iOS agus Android, atharraich astar agus co-thaobhadh an standfirst (paragraf tòiseachaidh) /
body.ios #feature-article-container .furniture-wrapper .standfirst,
body.ios #standard-article-container .furniture-wrapper .standfirst,
body.ios #comment-article-container .furniture-wrapper .
