Seo eadar-theangachadh na teacsa gu Gàidhlig na h-Alba:
---
'S e bloca còd CSS a tha seo a tha a' mìneachadh teaghlach cruth-clò air a bheil "Guardian Headline Full" le iomadh cuideam is stoidhle cruth-clò. Tha e a' gabhail a-steach:
- Aotrom (cuideam 300) ann an stoidhlichean àbhaisteach is eadailteach
- Cunbhalach (cuideam 400) ann an stoidhlichean àbhaisteach is eadailteach
- Meadhanach (cuideam 500) ann an stoidhlichean àbhaisteach is eadailteach
- Semitrom (cuideam 600) ann an stoidhlichean àbhaisteach is eadailteach
Tha gach aghaidh cruth-clò air a luchdachadh bho fhrithealaiche maoin an Guardian, le faidhlichean ann an cruthan WOFF2, WOFF, agus TTF airson co-chòrdalachd thar bhrobhsairean eadar-dhealaichte.
'S e liosta de fhaidhlichean cruth-clò a tha seo a chleachdas làrach-lìn an Guardian. Tha e a' gabhail a-steach diofar stoidhlichean is cuideaman de na cruthan-clò "Guardian Headline" agus "Guardian Titlepiece", leithid troma, eadailteach, dubh, aotrom, agus cunbhalach. Tha gach cruth-clò air a thoirt seachad ann an iomadh cruth (WOFF2, WOFF, agus TTF) gus dèanamh cinnteach à co-chòrdalachd thar bhrobhsairean is innealan eadar-dhealaichte.
'S e bloca còd CSS a tha seo a tha a' mìneachadh teaghlach cruth-clò "Guardian Headline Full" le diofar chuideaman is stoidhlichean. Tha e a' gabhail a-steach iomadh riaghailt @font-face, gach fear a' sònrachadh faidhlichean stòr a' chruth-clò ann an diofar chruthan (woff2, woff, agus truetype) agus na feartan cuideam-cruth-clò is stoidhle-cruth-clò co-fhreagarrach. Tha na cuideaman a' dol bho 400 (cunbhalach) gu 900 (dubh), le gach cuid stoidhlichean àbhaisteach is eadailteach rim faighinn airson gach cuideam.
'S e bloca còd CSS a tha seo, chan e teacsa a dh'fheumar ath-sgrìobhadh ann am Beurla nàdarra. Tha e a' mìneachadh stoidhlichean cruth-clò agus riaghailtean cruth airson duilleag-lìn. Nam b' fheàrr leat, faodaidh mi mìneachadh ann am Beurla shìmplidh dè a tha e a' dèanamh.
Airson a' chruth lìn eadar-ghnìomhach, bu chòir gum biodh padding de 4px air a' mhullach agus 0 air a' bhonn aig an fho-thiotal taobh a-staigh eileamaidean fhigearach bogaidh. Tha seo a' buntainn ri diofar earrannan leithid bodhaig an artaigil, bodhaig a' bheachd, agus bodhaig nam feart.
Anns a' ghriod eadar-ghnìomhach, bu chòir na h-earrannan loidhnichean is meta a chur ann an raon a' ghriod a' sìneadh bho shreath 2, colbh 1 gu sreath 5, colbh 2. Bu chòir gum biodh àirde aig an earrann loidhnichean a fhreagras air a shusbaint, le iomall-mullach de 5px. Bu chòir gum biodh iomall-mullach de 18px aig an earrann meta.
Airson scrionaichean nas fharsainge na 81.25em (1300px), bu chòir don ghriod eadar-ghnìomhach colbhan de 219px, 1px, 620px, 80px, agus 300px a chleachdadh.
Air innealan iOS agus Android, bu chòir don teacsa seasamh-aodaich ann an ceann an artaigil teaghlach cruth-clò Guardian Headline a chleachdadh le cuideam meadhanach. Bu chòir earrann kicker an artaigil a thaisbeanadh mar bhloca, leis a' chiad litir air a calpachadh. Bu chòir gum biodh padding-mullach a bharrachd de 12px aig an eileamaid keyline-4. Bu chòir ainm an ùghdair a chleachdadh cruth-clò Guardian Headline le cuideam troma, agus bu chòir ceanglaichean sam bith na bhroinn a bhith troma cuideachd. Bu chòir gum biodh àirde fèin-ghluasadach aig ìomhaighean taobh a-staigh eileamaidean figear. Ma tha figear air a leantainn le paragraf, cha bu chòir iomall-mullach sam bith a bhith air a' pharagraf sin.
Tha an cruth-clò Guardian Headline Full air a mhìneachadh le diofar chuideaman is stoidhlichean, a' gabhail a-steach aotrom agus aotrom eadailteach, a' cleachdadh diofar chruthan faidhle cruth-clò.
Chan urrainn dhomh an teacsa seo ath-sgrìobhadh oir chan eil e sgrìobhte ann an cànan nàdarra—'s e còd CSS a th' ann airson cruthan-clò lìn a mhìneachadh. Ma tha teacsa eadar-dhealaichte agad a bu mhath leat ath-sgrìobhadh, feuch an roinn thu e, agus bidh mi toilichte do chuideachadh.
Seo an teacsa ath-sgrìobhte ann am Beurla fhileanta, nàdarra:
```css
@font-face {
font-family: 'Guardian Headline Full';
src: url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2') format('woff2'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff') format('woff'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Guardian Headline Full';
src: url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2') format('woff2'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff') format('woff'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'Guardian Titlepiece';
src: url('https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2') format('woff2'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff') format('woff'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@media (min-width: 71.25em) {
.content__main-column--interactive {
margin-left: 160px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive {
margin-left: 240px;
}
}
.content__main-column--interactive .element-atom {
max-width: 620px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-atom {
max-width: 100%;
}
}
.content__main-column--interactive .element-showcase {
margin-left: 0;
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-showcase {
max-width: 620px;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-showcase {
max-width: 860px;
}
}
.content__main-column--interactive .element-immersive {
max-width: 1100px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-immersive {
width: calc(100vw - var(--scrollbar-width, 0px));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
}
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(-20px);
width: calc(100% + 60px);
}
}
@media (max-width: 71.24em) {
.content__main-column--interactive .element-immersive {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(0);
width: auto;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive .element-immersive {
max-width: 1260px;
}
}
.content__main-column--interactive p,
.content__main-column--interactive ul {
max-width: 620px;
}
.content__main-column--interactive:before {
position: absolute;
top: 0;
height: calc(100% + 15px);
min-height: 100px;
content: "";
}
@media (min-width: 71.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
left: -11px;
}
}
.content__main-column--interactive .element-atom {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 12px;
padding-top: 12px;
}
.content__main-column--interactive p + .element-atom {
padding-top: 0;
padding-bottom: 0;
margin-top: 12px;
margin-bottom: 12px;
}
.content__main-column--interactive .element-inline {
max-width: 620px;
}
@media (min-width: 61.25em) {
figure[data-spacefinder-role="inline"].element {
max-width: 620px;
}
}
[data-gu-name="media"]:has(figure.loop) figure.loop figcaption:not(.hidden) {
z-index: 6;
}
[data-gu-name="media"]:has(figure.loop) figure.loop button[data-link-name*="gu-video-loop"] {
align-self: flex-end;
margin-bottom: 40px;
margin-right: 3px;
}
[data-gu-name="media"]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid="unmute-icon"]),
[data-gu-name="media"]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid="mute-icon"]) {
/ Tha an teacsa tùsail a' gearradh dheth an seo, agus mar sin tha mi air an structar a ghleidheadh mar a tha e. /
}
```
Innis dhomh ma bu mhath leat rud sam bith eile atharrachadh.
