Mae'r testun a ddarparwyd gennych yn cod CSS, nid rhyddiaith, felly nid oes Saesneg naturiol i'w hailysgrifennu. Os oeddech yn bwriadu anfon darn gwahanol o ysgrifennu, gludwch ef a byddaf yn ei ailysgrifennu i chi.Pan fydd slot hysbyseb yn dilyn rheol lorweddol ryngweithiol yn y prif golofn cynnwys, tynnwch y padin top. Dylai dyfyniadau tynnu mewn erthyglau rhyngweithiol gael eu cyfyngu i 620 picsel o led. Dylai elfennau trochi ymestyn ar draws lled llawn y viewport, gydag ymylon negyddol sy'n addasu ar wahanol feintiau sgrin: -10px ar sgriniau bach, -20px o 30em, -160px o 71.25em, a -240px o 81.25em. Dylai eu capsiynau gael padin mewnlin o 20px o 30em, yna dim padin o 71.25em. Dylai ffigurau arddangos hefyd ddefnyddio ymylon negyddol o -160px o 71.25em a -240px o 81.25em. Dylai eu capsiynau fod yn statig ac yn lled llawn hyd at 620px ar sgriniau llai, yna eu gosod yn absoliwt gyda lled uchaf o 140px o 71.25em a 220px o 81.25em. Dylai elfennau mewnlin gael eu cyfyngu i 630px o led o 61.25em. Dylai ffigurau sydd â'r dosbarth "will-fade-in" ddechrau'n anweledig ac wedi'u symud i lawr 50px, yna pylu i mewn a symud i fyny pan ychwanegir y dosbarth "fade-in". Dylai paragraffau blockquote gael eu lliwio #121212. Dylai penawdau gael eu cyfyngu i 620px o led. Dylai paragraffau blwch credydau gael ymylon fertigol 2px a dim padin top. Ar sgriniau 71.25em ac yn lletach, dylai elfen ffug prif golofn ryngweithiol gael ei gosod 12px yn uwch a bod yn 24px yn dalach. Yn y modd tywyll, dylai cefndir y corff ddefnyddio'r newidyn cefndir tywyll.e.portrait-layout-feature-dark gu-island[name=Branding] a img, :root:root:not([data-color-scheme=light]) article.content--interactive.portrait-layout-feature-dark-no-dropcap gu-island[name=Branding] a img { filter: invert(0) } } gu-island[name=UnsafeEmbedBlockComponent], iframe.js-embed__iframe { display: block; height: 0px !important } .element { margin: 0 } [data-rendering-target=apps] .content--interactive [data-gu-name=meta] .content__meta-container_dcr { margin-right: 0 } @media (max-width: 61.24em) { .furniture-wrapper [data-gu-name=media] { margin-bottom: -65px; position: sticky; top: 0; background: #1a1a1a; transition: opacity .5s ease-in-out; opacity: 1 } } @media (max-width: 61.24em) and (min-width: 30em) and (max-width: 61.24em) { .furniture-wrapper [data-gu-name=media] { margin-left: -20px; margin-right: -20px } } @media (max-width: 61.24em) { .furniture-wrapper [data-gu-name=media].fade-out { opacity: 0 } .furniture-wrapper [data-gu-name=title], .furniture-wrapper [data-gu-name=headline] { z-index: 10; margin-left: -10px; padding-left: 10px } } @media (max-width: 61.24em) and (min-width: 30em) and (max-width: 61.24em) { .furniture-wrapper [data-gu-name=title], .furniture-wrapper [data-gu-name=headline], .furniture-wrapper [data-gu-name=standfirst], .furniture-wrapper [data-gu-name=meta] { margin: 0 -20px !important; padding: 0 20px !important } } @media (max-width: 61.24em) { .furniture-wrapper [data-gu-name=headline] { position: relative } .furniture-wrapper [data-gu-name=headline] > div > div { padding-bottom: 32px } .furniture-wrapper [data-gu-name=headline] h1 { color: #fff; font-weight: 400 } .furniture-wrapper [data-gu-name=headline] .gradient-div { position: absolute; height: 135%; z-index: -1; width: 100%; bottom: -1px; left: 0; backdrop-filter: blur(12px); background: linear-gradient(180deg, #1a1a1a00, #1a1a1a 120px 100%); -webkit-mask-image: linear-gradient(180deg, rgba(26, 26, 26, 0) 0px, rgba(26, 26, 26, .0392156863) 8px, rgba(26, 26, 26, .1450980392) 16px, rgba(26, 26, 26, .3098039216) 24px, rgba(26, 26, 26, .5019607843) 32px, rgba(26, 26, 26, .6901960784) 40px, rgba(26, 26, 26, .8549019608) 48px, rgba(26, 26, 26, .9607843137) 56px, #1a1a1a 70px); mask-image: linear-gradient(180deg, #1a1a1a00, #1a1a1a0a, #1a1a1a25, #1a1a1a4f, #1a1a1a80, #1a1a1ab0, #1a1a1ada, #1a1a1af5 56px, #1a1a1a 70px) } } @media (max-width: 61.24em) and (min-width: 26.25em) { .furniture-wrapper [data-gu-name=headline] .gradient-div { height: 140% } } @media (max-width: 61.24em) { .furniture-wrapper [data-gu-name=title] { z-index: 11; padding-top: 8px; padding-bottom: 1px } .furniture-wrapper [data-gu-name=title] a { color: var(--active-pillar-400) } .furniture-wrapper [data-gu-name=standfirst] .content__standfirst { padding-bottom: 0 } .furniture-wrapper [data-gu-name=standfirst] .content__standfirst p { padding-bottom: 24px } .furniture-wrapper figcaption { grid-area: mediacaption; position: relative; background: unset; padding: 0 0 12px 10px !important; margin: 0 0 0 -10px !important; min-height: unset; width: 100vw; background-color: #fff } .furniture-wrapper figcaption span { color: var(--caption-main-media-text) } } @media (max-width: 61.24em) and (min-width: 30em) { .furniture-wrapper figcaption { margin-left: -20px !important; margin-top: -1px !important; padding-left: 20px !important } } @media (max-width: 61.24em) and (min-width: 46.25em) { .furniture-wrapper figcaption { max-width: 738px } } @media (max-width: 61.24em) { .furniture-wrapper figcaption.hidden { display: none !important } .furniture-wrapper figcaption.video-icon span:before { content: ""; display: inline-block; width: 17px; height: 10px; margin-right: 4px; background-image: url(https://uploads.guim.co.uk/2026/09/01/videocamera.svg); background-repeat: no-repeat; background-size: contain } .furniture-wrapper .video-container figcaption span, .furniture-wrapper .cinemagraph figcaption span { display: none !important } .furniture-wrapper [data-gu-name=lines] > div > div, .furniture-wrapper [data-gu-name=meta] > div > div { margin-right: 0 } } @media (max-width: 61.24em) and (min-width: 46.25em) { .furniture-wrapper [data-gu-name=meta] { padding-bottom: 8px !important } } .furniture-wrapper figcaption.video-icon span:before { content: ""; display: inline-block; width: 17px; height: 10px; margin-right: 4px; background-image: url(https://uploads.guim.co.uk/2026/09/01/videocamera.svg); }background-repeat: no-repeat; background-size: contain; } @media (max-width: 61.24em) { [data-gu-name=body] { background-color: #fff; margin: 0 -10px; padding: 0 10px; } } @media (max-width: 61.24em) and (min-width: 30em) { [data-gu-name=body] { margin: 0 -20px; padding: 0 20px; } } @media (max-width: 61.24em) { [data-gu-name=body] #maincontent { margin-top: 0; } } article.content--interactive.portrait-layout .furniture-wrapper #headline h1, article.content--interactive.portrait-layout .furniture-wrapper [data-gu-name=headline] h1, article.content--interactive.portrait-layout .furniture-wrapper .headline h1 { font-weight: 500; } article.content--interactive.portrait-layout .furniture-wrapper .standfirst div p, article.content--interactive.portrait-layout .furniture-wrapper #standfirst div p, article.content--interactive.portrait-layout .furniture-wrapper [data-gu-name=standfirst] div p { font-weight: 500; } article.content--interactive.portrait-layout-feature .article__body h2, article.content--interactive.portrait-layout-feature [data-gu-name=body] h2 { font-weight: 200; } article.content--interactive.portrait-layout-feature .article__body h2:has(strong), article.content--interactive.portrait-layout-feature [data-gu-name=body] h2:has(strong) { font-weight: 700; } article.content--interactive.portrait-layout-feature .content__meta-container_dcr>div>gu-island { display: block !important; } article.content--interactive.portrait-layout-feature-dark, article.content--interactive.portrait-layout-feature-dark-no-dropcap { --new-pillar-colour: var( --darkmode-pillar, var(--darkModeFeature) ) !important; --headerBorderColor: #606060; --darkModeFeature: #ff5943; --darkBackground: #1a1a1a; --feature-dark-text: #dcdcdc; --feature-dark-text-meta: #999; --follow-icon-fill: var(--darkModeFeature); --article-meta-lines: var(--headerBorderColor); } article.content--interactive.portrait-layout-feature-dark nav+section, article.content--interactive.portrait-layout-feature-dark-no-dropcap nav+section { display: none; } article.content--interactive.portrait-layout-feature-dark nav+aside, article.content--interactive.portrait-layout-feature-dark-no-dropcap nav+aside { display: none; } article.content--interactive.portrait-layout-feature-dark aside+section, article.content--interactive.portrait-layout-feature-dark-no-dropcap aside+section { display: none; } article.content--interactive.portrait-layout-feature-dark .furniture-wrapper, article.content--interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper { background-color: var(--darkBackground); margin: 0 -10px; padding: 0 10px; } @media (min-width: 30em) { article.content--interactive.portrait-layout-feature-dark .furniture-wrapper, article.content--interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper { margin: 0 -20px; padding: 0 20px; } } @media (max-width: 61.24em) { article.content--interactive.portrait-layout-feature-dark .furniture-wrapper [data-gu-name=standfirst], article.content--interactive.portrait-layout-feature-dark .furniture-wrapper [data-gu-name=lines], article.content--interactive.portrait-layout-feature-dark .furniture-wrapper [data-gu-name=meta], article.content--interactive.portrait-layout-feature-dark .furniture-wrapper figcaption, article.content--interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper [data-gu-name=standfirst], article.content--interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper [data-gu-name=lines], article.content--interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper [data-gu-name=meta], article.content--interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper figcaption { z-index: 10; background-color: var(--darkBackground) !important; } article.content--interactive.portrait-layout-feature-dark .furniture-wrapper figcaption, article.content--interactive.portrait-layout-feature-dark .furniture-wrapper [data-gu-name=meta], article.content--interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper figcaption, article.content--interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper [data-gu-name=meta] { margin-left: -10px; padding-left: 10px; } } @media (min-width: 61.25em) { article.contAr gyfer erthyglau rhyngweithiol gyda nodwedd cynllun portread tywyll, mae'r wrapper dodrefn yn cael 20px o badin ar bob ochr. Ar sgriniau sydd o leiaf 81.25em o led, mae'r wrapper dodrefn yn cael elfennau addurnol ar y ddwy ochr: elfen chwith sy'n ymestyn i ymyl y viewport gyda chefndir tywyll a border dde, ac elfen dde gyda'r un cefndir tywyll. Mae dolenni a spaniau pennawd a theitl yr erthygl y tu mewn i'r wrapper dodrefn yn cael eu gorfodi i ddefnyddio lliw nodwedd y modd tywyll. Ar sgriniau sydd o leiaf 61.25em o led, mae'r div plentyn cyntaf o'r pennawd yn cael border top. Mae'r h1 pennawd yn drwm ac yn defnyddio'r lliw feature-dark-text. Nid oes gan ffigur y pennawd ymyl top a dim ond ymyl gwaelod 2px. Mae gan yr adran meta gefndir tywyll.Mae'r detholwyr CSS yn targedu elfennau o fewn cynlluniau erthyglau rhyngweithiol sy'n defnyddio steil nodwedd portread tywyll. Maent yn berthnasol i'r ddau fersiwn safonol a dim-dropcap o'r cynlluniau hyn.
Ar gyfer yr adran meta y tu mewn i'r wrapper dodrefn, mae span mewnol a div botwm dilyn yn cael lliw llenwi o newidyn nodwedd y modd tywyll a border yn defnyddio newidyn llinellau meta'r erthygl.
Mae delweddau brandio y tu mewn i ddolenni yn yr adran meta yn cael eu gwrthdroi gan ddefnyddio hidlydd.
Ar sgriniau sydd o leiaf 71.25em o led, mae elfen ffug cyn yr adran meta yn cael lliw cefndir o newidyn lliw border y pennawd.
Mae elfennau manylion, crynodeb, a span crynodeb y tu mewn i'r adran meta yn defnyddio lliw testun tywyll y nodwedd.
Mae dolenni a botymau cymdeithasol y tu mewn i'r adran meta yn cael lliw border o newidyn llinellau meta'r erthygl a lliw testun o newidyn nodwedd y modd tywyll. Mae eu heiconau SVG hefyd yn cael eu steilio.Mewn cynlluniau nodwedd tywyll, mae eiconau cyfryngau cymdeithasol yn yr adran meta yn cael eu llenwi â lliw nodwedd y modd tywyll. Pan fyddwch yn hofran dros y dolenni neu fotymau cyfryngau cymdeithasol hyn, mae'r testun yn troi i liw'r cefndir tywyll ac mae'r cefndir yn dod yn lliw nodwedd y modd tywyll, tra bod yr eiconau eu hunain yn cael eu llenwi â lliw'r cefndir tywyll. Mae testun y tu mewn i'r adran meta yn defnyddio lliw meta testun tywyll y nodwedd. Mae dolenni yn yr adran meta yn defnyddio lliw nodwedd y modd tywyll, ac ar hofran maent yn cadw'r lliw hwnnw gyda'r tanlinell yn cyfateb hefyd.Mewn erthyglau nodwedd ryngweithiol modd tywyll gyda chynllun portread, mae dolenni y tu mewn i'r adran meta yn defnyddio lliw testun y modd tywyll. Nid oes gan ddolenni yn y standfirst—boed mewn paragraffau neu eitemau rhestr—ymyl gwaelod, maent yn defnyddio lliw nodwedd y modd tywyll, ac nid oes ganddynt ddelwedd gefndir. Maent yn cael eu tanlinellu â llinell 1px yn yr un lliw, wedi'i gwrthbwyso gan 6px. Ar hofran, mae lliw'r tanlinell yn aros yr un fath ac nid oes ymyl gwaelod o hyd. Mae paragraffau yn y standfirst yn defnyddio lliw testun tywyll y nodwedd. Ar sgriniau sydd o leiaf 61.25em o led, mae paragraff cyntaf y standfirst yn yr erthyglau nodwedd cynllun portread modd tywyll hyn yn dilyn steilio ychwanegol.Ar gyfer erthyglau rhyngweithiol gyda chynllun portread tywyll, mae paragraff cyntaf y standfirst yn cael border top. Ar sgriniau lletach (o leiaf 71.25em), mae'r border top hwnnw'n cael ei dynnu. Mae eitemau rhestr y tu mewn i'r standfirst yn defnyddio lliw testun tywyll y nodwedd. Ar sgriniau lletach, mae elfen ffug cyn y standfirst yn defnyddio lliw border y pennawd fel ei gefndir. Ar sgriniau sydd o leiaf 46.25em o led, mae'r wrapper dodrefn yn cael elfennau ffug cyn ac ar ôl sy'n llawn uchder, wedi'u gosod ar y top, wedi'u llenwi â lliw'r cefndir tywyll, ac â border ar un ochr â lliw border y pennawd. Maent yn ymestyn allan o'r ardal gynnwys, gyda'u lled a'u safle wedi'u cyfrifo yn seiliedig ar led y viewport minws y scrollbar a naill ai 738px neu 978px, yn dibynnu ar y pwynt torri.:"";width:calc((100vw - var(--scrollbar-width, 0px) - 978px) / 2);right:calc((100vw - var(--scrollbar-width, 0px) - 978px) / -2)}}@media (min-width: 71.25em){article.content--interactive.portrait-layout-feature-dark .furniture-wrapper:before,article.content--interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper:before{content:"";width:calc((100vw - var(--scrollbar-width, 0px) - 1138px) / 2);left:calc((100vw - var(--scrollbar-width, 0px) - 1138px) / -2)}article.content--interactive.portrait-layout-feature-dark .furniture-wrapper:after,article.content--interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper:after{content:"";width:calc((100vw - var(--scrollbar-width, 0px) - 1138px) / 2);right:calc((100vw - var(--scrollbar-width, 0px) - 1138px) / -2)}}@media (min-width: 81.25em){article.content--interactive.portrait-layout-feature-dark .furniture-wrapper:before,article.content--interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper:before{content:"";width:calc((100vw - var(--scrollbar-width, 0px) - 1298px) / 2);left:calc((100vw - var(--scrollbar-width, 0px) - 1298px) / -2)}article.content--interactive.portrait-layout-feature-dark .furniture-wrapper:after,article.content--interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper:after{content:"";width:calc((100vw - var(--scrollbar-width, 0px) - 1298px) / 2);right:calc((100vw - var(--scrollbar-width, 0px) - 1298px) / -2)}}article.content--interactive.portrait-layout-feature-dark .furniture-wrapper .keyline-4 svg,article.content--interactive.portrait-layout-feature-dark .furniture-wrapper [data-gu-name=lines] svg,article.content--interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper .keyline-4 svg,article.content--interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper [data-gu-name=lines] svg{stroke:var(--headerBorderColor)}article.content--interactive.portrait-layout-feature-dark .furniture-wrapper #meta .meta__social,article.content--interactive.portrait-layout-feature-dark .furniture-wrapper #meta .meta__social ul li a span,article.content--interactive.portrait-layout-feature-dark .furniture-wrapper #meta .meta__comment,article.content--interactive.portrait-layout-feature-dark .furniture-wrapper [data-gu-name=meta] .meta__social,article.content--interactive.portrait-layout-feature-dark .furniture-wrapper [data-gu-name=meta] .meta__social ul li a span,article.content--interactive.portrait-layout-feature-dark .furniture-wrapper [data-gu-name=meta] .meta__comment,article.content--interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper #meta .meta__social,article.content--interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper #meta .meta__social ul li a span,article.content--interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper #meta .meta__comment,article.content--interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper [data-gu-name=meta] .meta__social,article.content--interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper [data-gu-name=meta] .meta__social ul li a span,article.content--interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper [data-gu-name=meta] .meta__comment{border-color:var(--article-meta-lines)}article.content--interactive.portrait-layout-feature-dark .furniture-wrapper figcaption,article.content--interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper figcaption{color:var(--feature-dark-text-meta)}article.content--interactive.portrait-layout-feature-dark .article .article__body h2,article.content--interactive.portrait-layout-feature-dark [data-gu-name=body] h2,article.content--interactive.portrait-layout-feature-dark-no-dropcap .article .article__body h2,article.content--interactive.portrait-layout-feature-dark-no-dropcap [data-gu-name=body] h2{font-weight:200}article.content--interactive.portrait-layout-feature-dark .article .article__body h2:has(strong),article.content--interactive.portrait-layout-feature-dark [data-gu-name=body] h2:has(strong),article.cMae'r CSS hwn yn targedu cynlluniau erthyglau rhyngweithiol gyda nodwedd portread tywyll a dim cap gollwng. Mae'n gwneud unrhyw `h2` sy'n cynnwys tag `` yn drwm, yn tynnu delweddau cefndir o restrau sydd wedi'u cuddio mewn print, ac yn addasu'r bylchiad ar gyfer y paragraff cyntaf sy'n dilyn yr elfen atom gyntaf, giât mewngofnodi, neu floc embed o fewn corff yr erthygl, cynnwys rhyngweithiol, neu gorff y nodwedd.Pan fydd erthygl yn defnyddio'r cynllun portread rhyngweithiol gyda'r nodwedd dywyll a dim cap gollwng, mae'r paragraff cyntaf sy'n dilyn yr elfen gyntaf yn cael 14px o badin top. Hefyd, yn yr un cynllun, mae llythyren gyntaf y paragraff cyntaf hwnnw wedi'i steilio fel cap gollwng. Mae hyn yn berthnasol p'un a yw'r paragraff yn dod yn syth ar ôl yr elfen gyntaf, neu ar ôl ffigur sy'n cynnwys bloc embed anniogel, giât mewngofnodi, neu elfen arall. Mae hefyd yn berthnasol y tu mewn i gorff yr erthygl, y cynhwysydd cynnwys rhyngweithiol, a chorff y nodwedd.Pan fydd erthygl yn defnyddio'r cynllun portread rhyngweithiol gyda'r nodwedd dywyll a dim cap gollwng, ni ddylai llythyren gyntaf y paragraff cyntaf ar ôl yr elfen agoriadol gael ei steilio fel cap gollwng. Mae hyn yn berthnasol p'un a yw'r elfen agoriadol yn cael ei dilyn yn uniongyrchol gan baragraff, giât mewngofnodi, elfen arall, neu ffigur wedi'i fewnosod, a ph'un a yw'n ymddangos yng nghorff prif y nodwedd neu'r adran gorff. Yn yr achosion hyn, mae'r llythyren gyntaf yn cadw'r un ffont, pwysau, maint, uchder llinell, a lliw â'r testun o'i chwmpas, nid yw'n arnofio, ac nid yw'n cael ei thrawsnewid.
Ar gyfer erthyglau sy'n defnyddio'r cynllun portread rhyngweithiol gyda'r nodwedd balchder, mae'r wrapper dodrefn yn cael ymyl a phadin llorweddol ychwanegol, a chefndir graddiant rheiddiol lliwgar. Ar sgriniau lletach, mae'r ymylon a'r padin yn cynyddu. Mae gan y wrapper hefyd haen gorgyffwrdd gwead sŵn gyda modd cymysgu llosgi lliw ac afloywder llai, sy'n newid i ddelweddau cydraniad uwch ar bwyntiau torri lletach. Mae'r ddelwedd gyntaf yn defnyddio modd cymysgu gorgyffwrdd ar 90% o afloywder. Mae penawdau yng nghorff yr erthygl yn defnyddio pwysau ffont ysgafnach, ond mae penawdau sy'n cynnwys testun trwm yn defnyddio pwysau trymach.Ar gyfer nodweddion cynllun portread rhyngweithiol gyda'r thema balchder nad ydynt yn y modd golau, mae lliw'r prif biler yn cael ei osod i liw'r cap gollwng, a lliw'r ail biler yn cael ei osod i gefndir botwm golygyddol. Mae testun y standfirst, y dateline, y testun dilyn, border y pennawd, a lliw'r pennawd i gyd yn cael eu gosod i #121212. Mae angor y byline a llenwad eicon dilyn yn defnyddio lliw'r ail biler, ac mae testun teitl y gyfres hefyd yn defnyddio lliw'r ail biler. Yn yr erthyglau hyn, mae cefndir y wrapper dodrefn yn wyn. Mae testun label brandio yn #121212, ac mae testun dolen brandio yn defnyddio lliw'r ail biler. Mae delweddau brandio yn cael eu gwrthdroi.
Ar gyfer erthyglau barn cynllun portread rhyngweithiol, mae lliw'r cefndir yn cael ei osod i #fef9f5, ac mae'r un lliw yn cael ei ddefnyddio ar gyfer cefndir y dyfyniad tynnu, cefndir adran yr erthygl, a chendir yr is-feta. Yn y modd tywyll, oni bai bod y modd golau wedi'i osod yn benodol, mae cefndir y farn yn dod yn #1a1a1a, ac mae cefndiroedd yr is-feta ac adran yr erthygl hefyd yn dod yn #1a1a1a. Mae'r elfen llinellau wedi'i chuddio yn yr erthyglau hyn. Mae'r wrapper dodrefn wedi'i leoli'n gymharol.
Ar sgriniau sydd o leiaf 81.25em o led, mae'r wrapper dodrefn yn defnyddio cynllun grid gyda meintiau rhes benodol ar gyfer y teitl, portread, pennawd, standfirst, ac adrannau meta. Pan fydd mân-lun yn bresennol, mae'r cynllun yn addasu ar wahanol bwyntiau torri: ar 61.25em ac yn lletach, ar 71.25em ac yn lletach, ac eto ar 81.25em ac yn lletach, gan newid maint rhes y grid bob tro.
Yn y wrapper dodrefn, mae h1 y pennawd a'i ddolenni yn defnyddio pwysau ffont o 200, dim lled uchaf, a maint ffont o 32px. Ar sgriniau sydd o leiaf 71.25em o led, mae maint y ffont yn cynyddu i 50px.Pan fyddwch yn hofran dros ddolen pennawd mewn erthygl farn ryngweithiol gyda chynllun portread, mae'r tanlinell yn dod yn 2px o drwch ac yn symud i lawr 6px.
Yn yr un cynllun, mae testun byline nad yw y tu mewn i elfen `gu-island` yn cael ei osod i 32px gyda phwysau ffont o 100. Ar sgriniau sydd o leiaf 71.25em o led, mae'r testun byline hwnnw'n tyfu i 50px.
Nid oes gan gynhwysydd mewnol y pennawd ddim padin gwaelod.
Mae'r standfirst wedi'i leoli'n gymharol. Mae paragraffau, dolenni, ac eitemau rhestr y tu mewn i'r standfirst i gyd yn defnyddio pwysau ffont o 100. Ar sgriniau sydd o leiaf 61.25em o led, nid oes gan y standfirst ddim padin top; ar sgriniau sydd o leiaf 71.25em o led, mae'n cael 2px o badin top.
Mae wrapper pennawd y prif gyfrwng portread yn llenwi ei uchder, wedi'i leoli'n gymharol, ac yn cuddio gorlif. Mae ganddo elfen ffug `:after` sy'n creu cefndir gyda phatrwm llinell lorweddol sy'n ailadrodd, wedi'i leoli ar waelod y chwith, 28px o uchder a lled llawn, yn eistedd y tu ôl i'r cynnwys. Ar sgriniau hyd at 61.24em o led, mae'r elfen ffug hon yn cael ymyl gwaelod 4px.Yn y cyn
'Rwy'n ofni y byddan nhw'n bomio'r caffi lle rwy'n gweithio, neu'n bomio fi': diwrnod ym mywyd bachgen 12 oed yn Gaza
