다음 요소들은 초기에 숨겨져 있습니다(투명도 0으로 설정): 인터랙티브 콘텐츠 섹션, 그리드 레이아웃, 가구 래퍼, 그리고 기사 및 피처를 위한 특정 헤더 컴포넌트들. 인터랙티브 콘텐츠가 완전히 로드되면, 이러한 요소들은 0.3초 동안 부드러운 페이드인 효과와 함께 보이게 됩니다.
또한, Guardian Headline Full 글꼴 패밀리는 여러 가지 두께와 스타일(라이트, 레귤러, 미디움, 세미볼드, 각각 일반 및 이탤릭체 변형)로 정의됩니다. 글꼴 파일은 광범위한 브라우저 호환성을 위해 WOFF2, WOFF, TTF 형식으로 Guardian의 자산 서버에서 제공됩니다. Guardian은 "Guardian Headline Full"이라는 맞춤 글꼴을 다양한 두께와 스타일(라이트, 세미볼드, 볼드, 블랙, 각각 일반 및 이탤릭 버전 포함)로 사용합니다. 이러한 글꼴들은 그들의 자산 서버에서 WOFF2, WOFF, TTF 형식으로 이용 가능합니다. 추가적으로, 특정 요소에는 볼드체의 "Guardian Titlepiece"를 사용합니다.
Guardian Headline Full 글꼴 패밀리는 여러 스타일을 포함하며, 각각 여러 형식으로 제공됩니다. 일반 스타일은 400의 두께와 일반 스타일을 가집니다. 이탤릭 버전 또한 400의 두께를 가지지만 이탤릭 스타일입니다. 미디움 스타일은 500의 두께와 일반 스타일을 가지며, 해당 이탤릭 버전은 동일한 두께와 이탤릭 스타일입니다. 세미볼드 스타일은 600의 두께와 일반 스타일을 가지며, 이탤릭 버전은 동일한 두께와 이탤릭 스타일입니다. 볼드 스타일은 700의 두께와 일반 스타일을 가지고, 볼드 이탤릭 버전은 동일한 두께에 이탤릭 스타일입니다. 블랙 스타일은 900의 두께와 일반 스타일을 가지며, 이탤릭 버전은 동일한 두께와 이탤릭 스타일입니다. 각 스타일은 지정된 URL에서 WOFF2, WOFF, TrueType 형식으로 제공됩니다.
```css
@font-face {
font-family: 'Guardian Headline Full';
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;
}
#article-body > div .content--interactive-grid,
.content--interactive > div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-column-gap: 0px;
grid-template-columns: 100%;
grid-template-areas:
"media"
"title"
"headline"
"standfirst"
"lines"
"meta"
"body";
}
@media (min-width: 30em) {
#article-body > div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive > div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
padding: 0 20px;
max-width: 620px;
}
}
@media (min-width: 46.25em) {
#article-body > div .content--interactive-grid,
.content--interactive > div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 100%;
grid-column-gap: 10px;
grid-template-areas:
"title"
"headline"
"standfirst"
"media"
"lines"
"meta"
"body";
}
#article-body > div .content--interactive-grid #maincontent,
.content--interactive > div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: 80px;
}
}
@media (min-width: 61.25em) {
#article-body > div .content--interactive-grid,
.content--interactive > div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 620px 300px;
grid-template-areas:
"title right-column"
"headline right-column"
"standfirst right-column"
"media right-column"
"lines right-column"
"meta right-column"
"body right-column"
". right-column";
}
#article-body > div .content--interactive-grid #maincontent,
.content--interactive > div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: unset;
}
}
@media (min-width: 71.25em) {
#article-body > div .content--interactive-grid,
.content--interactive > div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 140px 1px 620px 300px;
grid-template-areas:
"title border headline right-column"
". border standfirst right-column"
". border media right-column"
". border body right-column"
". border";
}
}
```
이는 웹사이트 스타일시트의 CSS 코드 블록으로 보입니다. 그리드 레이아웃, 글꼴, 패딩, 마진 등 다양한 요소에 대한 스타일 규칙을 포함하고 있습니다. 이 코드는 iOS와 Android에 대한 조정을 포함하여 다양한 화면 크기와 기기에서 콘텐츠가 어떻게 표시되어야 하는지 지정합니다. 또한 "Guardian Headline"과 같은 맞춤 글꼴을 참조하고 반응형 디자인을 위한 미디어 쿼리를 포함합니다.
```css
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.ttf) format("truetype");
font-weight: 300;
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-LightItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.ttf) format("truetype");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.ttf) format("truetype");
font-weight: 400;
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-RegularItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format("truetype");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.ttf) format("truetype");
font-weight: 500;
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-MediumItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-MediumItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-MediumItalic.ttf) format("truetype");
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.ttf) format('truetype');
font-weight: 600;
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-SemiboldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.ttf) format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf) format('truetype');
font-weight: 700;
font-style: normal;
}
```
Guardian Headline Full 글꼴은 볼드 이탤릭, 블랙, 블랙 이탤릭 스타일을 포함하며, 각각 Guardian의 자산 서버에서 WOFF2, WOFF, TTF 형식으로 제공됩니다. Guardian Titlepiece 글꼴은 동일한 파일 형식으로 볼드 스타일로 이용 가능합니다.
인터랙티브 콘텐츠 칼럼의 경우, 레이아웃은 화면 너비에 따라 조정됩니다:
- 71.25em 이상의 화면에서는 왼쪽 마진이 160px입니다; 81.25em 이상에서는 240px로 증가합니다.
- Atom 요소는 최대 너비가 620px이거나, 46.24em 미만의 화면에서는 100%입니다.
- Showcase 요소는 작은 화면에서는 전체 너비에서 46.25em 이상에서는 620px로, 71.25em 이상에서는 860px로 조정됩니다.
- Immersive 요소는 최대 너비가 1100px이며, 다른 화면 크기에 따라 위치와 너비가 반응적으로 조정되며, 81.25em 이상에서는 1260px로 확장됩니다.
단락과 목록은 너비가 620px로 제한됩니다. 71.25em 이상에서는 칼럼 왼쪽에 수직 경계선이 나타납니다. Atom 요소는 일관된 수직 간격을 가지며, 단락 뒤에 올 때 마진이 조정됩니다.
인터랙티브 콘텐츠의 메인 칼럼은 인라인 요소의 최대 너비를 620픽셀로 제한합니다. 61.25em보다 넓은 화면의 경우, 인라인 피규어도 620픽셀로 제한됩니다
