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.