Tha thu ann an cogadh nuair a thèid ionnsaigh a thoirt ort": Tha Mark Carney a' sealltainn a thaobh cogaiseach anns a' chòmhstri le Trump.
Seo bloca còd CSS a tha a’ mìneachadh teaghlach cruth-clò air a bheil “Guardian Headline Full” le iomadh cuideam agus stoidhle cruth-clò. Tha e a’ gabhail a-steach:
- Aotrom (cuideam 300) ann an stoidhlichean àbhaisteach agus eadailteach
- Cunbhalach (cuideam 400) ann an stoidhlichean àbhaisteach agus eadailteach
- Meadhanach (cuideam 500) ann an stoidhlichean àbhaisteach agus eadailteach
- Semibold (cuideam 600) ann an stoidhlichean àbhaisteach agus 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. Seo liosta de fhaidhlichean cruth-clò a chleachdas làrach-lìn an Guardian. Tha e a’ gabhail a-steach diofar stoidhlichean agus cuideaman de na cruthan-clò “Guardian Headline” agus “Guardian Titlepiece”, leithid dàna, 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 agus innealan eadar-dhealaichte. Seo duilleag-stoidhle CSS a tha a’ mìneachadh teaghlach cruth-clò “Guardian Headline Full”. Tha e a’ gabhail a-steach iomadh faidhle cruth-clò airson diofar chuideaman agus stoidhlichean, leithid cunbhalach, eadailteach, meadhanach, semibold, dàna, agus dubh. Tha gach aghaidh cruth-clò air a luchdachadh bho fhrithealaiche maoin an Guardian, le cruthan mar WOFF2, WOFF, agus TTF airson co-chòrdalachd. Tha na stoidhlichean a’ sònrachadh cuideam agus stoidhle a’ chruth-clò airson gach caochladh, a’ dèanamh cinnteach gun cleachdar an cruth-clò ceart thar diofar eileamaidean teacsa. Seo bloca còd CSS, 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, is urrainn dhomh mìneachadh dè a nì e ann am Beurla shìmplidh an àite sin. Airson an cliath-grèid eadar-ghnìomhach, bu chòir gum biodh padding de 4 piogsail air a’ cheann-sgrìobhadh taobh a-staigh eileamaidean bogaidh is gum biodh 0 air a’ bhonn. Tha seo a’ buntainn ri diofar earrannan mar bodhaig an artaigil, susbaint eadar-ghnìomhach, bodhaig bheachdan, agus bodhaig fheartan. Taobh a-staigh a’ chliath-grèid eadar-ghnìomhach, bu chòir na h-earrannan loidhnichean agus meta a chur ann an raon a’ chliath-grèid a’ dol bho rèir 2, colbh 1 gu rèir 5, colbh 2. Bu chòir gum biodh àirde aig an earrann loidhnichean a fhreagras air an t-susbaint aice, le iomall àrd de 5 piogsail. Bu chòir gum biodh iomall àrd de 18 piogsail aig an earrann meta. Airson scrionaichean nas fharsainge na 81.25em (1300 piogsail), bu chòir don chliath-grèid eadar-ghnìomhach colbhan de 219 piogsail, 1 piogsail, 620 piogsail, 80 piogsail, agus 300 piogsail a chleachdadh. Air innealan iOS agus Android, bu chòir don teacsa seasamh-an-toiseach ann an ceann an artaigil cruth-clò Guardian Headline a chleachdadh le cuideam meadhanach. Bu chòir earrann kicker an artaigil a thaisbeanadh mar bhloca, le ciad litir air a phrìomh-litreachadh. Bu chòir gum biodh padding àrd a bharrachd de 12 piogsail aig an eileamaid keyline-4. Bu chòir ainm ùghdar a’ bhith a’ cleachdadh cruth-clò Guardian Headline le cuideam dàna, agus bu chòir ceanglaichean sam bith na bhroinn a bhith dàna cuideachd. Bu chòir gum biodh àirde nan ìomhaighean taobh a-staigh eileamaidean figear air an suidheachadh gu fèin-ghluasadach. Cha bu chòir gum biodh iomall àrd aig paragrafan a leanas atom eileamaid. Tha cruth-clò Guardian Headline Full air a mhìneachadh le diofar chuideaman agus stoidhlichean, a’ gabhail a-steach aotrom agus aotrom eadailteach, a’ cleachdadh diofar chruthan faidhle cruth-clò mar woff2, woff, agus truetype. Chan urrainn dhomh an teacsa seo ath-sgrìobhadh oir chan eil e sgrìobhte ann an cànan nàdarra ach tha e air a dhèanamh suas de chòd CSS airson cruthan-clò lìn a mhìneachadh. Tha riaghailtean cruth teignigeach agus URLan airson faidhlichean cruth-clò ann, nach eil an dùil a thionndadh gu rosg Beurla fileanta. Ma tha teacsa eadar-dhealaichte agad a bu mhath leat mo chuideachadh leis, thoir seachad e, agus bidh mi toilichte do chuideachadh. Seo an teacsa air ath-sgrìobhadh ann am Beurla nàdarra fileanta:
```
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;
}
@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, mar sin chùm mi e mar a tha e. /
}
```.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;
}
#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 hr:not(.last-horizontal-rule)+p,
.content--interactive>div .element-atom:first-of-type+p:first-of-type,
.content--interactive>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
.content--interactive>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
.content--interactive>div hr:not(.last-horizontal-rule)+p,
#comment-body .element-atom:first-of-type+p:first-of-type,
#comment-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#comment-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#comment-body hr:not(.last-horizontal-rule)+p,
[data-gu-name=body] .element-atom:first-of-type+p:first-of-type,
[data-gu-name=body] .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
[data-gu-name=body] .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
[data-gu-name=body] hr:not(.last-horizontal-rule)+p,
#feature-body .element-atom:first-of-type+p:first-of-type,
#feature-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#feature-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#feature-body hr:not(.last-horizontal-rule)+p {
padding-top: 14px;
}
#article-body>div .element-atom:first-of-type+p:first-of-type:first-letter,
#article-body>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#article-body>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#article-body>div hr:not(.last-horizontal-rule)+p:first-letter,
.content--interactive>div .element-atom:first-of-type+p:first-of-type:first-letter,
.content--interactive>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
.content--interactive>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
.content--interactive>div hr:not(.last-horizontal-rule)+p:first-letter,
#comment-body .element-atom:first-of-type+p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#comment-body hr:not(.last-horizontal-rule)+p:first-letter,
[data-gu-name=body] .element-atom:first-of-type+p:first-of-type:first-letter,
[data-gu-name=body] .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
[data-gu-name=body] .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
[data-gu-name=body] hr:not(.last-horizontal-rule)+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 hr:not(.last-horizontal-rule)+p:first-letter {
/ Chan eil stoidhle sònraichte air a mhìneachadh an seo, ach tha an taghadair air a chumail airson stoidhle a dh’fhaodadh a bhith ann /
}Seo bloca còd CSS, chan e earrann teacsa a dh’fheumar ath-sgrìobhadh ann am Beurla nàdarra. Tha taghadairean agus riaghailtean stoidhle ann airson làrach-lìn, coltach ri duilleagan artaigil an Guardian. Tha an còd a’ mìneachadh clò-sgrìobhaidh airson litrichean mòra tòiseachaidh, atharrachaidhean cruth airson figearan agus ceann-sgrìobhaidhean, agus riaghailtean dealbhaidh freagairteach airson diofar mheudan scrion.
Ma bha thu a’ ciallachadh iarraidh air mìneachadh no geàrr-chunntas air na tha an CSS seo a’ dèanamh, seo briseadh-sìos ann am Beurla shìmplidh:
- Stoidhle litir mhòir tòiseachaidh: Tha ciad litir a’ chiad pharagraf às deidh eileamaidean sònraichte (mar ataman no riaghailtean còmhnard) air a stoidhleachadh mar litir mhòr, throm, àrd-litrichean a bhios a’ seòladh air an taobh chlì, a’ cleachdadh cruth-clò agus dath sònraichte.
- Farsaingeachd paragraf: Chan eil padding àrd aig paragrafan a leanas riaghailtean còmhnard.
- Leud tarraing-a-mach: Tha tarraing-a-mach air an cuingealachadh gu leud as àirde de 620 piogsail.
- Ceann-sgrìobhaidhean fhigearan: Airson ìomhaighean taisbeanaidh, tha ceann-sgrìobhaidhean air an suidheachadh gu statach air scrionaichean nas lugha, ach air an suidheachadh gu h-iomlan air scrionaichean nas motha le diofar leudan as àirde (140px aig 71.25em, 220px aig 81.25em).
- Eileamaidean bogaidh: Tha iad sin a’ spangachadh leud slàn an fhras-sgrion, le atharrachaidhean airson diofar àiteachan-brisidh, a’ gabhail a-steach iomaill àicheil air fòn-làimhe gus co-thaobhadh oir-gu-oir a dhèanamh.
- Atharrachaidhean freagairteach: Bidh diofar cheistean meadhanan ag atharrachadh iomaill, padding, agus suidheachadh airson diofar mheudan scrion.
Ma tha feum agad air seòrsa eadar-dhealaichte de ath-sgrìobhadh no mìneachadh, feuch an soilleirich thu!figure.element.element--showcase.element-showcase,
[data-gu-name="body"] .content__main-column--interactive figure.element.element--showcase.element-showcase {
margin-left: -240px !important;
}
@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] 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);
}
.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,
.furnitur.e-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:
