ããã¯CSSã³ãŒããããã¯ã§ããGuardian Headline Fullããšãããã©ã³ããã¡ããªãŒãå®çŸ©ããŠãããè€æ°ã®ãã©ã³ããŠã§ã€ããšã¹ã¿ã€ã«ãå«ãŸããŠããŸããå
·äœçã«ã¯ä»¥äžã®éãã§ãïŒ
- ã©ã€ãïŒãŠã§ã€ã300ïŒã®ããŒãã«ããã³ã€ã¿ãªãã¯ã¹ã¿ã€ã«
- ã¬ã®ã¥ã©ãŒïŒãŠã§ã€ã400ïŒã®ããŒãã«ããã³ã€ã¿ãªãã¯ã¹ã¿ã€ã«
- ããã£ã¢ã ïŒãŠã§ã€ã500ïŒã®ããŒãã«ããã³ã€ã¿ãªãã¯ã¹ã¿ã€ã«
- ã»ãããŒã«ãïŒãŠã§ã€ã600ïŒã®ããŒãã«ããã³ã€ã¿ãªãã¯ã¹ã¿ã€ã«
åãã©ã³ããã§ã€ã¹ã¯ã¬ãŒãã£ã¢ã³ã®ã¢ã»ãããµãŒããŒããèªã¿èŸŒãŸãããã¡ã€ã«åœ¢åŒã¯WOFF2ãWOFFãTTFã§ãããŸããŸãªãã©ãŠã¶éã§ã®äºææ§ã確ä¿ããŠããŸããããã¯ã¬ãŒãã£ã¢ã³çŽã®ãŠã§ããµã€ãã§äœ¿çšããããã©ã³ããã¡ã€ã«ã®ãªã¹ãã§ãããGuardian Headlineãããã³ãGuardian Titlepieceããã©ã³ãã®ããŸããŸãªã¹ã¿ã€ã«ãšãŠã§ã€ãïŒããŒã«ããã€ã¿ãªãã¯ããã©ãã¯ãã©ã€ããã¬ã®ã¥ã©ãŒãªã©ïŒãå«ãŸããŠããŸããåãã©ã³ãã¯è€æ°ã®åœ¢åŒïŒWOFF2ãWOFFãTTFïŒã§æäŸãããç°ãªããã©ãŠã¶ãããã€ã¹éã§ã®äºææ§ã確ä¿ããŠããŸããããã¯ãGuardian Headline Fullããã©ã³ããã¡ããªãŒãå®çŸ©ããCSSã¹ã¿ã€ã«ã·ãŒãã§ããã¬ã®ã¥ã©ãŒãã€ã¿ãªãã¯ãããã£ã¢ã ãã»ãããŒã«ããããŒã«ãããã©ãã¯ãªã©ãããŸããŸãªãŠã§ã€ããšã¹ã¿ã€ã«ã®è€æ°ã®ãã©ã³ããã¡ã€ã«ãå«ãŸããŠããŸããåãã©ã³ããã§ã€ã¹ã¯ã¬ãŒãã£ã¢ã³ã®ã¢ã»ãããµãŒããŒããèªã¿èŸŒãŸããWOFF2ãWOFFãTTFãªã©ã®åœ¢åŒã§äºææ§ã確ä¿ããŠããŸããã¹ã¿ã€ã«ã¯åããªã¢ã³ãã®ãã©ã³ããŠã§ã€ããšã¹ã¿ã€ã«ãæå®ããããŸããŸãªããã¹ãèŠçŽ å
šäœã§æ£ããã¿ã€ããã§ã€ã¹ã䜿çšãããããã«ããŠããŸããããã¯CSSã³ãŒãã®ãããã¯ã§ãããèªç¶ãªè±èªã§æžãçŽãããã¹ãã§ã¯ãããŸããããŠã§ãããŒãžã®ãã©ã³ãã¹ã¿ã€ã«ãšã¬ã€ã¢ãŠãã«ãŒã«ãå®çŸ©ããŠããŸããå¿
èŠã§ããã°ã代ããã«å¹³æãªè±èªã§äœããããã®ãã説æã§ããŸããã€ã³ã¿ã©ã¯ãã£ãã°ãªããã¬ã€ã¢ãŠãã§ã¯ãã€ããŒã·ããã£ã®ã¥ã¢èŠçŽ å
ã®ãã£ãã·ã§ã³ã¯ãäžéšã«4ãã¯ã»ã«ãäžéšã«0ãã¯ã»ã«ã®ããã£ã³ã°ãæã€å¿
èŠããããŸããããã¯ãèšäºæ¬æãã€ã³ã¿ã©ã¯ãã£ãã³ã³ãã³ããã³ã¡ã³ãæ¬æããã£ãŒãã£ãŒæ¬æãªã©ãããŸããŸãªã»ã¯ã·ã§ã³ã«é©çšãããŸããã€ã³ã¿ã©ã¯ãã£ãã°ãªããå
ã§ã¯ãã©ã€ã³ã»ã¯ã·ã§ã³ãšã¡ã¿ã»ã¯ã·ã§ã³ã¯ãè¡2ãå1ããè¡5ãå2ãŸã§ã®ã°ãªããé åã«é
眮ããå¿
èŠããããŸããã©ã€ã³ã»ã¯ã·ã§ã³ã®é«ãã¯ã³ã³ãã³ãã«åãããäžéšããŒãžã³ã¯5ãã¯ã»ã«ã«ããå¿
èŠããããŸããã¡ã¿ã»ã¯ã·ã§ã³ã®äžéšããŒãžã³ã¯18ãã¯ã»ã«ã«ããŸãã81.25emïŒ1300ãã¯ã»ã«ïŒããåºãç»é¢ã§ã¯ãã€ã³ã¿ã©ã¯ãã£ãã°ãªããã¯219ãã¯ã»ã«ã1ãã¯ã»ã«ã620ãã¯ã»ã«ã80ãã¯ã»ã«ã300ãã¯ã»ã«ã®åã䜿çšããå¿
èŠããããŸããiOSããã³Androidããã€ã¹ã§ã¯ãèšäºããããŒã®ã¹ã¿ã³ããã¡ãŒã¹ãããã¹ãã¯ãGuardian Headlineãã©ã³ããã¡ããªãŒãããã£ã¢ã ãŠã§ã€ãã§äœ¿çšããå¿
èŠããããŸããèšäºã®ããã«ãŒã»ã¯ã·ã§ã³ã¯ãããã¯ãšããŠè¡šç€ºããæåã®æåã倧æåã«ããå¿
èŠããããŸããkeyline-4èŠçŽ ã«ã¯ãäžéšã«12ãã¯ã»ã«ã®è¿œå ããã£ã³ã°ãå¿
èŠã§ããèè
åã®ãã€ã©ã€ã³ã¯ãGuardian Headlineãã©ã³ããããŒã«ããŠã§ã€ãã§äœ¿çšãããã®äžã®ãªã³ã¯ãããŒã«ãã«ããå¿
èŠããããŸãããã£ã®ã¥ã¢èŠçŽ å
ã®ç»åã¯ãé«ããèªåã«èšå®ããå¿
èŠããããŸããèŠçŽ ã¢ãã ã®åŸã®æ®µèœã«ã¯ãäžéšããŒãžã³ãèšå®ããªãã§ãã ãããGuardian Headline Fullãã©ã³ãã¯ãã©ã€ãããã³ã©ã€ãã€ã¿ãªãã¯ãå«ãããŸããŸãªãŠã§ã€ããšã¹ã¿ã€ã«ã§å®çŸ©ãããŠãããwoff2ãwoffãtruetypeãªã©ã®ããŸããŸãªãã©ã³ããã¡ã€ã«åœ¢åŒã䜿çšããŠããŸãããã®ããã¹ãã¯èªç¶èšèªã§ã¯ãªãããŠã§ããã©ã³ããå®çŸ©ããCSSã³ãŒãã§æ§æãããŠãããããæžãçŽãããšã¯ã§ããŸãããæè¡çãªãã©ãŒãããã«ãŒã«ãšãã©ã³ããã¡ã€ã«ã®URLãå«ãŸããŠãããæµæ¢ãªè±èªã®æ£æã«å€æããããšãæå³ãããã®ã§ã¯ãããŸãããå¥ã®ããã¹ãã§ãµããŒããå¿
èŠãªå Žåã¯ããããæäŸããŠããã ããã°åãã§ãæäŒãããŸãã以äžã¯ãæµæ¢ã§èªç¶ãªè±èªã«æžãçŽããããã¹ãã§ãïŒ
```
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"]) {
/ å
ã®ããã¹ãã¯ããã§éåããŠããããããã®ãŸãŸã«ããŠããŸãã /
}
```.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 {
/ ããã§ã¯ç¹å®ã®ã¹ã¿ã€ã«ã¯å®çŸ©ãããŠããŸããããã»ã¬ã¯ã¿ã¯å°æ¥ã®ã¹ã¿ã€ãªã³ã°ã®ããã«ä¿æãããŠããŸã /
}ããã¯CSSã³ãŒãã®ãããã¯ã§ãããèªç¶ãªè±èªã§æžãçŽãããã¹ãã®äžç¯ã§ã¯ãããŸããããŠã§ããµã€ãïŒããããã¬ãŒãã£ã¢ã³çŽã®èšäºããŒãžïŒã®ã»ã¬ã¯ã¿ãšã¹ã¿ã€ã«ã«ãŒã«ãå«ãŸããŠããŸãããã®ã³ãŒãã¯ããããããã£ããã®ã¿ã€ãã°ã©ãã£ããã£ã®ã¥ã¢ãšãã£ãã·ã§ã³ã®ã¬ã€ã¢ãŠã調æŽãããŸããŸãªç»é¢ãµã€ãºã«å¯Ÿå¿ããã¬ã¹ãã³ã·ããã¶ã€ã³ã«ãŒã«ãå®çŸ©ããŠããŸãã
ãããã®CSSãäœãããã®ãã®èª¬æãèŠçŽãæ±ããŠããã®ã§ããã°ãå¹³æãªè±èªã§ã®å
èš³ã¯æ¬¡ã®ãšããã§ãïŒ
- ãããããã£ããã¹ã¿ã€ã«ïŒç¹å®ã®èŠçŽ ïŒã¢ãã ãæ°Žå¹³ã«ãŒã«ãªã©ïŒã®åŸã®æåã®æ®µèœã®æåã®æåã¯ãç¹å®ã®ãã©ã³ããšè²ã䜿çšããŠãå·Šã«ãããŒããã倧ãããŠããŒã«ãã®å€§æåãšããŠã¹ã¿ã€ã«èšå®ãããŸãã
- 段èœã®ééïŒæ°Žå¹³ã«ãŒã«ã®åŸã®æ®µèœã«ã¯äžéšããã£ã³ã°ããããŸããã
- ãã«ã¯ã©ãŒãã®å¹
ïŒãã«ã¯ã©ãŒãã¯æå€§å¹
620ãã¯ã»ã«ã«å¶éãããŠããŸãã
- ãã£ã®ã¥ã¢ã®ãã£ãã·ã§ã³ïŒã·ã§ãŒã±ãŒã¹ç»åã®å Žåããã£ãã·ã§ã³ã¯å°ããç»é¢ã§ã¯éçã«é
眮ãããŸããã倧ããç»é¢ã§ã¯çµ¶å¯Ÿé
眮ãããæå€§å¹
ãç°ãªããŸãïŒ71.25emã§140pxã81.25emã§220pxïŒã
- ã€ããŒã·ãèŠçŽ ïŒãããã¯ãã¥ãŒããŒãã®å
šå¹
ã«åºãããããŸããŸãªãã¬ãŒã¯ãã€ã³ãã«åãããŠèª¿æŽãããã¢ãã€ã«ã§ã¯ãšããžããŒãšããžã«æããããã®è² ã®ããŒãžã³ãå«ãŸããŸãã
- ã¬ã¹ãã³ã·ã調æŽïŒããŸããŸãªã¡ãã£ã¢ã¯ãšãªããç°ãªãç»é¢ãµã€ãºã«åãããŠããŒãžã³ãããã£ã³ã°ãé
眮ã埮調æŽããŸãã
å¥ã®çš®é¡ã®æžãçŽãã説æãå¿
èŠãªå Žåã¯ãæç¢ºã«ããŠãã ããïŒ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: 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:has(.ios, .android) {
--darkBackground: #1a1a1a;
--feature: #c70000;
--darkmodeFeature: #ff5943;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}
@media (prefers-color-scheme: dark) {
:root:has(.ios, .android) {
--new-pillar-colour: var(--darkmode-pillar, var(--darkmodeFeature));
}
}
body.ios #feature-article-container .element-atom:first-of-type + p:first-of-tHere is the rewritten text in fluent, natural English:
---
iOSããã³Androidã®èšäºã³ã³ããå
ã§ãèŠçŽ ã¢ãã ã®åŸã®æåã®æ®µèœã®æåã®æåã¯ãã»ã«ã³ããªãã©ãŒã®è²ïŒå®çŸ©ãããŠããªãå Žåã¯ããã©ã«ãã§é»ïŒã«èšå®ããå¿
èŠããããŸãã
iOSããã³Androidã§ã¯ããã£ãŒãã£ãŒãã¹ã¿ã³ããŒããã³ã¡ã³ãã®åèšäºã³ã³ããå
ã®èšäºããããŒã®é«ãã¯ãŒãã«ããå¿
èŠããããŸãã
ãããã®ã³ã³ããå
ã®ãã¡ããã£ãŒã©ãããŒã«ã¯ãäžéšã«4pxãåŽé¢ã«10pxã®ããã£ã³ã°ãå¿
èŠã§ããå
éšã®ã³ã³ãã³ãã©ãã«ã¯ããŒã«ãã«ããGuardian Headlineãã©ã³ããã¡ããªãŒã䜿çšããæ°ãããã©ãŒã®è²ã§ã¹ã¿ã€ã«èšå®ããããã¹ãã倧æåã«ããå¿
èŠããããŸãã
ãã¡ããã£ãŒã©ãããŒå
ã®ã¡ã€ã³ãããã©ã€ã³ïŒh1ïŒã¯32pxãããŒã«ããäžéšã«12pxã®ããã£ã³ã°ãè²ã¯ããŒã¯ã·ã§ãŒãïŒ#121212ïŒã«èšå®ããå¿
èŠããããŸããfigure.element-image {
position: relative;
margin: 14px 0 0 -10px;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto;
}
/ iOSããã³Androidã§ã¯ãç»åãšãã®ã³ã³ãããå
šå¹
ã§éæã«ããŸã /
body.ios #feature-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #feature-article-container .furniture-wrapper figure.element-image img,
body.ios #feature-article-container .furniture-wrapper figure.element-image a,
body.ios #standard-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #standard-article-container .furniture-wrapper figure.element-image img,
body.ios #standard-article-container .furniture-wrapper figure.element-image a,
body.ios #comment-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #comment-article-container .furniture-wrapper figure.element-image img,
body.ios #comment-article-container .furniture-wrapper figure.element-image a,
body.android #feature-article-container .furn