이 CSS 코드는 "Guardian Headline Full"이라는 사용자 정의 글꼴 패밀리를 여러 글꼴 두께와 스타일로 정의합니다. 브라우저가 다운로드하여 사용할 수 있도록 다양한 형식(WOFF2, WOFF, TrueType)의 글꼴 파일과 해당 온라인 위치를 지정합니다. 이 글꼴에는 light(300), regular(400), medium(500), semibold(600) 두께가 포함되며, 각각 일반 및 이탤릭 스타일을 가지고 있습니다.
@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;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-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/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://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));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width)) !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 {
left: -10px;
}
}
인터랙티브 메인 컬럼의 경우 콘텐츠 앞에 왼쪽 테두리가 추가되며, 왼쪽으로 11픽셀 위치합니다. 이 컬럼 내 요소들은 상하 여백이 없지만 상하에 각각 12픽셀의 패딩을 포함합니다. 단락 뒤에 요소가 오는 경우 패딩이 제거되고 대신 12픽셀의 여백이 적용됩니다. 인라인 요소는 최대 너비 620픽셀로 제한되며, 이는 61.25em보다 넓은 화면의 인라인 피규어에도 적용됩니다.
사용자 정의 속성은 데이트라인, 헤더 테두리, 캡션 텍스트, 배경 등 다양한 요소의 색상을 정의하며, 피처 색상은 빨간색으로 설정되고 새로운 필러 색상은 기본 또는 피처 색상으로 기본 설정됩니다. atom 클래스를 가진 요소에는 패딩이 없습니다.
다양한 콘텐츠 영역에서 특정 요소 또는 수평 구분선 뒤에 오는 첫 번째 단락에는 14픽셀의 상단 패딩이 추가됩니다. 이러한 단락의 첫 글자는 특정 색상의 크고 굵은 대문자로 스타일링되며, 왼쪽으로 떠서 마진과 수직 정렬을 가집니다.
또한, 이러한 영역에서 수평 구분선 바로 뒤에 오는 단락에는 상단 패딩이 없습니다. 특정 콘텐츠 영역 내 풀쿼트는 최대 너비 620픽셀을 가집니다.
메인 콘텐츠 및 아티클 컨테이너의 쇼케이스 요소 캡션은 정적 위치에 전체 너비로 배치되며, 역시 620픽셀로 제한됩니다.
이머시브 요소는 스크롤바를 제외한 전체 뷰포트 너비를 차지합니다. 71.24em 너비까지의 화면에서 이러한 요소는 978픽셀로 제한되며, 작은 화면에서는 캡션 패딩이 10px, 중간 화면에서는 20px입니다. 46.25em에서 61.24em 사이에서는 최대 너비가 738픽셀입니다. 46.24em 미만에서는 이머시브 요소가 왼쪽 가장자리에 정렬되며 조정된 여백과 중간 화면에서 20px 캡션 패딩을 가집니다.
더 큰 화면(61.25em 이상)의 가구 래퍼의 경우 정의된 열과 행을 사용하여 그리드 레이아웃이 적용됩니다. 헤드라인은 상단 테두리를 가지며, 메타 섹션에는 상단 패딩이 있고, 스탠드퍼스트 요소에는 호버 시 색상이 변하는 밑줄을 가진 스타일된 링크가 포함됩니다. 처음에는 스탠드퍼스트의 첫 번째 단락에 상단 테두리가 있지만, 더 넓은 화면(71.25em 이상)에서는 제거됩니다. 래퍼 내 피규어에는 하단 여백이 없고 왼쪽 오프셋이 있으며, 인라인 요소는 630픽셀로 제한됩니다. 가장 큰 화면에서는 레이아웃을 개선하기 위해 그리드가 열 구조를 조정합니다.
레이아웃은 다양한 화면 크기에 대해 특정 열과 행을 사용하는 그리드를 사용합니다. 더 큰 화면에서는 제목, 헤드라인, 메타 섹션에 대해 세 개의 동일한 열로, 그 다음 스탠드퍼스트에 대해 다섯 개, 초상화에 대해 여덟 개의 열로 조정되며 행 높이는 분수로 설정됩니다. 메타 섹션 위에 얇은 선이 나타나고, 스탠드퍼스트에는 왼쪽에 수직선이 있습니다.
헤드라인은 굵게 표시되며 화면에 따라 크기와 너비가 변경됩니다: 작은 화면에서는 최대 620px 너비와 32px 글꼴, 큰 화면에서는 540px 너비와 50px 글꼴입니다. 일부 장식용 선은 큰 화면에서 숨겨지며, 소셜 공유 및 댓글 요소는 헤더 색상과 일치하는 테두리를 가집니다.
스탠드퍼스트 텍스트는 일반 두께, 20px 크기로 하단 패딩과 약간 왼쪽으로 이동된 왼쪽 패딩을 가집니다. 메인 미디어 이미지는 너비를 채우고 다양한 화면 크기에 대해 여백을 조정하며, 캡션은 배경색과 사용자 정의 텍스트 색상으로 하단에 위치합니다. 매우 작은 화면에서 미디어는 스크롤바를 제외한 전체 뷰포트 너비를 차지합니다.
가구 래퍼는 어두운 배경을 설정하고 다양한 화면 크기에 대해 여백과 패딩을 조정합니다. 더 큰 화면에서는 장식용 사이드바를 추가합니다. 헤드라인은 굵은 연한 회색 텍스트로 스타일링되며, 메타 정보도 유사한 색상을 사용합니다. 소셜 미디어 버튼은 호버 시 대비를 위해 텍스트와 배경 색상을 전환하는 독특한 색상을 특징으로 합니다. 캡션은 기본적으로 숨겨져 있지만 버튼으로 토글할 수 있으며, 다양한 요소는 화면 너비 및 기타 조건에 따라 가시성과 레이아웃을 적응시킵니다.
"furniture-wrapper" 클래스를 가진 요소와 그 자식 요소들은 특정 스타일링 규칙을 가집니다:
- 메타 섹션 링크는 필러 색상 또는 다크 모드 피처에 대한 사용자 정의 속성을 사용하여 색상이 지정되며, 호버 시에도 텍스트와 밑줄에 동일한 색상이 적용됩니다.
- 스탠드퍼스트 링크는 테두리가 없고, 텍스트에 필러 색상 또는 다크 모드 피처를 사용하며, 배경 이미지를 제거하고, 헤더 테두리 색상으로 6px 오프셋을 가진 밑줄을 특징으로 합니다. 호버 시 밑줄 색상이 필러 색상 또는 다크 모드 피처로 변경됩니다.
- 스탠드퍼스트 단락과 목록 항목은 연한 회색(#dcdcdc)으로 색상이 지정됩니다.
- 더 큰 화면(최소 너비 61.25em)의 경우 스탠드퍼스트의 첫 번째 단락에 상단 테두리가 있지만, 더 큰 중단점(최소 너비 71.25em)에서는 제거됩니다.
- 의사 요소(:before 및 :after)는 어두운 배경과 테두리를 가진 사이드바를 생성하는 데 사용되며, 다양한 화면 크기에 대해 뷰포트 크기와 스크롤바 너비를 기반으로 너비와 위치를 조정합니다.
- 메타 섹션의 키라인과 소셜/댓글 요소는 획과 스타일링에 헤더 테두리 색상을 사용합니다.
댓글 섹션은 헤더의 테두리 색상과 일치하는 테두리 색상을 가집니다.
아티클에서 레벨-2 제목은 200의 가벼운 글꼴 두께를 가집니다. 그러나 레벨-2 제목에 굵은 요소가 포함된 경우 700의 더 무거운 글꼴 두께를 사용합니다.
또한, Guardian Headline Full 글꼴 패밀리는 light, regular, medium, semibold 등 다양한 스타일과 두께로 정의되며, 각각 일반 및 이탤릭 버전으로 사용 가능합니다. 이러한 글꼴은 WOFF2, WOFF, TrueType 형식의 특정 URL에서 소싱됩니다.
이 CSS 코드는 Guardian 웹사이트를 위한 여러 글꼴 패밀리와 그 변형을 정의합니다. "Guardian Headline Full" 글꼴에 대해 다양한 글꼴 두께와 스타일(굵게, 이탤릭, semibold, black 등)을 지정하며, 각각 크로스 브라우저 호환성을 위한 여러 파일 형식(WOFF2, WOFF, TTF)을 가집니다. 추가로 "Guardian Titlepiece" 글꼴을 굵게 포함합니다.
이 코드는 또한 색상에 대한 CSS 사용자 정의 속성(변수)을 설정하며, iOS 및 Android 기기에서 다크 모드에 맞게 조정합니다. 다크 모드 환경설정을 처리하는 미디어 쿼리를 포함하고 iOS 및 Android 플랫폼의 아티클 컨테이너에서 atom이나 사인인 게이트와 같은 특정 요소 뒤에 오는 단락의 첫 글자에 특정 스타일링을 적용합니다.
Android 및 iOS 기기의 경우 표준 및 댓글 아티클에서 첫 번째 단락의 첫 글자는 보조 필러 색상으로 스타일링됩니다. 아티클 헤더 높이는 0으로 설정되는 반면, 가구 래퍼에는 상단에 4px, 측면에 10px의 패딩이 있고 하단에는 없습니다.
가구 래퍼 내 콘텐츠 레이블은 새로운 필러 색상의 Guardian 헤드라인 패밀리에서 굵고 대문자로 된 글꼴을 사용합니다. 헤드라인은 32px, 굵게, 12px 하단 패딩과 어두운 회색을 가집니다.
가구 래퍼의 이미지는 상대적으로 위치하며, 상단 여백 14px, 하단 여백 없음, 왼쪽 여백 -10px을 가집니다. 너비는 스크롤바 너비를 제외한 전체 뷰포트를 차지하며 높이는 자동으로 조정됩니다. 이러한 피규어 내부의 내부 피규어 요소, 이미지 및 링크는 동일한 스타일링을 상속받습니다.
Android 기기의 경우 아티클 컨테이너 내 이미지는 투명한 배경을
