Dyma floc o god CSS sy'n diffinio ffontiau personol ar gyfer gwefan. Mae'n sefydlu teulu ffont "Guardian Headline Full" gyda gwahanol arddulliau a phwysau, megis ysgafn, rheolaidd, canolig, a lled-fyw, pob un gyda fersiynau arferol ac italaidd. Mae'r cod yn nodi ble i lawrlwytho'r ffeiliau ffont o, gan ddefnyddio gwahanol fformatau fel WOFF2, WOFF, a TTF i sicrhau cydnawsedd ar draws porwyr.
Dyma floc o god CSS, nid darn o destun. Mae'n diffinio arddulliau ffont a rheolau cynllun ar gyfer gwefan. Dyma esboniad yn Saesneg clir o'r hyn mae'n ei wneud:
Mae'r cod yn sefydlu ffontiau personol ar gyfer gwefan y Guardian, gan gynnwys "Guardian Headline Full" mewn gwahanol bwysau (trwm, du, a'u fersiynau italaidd) a "Guardian Titlepiece" mewn trwm. Mae'r ffontiau hyn yn cael eu llwytho o weinydd asedau'r Guardian mewn sawl fformat (WOFF2, WOFF, a TTF) i sicrhau cydnawsedd ar draws porwyr.
Mae hefyd yn cynnwys rheolau dylunio ymatebol ar gyfer cynllun tudalen penodol o'r enw "content__main-column--interactive." Ar sgriniau lletach (dros 71.25em), mae'r golofn hon yn cael ymyl chwith o 160px, ac ar sgriniau hyd yn oed yn lletach (dros 81.25em), mae'r ymyl yn cynyddu i 240px. Y tu mewn i'r golofn hon, mae rhai elfennau fel "element-atom" wedi'u cyfyngu i uchafswm lled o 620px, ond ar sgriniau llai (dan 46.24em), gallant gymryd y lled llawn.
Ar gyfer elfennau "element-showcase", nid oes ganddynt ymyl chwith ar ffonau symudol, ond ar sgriniau canolig (46.25em ac uwch), maent wedi'u capio ar 620px o led, ac ar sgriniau mawr (71.25em ac uwch), gallant ehangu i 860px. Mae elfennau "Element-immersive" wedi'u cynllunio i fod yn lled llawn: ar ffonau symudol, maent yn ymestyn ar draws y ffenestr gyfan, ar sgriniau canolig maent yn symud ychydig ac yn ymestyn y tu hwnt i'r golofn, ac ar sgriniau mawr maent yn alinio'n normal gydag uchafswm lled o 1260px.
Yn olaf, mae paragraffau a rhestrau o fewn y golofn hon hefyd wedi'u cyfyngu i 620px o led, ac mae yna elfen addurniadol (":before") sy'n ymestyn uchder llawn y golofn ynghyd â 15px, gydag uchder lleiaf o 100px, wedi'i lleoli ar y brig.
.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;
}
.content__main-column--interactive .element-atom:first-of-type + p:first-of-type,
.content__main-column--interactive .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
.content__main-column--interactive .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
.content__main-column--interactive .element-atom:first-of-type + .element-atom + p:first-of-type,
.content__main-column--interactive hr:not(.last-horizontal-rule) + p,
.content__main-column--interactive hr:not(.last-horizontal-rule) + .ad-slot-container + p,
#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 .element-atom:first-of-type + .element-atom + p:first-of-type,
#article-body > div hr {
/ Nid oes arddulliau penodol wedi'u diffinio yma; mae'r rhestr detholwyr yn debygol o fod wedi'i hanelu at dargedu'r elfennau hyn at ryw ddiben. /
}
Mae'r paragraff cyntaf ar ôl rheol lorweddol neu atom elfen yn cael padio top ychwanegol, oni bai mai dyma'r rheol lorweddol olaf. Mae hyn yn berthnasol ar draws gwahanol adrannau fel corff yr erthygl, cynnwys rhyngweithiol, sylwadau, ac adrannau nodwedd.
Yn yr un modd, mae llythyren gyntaf y paragraff cyntaf hwnnw wedi'i harddullio gydag effaith cap disgyn, ond dim ond mewn cyd-destunau penodol fel y golofn brif ryngweithiol, corff yr erthygl, ac adrannau sylwadau.
Dyma'r testun wedi'i ailysgrifennu mewn Saesneg rhugl, naturiol:
---
Mae'r rheolau CSS canlynol yn berthnasol i lythyren gyntaf rhai paragraffau, gan roi arddull cap disgyn mawr, trwm, priflythrennog iddynt. Mae hyn yn effeithio ar baragraffau sy'n dod yn syth ar ôl elfennau penodol fel rheolau lorweddol neu flociau cynnwys, ond dim ond pan fyddant yn baragraff cyntaf yn yr adrannau corff neu nodwedd. Mae'r arddullio yn defnyddio ffont pennawd y Guardian, yn gosod maint y ffont i 111 picsel, ac yn alinio'r llythyren i'r chwith gydag ymyl bach. Mae'r lliw yn cael ei reoli gan briodwedd arferol, gyda chwymp i liw'r piler.
Ar gyfer cynnwys rhyngweithiol a chyrff erthyglau, nid oes gan baragraffau sy'n dilyn rheol lorweddol neu gynhwysydd slot hysbyseb unrhyw badio top ychwanegol.
Mae dyfyniadau tynnu yn yr adrannau corff, nodwedd, sylw, a rhyngweithiol wedi'u cyfyngu i uchafswm lled o 620 picsel.
Mae capsiynau ar gyfer delweddau arddangos fel arfer wedi'u lleoli'n statig ac yn cymryd y lled llawn, hyd at 620 picsel. Fodd bynnag, ar sgriniau lletach (dros 71.25em), maent yn dod yn wedi'u lleoli'n absoliwt gydag uchafswm lled o 140 picsel, ac ar sgriniau hyd yn oed yn lletach (dros 81.25em), mae'r uchafswm lled yn cynyddu i 220 picsel.
Mae elfennau trochi yn ymestyn i led llawn y ffenestr, gan gyfrif am led y bar sgrolio. Ar sgriniau llai (hyd at 71.24em), maent wedi'u capio ar 978 picsel, ac mae gan eu capsiynau badio llorweddol sy'n addasu yn seiliedig ar faint y sgrin—10 picsel ar sgriniau bach iawn a 20 picsel ar rai canolig. Rhwng 46.25em a 61.24em, yr uchafswm lled yw 738 picsel. Ar sgriniau bach iawn (hyd at 46.24em), mae'r elfen yn cael ei symud i'r chwith gydag ymylon negyddol, a gosodir padio'r capsiwn i 20 picsel ar sgriniau o leiaf 30em o led.
Ar gyfer ffigurau arddangos yn y corff neu golofnau rhyngweithiol, cymhwysir ymyl chwith negyddol o 160 picsel ar sgriniau lletach na 71.25em.
---
Gadewch i mi wybod os oes angen unrhyw addasiadau pellach.
[body] .content__main-column--interactive figure.element.element--showcase.element-showcase {
margin-left: -240px !important;
}
.furniture-wrapper {
position: relative;
}
@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);
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: .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,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name="standfirst"]:before {
/ Nid oes arddulliau ychwanegol wedi'u nodi /
}
}
.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:has(.ios, .android) {
--darkBackground: #1a1a1a;
--feature: #c70000;
--darkmodeFeature: #ff5943;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}
@media (prefers-color-scheme: dark) {
:root:has(.ios, .android) {
--new-pillar-colour: var(--darkmode-pillar, var(--darkmodeFeature));
}
}
body.ios #feature-article-container .element-atom:first-of-type + p:fi
Ar gyfer y paragraff cyntaf ar ôl atom elfen mewn cynhwysydd erthygl, dylai'r llythyren gyntaf ddefnyddio lliw piler eilaidd (neu ddu fel cwymp). Mae hyn yn berthnasol i gynwysyddion erthyglau nodwedd, safonol, a sylwadau ar ddyfeisiau iOS ac Android, gan gynnwys achosion lle mae porth mewngofnodi yn ymddangos cyn y paragraff.
Ar iOS ac Android, ni ddylai fod unrhyw uchder i bennawd yr erthygl yn y cynwysyddion nodwedd, safonol, a sylwadau.
Dylai'r lapio dodrefn yn y cynwysyddion hyn gael padio o 4px ar y brig a 10px ar yr ochrau. Dylai'r labeli cynnwys y tu mewn fod yn feiddgar, defnyddio teulu ffont Guardian Headline, cyfateb i liw'r piler, a bod yn briflythrennog.
Dylai'r pennawd (h1) yn y lapio dodrefn fod yn 32px, yn feiddgar, gyda 12px o badio ar y gwaelod, ac wedi'i liwio'n dywyll (#121212).
Dylai ffigurau delwedd y tu mewn i'r lapio dodrefn gael eu harddangos fel elfennau bloc.
wrapper 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 (nodwedd, safonol, sylw),
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, ar gyfer pob math o erthygl, addaswch fylchau'r standfirst /
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, ar gyfer pob math o erthygl, gosodwch y ffont ar gyfer paragraffau 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, ar gyfer pob math o erthygl, arddulliwch ddolenni yn y standfirst /
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 .furniture-wrapper .standfirst__inner li a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner a {
color: var(--new-pillar-colour) !important;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
border-bottom: none;
}
/ Ar iOS ac Android, ar gyfer pob math o erthygl, arddulliwch gyflyrau hofran dolenni yn y standfirst /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #feature-article-container .furniture-wrapper .standfir
Wrth hofran, bydd dolenni y tu mewn i'r standfirst (gan gynnwys eitemau rhestr a dolenni rheolaidd) yn y cynwysyddion erthygl ar gyfer dyfeisiau iOS ac Android yn cael eu lliw tanlinellu wedi'i osod i liw piler newydd.
Ar gyfer yr adran meta yn y cynwysyddion erthygl hyn ar iOS ac Android, nid oes ymyl. Bydd testun y byline, gan gynnwys enw'r awdur ac unrhyw spans cysylltiedig, hefyd yn defnyddio lliw piler newydd.
Nid oes padio gan yr adran meta__misc, ac mae unrhyw eiconau SVG y tu mewn iddo hefyd yn dilyn yr un rheolau arddullio.
ure-wrapper .meta__misc svg {
stroke: var(--new-pillar-colour);
}
body.ios #feature-article-container .furniture-wrapper .element--showcase #caption-button,
body.ios #standard-article-container .furniture-wrapper .element--showcase #caption-button,
body.ios #comment-article-container .furniture-wrapper .element--showcase #caption-button,
body.android #feature-article-container .furn
