가디언 헤드라인 풀 폰트 패밀리는 여러 스타일을 포함하며, 각각 다른 두께와 이탤릭체를 가지고 있습니다. 라이트 버전(두께 300)은 일반체와 이탤릭체 스타일로 제공되며, 일반 버전(두께 400)도 마찬가지입니다. 미디엄(두께 500)과 세미볼드(두께 600) 스타일 역시 일반체와 이탤릭체 옵션이 있습니다. 각 폰트 파일은 가디언 서버에서 WOFF2, WOFF, TrueType 형식으로 이용 가능합니다.@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.ttf) format("truetype");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Guardian Titlepiece;
src: url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://interactive.guim.co.uk/fonts/garnett/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;
}
}주요 인터랙티브 콘텐츠 칼럼은 요소들에 대한 특정 스타일을 가지고 있습니다. 예를 들어, 아톰 요소는 상하 여백이 없지만 12px의 패딩을 가집니다. 아톰 요소 뒤에 문단이 오면, 아톰의 패딩이 제거되고 여백이 12px로 설정됩니다. 인라인 요소는 너비가 620px로 제한됩니다.
루프 역할을 하는 피규어의 경우, 캡션은 z-index 6으로 위치가 지정됩니다. 루프 버튼은 너비 32px로 스타일링되며, 특정 여백과 함께 오른쪽 하단에 정렬됩니다. 캡션 버튼은 z-index 100의 높은 값을 가집니다.
셀프 호스팅 비디오 요소는 너비를 100%로 설정하고, 620px로 제한되며, 12px 여백을 가진 블록으로 표시됩니다. 비디오와 그 컨테이너도 최대 620px까지 전체 너비를 차지하며 중앙에 정렬됩니다. 비디오가 임머시브인 경우, 너비 제한과 여백이 제거되어 완전히 확장됩니다. 더 큰 화면에서는 임머시브 비디오가 너비 1140px로 확장되고 음수 왼쪽 여백을 가지며, 더 큰 크기에서는 1300px 너비와 더 큰 음수 여백을 가집니다.
색상 변수들은 데이트라인 회색, 헤더 테두리, 캡션 텍스트, 피처 레드 등 다양한 테마 색상을 정의합니다. 다크 모드에서는 일부 색상이 다크 테마 팔레트에 맞게 조정됩니다.
기사 본문 내에서, 아톰이나 수평선 뒤에 오는 첫 번째 문단은 추가 상단 패딩을 가집니다. 또한, 아톰 뒤에 오는 첫 번째 문단의 첫 글자는 스타일링되지만, 여기서는 구체적인 스타일링이 자세히 설명되어 있지 않습니다.이 CSS 코드는 웹사이트의 여러 섹션에 걸쳐 드롭 캡, 풀쿼트 및 다양한 레이아웃 요소에 대한 스타일을 정의합니다. 드롭 캡은 특정 폰트, 크기 및 색상으로 스타일링되며 왼쪽으로 띄워집니다. 풀쿼트에는 최대 너비가 지정됩니다. 쇼케이스 요소의 경우, 캡션은 정적 위치로 설정되고 전체 너비와 최대 620px 너비를 가집니다.
임머시브 요소는 스크롤바를 제외한 전체 뷰포트 너비를 차지하도록 설정됩니다. 71.24em 미만의 화면에서는 최대 너비가 978px로 조정되며, 캡션 패딩은 화면 크기에 따라 달라집니다. 중간 화면(46.25em ~ 61.24em)에서는 최대 너비가 738px입니다. 작은 화면(46.24em 미만)에서는 임머시브 요소에 음수 왼쪽 여백이 주어져 뷰포트 가장자리까지 확장되며, 캡션 패딩이 그에 맞게 조정됩니다.
더 큰 화면(61.25em 이상)의 경우, 가구 래퍼에 그리드 레이아웃이 사용되어 제목, 헤드라인, 스탠드퍼스트, 메타, 초상화 섹션에 대한 정의된 행을 가진 두 열 구조를 생성합니다. 헤드라인 요소의 첫 번째 자식에 상단 테두리가 추가되며, 메타 섹션의 위치는 절대값으로 설정됩니다.가구 래퍼는 스탠드퍼스트 콘텐츠의 위치를 상대적으로 설정하고 상단 패딩을 2픽셀로, 오른쪽 여백을 없앱니다. 스탠드퍼스트 내부의 주요 콘텐츠 영역은 하단 여백이 4픽셀입니다. 스탠드퍼스트 내부의 목록 항목은 20픽셀의 글꼴 크기를 사용합니다. 스탠드퍼스트 내부의 링크(목록 항목 내부의 링크 포함)는 테두리 없음, 배경 이미지 없음, 6픽셀 오프셋의 밑줄로 스타일링되며, 밑줄 색상에 맞춤 색상을 사용합니다. 호버 시 밑줄 색상이 새로운 필러 색상으로 변경됩니다.
스탠드퍼스트의 첫 번째 문단은 상단 테두리를 가지며 하단 패딩이 없습니다. 더 큰 화면(61.25em 이상)의 경우, 화면 너비가 최소 71.25em이면 상단 테두리가 제거됩니다. 최소 61.25em 너비의 화면에서는 인라인 피규어에 왼쪽 여백이 없고 최대 너비가 630픽셀입니다.
71.25em 이상의 화면에서는 가구 래퍼가 특정 열과 행을 가진 그리드 레이아웃을 사용합니다. 메타 섹션 앞에 너비 540픽셀의 장식선이 나타납니다. 스탠드퍼스트의 문단에는 상단 테두리가 없으며, 스탠드퍼스트 콘텐츠 앞에 수직선이 추가됩니다. 더 큰 화면(81.25em 이상)의 경우, 그리드가 더 많은 열과 행으로 조정되고, 메타 앞의 장식선이 620픽셀로 확장되며, 스탠드퍼스트 앞의 수직선이 약간 이동합니다.
기사 헤더나 제목 섹션의 레이블은 상단 패딩이 2픽셀입니다. 헤드라인은 굵은 글꼴 두께, 최대 너비 620픽셀, 글꼴 크기 32픽셀을 사용합니다. 더 큰 화면(71.25em 이상)에서는 헤드라인이 최대 너비 540픽셀과 글꼴 크기 50픽셀로 조정됩니다.
중간 화면(46.25em 이상)의 경우, 키라인 또는 라인 요소는 오른쪽 여백이 없습니다. 더 큰 화면(61.25em 이상)에서는 이러한 라인이 숨겨집니다. 라인은 스트로크에 맞춤 CSS 변수 색상을 사용합니다.이 CSS 코드는 웹페이지 레이아웃, 특히 가구 테마 래퍼에 대한 스타일을 정의합니다. 메타 정보, 스탠드퍼스트 텍스트, 주요 미디어, 캡션과 같은 요소에 대한 다양한 속성을 설정합니다. 스타일에는 여백, 패딩, 색상 및 위치 조정이 포함되며, 미디어 쿼리를 사용하여 다양한 화면 크기에 대한 특정 규칙이 있습니다. 디자인은 `--darkBackground` 및 `--headerBorderColor`와 같은 색상에 맞춤 CSS 변수를 사용하며, 요소가 뷰포트 너비에 따라 숨겨지거나 표시되도록 합니다. 래퍼는 어두운 배경을 가지며 모바일부터 데스크톱까지 다양한 기기에 대한 반응형 동작을 포함합니다.이 CSS 코드는 furniture-wrapper 클래스 내부의 요소들을 스타일링합니다. 헤드라인(h1)은 굵고 연한 회색(#dcdcdc)입니다. 헤드라인의 피규어는 상단 여백이 없고 작은 하단 여백을 가집니다.
71.25em보다 넓은 화면의 경우, 메타 섹션 앞에 색상이 있는 선이 나타납니다. 메타 섹션의 텍스트와 요약은 연한 회색입니다. 소셜 미디어 링크와 버튼은 색상 테두리를 가지며, 텍스트와 아이콘에 특정 색상을 사용하며, 호버 시 어두운 배경색으로 변경됩니다.
메타 섹션의 링크는 특정 색상을 사용하며 호버 시 일치하는 밑줄과 함께 유지됩니다. 스탠드퍼스트 섹션에서 링크는 연한 회색 밑줄로 스타일링되며 호버 시 변경되며, 문단 텍스트는 연한 회색입니다. 더 넓은 화면에서는 첫 번째 문단이 상단 테두리를 가질 수도 있고 잃을 수도 있습니다. 스탠드퍼스트의 목록 항목도 연한 회색입니다.
71.25em보다 넓은 화면의 경우, 스탠드퍼스트 앞에 선이 나타납니다. 46.25em보다 넓은 화면에서는 래퍼에 어두운 배경과 오른쪽 테두리가 생깁니다.가구 래퍼는 의사 요소를 사용하여 측면 테두리를 생성합니다. `:before` 요소는 왼쪽에 위치하며 어두운 배경과 왼쪽 테두리를 가지고, 너비와 왼쪽 위치는 뷰포트 너비, 스크롤바 너비 및 738px의 고정 기준 너비를 기반으로 계산됩니다. `:after` 요소는 오른쪽 테두리와 함께 오른쪽에서 이를 반영합니다.
더 큰 화면(최소 너비 61.25em)의 경우, 계산이 978px 기준 너비로 조정됩니다. 이 패턴은 더 큰 중단점인 71.25em(기준 1138px) 및 81.25em(기준 1298px)에 대해 계속됩니다.
래퍼 내부에서, SVG 스트로크 및 특정 소셜/메타 요소 테두리는 색상에 맞춤 CSS 변수 `--headerBorderColor`를 사용하도록 설정됩니다.
기사 본문에서, 레벨 2 제목(`h2`)은 글꼴 두께가 200이지만, `strong` 요소를 포함하면 두께가 700으로 증가합니다.
마지막으로, 여러 `@font-face` 규칙이 정의되어 가디언의 자산 서버
