๋ค์์ ์ ๊ณต๋ ํ
์คํธ๋ฅผ ํ๊ตญ์ด๋ก ๋ฒ์ญํ ๊ฒ์
๋๋ค:
---
์ด๊ฒ์ "Guardian Headline Full"์ด๋ผ๋ ๊ธ๊ผด ๋ชจ์์ ์ ์ํ๊ณ ๋ค์ํ ๊ธ๊ผด ํ์ผ์ ๋ก๋ํ ์์น๋ฅผ ์ง์ ํ๋ CSS ์ฝ๋ ๋ธ๋ก์
๋๋ค. ์ฌ๋ฌ ๊ธ๊ผด ๋๊ป(๋ผ์ดํธ, ๋ ๊ทค๋ฌ, ๋ฏธ๋์, ์ธ๋ฏธ๋ณผ๋)์ ์คํ์ผ(์ผ๋ฐ ๋ฐ ์ดํค๋ฆญ)์ ํฌํจํ๋ฉฐ, ๊ฐ๊ฐ ๊ฐ๋์ธ ์น์ฌ์ดํธ์ ํธ์คํ
๋ ๋ค์ํ ํ์(WOFF2, WOFF, TTF)์ ์์ค ํ์ผ ์ธํธ๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค. ์ด ์ฝ๋๋ ์ด๋ฌํ ํ์ผ์ ์ฐ๊ฒฐํ์ฌ ์นํ์ด์ง์์ ๊ธ๊ผด์ ์ฌ์ฉํ ์ ์๋๋ก ๋ณด์ฅํฉ๋๋ค.
์ด๊ฒ์ ๊ฐ๋์ธ์ ํ์ดํฌ๊ทธ๋ํผ๋ฅผ ์ํ ๊ธ๊ผด ๋ชจ์์ ์ ์ํ๋ CSS ์คํ์ผ์ํธ์
๋๋ค. "Guardian Headline Full" ๋ฐ "Guardian Titlepiece" ๊ธ๊ผด ๋ชจ์์ ๋ํด ๋ค์ํ ๊ธ๊ผด ํ์ผ(WOFF2, WOFF, TTF ํ์)์ ๋ก๋ํ๋ฉฐ, ๊ฐ๊ฐ์ ๋ํด ๋ค๋ฅธ ๋๊ป(๋ผ์ดํธ, ๋ ๊ทค๋ฌ, ๋ณผ๋, ๋ธ๋)์ ์คํ์ผ(์ผ๋ฐ ๋๋ ์ดํค๋ฆญ)์ ์ง์ ํฉ๋๋ค. URL์ ๊ฐ๋์ธ์ ์์
์๋ฒ์ ํธ์คํ
๋ ๊ธ๊ผด ํ์ผ์ ๊ฐ๋ฆฌํต๋๋ค.
์ด๊ฒ์ ๋ค์ํ ๋๊ป์ ์คํ์ผ๋ก "Guardian Headline Full" ๊ธ๊ผด ๋ชจ์์ ์ ์ํ๋ CSS ์ฝ๋ ๋ธ๋ก์
๋๋ค. ๊ฐ๊ฐ ๊ธ๊ผด์ ์์ค ํ์ผ์ ๋ค๋ฅธ ํ์(woff2, woff, truetype)์ผ๋ก ์ง์ ํ๊ณ ํด๋น font-weight ๋ฐ font-style ์์ฑ์ ์ง์ ํ๋ ์ฌ๋ฌ @font-face ๊ท์น์ ํฌํจํฉ๋๋ค. ๋๊ป๋ 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 ์ฅ์น์์ ๊ธฐ์ฌ ํค๋์ standfirst ํ
์คํธ๋ Guardian Headline ๊ธ๊ผด ๋ชจ์์ ์ค๊ฐ ๋๊ป๋ก ์ฌ์ฉํฉ๋๋ค. ๊ธฐ์ฌ kicker ์น์
์ ๋ธ๋ก์ผ๋ก ํ์๋๋ฉฐ ์ฒซ ๊ธ์๋ ๋๋ฌธ์๋ก ํ์๋ฉ๋๋ค. keyline-4 ์์์๋ ์๋จ ํจ๋ฉ์ด 12px ์ถ๊ฐ๋ฉ๋๋ค. byline ์์ฑ์ ์ด๋ฆ์ Guardian Headline ๊ธ๊ผด์์ ๋ณผ๋ ๋๊ป๋ฅผ ์ฌ์ฉํ๋ฉฐ, ๊ทธ ์์ ๋งํฌ๋ ๋ณผ๋์
๋๋ค. ๊ธฐ์ฌ ๊ทธ๋ฆผ์ ์ด๋ฏธ์ง๋ ๋์ด๊ฐ ์๋์ผ๋ก ์ค์ ๋๊ณ , ์ธํฐ๋ํฐ๋ธ ์์ ๋ค์ ๋จ๋ฝ์๋ ์๋จ ์ฌ๋ฐฑ์ด ์์ต๋๋ค.
Guardian Headline Full ๊ธ๊ผด์ ๋ผ์ดํธ ๋๊ป์ ์ผ๋ฐ ์คํ์ผ, ๊ทธ๋ฆฌ๊ณ ๋ผ์ดํธ ์ดํค๋ฆญ ์คํ์ผ์ ๋ํด ์ฌ๋ฌ ํ์ผ ํ์(woff2, woff, ttf)์ผ๋ก ์ ์๋ฉ๋๋ค.
์ด ์์ฒญ์ ์ ๊ณต๋ ํ
์คํธ๊ฐ ์น ๊ธ๊ผด์ ์ ์ํ๋ 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,
.furniture-wrapper [data-gu-name="standfirst"]:before {
left: 0.5px;
}
}
๋ค์์ ์ ์ฐฝํ๊ณ ์์ฐ์ค๋ฌ์ด ์์ด๋ก ๋ค์ ์ด ํ
์คํธ์
๋๋ค:
standfirst ์น์
์ ๋ํผ๋ ์ฝ๊ฐ์ ์ผ์ชฝ ์คํ์
์กฐ์ ์ด ์์ต๋๋ค. ๊ธฐ์ฌ ํค๋์ ์ ๋ชฉ ์น์
์ ๋ ์ด๋ธ์๋ ์๋จ์ ์ฝ๊ฐ์ ์ถ๊ฐ ํจ๋ฉ์ด ์์ต๋๋ค. ํค๋๋ผ์ธ์ ๋ณผ๋ ๊ธ๊ผด ๋๊ป๋ฅผ ์ฌ์ฉํ๊ณ ์ต๋ ๋๋น๋ก ์ ํ๋๋ฉฐ ๋ ํฐ ํ๋ฉด์์ ํฌ๊ธฐ๊ฐ ์ปค์ง๋๋ค. ์ค๊ฐ ํ๋ฉด์์๋ keyline๊ณผ lines ์์์ ์ค๋ฅธ์ชฝ ์ฌ๋ฐฑ์ด ์์ผ๋ฉฐ, ๋ ํฐ ํ๋ฉด์์๋ ์์ ํ ์จ๊ฒจ์ง๋๋ค. lines๋ ํค๋ ํ
๋๋ฆฌ์ ์ผ์นํ๋ ์คํธ๋กํฌ ์์์ ์ฌ์ฉํฉ๋๋ค.
meta ์น์
๋ ์ค๊ฐ ํ๋ฉด์์ ์ค๋ฅธ์ชฝ ์ฌ๋ฐฑ์ด ์์ต๋๋ค. ์์
์์ด์ฝ, ๋๊ธ ๋งํฌ ๋ฐ ํด๋น ํ
๋๋ฆฌ๋ ๋ชจ๋ ํค๋ ํ
๋๋ฆฌ ์์์ ์ฌ์ฉํฉ๋๋ค. meta ์น์
์ ์ผ๋ถ ์ธํฐ๋ํฐ๋ธ ์์๋ ์จ๊ฒจ์ง๋๋ค. standfirst ํ
์คํธ๋ ์ผ์ชฝ ํจ๋ฉ์ผ๋ก ์ฝ๊ฐ ๋ค์ฌ์ฐ๊ธฐ๋๊ณ ์ปจํ
์ด๋์ ์๋์ ์ผ๋ก ๋ฐฐ์น๋ฉ๋๋ค. ์ค๊ฐ ํ๋ฉด์์๋ ์ฝ๊ฐ์ ์๋จ ํจ๋ฉ์ ์ป์ต๋๋ค. standfirst์ ๋จ๋ฝ์ ํน์ ๊ธ๊ผด ๋๊ป์ ํฌ๊ธฐ๋ก ์ค์ ๋๋ฉฐ ์ฝ๊ฐ์ ํ๋จ ํจ๋ฉ์ด ์์ต๋๋ค.
๊ธฐ๋ณธ ๋ฏธ๋์ด ์น์
์ ์๋์ ์ผ๋ก ๋ฐฐ์น๋๊ณ ์๋จ ์ฌ๋ฐฑ์ด ์์ผ๋ฉฐ ์ฝ๊ฐ์ ํ๋จ ์ฌ๋ฐฑ์ด ์์ต๋๋ค. ์ปจํ
์ด๋์ ์ ์ฒด ๋๋น์ ๊ฑธ์ณ ์์ต๋๋ค. ๋ ํฐ ํ๋ฉด์์๋ ํ๋จ ์ฌ๋ฐฑ์ด ์ ๊ฑฐ๋๊ณ , ๋ ์์ ํ๋ฉด์์๋ ์์ ์ผ์ชฝ ์ฌ๋ฐฑ์ผ๋ก ์ ์ฒด ๋ทฐํฌํธ ๋๋น๋ก ํ์ฅ๋ฉ๋๋ค. ์บก์
์ ๋ฏธ๋์ด ํ๋จ์ ๋ฐฐ์น๋๋ฉฐ ๋ฐฐ๊ฒฝ์, ํ
์คํธ ์์ ๋ฐ ํจ๋ฉ์ด ์์ต๋๋ค. ์บก์
ํ
์คํธ์๋ ํค๋ ํ
๋๋ฆฌ ์์์ ์ฌ์ฉํ๋ ๋ฒ์๊ฐ ํฌํจ๋๋ฉฐ ์ฒซ ๋ฒ์งธ ๋ฒ์๋ ์จ๊ฒจ์ง๊ณ ๋ ๋ฒ์งธ ๋ฒ์๋ ํ์๋ฉ๋๋ค. ๋ ์์ ํ๋ฉด์์๋ ์บก์
ํจ๋ฉ์ด ์ฆ๊ฐํฉ๋๋ค. ์บก์
์ด ์จ๊ฒจ์ง๋ฉด ํฌ๋ช
ํด์ง๋๋ค. ์บก์
๋ฒํผ์ ์ค๋ฅธ์ชฝ ํ๋จ์ ๋ฐฐ์น๋๋ฉฐ ์ํ ๋ฐฐ๊ฒฝ, ํ
๋๋ฆฌ ์์ ๋ฐ ์ฝ๊ฐ์ ํจ๋ฉ์ด ์์ต๋๋ค. ๋ฒํผ ์์ด์ฝ์ ์ฝ๊ฐ ์ถ์๋ฉ๋๋ค.
๋ ํฐ ํ๋ฉด์์๋ ๊ธฐ๋ณธ ์ด์ ์๋จ ์คํ์
๊ณผ ๋์ด ์กฐ์ ์ด ์์ต๋๋ค. ๊ทธ ์์ ์ ๋ชฉ์ ์ต๋ ๋๋น๋ก ์ ํ๋ฉ๋๋ค. iOS ๋ฐ Android ์ฅ์น์ ๋คํฌ ๋ชจ๋์์๋ ํน์ ์์ ๋ณ์๊ฐ ์ ์๋ฉ๋๋ค(ํผ์ฒ ์์ ๋ฐ ๋คํฌ ๋ชจ๋ ๋ณํ ํฌํจ). ์ pillar ์์์ ๊ธฐ๋ณธ์ ์ผ๋ก ๊ธฐ๋ณธ pillar ์์์ ์ฌ์ฉํ์ง๋ง ๋คํฌ ๋ชจ๋์์๋ ๋คํฌ ๋ชจ๋ pillar ์์์ผ๋ก ์ ํ๋ฉ๋๋ค. 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์์ standfirst(์๊ฐ ๋จ๋ฝ) ๊ฐ๊ฒฉ ๋ฐ ์ ๋ ฌ ์กฐ์ */
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์์ standfirst ๋ด๋ถ ๋จ๋ฝ์ ๊ธ๊ผด ์ค์ */
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์์ standfirst ๋ด๋ถ ๋งํฌ(๋ชฉ๋ก ํญ๋ชฉ ํฌํจ) ์คํ์ผ ์ง์ */
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์์ standfirst ๋ด๋ถ ๋งํฌ์ ํธ๋ฒ ์ํ ์คํ์ผ ์ง์ */
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์ ํผ์ฒ, ํ์ค ๋ฐ ๋๊ธ ๊ธฐ์ฌ์์ standfirst ์น์
๋ด๋ถ ๋งํฌ์ ํธ๋ฒ ์ํ์ ๋ํด ๋ฐ์ค ์์์ ์ pillar ์์๊ณผ ์ผ์นํด์ผ ํฉ๋๋ค.
iOS ๋ฐ Android ๋ชจ๋์์ ์ด๋ฌํ ๊ธฐ์ฌ ์ปจํ
์ด๋ ๋ด์ meta ์น์
์๋ ์ฌ๋ฐฑ์ด ์์ด์ผ ํฉ๋๋ค. byline ํ
์คํธ(์์ฑ์ ์ด๋ฆ ๋ฐ ๊ทธ ์์ ๋งํฌ ํฌํจ)๋ ์ pillar ์์์ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
meta__misc ์น์
์๋ ํจ๋ฉ์ด ์์ด์ผ ํ๋ฉฐ ๊ทธ ์์ SVG ์์ด์ฝ์ ๋ณ๊ฒฝ๋์ง ์์ ์ํ๋ก ์ ์ง๋์ด์ผ ํฉ๋๋ค.
.meta__misc svg { stroke: var(--new-pillar-colour); }
iOS ๋ฐ Android์์ ํผ์ฒ, ํ์ค ๋ฐ ๋๊ธ ๊ธฐ์ฌ ์ปจํ
์ด๋์ ๊ฒฝ์ฐ ์ผ์ผ์ด์ค ์บก์
๋ฒํผ์ 28x28px ํฌ๊ธฐ์ ์์ ์ค์ ํ๋ ์ค๋ฐ์ค๋ก ํจ๋ฉ์ด ์์ผ๋ฉฐ ์ค๋ฅธ์ชฝ์์ 14px ๋จ์ด์ง ๊ณณ์ ๋ฐฐ์น๋ฉ๋๋ค.
์ด๋ฌํ ์ฅ์น์์ ๊ธฐ์ฌ ๋ณธ๋ฌธ์