이 CSS 코드는 "Guardian Headline Full"이라는 사용자 정의 글꼴 패밀리를 정의하며, 여러 글꼴 두께와 스타일을 포함합니다. 라이트, 레귤러, 미디엄, 세미볼드 두께가 각각 일반체와 이탤릭체 버전으로 제공됩니다. 글꼴은 다양한 브라우저 간 호환성을 보장하기 위해 Guardian 서버에서 WOFF2, WOFF, TrueType 형식으로 로드됩니다.
@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://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) {
}
인터랙티브 콘텐츠 칼럼에는 특정 위치와 z-인덱스로 왼쪽 테두리가 추가됩니다. 더 큰 화면에서는 테두리의 왼쪽 위치가 약간 조정됩니다. 이러한 칼럼 내에서 아토믹 요소에는 상하 여백이 없지만 패딩이 포함됩니다. 단락이 아토믹 요소 앞에 오는 경우 패딩이 제거되고 대신 여백이 추가됩니다. 인라인 요소는 최대 너비로 제한됩니다.
중간 화면 이상에서 인라인 피규어의 경우 최대 너비가 설정됩니다. 루프 피규어를 포함하는 미디어 섹션에서 캡션은 위에 레이어링되고, 루프 버튼은 특정 크기와 정렬로 스타일링됩니다. 캡션 버튼은 상단에 배치됩니다.
본문 섹션에서 자체 호스팅 비디오 아일랜드는 최대 너비까지 전체 너비를 차지하며 중앙에 마진이 적용됩니다. 이러한 아일랜드 내의 루프 피규어와 비디오도 전체 너비를 차지합니다. 몰입형 비디오 요소의 경우 너비 제약이 제거되고 마진이 조정됩니다. 더 큰 화면에서는 몰입형 비디오의 너비가 확장되고 왼쪽으로 이동하며, 캡션도 그에 따라 들여쓰기됩니다.
색상 변수는 데이트라인, 테두리, 캡션, 피처 색상과 같은 다양한 UI 요소를 정의하며, 필러 색상은 소제목, 풀쿼트, 블록쿼트에 영향을 미칩니다. 다크 모드에서는 이러한 색상이 다크 테마에 맞게 조정됩니다.
콘텐츠 칼럼 내의 아토믹 요소에는 패딩이 없습니다. 특정 규칙은 기사, 인터랙티브 콘텐츠, 댓글, 피처와 같은 다양한 콘텐츠 영역에서 특정 요소나 수평선 이후의 첫 번째 단락을 조정하여 적절한 간격과 레이아웃을 보장합니다.
사인인 게이트 또는 수평선(마지막 제외) 이후의 첫 번째 단락에는 상단 패딩 14픽셀이 적용됩니다.
기사 본문, 인터랙티브 콘텐츠, 댓글, 피처 또는 `data-gu-name`이 "body"인 요소와 같은 다양한 콘텐츠 영역에서 아톰, 사인인 게이트 또는 수평선(마지막 제외)과 같은 특정 요소를 따르는 첫 번째 단락의 첫 글자에 특별한 드롭 캡 스타일을 적용합니다. 이 스타일은 특정 헤드라인 글꼴을 사용하고, 글꼴 크기를 111px, 줄 높이를 92px로 설정하며, 왼쪽으로 플로팅하고, 대문자로 만들고, 오른쪽 여백 8px을 추가하며, 텍스트 상단에 정렬하고, 드롭 캡용 사용자 정의 변수로 색상을 지정합니다.
이러한 콘텐츠 영역에서 수평선 바로 뒤에 오는 단락에는 상단 패딩이 없어야 합니다.
이러한 콘텐츠 영역 내의 풀쿼트는 최대 너비 620픽셀로 제한됩니다.
메인 콘텐츠, 피처 기사, 표준 기사 및 댓글 섹션의 쇼케이스 요소에 대한 캡션은 정적으로 위치하며 최대 620픽셀까지 전체 너비를 차지합니다.
몰입형 요소는 스크롤바를 고려하여 전체 뷰포트 너비를 차지합니다. 더 큰 화면(최대 71.24em)에서는 최대 너비가 978px이며, 캡션 패딩이 다른 중단점에서 조정됩니다. 중간 화면(46.25em에서 61.24em 사이)에서는 최대 너비가 738px입니다. 더 작은 화면(46.24em 미만)에서는 몰입형 요소가 왼쪽 가장자리에 맞춰지고 마진과 캡션 패딩이 조정됩니다.
더 넓은 화면(61.25em 이상)의 경우, 가구 래퍼는 제목, 헤드라인, 메타데이터, 스탠드퍼스트, 초상화와 같은 요소를 배치하기 위해 정의된 열과 행이 있는 CSS 그리드 레이아웃을 사용합니다.
CSS 스타일은 기사 구성 요소의 레이아웃 래퍼를 정의합니다. 헤드라인에는 상단 테두리가 있으며, 더 큰 화면에서 크기가 32px에서 50px로 조정되고 최대 너비도 변경됩니다. 메타 정보에는 넓은 화면에서 장식용 상단 라인이 포함됩니다. 스탠드퍼스트 섹션에는 사용자 정의 색상의 밑줄이 있는 링크가 있으며, 이 색상은 호버 시 변경됩니다. 또한 첫 번째 단락에는 더 작은 화면에서 상단 테두리가 있으며, 더 큰 화면에서는 제거됩니다. 넓은 화면에서는 스탠드퍼스트에 수직 구분선이 나타납니다.
71.25em 이상 및 81.25em 이상의 화면에 대한 레이아웃 그리드가 정의되어 있으며, 제목, 헤드라인, 메타, 스탠드퍼스트, 초상화 영역과 같은 요소의 위치를 지정하기 위한 열 및 행 템플릿이 포함됩니다. 피규어에는 특정 마진과 최대 너비가 있습니다. 전반적으로 스타일은 기사 헤더 및 소개 콘텐츠의 반응형 표현을 제어합니다.
740px보다 넓은 화면의 경우, `.keyline-4` 클래스 또는 `[data-gu-name="lines"]` 속성을 가진 요소를 숨깁니다. `.furniture-wrapper` 내에서 이러한 요소 내부의 SVG 스트로크를 사용자 정의 색상 변수로 스타일링합니다.
중간 화면 이상에서는 ID `#meta` 또는 속성 `[data-gu-name="meta"]`를 가진 요소의 오른쪽 여백을 제거합니다.
메타 섹션 내에서 소셜 링크, 댓글 요소 및 해당 자식 스팬의 테두리 색상을 사용자 정의 변수로 설정합니다. 또한 특정 컨테이너 내의 `gu-island` 요소를 숨깁니다.
스탠드퍼스트 섹션의 경우, 위치와 패딩을 조정하고 왼쪽 오프셋을 추가합니다. 중간 화면에서는 작은 상단 패딩을 추가합니다. 내부 단락을 일반 글꼴 두께, 크기 20px 및 하단 패딩으로 스타일링합니다.
메인 미디어 영역은 상대적으로 위치하며 'portrait' 그리드 영역에 배치되고 특정 마진이 지정됩니다. 내부 div가 전체 너비를 차지하도록 합니다. 더 큰 화면에서는 하단 여백을 제거합니다. 더 작은 화면에서는 너비와 왼쪽 여백을 조정하며, 중간-작은 화면에 대한 추가 조정이 있습니다.
피규어 캡션을 하단에 사용자 정의 배경 및 텍스트 색상으로 표시하도록 스타일링하고 기본 너비와 마진을 재정의합니다. 내부의 첫 번째 스팬을 숨기고 두 번째 스팬을 표시하며 너비를 제한합니다. 중간 화면에서는 캡션 패딩을 조정합니다. 숨겨진 상태는 캡션을 투명하게 만듭니다.
캡션 버튼은 오른쪽 하단에 배치되며 원형 배경과 스케일된 아이콘으로 스타일링되고, 중간 화면에서 위치가 조정됩니다.
매우 큰 화면의 인터랙티브 기사 칼럼의 경우, 의사 요소의 위치와 높이를 조정합니다. 또한 레벨 2 헤딩의 너비를 제한합니다.
iOS 또는 Android의 경우, 다크 테마 색상 변수 세트를 정의합니다. 다크 모드에서는 기본 색상 변수를 조정합니다.
iOS 기기의 경우, 다양한 기사 컨테이너 내의 특정 요소 뒤에 오는 첫 번째 단락을 대상으로 하고 첫 글자를 스타일링합니다.
iOS 및 Android에서 사인인 게이트 뒤에 오는 첫 번째 단락 또는 iOS 및 Android의 다양한 기사 컨테이너 내의 요소 아톰 뒤에 오는 첫 번째 단락의 첫 글자는 보조 필러 변수(기본값 검정)를 사용하여 색상이 지정되어야 합니다.
iOS 및 Android 모두에서 피처, 표준 및 댓글 기사 컨테이너의 기사 헤더 높이는 0으로 설정되어야 합니다.
두 플랫폼 모두에서 이러한 기사 컨테이너 내의 가구 래퍼는 상단 패딩 4픽셀과 수평 패딩 10픽셀을 가져야 합니다.
가구 래퍼 내의 레이블은 굵게, 지정된 글꼴 스택을 사용하며, 새로운 필러 변수에서 색상을 가져오고 대문자로 표시되어야 합니다.
가구 래퍼 내의 헤드라인(h1)은 크기 32픽셀, 굵게, 하단 패딩 12픽셀, 색상 #121212이어야 합니다.
가구 래퍼 내의 이미지 피규어는 상대적으로 위치하며, 상단 여백 14픽셀, 왼쪽 여백 -10픽셀, 뷰포트 너비에서 스크롤바 너비를 뺀 너비, 자동 높이를 가져야 합니다.
iOS의 피처 기사의 경우, 이러한 이미지 피규어 내부의 내부 피규어 요소, 이미지 및 링크도 이러한 스타일링 규칙을 따라야 합니다.
iOS 및 Android 기기에 대해 다음 CSS 규칙이 적용됩니다:
기사 컨테이너 내 이미지의 경우:
- 배경을 투명하게 설정합니다.
- 너비를 스크롤바 너비를 뺀 전체 뷰포트 너비와 동일하게 만듭니다.
- 높이가 자동으로 조정되도록 합니다.
기사 스탠드퍼스트 섹션의 경우:
-
