'S e Christopher Berry-Dee an t-ùghdar fìor-eucoir as fheàrr reic anns an Rìoghachd Aonaichte a-riamh. Ach a bheil e cuideachd na fhear-anaimh fòirneartach do bhoireannaich is clann?

'S e Christopher Berry-Dee an t-ùghdar fìor-eucoir as fheàrr reic anns an Rìoghachd Aonaichte a-riamh. Ach a bheil e cuideachd na fhear-anaimh fòirneartach do bhoireannaich is clann?

Seo duilleag-stoidhle CSS a tha a’ mìneachadh an teaghlach chlàran “Guardian Headline Full”. Tha e a’ gabhail a-steach grunn riaghailtean font-face, gach fear a’ sònrachadh cuideam is stoidhle eadar-dhealaichte den chlàr, còmhla ri URLan airson faidhlichean a’ chlàir ann an diofar chruthan (WOFF2, WOFF, agus TTF). Tha na cuideaman a’ dol bho aotrom (300) gu leth-trom (600), agus tha an dà chuid stoidhlichean àbhaisteach is clò eadailteach air an gabhail a-steach. Tha na faidhlichean clàir air an cumail air frithealaiche maoin The Guardian.

Tha an teacsa seo coltach ri còd CSS, chan e cànan nàdarra. Tha e a’ mìneachadh stoidhlichean clò agus riaghailtean cruth airson duilleag-lìn. Leis gur e còd teignigeach a th’ ann, chan eil e iomchaidh ath-sgrìobhadh gu Beurla shiùbhlach. Ma bha thu airson teacsa eadar-dhealaichte a cho-roinn, feuch an toir thu seachad e, agus bidh mi toilichte do chuideachadh.

clì: -11px.
Chan eil iomall no padadh timcheall air eileamaidean freumhaichte ann am prìomh cholbh susbaint artaigilean eadar-ghnìomhach, le 12px de phadadh aig a’ mhullach agus a’ bhonn. Nuair a thig paragraf às dèidh eileamaid freumhaichte, thèid am padadh a thoirt air falbh agus cuiridh iomall 12px na àite. Tha eileamaidean loidhne air an cuingealachadh gu leud as àirde de 620px.
Air scrionaichean nas fharsainge na 61.25em, tha figearan loidhne cuideachd air an cuingealachadh gu 620px.
Airson earrannan meadhanan le bhideothan lùbte, tha an t-ainm-sgrìobhte air a shuidheachadh os cionn eileamaidean eile, agus tha am putan lùb air a cho-thaobhadh ris an oisean gu h-ìosal air an làimh dheis le àite a bharrachd. Tha na putanan sàmhach is neo-shàmhach air an cur air an làimh dheis le beagan phadadh clì. Tha am putan ainm-sgrìobhte suidhichte os cionn a h-uile càil, agus air scrionaichean nas motha tha e air a shuidheachadh faisg air a’ bhonn.
Airson cinematographs (seòrsa de bhidio lùbte), thèid an crìoch àirde a thoirt air falbh air scrionaichean nas fharsainge na 46.25em.
Anns a’ bhuidheann bodhaig, tha bhideothan fèin-aoigheachd air an taisbeanadh mar bhlocaichean le leud as àirde 620px agus iomall 12px. Tha am bhidio agus am figear lùb aige a’ gabhail làn leud, le àirde a’ bhidio ag atharrachadh gu fèin-ghluasadach.
Nuair a tha bhidio air a shuidheachadh gu modh bogaidh, bidh e a’ leudachadh gus an àite a tha ri fhaighinn a lìonadh, a’ toirt air falbh a’ chrìoch leud agus na h-iomaill. Air scrionaichean fìor fharsaing (os cionn 71.25em), tha soitheach a’ bhidio 1140px de leud agus air a ghluasad gu clì le 180px, leis an ainm-sgrìobhte air a tharraing a-steach. Air scrionaichean eadhon nas fharsainge (os cionn 81.25em), bidh e 1300px de leud agus a’ gluasad gu clì le 260px.
Tha an dealbhadh a’ cleachdadh dathan sònraichte: liath airson cinn-latha, liath aotrom airson crìochan, liath nas aotroime airson ainmean-sgrìobhte, agus cùl-raon dorcha leth-fhollaiseach airson teacsa ainm-sgrìobhte. Is e prìomh dhath a’ chuspair dearg dorcha, a dh’fhaodar a thar-sgrìobhadh le dath colbh gnàthaichte.
Bidh fo-cheann-sgrìobhaidhean, luachan tarraing, agus luachan bloca a’ cleachdadh dath colbh àrd-sgoile, a dh’fhaodar atharrachadh ann am modh dorcha.
Chan eil padadh sam bith aig eileamaidean freumhaichte. Nuair a nochdas eileamaid freumhaichte dìreach às dèidh eileamaid eile no riaghailt chòmhnard, chan fhaigh am paragraf a leanas iomall mullach a bharrachd, a’ dèanamh cinnteach à astar cunbhalach. Tha seo a’ buntainn thar diofar earrannan susbaint agus cruthan eadar-ghnìomhach.

Seo liosta de luchd-taghaidh CSS a tha ag amas air paragrafan sònraichte ann an cruth duilleag-lìn. Bidh e a’ cur padadh mullach de 14 piogsail air paragrafan a thig dìreach às dèidh eileamaidean sònraichte leithid “element-atom”, “sign-in-gate”, no riaghailtean còmhnard (ach chan e am fear mu dheireadh). Tha na luchd-taghaidh a’ còmhdach diofar earrannan den duilleag, leithid a’ phrìomh shusbaint, buidheann bheachdan, agus buidheann fheartan.

Tha an dàrna pàirt den CSS a’ cleachdadh an eileamaid pseudo `:first-letter` gus a’ chiad litir de na paragrafan sin a stoidhleachadh, coltach ri buaidh drop cap. Bidh e a’ cur an stoidhle seo an sàs thar diofar shoithichean leithid a’ phrìomh cholbh, buidheann an artaigil, agus earrannan susbaint eadar-ghnìomhach.

---

Seo an teacsa ath-sgrìobhte ann am Beurla shiùbhlach, nàdarra:

---

Tha riaghailtean CSS a’ cur stoidhle drop cap air a’ chiad litir den chiad pharagraf às dèidh eileamaidean sònraichte, leithid riaghailtean còmhnard no soithichean sanasachd, taobh a-staigh raointean susbaint sònraichte. Tha an drop cap a’ cleachdadh clò Guardian Headline, tha e trom, mòr (111px), agus bidh e a’ seòladh gu clì le teacsa ann an litrichean mòra. Tha iomall air air an làimh dheis, bidh e a’ co-thaobhadh gu dìreach ris a’ mhullach, agus a’ cleachdadh caochladair dath gnàthaichte.

Airson susbaint eadar-ghnìomhach agus earrannan eile, chan eil padadh mullach sam bith air paragrafan a leanas riaghailtean còmhnard.

Tha luachan tarraing taobh a-staigh nan raointean susbaint sin air an cuingealachadh gu leud as Ă irde de 620px.

Tha ainmean-sgrìobhte ìomhaighean airson eileamaidean taisbeanaidh air an suidheachadh gu statach agus a’ gabhail làn leud, suas gu 620px. Air scrionaichean nas fharsainge (os cionn 71.25em), bidh iad air an suidheachadh gu h-iomlan le leud as àirde de 140px, agus air scrionaichean eadhon nas fharsainge (os cionn 81.25em), bidh an leud as àirde a’ dol suas gu 220px.

Bidh eileamaidean bogaidh a’ spangnadh làn leud an fhradhairc, a’ toirt cunntas air leud bàr-sgrolaidh. Air scrionaichean nas lugha, tha leud as àirde de 978px aca, agus tha padadh còmhnard air ainmean-sgrìobhte. Air scrionaichean meadhanach, is e 738px an leud as àirde. Air scrionaichean fìor bheaga, tha an eileamaid air a ghluasad gu clì le iomaill àicheil, agus gheibh ainmean-sgrìobhte padadh a bharrachd.

Airson figearan taisbeanaidh ann an susbaint na buidhne, tha iomaill clì àicheil air scrionaichean nas motha gus an co-thaobhadh gu ceart.

Tha an còmhdach àirneis air a shuidheachadh gu càirdeach, agus air scrionaichean nas fharsainge na 61.25em, tha stoidhle a bharrachd a’ buntainn (ged a tha an riaghailt neo-choileanta).

.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%;
}
}

height: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

Chan urrainn dhomh an teacsa seo ath-sgrìobhadh oir tha e coltach ri còd CSS, chan e rosg cànain nàdarra. Am b’ urrainn dhut earrann de Bheurla sgrìobhte a thoirt seachad a bu mhath leat ath-sgrìobhadh?

Seo an teacsa ath-sgrìobhte ann am Beurla shiùbhlach, nàdarra:

Seo seata de riaghailtean font-face airson an teaghlaich chlàran “Guardian Headline Full”. Tha gach riaghailt a’ mìneachadh stoidhle no cuideam eadar-dhealaichte den chlàr, a’ cleachdadh fhaidhlichean air an cumail air làrach-lìn The Guardian. Tha na cruthan a’ gabhail a-steach WOFF2, WOFF, agus TTF airson co-chòrdalachd thar bhrowsaran. Tha na cuideaman a’ dol bho àbhaisteach (400) gu dubh (900), leis an dà chuid stoidhlichean àbhaisteach is eadailteach rim faighinn.

Tha an teacsa seo coltach ri còd CSS, chan e cànan nàdarra. Tha e a’ mìneachadh stoidhlichean clò agus riaghailtean cruth airson làrach-lìn, coltaich ri làrach The Guardian. Leis gur e còd teignigeach a th’ ann, chan eil e iomchaidh ath-sgrìobhadh gu “Beurla shiùbhlach, nàdarra” – tha e air a dhealbhadh airson browsaran a leughadh, chan e daoine. Ma thogras tu, faodaidh mi mìneachadh ann am Beurla shìmplidh dè a tha an còd seo a’ dèanamh.

Airson innealan iOS agus Android, tha na bileagan taobh a-staigh còmhdach àirneis an t-soithich artaigil air an stoidhleachadh le teacsa trom, a’ cleachdadh teaghlach chlàran Guardian headline, agus air an dathadh a rèir dath a’ cholbh, le teacsa ann an litrichean mòra.

Air gach cuid iOS agus Android, tha am prìomh cheann-sgrìobhte anns a’ chòmhdach àirneis air a shuidheachadh gu 32 piogsail, trom, le 12 piogsail de phadadh gu h-ìosal, agus tha e dorcha (cha mhòr dubh) ann an dath.

Airson ìomhaighean anns a’ chòmhdach àirneis air gach àrd-ùrlar, tha iad air an suidheachadh gu càirdeach, le iomall de 14 piogsail air a’ mhullach agus iomall clì beag àicheil, agus bidh iad a’ sìneadh gu làn leud na sgrìn (a’ toirt cunntas air bàr-sgrolaidh sam bith). Tha cùl-raon follaiseach aig na h-ìomhaighean fhèin, còmhla ris na ceanglaichean agus na soithichean a-staigh aca, agus bidh iad a’ cumail an àirde nàdarra.

Tha an standfirst (teacsa tòiseachaidh) anns a’ chòmhdach àirneis air gach àrd-ùrlar le beagan phadadh aig a’ mhullach agus a’ bhonn, agus iomall deas beag àicheil gus co-thaobhadh ceart ris an oir sgrìn.

.ment-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.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;
}

body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #feature-article-container .furniture-wrapper .standfirst__inner a:hover,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner a:hover,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #feature-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #standard-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #standard-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #comment-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #comment-article-container .furniture-wrapper .standfirst__inner a:hover {
text-decoration-color: var(--new-pillar-colour);
}

body.ios #feature-article-container .furniture-wrapper .meta,
body.ios #standard-article-container .furniture-wrapper .meta,
body.ios #comment-article-container .furniture-wrapper .meta,
body.android #feature-article-container .furniture-wrapper .meta,
body.android #standard-article-container .furniture-wrapper .meta,
body.android #comment-article-container .furniture-wrapper .meta {
margin: 0;
}

body.