Mae'r testun rydych wedi'i ddarparu yn god CSS, nid rhyddiaith, felly nid oes Saesneg naturiol i'w ailysgrifennu. Mae'n diffinio wynebau ffont ar gyfer Guardian Headline a Guardian Titlepiece, ynghyd â chynlluniau grid ymatebol ar gyfer cynnwys rhyngweithiol ar draws amrywiol feintiau sgrin. Os hoffech chi, gallaf esbonio beth mae'r cod hwn yn ei wneud mewn Saesneg syml.Ar gyfer ffigurau grid rhyngweithiol gyda chapsiynau trochiadol, ychwanegwch 4px o bennu uchaf. Mewn cynlluniau grid rhyngweithiol, rhowch yr elfennau llinellau a meta yn yr ail res, y golofn gyntaf, gan ymestyn rhesi 2 trwy 4. Dylai'r elfen llinellau faintio i'w chynnwys a chael ymyl uchaf o 5px, tra bod yr elfen meta yn cael ymyl uchaf o 18px. Ar sgriniau o leiaf 81.25em o led, mae'r grid rhyngweithiol yn defnyddio pum colofn o faint 219px, 1px, 620px, 80px, a 300px. Ar iOS ac Android, mae paragraffau standfirst yn defnyddio Guardian Headline ar bwysau 500. Mae adran gic y erthygl yn ymddangos fel bloc, gyda'i lythyren gyntaf wedi'i phriflythrennu. Mae'r elfen keyline-4 yn cael 12px o bennu uchaf. Mae awduron byline yn defnyddio Guardian Headline ar bwysau 700, gan gynnwys unrhyw ddolenni o'u mewn. Mae cynwysyddion mewnol ffigur delwedd wedi'u gosod i uchder awtomatig, ac nid oes gan baragraffau sy'n dilyn ffigurau atom ymyl uchaf. Mae'r teulu ffont Guardian Headline Full wedi'i ddiffinio gyda phwysau ysgafn (300) ac arddull normal, gan lwytho fformatau woff2, woff, a truetype, ynghyd ag amrywiad ysgafn italig.@font-face{font-family:Guardian Headline Full;src:url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff2) format("woff2"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.ttf) format("truetype");font-weight:400;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-RegularItalic.woff2) format("woff2"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff) format("woff"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format("truetype");font-weight:400;font-style:italic}@font-face{font-family:Guardian Headline Full;src:url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.woff2) format("woff2"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.woff) format("woff"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.ttf) format("truetype");font-weight:500;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-MediumItalic.woff2) format("woff2"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-MediumItalic.woff) format("woff"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-MediumItalic.ttf) format("truetype");font-weight:500;font-style:italic}@font-face{font-family:Guardian Headline Full;src:url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.woff2) format("woff2"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.woff) format("woff"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.ttf) format("truetype");font-weight:600;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-SemiboldItalic.woff2) format("woff2"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.woff) format("woff"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.ttf) format("truetype");font-weight:600;font-style:italic}@font-face{font-family:Guardian Headline Full;src:url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf) format("truetype");font-weight:700;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-BoldItalic.woff2) format("woff2"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.ttf) format("truetype");font-weight:700;font-style:italic}@font-face{font-family:Guardian Headline Ful@font-face{font-family:Guardian Headline Full;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+.Mae llythyren gyntaf y paragraff cyntaf sy'n dilyn giât mewngofnodi, atom elfen, neu reol lorweddol (ac eithrio'r un olaf) mewn amrywiol feysydd cynnwys—fel cynnwys rhyngweithiol, cyrff sylwadau, prif adrannau'r corff, a chyrff nodwedd—wedi'i steilio gyda ffont Guardian Headline (neu Georgia fel cwymp yn ôl), pwysau beiddgar, maint 111px, uchder llinell 92px, wedi'i arnofio i'r chwith, priflythrennau, gydag ymyl dde 8px, wedi'i alinio i frig y testun, a'i liwio gan ddefnyddio'r newidyn lliw drop-cap neu new pillar.
Nid oes gan reolau llorweddol sy'n cael eu dilyn gan baragraffau mewn cyrff erthyglau, cynnwys rhyngweithiol, cyrff sylwadau, prif adrannau'r corff, a chyrff nodwedd unrhyw bennu uchaf.
Mae dyfyniadau tynnu mewn cyrff erthyglau, cynnwys rhyngweithiol, cyrff sylwadau, prif adrannau'r corff, a chyrff nodwedd wedi'u cyfyngu i uchafswm lled o 620px.
Mae capsiynau ffigur ar gyfer elfennau arddangos yn y prif gynnwys, cynhwysydd erthygl nodwedd, cynhwysydd erthygl safonol, a chynhwysydd erthygl sylwadau wedi'u gosod i safle statig gyda lled llawn hyd at 620px. Ar sgriniau o leiaf 71.25em o led, maent yn dod yn safle absoliwt gydag uchafswm lled o 140px. Ar sgriniau o leiaf 81.25em o led, mae'r uchafswm lled yn cynyddu i 220px.
Mae elfennau trochiadol yn ymestyn lled llawn y ffenestr viewport heb unrhyw led bar sgrolio. Ar sgriniau hyd at 71.24em o led, cânt eu capio ar 978px, ac mae gan eu capsiynau ffigur 10px o bennu mewnlinell. Rhwng 30em a 71.24em, mae penmu'r capsiwn ffigur yn cynyddu i 20px. Rhwng 46.25em a 61.24em, yr uchafswm lled yw 738px. Ar sgriniau hyd at 46.24em o led, cânt eu symud i'r chwith gan 10px heb ymyl dde. Rhwng 30em a 46.24em, mae'r symudiad i'r chwith yn dod yn 20px ac mae capsiynau ffigur yn cael 20px o bennu mewnlinell.
Ar sgriniau o leiaf 71.25em o led, mae ffigurau arddangos o fewn y prif gorff neu'r brif golofn ryngweithiol yn cael eu symud i'r chwith gan 160px. Ar sgriniau o leiaf 81.25em o led, mae'r un peth yn berthnasol i gyrff nodwedd.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] .25fr [title-end headline-start] 1fr [headline-end standfirst-start] .75fr [standfirst-end meta-start] auto [meta-end portrait-end]}.furniture-wrapper #headline>div:first-child,.furniture-wrapper [data-gu-name=headline]>div:first-child,.furniture-wrapper .headline>div:first-child{border-top:1px solid var(--headerBorder)}.furniture-wrapper #meta,.furniture-wrapper [data-gu-name=meta]{position:relative;padding-top:2px;margin-right:0}.furniture-wrapper .standfirst .content__standfirst,.furniture-wrapper #standfirst .content__standfirst,.furniture-wrapper [data-gu-name=standfirst] .content__standfirst{margin-bottom:4px}.furniture-wrapper .standfirst ul li,.furniture-wrapper #standfirst ul li,.furniture-wrapper [data-gu-name=standfirst] ul li{font-size:20px}.furniture-wrapper .standfirst li a,.furniture-wrapper .standfirst a,.furniture-wrapper #standfirst li a,.furniture-wrapper #standfirst a,.furniture-wrapper [data-gu-name=standfirst] li a,.furniture-wrapper [data-gu-name=standfirst] a{border-bottom:none;background-image:none!important;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--headerBorder, #dcdcdc)}.furniture-wrapper .standfirst li a:hover,.furniture-wrapper .standfirst a:hover,.furniture-wrapper #standfirst li a:hover,.furniture-wrapper #standfirst a:hover,.furniture-wrapper [data-gu-name=standfirst] li a:hover,.furniture-wrapper [data-gu-name=standfirst] a:hover{text-decoration-color:var(--new-pillar-colour)}.furniture-wrapper .standfirst p:first-of-type,.furniture-wrapper #standfirst p:first-of-type,.furniture-wrapper [data-gu-name=standfirst] p:first-of-type{border-top:1px solid var(--headerBorder);padding-bottom:0}}@media (min-width: 61.25em) and (min-width: 71.25em){.furniture-wrapper .standfirst p:first-of-type,.furniture-wrapper #standfirst p:first-of-type,.furniture-wrapper [data-gu-name=standfirst] p:first-of-type{border-top:unset}}@media (min-width: 61.25em){.furniture-wrapper figure{margin:0 0 0 -10px}.furniture-wrapper figure[data-spacefinder-role=inline].element{max-width:630px}}@media (min-width: 71.25em){.furniture-wrapper{grid-template-columns:[title-start headline-start meta-start] repeat(2,1fr) [meta-end standfirst-start] repeat(5,1fr) [title-end headline-end standfirst-end portrait-start] repeat(7,1fr) [portrait-end];grid-template-rows:[title-start portrait-start] 80px [title-end headline-start] auto [headline-end standfirst-start meta-start] auto [standfirst-end meta-end portrait-end]}.furniture-wrapper #meta:before,.furniture-wrapper [data-gu-name=meta]:before{content:"";width:540px;position:absolute;top:0;background-color:var(--headerBorder);height:1px}.furniture-wrapper .standfirst p,.furniture-wrapper #standfirst p,.furniture-wrapper [data-gu-name=standfirst] p{border-top:unset}.furniture-wrapper .standfirst:before,.furniture-wrapper #standfirst:before,.furniture-wrapper [data-gu-name=standfirst]:before{content:"";width:1px;background-color:var(--headerBorder);height:100%;position:absolute;top:0;left:.5px}}@media (min-width: 81.25em){.furniture-wrapper{grid-template-columns:[title-start headline-start meta-start] repeat(3,1fr) [meta-end standfirst-start] repeat(5,1fr) [title-end headline-end standfirst-end portrait-start] repeat(8,1fr) [portrait-end];grid-template-rows:[title-start portrait-start] .25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] .75fr [standfirst-end meta-end portrait-end]}.furniture-wrapper #meta:before,.furniture-wrapper [data-gu-name=meta]:before{width:620px}.furniture-wrapper .standfirst:before,.furniturMae'r arddulliau yn diffinio sut mae penawdau erthyglau, standfirsts, cyfryngau, a chapsiynau yn cael eu harddangos. Mae penawdau yn defnyddio pwysau beiddgar, gydag uchafswm lled o 620px a maint ffont o 32px, gan gynyddu i 540px o led a 50px ar sgriniau mwy. Mae adrannau keylines a meta yn addasu eu hymylon a'u borderi ar wahanol bwyntiau torri, ac mae rhai elfennau wedi'u cuddio ar sgriniau ehangach. Mae gan y standfirst ychydig o wrthbwynt chwith a phadio, gyda thestun paragraff ar 20px a phwysau normal. Mae prif gyfryngau yn eistedd mewn ardal grid portread gydag ymylon ymatebol, ac ar sgriniau bach mae'n ymestyn i led y ffenestr viewport. Mae capsiynau ffigur wedi'u lleoli ar y gwaelod gyda chefndir a lliw testun, ac mae botwm capsiwn yn ymddangos yn y gornel dde isaf. Mae prif golofnau rhyngweithiol yn cael eu lleoliad wedi'i addasu ar sgriniau mawr, ac mae elfennau h2 wedi'u capio ar 620px o led. Mae newidynnau modd tywyll wedi'u gosod ar gyfer iOS ac Android, gyda lliwiau nodwedd gwahanol yn dibynnu ar y cynllun lliw.Ar gyfer dyfeisiau iOS ac Android, bydd llythyren gyntaf y paragraff cyntaf mewn cynwysyddion erthygl nodwedd, safonol, a sylwadau—p'un a yw'n dilyn giât mewngofnodi ai peidio—yn cael ei lliwio gan ddefnyddio lliw'r ail biler, gan ddiofyn i ddu.
Ar iOS ac Android, bydd gan bennawd yr erthygl mewn cynwysyddion nodwedd, safonol, a sylwadau uchder sero.
Ar iOS ac Android, bydd gan y lapio dodrefn mewn cynwysyddion nodwedd, safonol, a sylwadau bennu o 4px ar y brig, 10px ar y chwith a'r dde, a 0 ar y gwaelod.
Ar iOS ac Android, bydd y labeli cynnwys y tu mewn i'r lapio dodrefn mewn cynwysyddion nodwedd, safonol, a sylwadau yn defnyddio pwysau beiddgar, y teulu ffont Guardian Headline gyda Georgia a serif fel cwymp yn ôl, lliw'r piler newydd, a thestun wedi'i briflythrennu.
Ar iOS ac Android, bydd gan y pennawd h1 y tu mewn i'r lapio dodrefn mewn cynwysyddion nodwedd, safonol, a sylwadau faint ffont o 32px, pwysau beiddgar, 12px o bennu gwaelod, a lliw o #121212 gyda phwysigrwydd pwysig.
Ar iOS ac Android, bydd gan yr elfen ffigur-delwedd y tu mewn i'r lapio dodrefn mewn cynwysyddion nodwedd, safonol, a sylwadau yr arddulliau canlynol:figure.element-image{position:relative;margin:14px 0 0 -10px;width:calc(100vw - var(--scrollbar-width, 0px));height:auto}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}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}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}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.
