Seo earrann de chòd CSS a tha a’ mìneachadh an teaghlach cruth-clò “Guardian Headline Full” airson a chleachdadh air làrach-lìn. Tha e a’ gabhail a-steach grunn riaghailtean font-face, gach fear a’ sònrachadh cuideam eadar-dhealaichte (aotrom, cunbhalach, meadhanach, semibold) agus stoidhle (àbhaisteach no eadailteach) den chruth-clò. Tha na faidhlichean cruth-clò air an cumail air frithealaiche maoin a’ Guardian, agus tha an còd a’ toirt seachad fòrmatan cùl-taic (WOFF2, WOFF, agus TTF) gus dèanamh cinnteach gu bheil e co-chòrdail ri diofar bhrobhsairean. Tha na cuideaman cruth-clò a’ dol bho 300 (aotrom) gu 600 (semibold), le dreachan eadailteach a’ freagairt air gach cuideam.
Tha an teacsa seo coltach ri còd CSS, chan e rosg cànain nàdarra. Tha e a’ mìneachadh stoidhlichean cruth-clò agus riaghailtean cruth airson duilleag-lìn. Leis gur e còd teignigeach a th’ ann, chan eil ath-sgrìobhadh gu “Beurla nàdarra, fileanta” iomchaidh—tha e mu thràth ann an cruth mionaideach, àbhaisteach. Ach, faodaidh mi geàrr-chunntas ann am Beurla shìmplidh a thoirt seachad air na tha e a’ dèanamh:
Tha an còd a’ stèidheachadh chruthan-clò àbhaisteach airson làrach-lìn, a’ gabhail a-steach diofar chuideaman agus stoidhlichean de chruthan-clò “Guardian Headline” agus “Guardian Titlepiece”, gan luchdadh bho fhaidhlichean sònraichte. Bidh e cuideachd a’ mìneachadh riaghailtean cruth freagairteach airson colbh susbaint, ag atharrachadh iomaill agus leudan a rèir meud na sgrìn. Mar eisimpleir, air sgrìoban nas fharsainge, bidh e a’ cur iomaill chlì ris, agus airson eileamaidean sònraichte leithid susbaint bogaidh no taisbeanaidh, bidh e ag atharrachadh an leud agus an suidheachadh gus a bhith a’ freagairt air an t-sealladh. Bidh na riaghailtean a’ dèanamh cinnteach gu bheil teacsa agus eileamaidean freumhaichte a’ fuireach taobh a-staigh leud leughaidh (timcheall air 620 piogsail) air a’ mhòr-chuid de dh’innealan, fhad ‘s a leigeas iad le eileamaidean nas motha leudachadh air sgrìoban nas motha.
.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 { ... }
Bu chòir a’ chiad pharagraf às deidh riaghailt chòmhnard no atom eileamaid àite a bharrachd fhaighinn aig a’ mhullach. Tha seo a’ buntainn ris a’ chiad pharagraf a thig às deidh gin de na h-eileamaidean sin, ge bith an tig e gu dìreach às deidh na h-eileamaid no às deidh soitheach slot sanasachd. Tha an aon riaghailt a’ buntainn ann an diofar earrannan den duilleag, leithid bodhaig an artaigil, susbaint eadar-ghnìomhach, beachdan, agus earrannan feart.
A bharrachd air an sin, bu chòir a’ chiad litir den chiad pharagraf sin a bhith air a stoidhleachadh ann an dòigh shònraichte. Tha an stoidhle seo air a chur an sàs anns a’ chiad litir den pharagraf a thig às deidh riaghailt chòmhnard no atom eileamaid, ge bith an e gu dìreach às deidh na h-eileamaid no às deidh soitheach slot sanasachd a th’ ann. Tha seo a’ buntainn thar nan aon earrannan uile a chaidh ainmeachadh gu h-àrd.
[data-gu-name=body] .element-atom:first-of-type+.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,
#feature-body .element-atom:first-of-type+p:first-of-type:first-letter,
#feature-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#feature-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#feature-body .element-atom:first-of-type+.element-atom+p:first-of-type:first-letter,
#feature-body hr:not(.last-horizontal-rule)+p:first-letter,
#feature-body hr:not(.last-horizontal-rule)+.ad-slot-container+p:first-letter {
font-family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif;
font-weight: 700;
font-size: 111px;
line-height: 92px;
float: left;
text-transform: uppercase;
box-sizing: border-box;
margin-right: 8px;
vertical-align: text-top;
color: var(--drop-cap, var(--new-pillar-colour));
}
.content__main-column--interactive hr+p,
.content__main-column--interactive hr+.ad-slot-container+p,
#article-body>div hr+p,
#article-body>div hr+.ad-slot-container+p,
.content--interactive>div hr+p,
.content--interactive>div hr+.ad-slot-container+p,
#comment-body hr+p,
#comment-body hr+.ad-slot-container+p,
[data-gu-name=body] hr+p,
[data-gu-name=body] hr+.ad-slot-container+p,
#feature-body hr+p,
#feature-body hr+.ad-slot-container+p {
padding-top: 0;
}
.content__main-column--interactive [data-gu-name=pullquote],
#article-body>div [data-gu-name=pullquote],
.content--interactive>div [data-gu-name=pullquote],
#comment-body [data-gu-name=pullquote],
[data-gu-name=body] [data-gu-name=pullquote],
#feature-body [data-gu-name=pullquote] {
max-width: 620px;
}
#maincontent figure.element.element--showcase.element-showcase figcaption,
#feature-article-container figure.element.element--showcase.element-showcase figcaption,
#standard-article-container figure.element.element--showcase.element-showcase figcaption,
#comment-article-container figure.element.element--showcase.element-showcase figcaption {
position: static !important;
width: 100%;
max-width: 620px;
}
@media (min-width: 71.25em) {
#maincontent figure.element.element--showcase.element-showcase figcaption,
#feature-article-container figure.element.element--showcase.element-showcase figcaption,
#standard-article-container figure.element.element--showcase.element-showcase figcaption,
#comment-article-container figure.element.element--showcase.element-showcase figcaption {
position: absolute !important;
max-width: 140px;
}
}
@media (min-width: 81.25em) {
#maincontent figure.element.element--showcase.element-showcase figcaption,
#feature-article-container figure.element.element--showcase.element-showcase figcaption,
#standard-article-container figure.element.element--showcase.element-showcase figcaption,
#comment-article-container figure.element.element--showcase.element-showcase figcaption {
max-width: 220px;
}
}
.element.element--immersive.element-immersive {
width: calc(100vw - var(--scrollbar-width, 0px));
}
@media (max-width: 71.24em) {
.element.element--immersive.element-immersive {
max-width: 978px;
}
.element.element--immersive.element-immersive figcaption {
padding-inline: 10px;
}
}
@media (max-width: 71.24em) and (min-width: 30em) {
.element.element--immersive.element-immersive figcaption {
padding-inline: 20px;
}
}
@media (min-width: 46.25em) and (max-width: 61.24em) {
.element.element--immersive.element-immersive {
max-width: 738px;
}
}
@media (max-width: 46.24em) {
.element.element--immersive.element-immersive {
margin-left: -10px !important;
margin-right: 0 !important;
left: 0;
}
}
@media (max-width: 46.24em) and (min-width: 30em) {
.element.element--immersive.element-immersive {
margin-left: -20px !important;
}
.element.element--immersive.element-immersive figcaption {
padding-inline: 20px;
}
}
@media (min-width: 71.25em) {
[data-gu-name=body] figure.element.element--showcase.element-showcase,
[data-gu-name=body] .content__main-column--interactive figure.element.element--showcase.element-showcase {
margin-left: -160px !important;
}
}
@media (min-width: 81.25em) {
[data-gu-name=body] figure.element.element--showcase.element-showcase,
[data-gu-n[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 {
/ Chan eil stoidhlichean a bharrachd air an sònrachadh /
}
}
Seo an teacsa ath-sgrìobhte ann am Beurla fileanta, nàdarra:
Tha stoidhlichean a’ phasgan àirneis ag atharrachadh cruth agus coltas cinn artaigil, standfirsts, agus eileamaidean meadhanan. Tha earrann an standfirst le beagan atharrachadh clì agus padding, le crìoch mhìn air an taobh chlì. Air sgrìoban nas motha, gheibh e beagan padding a bharrachd aig a’ mhullach.
Tha cinn làidir, le leud as àirde de 620 piogsail agus meud cruth-clò de 32 piogsail. Air sgrìoban fìor fharsaing, bidh an leud a’ caolachadh gu 540 piogsail agus am meud cruth-clò ag àrdachadh gu 50 piogsail.
Tha loidhnichean sgeadachaidh (keyline-4) air am falach air sgrìoban meadhanach agus mòra, ach nuair a tha iad rim faicinn, bidh iad a’ cleachdadh dath stròc air a mhìneachadh le caochladair CSS.
Tha earrann a’ mheata (a’ gabhail a-steach roinneadh sòisealta agus beachdan) gun iomall deas air sgrìoban meadhanach. Tha a crìochan a’ freagairt air dath crìoch a’ chinn. Tha cuid de eileamaidean eadar-ghnìomhach taobh a-staigh earrann a’ mheata air am falach.
Tha prìomh raon nam meadhanan air a shuidheachadh an coimeas ris a’ ghobhar aige, gun iomall mullach agus iomall beag aig a’ bhonn. Air innealan gluasadach, bidh e a’ leudachadh gu làn leud an t-seallaidh le iomall clì àicheil gus co-thaobhadh ceart a dhèanamh. Air sgrìoban nas motha, tha an t-iomall aig a’ bhonn air a thoirt air falbh.
Tha fo-sgrìobhaidhean ìomhaighean air an cur thairis aig bonn nam meadhanan, le cùl-raon leth-fhollaiseach agus dath teacsa. Tha àirde as lugha aca agus a’ gabhail a-steach ìomhaigh bheag. Tha a’ chiad ìomhaigh air fhalach, fhad ‘s a tha an dàrna fear air a shealltainn le leud as àirde. Tha putan fo-sgrìobhaidh a’ nochdadh mar phutan cruinn anns an oisean, a’ leigeil le luchd-cleachdaidh faicsinneachd an fho-sgrìobhaidh atharrachadh.
Ann am modh dorcha, tha cuid de dhathan teacsa agus cheanglaichean air an atharrachadh airson coimeas nas fheàrr, a’ cleachdadh chaochladairean CSS sònraichte.
Mu dheireadh, air sgrìoban fìor fharsaing, tha crìoch beagan nas fhaide aig prìomh cholbh na susbaint aig a’ mhullach agus aig a’ bhonn. Tha cinn taobh a-staigh a’ cholbh seo air an cuingealachadh gu leud as àirde de 620 piogsail.
Tha mi duilich, ach chan urrainn dhomh cuideachadh le bhith ag ath-sgrìobhadh an teacsa seo oir tha e coltach ri còd CSS, chan e rosg cànain nàdarra. Am b’ urrainn dhut an teacsa a bu mhath leat ath-sgrìobhadh ann am Beurla fileanta, nàdarra a thoirt dhomh?
irst 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 {
border-top: 1px solid var(--headerBorderColor);
}
}
@media (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;
}
}
.furniture-wrapper .standfirst ul li,
.furniture-wrapper #standfirst ul li,
.furniture-wrapper [data-gu-name="standfirst"] ul li {
color: #dcdcdc;
}
@media (min-width: 71.25em) {
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name="standfirst"]:before {
background-color: var(--headerBorderColor);
}
}
@media (min-width: 46.25em) {
.furniture-wrapper:before {
content: "";
height: 100%;
top: 0;
position: absolute;
background-color: var(--darkBackground);
border-right: 1px solid var(--headerBorderColor);
left: calc((100vw - var(--scrollbar-width, 0px) - 738px) / -2);
width: calc((100vw - var(--scrollbar-width, 0px) - 738px) / 2);
}
.furniture-wrapper:after {
content: "";
height: 100%;
top: 0;
position: absolute;
background-color: var(--darkBackground);
border-left: 1px solid var(--headerBorderColor);
right: calc((100vw - var(--scrollbar-width, 0px) - 738px) / -2);
width: calc((100vw - var(--scrollbar-width, 0px) - 738px) / 2);
}
}
@media (min-width: 61.25em) {
.furniture-wrapper:before {
content: "";
width: calc((100vw - var(--scrollbar-width, 0px) - 978px) / 2);
left: calc((100vw - var(--scrollbar-width, 0px) - 978px) / -2);
}
.furniture-wrapper:after {
content: "";
width: calc((100vw - var(--scrollbar-width, 0px) - 978px) / 2);
right: calc((100vw - var(--scrollbar-width, 0px) - 978px) / -2);
}
}
@media (min-width: 71.25em) {
.furniture-wrapper:before {
content: "";
width: calc((100vw - var(--scrollbar-width, 0px) - 1138px) / 2);
left: calc((100vw - var(--scrollbar-width, 0px) - 1138px) / -2);
}
.furniture-wrapper:after {
content: "";
width: calc((100vw - var(--scrollbar-width, 0px) - 1138px) / 2);
right: calc((100vw - var(--scrollbar-width, 0px) - 1138px) / -2);
}
}
@media (min-width: 81.25em) {
.furniture-wrapper:before {
content: "";
width: calc((100vw - var(--scrollbar-width, 0px) - 1298px) / 2);
left: calc((100vw - var(--scrollbar-width, 0px) - 1298px) / -2);
}
.furniture-wrapper:after {
content: "";
width: calc((100vw - var(--scrollbar-width, 0px) - 1298px) / 2);
right: calc((100vw - var(--scrollbar-width, 0px) - 1298px) / -2);
}
}
.furniture-wrapper .keyline-4 svg,
.furniture-wrapper [data-gu-name="lines"] svg {
stroke: var(--headerBorderColor);
}
.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(--headerBorderColor);
}
.article .article__body h2,
article.content--interactive [data-gu-name="body"] h2 {
font-weight: 200;
}
.article .article__body h2:has(strong),
article.content--interactive [data-gu-name="body"] h2:has(strong) {
font-weight: 700;
}
div[data-print-layout="hide"] ul {
background-image: none;
}
:root[data-rendering-target="apps"] {
--follow-text: #dcdcdc;
--follow-icon-fill: var(--new-pillar-colour);
--standfirst-text: #dcdcdc;
--standfirst-link-text: var(--new-pillar-colour);
--standfirst-link-border: var(--new-pillar-colour);
--byline: var(--new-pillar-colour);
--article-meta-lines: var(--headerBorderColor);
--byline: var(--darkmode-pillar);
}
:root[data-rendering-target="apps"] .byline > span {
color: var(--new-pillar-colour);
}
:root[data-rendering-target="apps"] .byline > span > div:has(+[name="FollowWapper"]) {
background-image: var(--headerBorderColor), var(--headerBorderColor) 1px, transparent 1px;
}
@media (prefers-color-scheme
Shiubhail mi gu Oslo tràth san fhoghar, agus bha e a’ faireachdainn mar gum bithinn a’ ceumadh a-steach don àm ri teachd—no co-dhiù sealladh air aon àm ri teachd a dh’fhaodadh a bhith ann. Dhràibh mi gu tuath ann am builgean didseatach sàmhach mo chàr màil dealain. Ann an 2024, thàinig Nirribhidh gu bhith mar a’ chiad dùthaich san t-saoghal far an robh càraichean dealain nas àirde na càraichean peatrail.
Bha mòr-rathad rèidh, glan a’ sìneadh eadar tuathanasan agus cnuic ìosal còmhdaichte le coille uaine thiugh. Bha tunailean fada a’ giùlan an t-slighe suas os cionn bruachan Loch Mjøsa, an loch as motha ann an Nirribhidh. Às deidh beagan a bharrachd air uair a thìde, chrom an rathad sìos agus ruith e co-shìnte ri bruach an locha.
Tro bheàrnan ann an sreath de chraobhan beithe òir, bhris structar àrd, caol an fhàire. Dh’èirich e bho oir an uisge, le crùn triantanach de ghiùlanan lom, eadar-cheangailte air a mhullach. An aghaidh nan speuran glasa troma agus a’ cheò mun cuairt, bha an taobh a-muigh orains loisgte b
