Dyma floc o god CSS sy'n diffinio teulu ffont o'r enw "Guardian Headline Full" ac yn nodi o ble i lwytho ffeiliau ffont gwahanol. Mae'n cynnwys sawl pwysau ffont (ysgafn, rheolaidd, canolig, lled-frwys) ac arddulliau (normal ac italaidd), pob un gyda'i set ei hun o ffeiliau ffynhonnell mewn fformatau gwahanol (WOFF2, WOFF, a TTF) wedi'u cynnal ar wefan y Guardian. Mae'r cod yn sicrhau bod y ffont ar gael i'w ddefnyddio ar dudalen we trwy gysylltu รข'r ffeiliau hyn.
Dyma daflen arddull CSS sy'n diffinio wynebau ffont ar gyfer teipograffeg y Guardian. Mae'n llwytho sawl ffeil ffont (mewn fformatau WOFF2, WOFF, a TTF) ar gyfer y teuluoedd ffont "Guardian Headline Full" a "Guardian Titlepiece", gan nodi gwahanol bwysau (ysgafn, rheolaidd, trwm, du) ac arddulliau (normal neu italaidd) ar gyfer pob un. Mae'r URLs yn pwyntio at ffeiliau ffont wedi'u cynnal ar weinydd asedau'r Guardian.
Dyma floc cod CSS sy'n diffinio teulu ffont "Guardian Headline Full" gyda gwahanol bwysau ac arddulliau. Mae'n cynnwys sawl rheol @font-face, pob un yn nodi ffeiliau ffynhonnell y ffont mewn fformatau gwahanol (woff2, woff, a truetype) a'r priodweddau font-weight a font-style cyfatebol. Mae'r pwysau'n amrywio o 400 (rheolaidd) i 900 (du), gyda'r ddau arddull normal ac italaidd ar gael ar gyfer pob pwysau. Mae'r ffeiliau ffont wedi'u cynnal ar weinydd asedau'r Guardian.
Dyma floc o god CSS sy'n diffinio arddulliau ffont a rheolau cynllun ar gyfer tudalen we, yn debygol o wefan y Guardian. Mae'n sefydlu ffontiau personol (fel "Guardian Headline" a "Guardian Titlepiece") gyda gwahanol bwysau a fformatau, yna'n defnyddio system cynllun grid i drefnu adrannau cynnwys (fel teitl, pennawd, corff, ac ati) yn ymatebol ar draws gwahanol feintiau sgrin. Mae'r cynllun yn addasu colofnau a bylchau ar wahanol bwyntiau torri (e.e., 30em, 46.25em, 61.25em, 71.25em) i sicrhau arddangosiad priodol ar ddyfeisiau symudol, tabledi, a chyfrifiaduron bwrdd gwaith.
Ar gyfer ffigurau grid rhyngweithiol gyda capsiynau trochol, mae'r arddull capsiwn yn cymhwyso padin o 4px ar y brig a 0 ar y gwaelod. Mae hyn yn berthnasol ar draws sawl maes cynnwys, gan gynnwys cyrff erthyglau, cynnwys rhyngweithiol, adrannau sylwadau, a chyrff nodwedd.
Yn y cynllun grid rhyngweithiol, mae'r adrannau llinellau a meta wedi'u lleoli yn yr ardal grid sy'n ymestyn o res 2, colofn 1 i res 5, colofn 2. Mae gan yr adran llinellau uchder wedi'i osod i ffitio ei chynnwys, gydag ymyl brig o 5px. Mae gan yr adran meta ymyl brig o 18px.
Ar gyfer sgriniau lletach na 81.25em (1300px), mae'r grid rhyngweithiol yn defnyddio cynllun colofn o 219px, 1px, 620px, 80px, a 300px.
Ar ddyfeisiau iOS ac Android, mae testun standfirst mewn penawdau erthygl yn defnyddio teulu ffont Guardian Headline gyda phwysau canolig. Mae'r adran kicker erthygl yn cael ei harddangos fel bloc, gyda'r llythyren gyntaf wedi'i phriflythrennu. Mae gan yr elfen keyline-4 badin brig ychwanegol o 12px. Mae enwau awduron byline yn defnyddio pwysau trwm yn y ffont Guardian Headline, ac mae dolenni o fewn iddynt hefyd yn drwm. Mae delweddau mewn ffigurau erthygl yn cael eu huchder wedi'i osod i auto, ac nid oes gan baragraffau sy'n dilyn atomau rhyngweithiol ymyl brig.
Mae'r ffont Guardian Headline Full wedi'i ddiffinio gyda sawl fformat ffeil (woff2, woff, a ttf) ar gyfer pwysau ysgafn ac arddull normal, yn ogystal ag arddull italaidd ysgafn.
Nid wyf yn gallu cynorthwyo gyda'r cais hwn oherwydd bod y testun a ddarparwyd gennych yn god CSS ar gyfer diffinio ffontiau gwe, nid cynnwys iaith naturiol y gellir ei ailysgrifennu i Saesneg rhugl. Os oes gennych destun gwahanol yr hoffech i mi ei helpu gydag ef, rhannwch ef, a byddaf yn hapus i gynorthwyo.
Dyma'r testun wedi'i ailysgrifennu mewn Saesneg naturiol, rhugl:
```
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 {
/ Nid oes arddull benodol wedi'i diffinio yma, ond cedwir y dewisydd ar gyfer arddullio posibl /
}
Dyma floc o god CSS, nid testun i'w ailysgrifennu mewn Saesneg naturiol. Mae'n cynnwys dewiswyr a rheolau arddull ar gyfer gwefan, yn debygol o dudalennau erthygl y Guardian. Os hoffech, gallaf esbonio beth mae'r CSS hwn yn ei wneud mewn Saesneg plaen, neu gallwch ddarparu testun gwahanol i'w ailysgrifennu. Rhowch wybod i mi sut hoffech chi fwrw ymlaen!
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
Dyma'r testun wedi'i ailysgrifennu mewn Saesneg naturiol, rhugl:
Mae gan y lapwrap ar gyfer yr adran standfirst addasiad bach i'r chwith. Mae gan y labeli yn adrannau pennawd a theitl yr erthygl ychydig o badin ychwanegol ar y brig. Mae'r pennawd yn defnyddio pwysau ffont trwm, wedi'i gapio ar uchafswm lled, ac yn cynyddu mewn maint ar sgriniau mwy. Ar sgriniau canolig, nid oes gan yr elfennau keyline a llinellau ymyl dde, ac ar sgriniau mwy, cรขnt eu cuddio'n llwyr. Mae'r llinellau'n defnyddio lliw strรดc sy'n cyfateb i ffin y pennawd.
Nid oes gan yr adran meta ymyl dde chwaith ar sgriniau canolig. Mae'r eiconau cymdeithasol, dolenni sylwadau, a'u ffiniau i gyd yn defnyddio lliw ffin y pennawd. Mae rhai elfennau rhyngweithiol yn yr adran meta wedi'u cuddio. Mae testun y standfirst wedi'i fewnoli ychydig gyda padin chwith a'i leoli'n gymharol i'w gynhwysydd. Ar sgriniau canolig, mae'n cael ychydig o badin brig. Mae'r paragraffau yn y standfirst wedi'u gosod i bwysau a maint ffont penodol, gyda rhywfaint o badin gwaelod.
Mae'r adran cyfryngau prif wedi'i lleoli'n gymharol, heb ymyl brig, ac gydag ymyl gwaelod bach. Mae'n ymestyn lled llawn ei gynhwysydd. Ar sgriniau mwy, caiff yr ymyl gwaelod ei dynnu, ac ar sgriniau llai, mae'n ehangu i led llawn y ffenestr gydag ymyl chwith negyddol. Mae'r capsiwn wedi'i osod ar waelod y cyfryngau, gyda lliw cefndir, lliw testun, a phadin. Mae testun y capsiwn yn cynnwys span sy'n defnyddio lliw ffin y pennawd, ac mae'r span cyntaf wedi'i guddio tra bod yr ail yn cael ei ddangos. Ar sgriniau llai, mae padin y capsiwn yn cynyddu. Pan fydd y capsiwn wedi'i guddio, mae'n dod yn dryloyw. Mae botwm capsiwn wedi'i leoli ar y dde isaf, gyda chefndir crwn, dim ffin, a rhywfaint o badin. Mae eicon y botwm wedi'i raddio i lawr ychydig.
Ar sgriniau mwy, mae gan y brif golofn ymyl brig ac addasiad uchder. Mae'r penawdau o fewn iddo wedi'u capio ar uchafswm lled. Yn y modd tywyll ar ddyfeisiau iOS ac Android, diffinnir rhai newidynnau lliw, gan gynnwys lliw nodwedd a fersiwn modd tywyll. Mae'r lliw piler newydd yn defnyddio lliw piler cynradd yn ddiofyn, ond mae'n newid i liw piler modd tywyll yn y modd tywyll. Ar iOS, mae'r elfen atom gyntaf ac yna paragraff wedi'i steilio mewn ffordd benodol.
Mae hwn yn daflen arddull CSS dechnegol, nid testun wedi'i fwriadu i'w ailysgrifennu. Mae'n cynnwys dewiswyr a rheolau arddull ar gyfer gwefan. Os hoffech, gallaf esbonio beth mae'n ei wneud neu eich helpu i'w symleiddio neu ei ailfformatio. Rhowch wybod i mi sut hoffech chi fwrw ymlaen.
figure.element-image {
position: relative;
margin: 14px 0 0 -10px;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto;
}
/ Ar iOS ac Android, ar gyfer pob math o erthygl, gwnewch ddelweddau a'u cynwysyddion yn lled llawn ac yn dryloyw /
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;
}
/ Ar iOS ac Android, addaswch fylchau ac aliniad y standfirst (paragraff cyflwyniadol) /
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;
}
/ Ar iOS ac Android, gosodwch y ffont ar gyfer paragraffau o fewn y 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;
}
/ Ar iOS ac Android, steiliwch ddolenni o fewn y standfirst (gan gynnwys eitemau rhestr) /
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 .furn
