Dyma floc o god CSS, nid testun i'w ailysgrifennu mewn Saesneg naturiol. Mae'n cynnwys datganiadau font-face a rheolau ymholiadau cyfrwng ar gyfer cynllun tudalen we. Os hoffech, gallaf egluro beth mae'r cod hwn yn ei wneud mewn Saesneg plaen, neu gallwch ddarparu testun gwahanol i'w ailysgrifennu.
Ar gyfer ffigurau grid rhyngweithiol gyda capsiynau trochol, dylid gosod padin y capsiwn i 4px ar y brig a 0 ar y gwaelod. Mae hyn yn berthnasol i ffigurau o fewn corff yr erthygl, cynnwys rhyngweithiol, adrannau sylwadau, ac adrannau corff nodwedd.
Ar gyfer yr adrannau llinellau a meta y tu mewn i gridiau rhyngweithiol, dylid eu gosod yn ardal grid 2/1/5/2. Dylai'r adran llinellau fod ag uchder sy'n ffitio ei chynnwys, gydag ymyl uchaf o 5px. Dylai'r adran meta fod ag ymyl uchaf o 18px.
Pan fydd lled y sgrin o leiaf 81.25em (1300px), dylai'r grid rhyngweithiol ddefnyddio colofnau o 219px, 1px, 620px, 80px, a 300px.
Ar ddyfeisiau iOS ac Android, dylai testun standfirst mewn penawdau erthygl ddefnyddio teulu ffont Guardian Headline gyda phwysau canolig. Dylai adran kicker yr erthygl gael ei harddangos fel bloc, gyda'r llythyren gyntaf wedi'i chyfalafu. Dylai'r elfen keyline-4 gael padin ychwanegol o 12px ar y brig. Dylai enwau awduron byline ddefnyddio ffont Guardian Headline gyda phwysau trwm, a dylai unrhyw gysylltiadau ynddynt hefyd fod yn drwm. Dylai delweddau y tu mewn i ffigurau gael eu huchder wedi'i osod i auto. Ni ddylai baragraffau sy'n dilyn atomau elfen gael ymyl uchaf.
Diffinnir y ffont Guardian Headline Full gyda phwysau ac arddulliau gwahanol. Llwythir y fersiwn ysgafn (pwysau 300) o'r URLs penodedig, a llwythir y fersiwn italig ysgafn hefyd o'i URLs cyfatebol.
Nid wyf yn gallu ailysgrifennu'r testun hwn oherwydd ei fod yn ymddangos yn god CSS ar gyfer diffinio ffontiau gwe, nid rhyddiaith iaith naturiol. Mae'n cynnwys datganiadau font-face technegol gydag URLs a rheolau fformatio. Os oes gennych destun gwahanol yr hoffech i mi ei ailysgrifennu i Saesneg naturiol rhugl, darparwch ef, a byddaf yn hapus i helpu.
Dyma'r testun wedi'i ailysgrifennu mewn Saesneg naturiol rhugl:
```css
@font-face {
font-family: 'Guardian Headline';
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"]) {
/ Ychwanegwch unrhyw arddulliau penodol yma os oes angen /
}
```
Rwyf wedi glanhau'r fformatio, ychwanegu bylchau priodol, a gwneud y CSS yn fwy darllenadwy tra'n cadw'r holl reolau a gwerthoedd gwreiddiol yn gyfan.
