Dyma god CSS sy'n diffinio teulu ffont "Guardian Headline Full" i'w ddefnyddio ar wefan. Mae'n cynnwys nifer o reolau font-face, pob un yn pennu pwysau gwahanol (ysgafn, rheolaidd, canolig, lled-drwm) ac arddull (normal neu italaidd) o'r ffont. Ar gyfer pob amrywiad, mae'r cod yn darparu'r ffeiliau ffont mewn fformatau gwahanol (WOFF2, WOFF, a TTF) i sicrhau cydnawsedd ar draws gwahanol borwyr. Mae'r ffeiliau ffont wedi'u cynnal ar weinydd asedau'r Guardian.
Mae'r testun hwn yn ymddangos fel cod CSS, nid rhyddiaith iaith naturiol. Mae'n diffinio arddulliau ffont a rheolau cynllun ar gyfer tudalen we. Gan ei fod yn god technegol, nid yw'n berthnasol i'w ailysgrifennu i Saesneg rhugl. Os oeddech yn bwriadu rhannu darn gwahanol o destun, darparwch ef, a byddaf yn hapus i helpu.
chwith: -11px.
Nid oes gan y golofn cynnwys prif ar gyfer erthyglau rhyngweithiol unrhyw ymyl na phadin o amgylch elfennau wedi'u mewnosod, gyda 12px o badin ar y brig a'r gwaelod. Pan fydd paragraff yn cael ei ddilyn gan elfen wedi'i mewnosod, caiff y padin ei dynnu a'i ddisodli ag ymylon 12px ar y ddwy ochr. Mae elfennau mewn-lein wedi'u cyfyngu i uchafswm lled o 620px. Ar sgriniau lletach na 61.25em, mae ffigurau wedi'u marcio fel rhai mewn-lein hefyd wedi'u capio ar 620px.
Ar gyfer adrannau cyfryngau sy'n cynnwys fideos sy'n ailadrodd, mae'r capsiwn wedi'i haenu uwchben gyda mynegai-z o 6, ac mae'r botwm ailadrodd wedi'i leoli ar y gwaelod dde gydag ymyl gwaelod 40px ac ymyl dde 3px. Mae'r botymau mud a dad-fud wedi'u halinio i'r dde gyda phadin chwith ychwanegol. Mae gan y botwm capsiwn fynegai-z uchel, ac ar sgriniau mwy mae'n eistedd 20px o'r gwaelod. Ar gyfer fideos sinemagraff ar sgriniau lletach na 46.25em, caiff y terfyn uchder ei dynnu.
Yn yr adran corff, mae fideos wedi'u cynnal yn hunan yn cael eu harddangos fel blociau gydag uchafswm lled o 620px ac ymylon 12px. Mae fideos sy'n ailadrodd a'u helfennau fideo yn llenwi'r lled llawn, yn cynnal cymhareb agwedd, ac wedi'u canoli. Os yw fideo sy'n ailadrodd wedi'i osod i'r modd trochi, mae'n ehangu i led llawn heb unrhyw ymylon. Ar sgriniau lletach na 71.25em, mae fideos trochi yn ymestyn i 1140px o led ac yn symud i'r chwith gan 180px, gyda chapsiynau wedi'u hindentio 20px. Ar sgriniau lletach na 81.25em, maent yn tyfu i 1300px ac yn symud i'r chwith gan 260px.
Mae'r dyluniad yn defnyddio newidynnau CSS ar gyfer lliwiau: mae dateline yn lwyd tywyll, mae borderi pennawd yn lwyd golau, mae capsiynau yn lwyd canolig gyda chefndir tywyll lled-dryloyw, a'r lliw nodwedd yn goch dwfn. Mae prif liw piler yn rhagosod i'r lliw nodwedd. Mae is-benawdau, dyfyniadau tynnu, a dyfyniadau bloc yn defnyddio lliw piler eilaidd, sy'n addasu i'r modd tywyll gydag arlliw gwahanol.
Nid oes gan golofnau cynnwys rhyngweithiol badin o amgylch elfennau wedi'u mewnosod. Pan fydd elfen wedi'i mewnosod yn ymddangos yn union ar ôl elfen arall neu reol lorweddol, nid yw'r paragraff canlynol yn cael unrhyw ymyl brig ychwanegol. Mae hyn yn berthnasol ar draws gwahanol fathau o gynwysyddion, gan gynnwys prif gorff yr erthygl ac adrannau rhyngweithiol.
Mae hwn yn rhestr dewisydd CSS technegol, felly nid yw ei ailysgrifennu mewn "Saesneg rhugl, naturiol" yn syml. Fodd bynnag, gallaf symleiddio ac egluro'r bwriad mewn Saesneg plaen:
---
Mae'r rheolau CSS hyn yn berthnasol i baragraffau sy'n dod yn union ar ôl elfennau penodol (fel teclynnau rhyngweithiol, ysgogiadau mewngofnodi, neu reolau lorweddol) mewn gwahanol adrannau cynnwys. Mae'r rheol gyntaf yn ychwanegu padin brig ychwanegol (14px) i'r paragraffau hynny. Mae'r ail reol yn arddullio llythyren gyntaf y paragraffau hynny gydag effaith cap cwymp.
---
Os oeddech yn bwriadu ailysgrifennu'r CSS ei hun er eglurder, dyma fersiwn cryno:
```css
/ Ychwanegu bylchau uwchben paragraffau sy'n dilyn elfennau penodol /
.element-atom:first-of-type + p:first-of-type,
.sign-in-gate + p:first-of-type,
#sign-in-gate + p:first-of-type,
.element-atom + p:first-of-type,
hr:not(.last-horizontal-rule) + p,
hr:not(.last-horizontal-rule) + .ad-slot-container + p {
padding-top: 14px;
}
/ Cymhwyso cap cwymp i lythyren gyntaf y paragraffau hynny /
.content__main-column--interactive .element-atom:first-of-type + p:first-of-type::first-letter,
.content__main-column--interactive .sign-in-gate + p:first-of-type::first-letter,
.content__main-column--interactive #sign-in-gate + p:first-of-type::first-letter,
.content__main-column--interactive .element-atom + p:first-of-type::first-letter,
.content__main-column--interactive hr:not(.last-horizontal-rule) + p::first-letter,
.content__main-column--interactive hr:not(.last-horizontal-rule) + .ad-slot-container + p::first-letter,
#article-body > div .element-atom:first-of-type + p:first-of-type::first-letter,
#article-body > div .sign-in-gate + p:first-of-type::first-letter,
#article-body > div #sign-in-gate + p:first-of-type::first-letter,
#article-body > div .element-atom + p:first-of-type::first-letter,
#article-body > div hr:not(.last-horizontal-rule) + p::first-letter,
#article-body > div hr:not(.last-horizontal-rule) + .ad-slot-container + p::first-letter,
.content--interactive > div .element-atom:first-of-type + p:first-of-type::first-letter,
.content--interactive > div .sign-in-gate + p:first-of-type::first-letter,
.content--interactive > div #sign-in-gate + p:first-of-type::first-letter,
.content--interactive > div .element-atom + p:first-of-type::first-letter,
.content--interactive > div hr:not(.last-horizontal-rule) + p::first-letter,
.content--interactive > div hr:not(.last-horizontal-rule) + .ad-slot-container + p::first-letter,
#comment-body .element-atom:first-of-type + p:first-of-type::first-letter,
#comment-body .sign-in-gate + p:first-of-type::first-letter,
#comment-body #sign-in-gate + p:first-of-type::first-letter,
#comment-body .element-atom + p:first-of-type::first-letter,
#comment-body hr:not(.last-horizontal-rule) + p::first-letter,
#comment-body hr:not(.last-horizontal-rule) + .ad-slot-container + p::first-letter,
[data-gu-name="body"] .element-atom:first-of-type + p:first-of-type::first-letter,
[data-gu-name="body"] .sign-in-gate + p:first-of-type::first-letter,
[data-gu-name="body"] #sign-in-gate + p:first-of-type::first-letter,
[data-gu-name="body"] .element-atom + p:first-of-type::first-letter,
[data-gu-name="body"] hr:not(.last-horizontal-rule) + p::first-letter,
[data-gu-name="body"] hr:not(.last-horizontal-rule) + .ad-slot-container + p::first-letter {
/ Arddull cap cwymp yn mynd yma /
}
```
---
Os oeddech yn golygu rhywbeth arall, eglurwch, ac fe'i haddasaf yn unol â hynny.
Dyma'r testun wedi'i ailysgrifennu mewn Saesneg rhugl, naturiol:
---
Mae'r rheolau CSS yn cymhwyso arddull arbennig i lythyren gyntaf y paragraff cyntaf ar ôl elfennau penodol (fel rheolau lorweddol neu gynwysyddion hysbysebion) mewn adrannau penodol o'r dudalen. Mae'r llythyren gyntaf hon wedi'i harddullio fel cap cwymp mawr, trwm, priflythrennog gan ddefnyddio ffont pennawd y Guardian, gyda maint o 111px ac uchder llinell o 92px. Mae'n arnofio i'r chwith, gydag ymyl ar y dde, ac yn defnyddio lliw a ddiffinnir gan briodwedd arferiad (gan syrthio'n ôl i liw piler).
Ar gyfer paragraffau sy'n dilyn rheol lorweddol (gyda neu heb gynhwysydd hysbysebion), caiff y padin brig ei dynnu.
Mae dyfyniadau tynnu (dyfyniadau wedi'u hamlygu) yn y prif feysydd cynnwys wedi'u cyfyngu i uchafswm lled o 620px.
Ar gyfer delweddau arddangos (delweddau mawr dan sylw), mae'r capsiwn wedi'i leoli'n statig ac yn cymryd y lled llawn, hyd at 620px. Ar sgriniau lletach (dros 71.25em), mae'r capsiwn yn dod yn gwbl safle gydag uchafswm lled o 140px, ac ar sgriniau hyd yn oed yn lletach (dros 81.25em), mae'r uchafswm lled yn cynyddu i 220px.
Mae elfennau trochi (delweddau neu fideos lled llawn) yn rhychwantu lled llawn y ffenestr, gan gyfrif am led y bar sgrolio. Ar sgriniau llai (o dan 71.24em), maent wedi'u capio ar 978px, ac mae'r capsiwn yn cael padin llorweddol (10px ar sgriniau bach iawn, 20px ar rai ychydig yn fwy). Rhwng 46.25em a 61.24em, yr uchafswm lled yw 738px. Ar sgriniau bach iawn (o dan 46.24em), mae'r elfen yn cael ei thynnu i ymyl chwith gydag ymylon negyddol, ac mae padin y capsiwn yn addasu yn unol â hynny.
Ar sgriniau mwy (dros 71.25em), mae ffigurau arddangos yn y corff yn cael eu symud i'r chwith gydag ymyl negyddol o 160px, ac ar sgriniau hyd yn oed yn fwy (dros 81.25em), mae hyn yn cynyddu i 240px.
Mae'r lapio dodrefn (cynhwysydd ar gyfer elfennau cynllun penodol) wedi'i leoli'n gymharol, ac ar sgriniau lletach na 61.25em, cymhwysir arddull ychwanegol (er bod y rheol wedi'i thorri yma).
.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);
text-decoration-thickness: 1px;
}
.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 #standfirst:before,
.furniture-wrapper [data-gu-name="standfirst"]:before {
left: -0.5px;
}
}
.furniture-wrapper .article-header .content__labels > div,
.furniture-wrapper [data-gu-name="title"].content__labels > div {
padding-top: 2px;
}
.furniture-wrapper #headline h1,
.furniture-wrapper [data-gu-name="headline"] h1,
.furniture-wrapper .headline h1 {
font-weight: 600;
max-width: 620px;
font-size: 32px;
}
@media (min-width: 71.25em) {
.furniture-wrapper #headline h1,
.furniture-wrapper [data-gu-name="headline"] h1,
.furniture-wrapper .headline h1 {
max-width: 540px;
font-size: 50px;
}
}
@media (min-width: 46.25em) {
.furniture-wrapper .keyline-4,
.furniture-wrapper [data-gu-name="lines"] {
margin-right: 0;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper .keyline-4,
.furniture-wrapper [data-gu-name="lines"] {
display: none;
}
}
.furniture-wrapper .keyline-4 svg,
.furniture-wrapper [data-gu-name="lines"] svg {
stroke: var(--headerBorder);
}
@media (min-width: 46.25em) {
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name="meta"] {
margin-right: 0;
}
}
.furniture-wrapper #meta .meta__social,
.furniture-wrapper #meta .meta__social ul li a span,
.furniture-wrapper #meta .meta__comment,
.furniture-wrapper [data-gu-name="meta"] .meta__social,
.furniture-wrapper [data-gu-name="meta"] .meta__social ul li a span,
.furniture-wrapper [data-gu-name="meta"] .meta__comment {
border-color: var(--headerBorder);
}
.furniture-wrapper #meta .content__meta-container_dcr > div > gu-island,
.furniture-wrapper [data-gu-name="meta"] .content__meta-container_dcr > div > gu-island {
display: none;
}
.furniture-wrapper .standfirst,
.furniture-wrapper #standfirst,
.furniture-wrapper [data-gu-name="standfirst"] {
margin-left: -10px;
padding-left: 10px;
position: relative;
}
@media (min-width: 46.25em) {
.furniture-wrapper .standfirst,
.furniture-wrapper #standfirst,
.furniture-wrapper [data-gu-name="standfirst"] {
padding-top: 2px;
}
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name="standfirst"] p {
font-weight: 400;
font-size: 20px;
padding-bottom: 14px;
}
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
position: relative;
margin-top: 0;
margin-bottom: 2px;
grid-area: portrait;
}
.furniture-wrapper #main-media div div,
.furniture-wrapper [data-gu-name="media"] div div {
width: 100%;
margin-inline: 0;
}
@media (min-width: 61.25em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
margin-bottom: 0;
}
}
@media (max-width: 46.24em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
width: calc(100vw - var(--scrollbar-width, 0px));
margin-left: -10px;
}
}
@media (max-width: 46.24em) and (min-width: 30em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
margin-left: -20px;
}
}
.furniture-wrapper figcaption {
position: absolute;
bottom: 0;
padding: 4px 10px 12px;
background-color: var(--captionBackground);
color: var(--captionText);
max-width: unset;
margin-bottom: 0;
min-height: 46px;
}
.furniture-wrapper figcaption span {
color: var(--headerBorder);
}
.furniture-wrapper figcaption span svg {
fill: var(--headerBorder);
}
.furniture-wrapper figcaption span:nth-of-type(1) {
display: none;
}
.furniture-wrapper figcaption span:nth-of-type(2) {
display: inline;
max-width: 90%;
}
@media (min-width: 30em) {
.furniture-wrapper figcaption {
padding: 4px 20px 12px;
}
}
.furniture-wrapper figcaption.hidden {
opacity: 0;
}
.furniture-wrapper #caption-button {
display: block;
position: absolute;
bottom: 10px;
right: 8px;
z-index: 30;
background-color: var(--captionBackground);
border: none;
border-radius: 50%;
padding: 6px 5px 5px;
}
.furniture-wrapper #caption-button svg {
transform: scale(0.85);
}
@media (min-width: 30em) {
.furniture-wrapper #caption-button {
right: 10px;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive:before {
top: -12px !important;
height: calc(100% + 24px) !important;
}
}
.content__main-column--interactive h2 {
max-width: 620px;
}
:root {
--new-pillar-colour: var(--darkmode-pillar, var(--darkModeFeature)) !important;
--headerBorderColor: #606060;
--darkModeFeature: #ff5943;
}
nav + section {
display: none;
}
nav + aside {
display: none;
}
aside + section {
display: none;
}
.furniture-wrapper {
background-color: var(--darkBackground);
margin: 0 -10px;
padding: 0 10px 4px;
}
@media (min-width: 30em) {
.furniture-wrapper {
margin: 0 -20px;
padding: 0 20px 8px;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper {
padding: 0 20px;
}
}
@media (min-width: 81.25em) {
.furniture-wrapper:before {
content: "";
width: calc((100vw - 1298px) / 2);
height: 100%;
}
}eight:100%;position:absolute;left:calc((100vw - 1298px)/-2);background-color:var(--darkBackground);border-right:1px solid var(--headerBorderColor)}.furniture-wrapper:after{content:"";width:calc((100vw - 1298px)/2);height:100%;position:absolute;right:calc((100vw - 1298px)/-2);background-color:var(--darkBackground)}.furniture-wrapper .article-header,.furniture-wrapper [data-gu-name=title] a,.furniture-wrapper [data-gu-name=title] span{color:var(--new-pillar-colour, --darkModeFeature)}@media (min-width: 61.25em){.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(--headerBorderColor)}}.furniture-wrapper #headline h1,.furniture-wrapper [data-gu-name=headline] h1,.furniture-wrapper .headline h1{font-weight:700;color:#dcdcdc}.furniture-wrapper #headline figure,.furniture-wrapper [data-gu-name=headline] figure,.furniture-wrapper .headline figure{margin-top:0;margin-bottom:2px}@media (min-width: 71.25em){.furniture-wrapper #meta:before,.furniture-wrapper [data-gu-name=meta]:before{background-color:var(--headerBorderColor)}}.furniture-wrapper #meta details,.furniture-wrapper #meta summary,.furniture-wrapper #meta summary span,.furniture-wrapper [data-gu-name=meta] details,.furniture-wrapper [data-gu-name=meta] summary,.furniture-wrapper [data-gu-name=meta] summary span{color:#dcdcdc}.furniture-wrapper #meta .meta__social a,.furniture-wrapper #meta .meta__social button,.furniture-wrapper [data-gu-name=meta] .meta__social a,.furniture-wrapper [data-gu-name=meta] .meta__social button{border-color:var(--headerBorderColor);color:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper #meta .meta__social a svg,.furniture-wrapper #meta .meta__social button svg,.furniture-wrapper [data-gu-name=meta] .meta__social a svg,.furniture-wrapper [data-gu-name=meta] .meta__social button svg{fill:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper #meta .meta__social a:hover,.furniture-wrapper #meta .meta__social button:hover,.furniture-wrapper [data-gu-name=meta] .meta__social a:hover,.furniture-wrapper [data-gu-name=meta] .meta__social button:hover{color:var(--darkBackground);background-color:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper #meta .meta__social a:hover svg,.furniture-wrapper #meta .meta__social button:hover svg,.furniture-wrapper [data-gu-name=meta] .meta__social a:hover svg,.furniture-wrapper [data-gu-name=meta] .meta__social button:hover svg{fill:var(--darkBackground)}.furniture-wrapper #meta div,.furniture-wrapper [data-gu-name=meta] div{color:#dcdcdc}.furniture-wrapper #meta a,.furniture-wrapper [data-gu-name=meta] a{color:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper #meta a:hover,.furniture-wrapper [data-gu-name=meta] a:hover{color:var(--new-pillar-colour, --darkModeFeature);text-decoration-color:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper .standfirst a,.furniture-wrapper .standfirst li a,.furniture-wrapper #standfirst a,.furniture-wrapper #standfirst li a,.furniture-wrapper [data-gu-name=standfirst] a,.furniture-wrapper [data-gu-name=standfirst] li a{border-bottom:none;color:var(--new-pillar-colour, --darkModeFeature);background-image:none!important;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--headerBorder, #dcdcdc);text-decoration-thickness:1px}.furniture-wrapper .standfirst a:hover,.furniture-wrapper .standfirst li a:hover,.furniture-wrapper #standfirst a:hover,.furniture-wrapper #standfirst li a:hover,.furniture-wrapper [data-gu-name=standfirst] a:hover,.furniture-wrapper [data-gu-name=standfirst] li a:hover{border-bottom:none;text-decoration-color:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper .standfirst p,.furniture-wrapper #standfirst p,.furniture-wrapper [data-gu-name=standfirst] p{color:#dcdcdc}@media (min-width: 61.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{bo
Nid wyf yn gallu ailysgrifennu'r testun hwn gan ei fod yn ymddangos fel cod CSS, nid rhyddiaith iaith naturiol. A allwch ddarparu darn o Saesneg ysgrifenedig i mi ei ail-eirio yn lle hynny?
Dyma'r testun wedi'i ailysgrifennu mewn Saesneg rhugl, naturiol:
Mae hwn yn set o reolau font-face ar gyfer teulu ffont "Guardian Headline Full". Mae pob rheol yn diffinio arddull neu bwysau gwahanol o'r ffont, gan bwyntio at yr un set o ffeiliau mewn fformatau gwahanol (WOFF2, WOFF, a TTF) ar gyfer cydnawsedd ar draws porwyr. Mae'r arddulliau'n cynnwys rheolaidd, italaidd, canolig, italaidd canolig, lled-drwm, italaidd lled-drwm, trwm, italaidd trwm, a du. Mae'r ffeiliau ffont wedi'u cynnal ar weinydd asedau'r Guardian.
Mae'r testun hwn yn ymddangos fel cod CSS, nid iaith naturiol. Mae'n diffinio arddulliau ffont a rheolau cynllun ar gyfer gwefan, yn debygol o wefan y Guardian. Gan ei fod yn god technegol, nid yw ei ailysgrifennu i "Saesneg rhugl, naturiol" yn berthnasol. Fodd bynnag, gallaf ddarparu crynodeb mewn Saesneg plaen o'r hyn mae'r cod yn ei wneud:
---
Mae'r cod hwn yn sefydlu ffontiau arferiad ac yn addasu'r cynllun ar gyfer dyfeisiau symudol (iOS ac Android). Mae'n diffinio tri math o ffont: "Guardian Headline Full" mewn arddulliau rheolaidd, trwm, ac italaidd, ynghyd â "Guardian Titlepiece" mewn trwm. Mae hefyd yn gosod cynlluniau lliw ar gyfer y modd tywyll, gan ddefnyddio coch fel prif liw acen. Ar gyfer erthyglau symudol, mae'n cuddio'r pennawd, yn addasu bylchau, ac yn sicrhau bod llythyren gyntaf rhai paragraffau yn defnyddio lliw penodol. Mae'r cod yn targedu cynwysyddion erthygl penodol ac yn cymhwyso'r arddulliau hyn ar lwyfannau symudol yn unig.
Ar gyfer dyfeisiau iOS ac Android, mae'r labeli y tu mewn i lapio dodrefn cynhwysydd yr erthygl wedi'u harddullio gyda thestun trwm, gan ddefnyddio teulu ffont pennawd y Guardian, ac wedi'u lliwio yn ôl lliw y piler, gyda thestun priflythrennog.
Ar iOS ac Android, mae'r prif bennawd yn y lapio dodrefn wedi'i osod i 32 picsel, trwm, gyda 12 picsel o badin isod, ac wedi'i liwio'n dywyll (bron yn ddu).
Ar gyfer delweddau yn y lapio dodrefn ar y ddau lwyfan, maent wedi'u lleoli'n gymharol, gydag ymyl brig o 14 picsel ac ymyl chwith negyddol o 10 picsel. Mae lled y ddelwedd yn rhych
