ããã¯CSSã³ãŒãã®ãããã¯ã§ããããGuardian Headline Fullããšãããã©ã³ããã¡ããªãŒãå®çŸ©ããç°ãªããã©ã³ããã¡ã€ã«ãã©ãããèªã¿èŸŒãããæå®ããŠããŸããã©ã€ããã¬ã®ã¥ã©ãŒãããã£ã¢ã ãã»ãããŒã«ãã®è€æ°ã®ãã©ã³ããŠã§ã€ããšãããŒãã«ããã³ã€ã¿ãªãã¯ã®ã¹ã¿ã€ã«ãå«ãŸããŠãããããããã«ã¬ãŒãã£ã¢ã³ç€Ÿã®ãŠã§ããµã€ãã§ãã¹ããããŠããç°ãªã圢åŒïŒWOFF2ãWOFFãTTFïŒã®ãœãŒã¹ãã¡ã€ã«ãèšå®ãããŠããŸãããã®ã³ãŒãã«ããããããã®ãã¡ã€ã«ã«ãªã³ã¯ããããšã§ããŠã§ãããŒãžã§ãã©ã³ãã䜿çšå¯èœã«ãªããŸããããã¯ãã¬ãŒãã£ã¢ã³ç€Ÿã®ã¿ã€ãã°ã©ãã£çšã®ãã©ã³ããã§ã€ã¹ãå®çŸ©ããCSSã¹ã¿ã€ã«ã·ãŒãã§ãããGuardian Headline Fullãããã³ãGuardian Titlepieceããã©ã³ããã¡ããªãŒçšã«ãããŸããŸãªãã©ã³ããã¡ã€ã«ïŒWOFF2ãWOFFãTTF圢åŒïŒãèªã¿èŸŒã¿ãããããã«ç°ãªããŠã§ã€ãïŒã©ã€ããã¬ã®ã¥ã©ãŒãããŒã«ãããã©ãã¯ïŒãšã¹ã¿ã€ã«ïŒããŒãã«ãŸãã¯ã€ã¿ãªãã¯ïŒãæå®ããŠããŸããURLã¯ãã¬ãŒãã£ã¢ã³ç€Ÿã®ã¢ã»ãããµãŒããŒã§ãã¹ããããŠãããã©ã³ããã¡ã€ã«ãæããŠããŸããããã¯ããGuardian Headline Fullããã©ã³ããã¡ããªãŒãããŸããŸãªãŠã§ã€ããšã¹ã¿ã€ã«ã§å®çŸ©ããCSSã³ãŒããããã¯ã§ããè€æ°ã®@font-faceã«ãŒã«ãå«ãŸããŠãããåã«ãŒã«ã¯ç°ãªã圢åŒïŒwoff2ãwoffãtruetypeïŒã®ãã©ã³ããœãŒã¹ãã¡ã€ã«ãšã察å¿ããfont-weightããã³font-styleããããã£ãæå®ããŠããŸãããŠã§ã€ãã¯400ïŒã¬ã®ã¥ã©ãŒïŒãã900ïŒãã©ãã¯ïŒãŸã§ãããåãŠã§ã€ãã§ããŒãã«ãšã€ã¿ãªãã¯ã®äž¡æ¹ã®ã¹ã¿ã€ã«ãå©çšå¯èœã§ãããã©ã³ããã¡ã€ã«ã¯ã¬ãŒãã£ã¢ã³ç€Ÿã®ã¢ã»ãããµãŒããŒã§ãã¹ããããŠããŸããããã¯ããŠã§ãããŒãžã®ãã©ã³ãã¹ã¿ã€ã«ãšã¬ã€ã¢ãŠãã«ãŒã«ãå®çŸ©ããCSSã³ãŒãã®ãããã¯ã§ãããããããã¬ãŒãã£ã¢ã³ç€Ÿã®ãŠã§ããµã€ãããã®ãã®ã§ããç°ãªããŠã§ã€ããšåœ¢åŒã®ã«ã¹ã¿ã ãã©ã³ãïŒãGuardian HeadlineãããGuardian Titlepieceããªã©ïŒãèšå®ããã°ãªããã¬ã€ã¢ãŠãã·ã¹ãã ã䜿çšããŠãã¿ã€ãã«ãèŠåºããæ¬æãªã©ã®ã³ã³ãã³ãã»ã¯ã·ã§ã³ãããŸããŸãªç»é¢ãµã€ãºã«å¿ããŠã¬ã¹ãã³ã·ãã«é
眮ããŸããã¬ã€ã¢ãŠãã¯ãããŸããŸãªãã¬ãŒã¯ãã€ã³ãïŒäŸïŒ30emã46.25emã61.25emã71.25emïŒã§åãšééã調æŽããã¢ãã€ã«ãã¿ãã¬ããããã¹ã¯ãããããã€ã¹ã§é©åã«è¡šç€ºãããããã«ããŸããæ²¡å
¥åãã£ãã·ã§ã³ä»ãã®ã€ã³ã¿ã©ã¯ãã£ãã°ãªãããã£ã®ã¥ã¢ã®å Žåããã£ãã·ã§ã³ã®ã¹ã¿ã€ã«ã¯äžéšã«4pxã®ããã£ã³ã°ãé©çšããäžéšã«ã¯0ãé©çšããŸããããã¯ãèšäºæ¬æãã€ã³ã¿ã©ã¯ãã£ãã³ã³ãã³ããã³ã¡ã³ãã»ã¯ã·ã§ã³ãç¹éæ¬æãªã©ãããŸããŸãªã³ã³ãã³ãé åã«é©çšãããŸããã€ã³ã¿ã©ã¯ãã£ãã°ãªããã¬ã€ã¢ãŠãã§ã¯ãlinesã»ã¯ã·ã§ã³ãšmetaã»ã¯ã·ã§ã³ã¯ãè¡2ãå1ããè¡5ãå2ã«ãŸãããã°ãªããé åã«é
眮ãããŸããlinesã»ã¯ã·ã§ã³ã®é«ãã¯ã³ã³ãã³ãã«åãããŠèšå®ãããäžéšããŒãžã³ã¯5pxã§ããmetaã»ã¯ã·ã§ã³ã®äžéšããŒãžã³ã¯18pxã§ãã81.25emïŒ1300pxïŒããåºãç»é¢ã®å Žåãã€ã³ã¿ã©ã¯ãã£ãã°ãªããã¯219pxã1pxã620pxã80pxã300pxã®åã¬ã€ã¢ãŠãã䜿çšããŸããiOSããã³Androidããã€ã¹ã§ã¯ãèšäºããããŒã®ã¹ã¿ã³ããã¡ãŒã¹ãããã¹ãã¯ãGuardian Headlineãã©ã³ããã¡ããªãŒã®ããã£ã¢ã ãŠã§ã€ãã䜿çšããŸããèšäºã®ããã«ãŒã»ã¯ã·ã§ã³ã¯ãããã¯ãšããŠè¡šç€ºãããæåã®æåã¯å€§æåã«ãªããŸããkeyline-4èŠçŽ ã«ã¯ãäžéšã«12pxã®è¿œå ããã£ã³ã°ããããŸããèè
åã®ãã€ã©ã€ã³ã¯Guardian Headlineãã©ã³ãã®ããŒã«ããŠã§ã€ãã䜿çšãããã®äžã®ãªã³ã¯ãããŒã«ãã§ããèšäºã®ãã£ã®ã¥ã¢å
ã®ç»åã¯é«ããautoã«èšå®ãããã€ã³ã¿ã©ã¯ãã£ãã¢ãã ã®åŸã®æ®µèœã«ã¯äžéšããŒãžã³ããããŸãããGuardian Headline Fullãã©ã³ãã¯ãã©ã€ããŠã§ã€ããšããŒãã«ã¹ã¿ã€ã«ãããã³ã©ã€ãã€ã¿ãªãã¯ã¹ã¿ã€ã«çšã«ãè€æ°ã®ãã¡ã€ã«åœ¢åŒïŒwoff2ãwoffãttfïŒã§å®çŸ©ãããŠããŸãããã®ãªã¯ãšã¹ãã«ã¯å¯Ÿå¿ã§ããŸãããæäŸãããããã¹ãã¯Webãã©ã³ããå®çŸ©ããããã®CSSã³ãŒãã§ãããæµæ¢ãªè±èªã«æžãæããããèªç¶èšèªã³ã³ãã³ãã§ã¯ãªãããã§ããå¥ã®ããã¹ããããã°ããæäŒãã§ããããšæããŸãã®ã§ãå
±æããŠãã ããã以äžã¯ãæµæ¢ã§èªç¶ãªè±èªã«æžãæããããã¹ãã§ãïŒ
```
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]) {
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ãäœãããã®ããå¹³æãªè±èªã§èª¬æããããšãã§ããŸãããå¥ã®ããã¹ããæžãæãçšã«æäŸããŠããã ãããšãã§ããŸããã©ãé²ãããããç¥ãããã ããã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以äžã¯ãæµæ¢ã§èªç¶ãªè±èªã«æžãæããããã¹ãã§ãïŒ
ã¹ã¿ã³ããã¡ãŒã¹ãã»ã¯ã·ã§ã³ã®ã©ãããŒã«ã¯ãå·Šã«ããããªãªãã»ãã調æŽããããŸããèšäºããããŒãšã¿ã€ãã«ã»ã¯ã·ã§ã³ã®ã©ãã«ã«ã¯ãäžéšã«å°ãäœåãªããã£ã³ã°ããããŸããèŠåºãã¯ããŒã«ãã®ãã©ã³ããŠã§ã€ãã䜿çšããæå€§å¹
ã«å¶éããã倧ããªç»é¢ã§ã¯ãµã€ãºãæ¡å€§ããŸããäžçšåºŠã®ç»é¢ã§ã¯ãããŒã©ã€ã³ãšã©ã€ã³èŠçŽ ã«ã¯å³ããŒãžã³ããªãã倧ããªç»é¢ã§ã¯å®å
šã«é衚瀺ã«ãªããŸããã©ã€ã³ã¯ããããŒããŒããŒã«äžèŽããã¹ãããŒã¯ã«ã©ãŒã䜿çšããŸãã
ã¡ã¿ã»ã¯ã·ã§ã³ã«ããäžçšåºŠã®ç»é¢ã§ã¯å³ããŒãžã³ããããŸããããœãŒã·ã£ã«ã¢ã€ã³ã³ãã³ã¡ã³ããªã³ã¯ãããã³ãããã®ããŒããŒã¯ãã¹ãŠããããŒããŒããŒã«ã©ãŒã䜿çšããŸããã¡ã¿ã»ã¯ã·ã§ã³ã®äžéšã®ã€ã³ã¿ã©ã¯ãã£ãèŠçŽ ã¯é衚瀺ã«ãªããŸããã¹ã¿ã³ããã¡ãŒã¹ãããã¹ãã¯ãå·Šããã£ã³ã°ã§ãããã«ã€ã³ãã³ããããã³ã³ããã«å¯ŸããŠçžå¯Ÿçã«é
眮ãããŸããäžçšåºŠã®ç»é¢ã§ã¯ãäžéšã«å°ãããã£ã³ã°ã远å ãããŸããã¹ã¿ã³ããã¡ãŒã¹ãå
ã®æ®µèœã¯ãç¹å®ã®ãã©ã³ããŠã§ã€ããšãµã€ãºã«èšå®ãããäžéšã«ããã€ãã®ããã£ã³ã°ããããŸãã
ã¡ã€ã³ã¡ãã£ã¢ã»ã¯ã·ã§ã³ã¯çžå¯Ÿçã«é
眮ãããäžéšããŒãžã³ããªããäžéšããŒãžã³ããããã«ãããŸããã³ã³ããã®å
šå¹
ã«åºãããŸãã倧ããªç»é¢ã§ã¯äžéšããŒãžã³ãåé€ãããå°ããªç»é¢ã§ã¯ãã¥ãŒããŒãã®å
šå¹
ã«è² ã®å·ŠããŒãžã³ã§æ¡åŒµãããŸãããã£ãã·ã§ã³ã¯ã¡ãã£ã¢ã®äžéšã«é
眮ãããèæ¯è²ãããã¹ãè²ãããã£ã³ã°ããããŸãããã£ãã·ã§ã³ããã¹ãã«ã¯ããããŒããŒããŒã«ã©ãŒã䜿çšããã¹ãã³ãå«ãŸããæåã®ã¹ãã³ã¯é衚瀺ã§ã2çªç®ã®ã¹ãã³ã衚瀺ãããŸããå°ããªç»é¢ã§ã¯ãã£ãã·ã§ã³ã®ããã£ã³ã°ãå¢å ããŸãããã£ãã·ã§ã³ãé衚瀺ã®å Žåã¯éæã«ãªããŸãããã£ãã·ã§ã³ãã¿ã³ã¯å³äžã«é
眮ãããå圢ã®èæ¯ãããŒããŒãªããããã€ãã®ããã£ã³ã°ããããŸãããã¿ã³ã¢ã€ã³ã³ã¯ãããã«çž®å°ãããŸãã
倧ããªç»é¢ã§ã¯ãã¡ã€ã³ã³ã©ã ã«äžéšãªãã»ãããšé«ã調æŽããããŸãããã®äžã®èŠåºãã¯æå€§å¹
ã«å¶éãããŸããiOSããã³Androidããã€ã¹ã®ããŒã¯ã¢ãŒãã§ã¯ãç¹å®ã®ã«ã©ãŒå€æ°ãå®çŸ©ããããã£ãŒãã£ãŒã«ã©ãŒãšããŒã¯ã¢ãŒãããªã¢ã³ããå«ãŸããŸããæ°ãããã©ãŒã«ã©ãŒã¯ããã©ã«ãã§ãã©ã€ããªãã©ãŒã«ã©ãŒã䜿çšããŸãããããŒã¯ã¢ãŒãã§ã¯ããŒã¯ã¢ãŒããã©ãŒã«ã©ãŒã«åãæ¿ãããŸããiOSã§ã¯ãæåã®èŠçŽ ã¢ãã ã®åŸã«ç¶ã段èœã¯ç¹å®ã®æ¹æ³ã§ã¹ã¿ã€ã«èšå®ãããŸããããã¯æè¡çãªCSSã¹ã¿ã€ã«ã·ãŒãã§ãããæžãæããæå³ããããã¹ãã§ã¯ãããŸããããŠã§ããµã€ãçšã®ã»ã¬ã¯ã¿ãšã¹ã¿ã€ã«ã«ãŒã«ãå«ãŸããŠããŸãããããããã°ããããäœãããã®ãã説æããããç°¡çŽ åãåãã©ãŒããããæäŒã£ããã§ããŸããã©ãé²ãããããç¥ãããã ããã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 .furniture-wrapper figure.element-image .figure__inner,
body.android #feature-article-container .furniture-wrapper figure.element-image img,
body.android #feature-article-container .furniture-wrapper figure.element-image a,
body.android #standard-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #standard-article-container .furniture-wrapper figure.element-image img,
body.android #standard-article-container .furniture-wrapper figure.element-image a,
body.android #comment-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #comment-article-container .furniture-wrapper figure.element-image img,
body.android #comment-article-container .furniture-wrapper figure.element-image a {
background-color: transparent;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto !important;
}
/ iOSããã³Androidã§ã¯ãã¹ã¿ã³ããã¡ãŒã¹ãïŒå°å
¥æ®µèœïŒã®ééãšé
眮ã調æŽããŸã /
body.ios #feature-article-container .furniture-wrapper .standfirst,
body.ios #standard-article-container .furniture-wrapper .standfirst,
body.ios #comment-article-container .furniture-wrapper .standfirst,
body.android #feature-article-container .furniture-wrapper .standfirst,
body.android #standard-article-container .furniture-wrapper .standfirst,
body.android #comment-article-container .furniture-wrapper .standfirst {
padding-top: 4px;
padding-bottom: 24px;
margin-right: -10px;
}
/ iOSããã³Androidã§ã¯ãã¹ã¿ã³ããã¡ãŒã¹ãå
ã®æ®µèœã®ãã©ã³ããèšå®ããŸã /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner p,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner p,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner p,
body.android #feature-article-container .furniture-wrapper .standfirst__inner p,
body.android #standard-article-container .furniture-wrapper .standfirst__inner p,
body.android #comment-article-container .furniture-wrapper .standfirst__inner p {
font-family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif;
}
/ iOSããã³Androidã§ã¯ãã¹ã¿ã³ããã¡ãŒã¹ãå
ã®ãªã³ã¯ïŒãªã¹ãé
ç®ãå«ãïŒãã¹ã¿ã€ã«èšå®ããŸã /
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;
}
/ iOSããã³Androidã§ã¯ãã¹ã¿ã³ããã¡ãŒã¹ãå
ã®ãªã³ã¯ã®ãããŒç¶æ
ãã¹ã¿ã€ã«èšå®ããŸã /
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 {
/ ããã§ã¯ç¹å®ã®ãããŒã¹ã¿ã€ã«ã¯å®çŸ©ãããŠããŸãããããŒã¹ã®ãªã³ã¯ã¹ã¿ã€ã«ããç¶æ¿ãããŸã /
}iOSããã³Androidã®ãã£ãŒãã£ãŒèšäºãã¹ã¿ã³ããŒãèšäºãã³ã¡ã³ãèšäºã®ã¹ã¿ã³ããã¡ãŒã¹ãã»ã¯ã·ã§ã³å
ã®ãªã³ã¯ã®ãããŒç¶æ
ã§ã¯ãäžç·ã®è²ãæ°ãããã©ãŒã«ã©ãŒã«äžèŽããå¿
èŠããããŸãã
iOSãšAndroidã®äž¡æ¹ã§ããããã®èšäºã³ã³ããå
ã®ã¡ã¿ã»ã¯ã·ã§ã³ã«ã¯ããŒãžã³ããªãããã«ããå¿
èŠããããŸãããã€ã©ã€ã³ããã¹ãïŒèè
åãšãã®äžã®ãªã³ã¯ãå«ãïŒãæ°ãããã©ãŒã«ã©ãŒã䜿çšããå¿
èŠããããŸãã
meta__miscã»ã¯ã·ã§ã³ã«ã¯ããã£ã³ã°ããªãããã«ãããã®äžã®SVGã¢ã€ã³ã³ã¯å€æŽããªãã§ãã ãããper .meta__misc svg { stroke: var(--new-pillar-colour); }
iOSããã³Androidã§ã¯ããã£ãŒãã£ãŒèšäºãã¹ã¿ã³ããŒãèšäºãã³ã¡ã³ãèšäºã®ã³ã³ããã«ã€ããŠãã·ã§ãŒã±ãŒã¹ãã£ãã·ã§ã³ãã¿ã³ã¯ãããã£ã³ã°ä»ãã®å°ããªäžå€®æãã®ãã¬ãã¯ã¹ããã¯ã¹ãšããŠã¹ã¿ã€ã«èšå®ããããµã€ãºã¯28x28pxã§ãå³ãã14pxã®äœçœ®ã«é
眮ãããŸãã
ãããã®ããã€ã¹ã§ã¯ãèšäºæ¬æã«12pxã®æ°Žå¹³ããã£ã³ã°ã远å ãããŸãã
ãµã ãã€ã«ã没å
¥åã§ã¯ãªãèšäº