이 CSS 코드는 "Guardian Headline Full"이라는 사용자 정의 글꼴 패밀리를 정의하며, 여러 글꼴 두께와 스타일을 포함합니다. 라이트, 레귤러, 미디엄, 세미볼드 두께가 각각 일반체와 이탤릭체 버전으로 포함되어 있습니다. 글꼴은 가디언 서버에서 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://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;
}
}
인터랙티브 콘텐츠 칼럼은 왼쪽 테두리와 요소별 특정 간격을 가집니다. 특정 요소 뒤에 오는 단락은 추가 상단 패딩을 받으며, 이 단락들의 첫 글자는 크고 색상이 있는 드롭 캡으로 스타일링됩니다. 인라인 요소와 피규어는 최대 너비로 제한됩니다. 일관된 테마를 위해 다양한 색상 변수가 정의됩니다.
특정 컨테이너 내 풀쿼트는 최대 620픽셀 너비를 가져야 합니다.
메인 아티클, 피처, 스탠다드 아티클, 코멘트의 쇼케이스 요소 캡션은 정적으로 위치하며 전체 너비를 차지하고 최대 620픽셀 너비를 가집니다.
이머시브 요소는 스크롤바를 제외한 전체 뷰포트 너비를 차지해야 합니다. 더 큰 화면(71.24em 초과)에서는 최대 너비가 978px이며, 캡션 패딩은 다른 브레이크포인트에서 조정됩니다. 중간 화면(46.25em에서 61.24em 사이)에서는 최대 너비가 738px입니다. 더 작은 화면(46.24em 미만)에서는 이 요소들은 왼쪽 마진이 없고 왼쪽 가장자리에 정렬되며, 매우 작은 화면에서는 조정된 마진과 캡션 패딩을 가집니다.
큰 화면(61.25em 초과)의 가구 래퍼의 경우, 정의된 열과 행을 가진 그리드 레이아웃이 사용됩니다. 헤드라인은 상단 테두리를 받고, 메타 정보는 상대적으로 위치하며, 스탠드퍼스트 텍스트는 링크와 간격에 대한 특정 스타일링을 가집니다. 이 래퍼 내 피규어는 조정된 마진을 가지며, 인라인 요소의 경우 최대 너비가 630px입니다. 매우 큰 화면(71.25em 초과)에서는 그리드 템플릿이 더 많은 열을 포함하도록 조정됩니다.
CSS는 페이지 헤더에 대한 그리드 레이아웃을 정의하며, 제목, 헤드라인, 스탠드퍼스트, 메타 정보, 포트레이트 영역을 설정합니다. 다양한 화면 크기에서 이러한 요소에 대한 특정 크기와 위치를 지정합니다. 스타일링에는 테두리, 글꼴, 색상이 포함되며, 소셜 미디어 아이콘, 캡션, 모바일 및 데스크톱 뷰에서의 반응형 동작에 대한 조정이 있습니다.
CSS 코드는 "furniture-wrapper"라는 컴포넌트에 초점을 맞춘 웹페이지 레이아웃 스타일을 정의합니다. 이 컴포넌트는 어두운 배경을 가지며 화면 크기에 따라 마진과 패딩을 조정합니다. 더 큰 화면의 경우 장식용 사이드바를 추가합니다.
이 래퍼 내부에서 아티클 헤더, 헤드라인, 메타 정보(소셜 공유 버튼 등)와 같은 요소들이 스타일링됩니다. 헤드라인은 밝은 회색과 굵은 글꼴을 사용합니다. 소셜 버튼은 테마 색상과 일치하는 색상 테두리를 가지며, 호버 시 단색으로 변경됩니다.
코드는 또한 미디어 요소에 대한 캡션과 캡션 토글 버튼의 가시성을 관리합니다. 전반적으로 스타일은 레이아웃이 반응형이고 다양한 기기에서 시각적으로 일관되도록 보장합니다.
이 CSS 코드는 웹페이지 컴포넌트, 아마도 사이드바나 콘텐츠 래퍼의 스타일을 정의합니다. 텍스트 색상, 링크 모양, 다양한 화면 크기에 대한 레이아웃 조정을 설정합니다. 링크는 특정 색상과 밑줄로 스타일링되며, 레이아웃에는 뷰포트 너비에 따라 조정되는 배경 요소가 포함됩니다. 코드는 또한 컴포넌트 내 다양한 요소에 대한 테두리와 간격을 처리합니다.
CSS 코드는 아티클 요소에 대한 스타일을 정의하고 사용자 정의 글꼴을 로드합니다. 코멘트의 테두리 색상을 헤더 테두리 색상과 일치하도록 설정합니다. 아티클 제목의 경우 기본적으로 가벼운 글꼴 두께를 사용하지만, 제목에 strong 태그가 포함된 경우 굵은 글꼴로 전환합니다.
또한, 가디언 서버에서 다양한 두께와 스타일(라이트, 레귤러, 미디엄, 세미볼드, 각각 일반체와 이탤릭체 버전)의 Guardian Headline Full 글꼴 패밀리를 가져오며, 브라우저 호환성을 위해 여러 파일 형식을 지정합니다.
"Guardian Headline Full" 글꼴은 세미볼드 이탤릭(두께 600), 볼드(두께 700), 볼드 이탤릭(두께 700), 블랙(두께 900), 블랙 이탤릭(두께 900) 스타일로 정의됩니다. 각 스타일은 가디언 서버에 호스팅된 WOFF2, WOFF, TrueType 형식의 글꼴 파일을 포함합니다.
추가적으로, "Guardian Titlepiece" 글꼴은 볼드 스타일(두께 700)로 정의되며, WOFF2, WOFF, TrueType 파일도 포함합니다.
iOS 및 Android 기기의 경우 어두운 배경 색상과 특정 피처 색상이 설정됩니다. 다크 모드에서는 피처 색상이 그에 따라 조정됩니다.
iOS 및 Android에서는 특정 CSS 규칙이 적용되어 특정 아티클 컨테이너 내 첫 번째 단락의 첫 글자를 스타일링하며, `.element-atom`이나 로그인 게이트와 같은 특정 요소를 따릅니다.
Android 기기의 경우, 스탠다드 및 코멘트 아티클의 첫 번째 단락 첫 글자는 보조 필러 색상으로 스타일링됩니다. iOS와 Android 모두에서 아티클 헤더는 숨겨지며, 가구 래퍼는 특정 패딩을 가집니다. 가구 래퍼 내 레이블은 굵고 대문자로 된 글꼴과 새로운 필러 색상을 사용합니다. 헤드라인은 32px, 굵게, 하단 패딩과 어두운 색상으로 설정됩니다. 이미지 피규어는 상대적으로 위치하며, 전체 너비 마진과 자동 높이를 가집니다.
Android 기기의 경우, 아티클 컨테이너 내 이미지는 투명한 배경을 가지며, 스크롤바를 고려한 전체 뷰포트 너비를 차지하고 높이를 자동으로 조정해야 합니다.
iOS와 Android 모두에서, 아티클의 도입 텍스트는 특정 간격을 가져야 합니다: 상단에 4픽셀 패딩과 하단에 24픽셀 패딩, 오른쪽에 10픽셀 음수 마진.
이 도입 텍스트 내 단락은 가디언의 헤드라인 글꼴 패밀리를 사용해야 합니다.
이 텍스트 내 링크는 특정 색상, 텍스트 아래 6픽셀에 위치한 밑줄, 밝은 회색 밑줄 색상으로 스타일링되며 배경 이미지나 테두리가 없습니다. 호버 시 밑줄은 링크의 텍스트 색상과 일치하도록 변경됩니다.
추가적으로, iOS와 Android의 아티클 내 메타데이터 섹션은 특정 스타일링을 받습니다.
이 CSS 코드는 iOS 및 Android 기기의 아티클 컨테이너에 대한 스타일을 설정합니다. 다양한 아티클 유형과 그 구성 요소에 대한 마진, 색상, 패딩, 버튼 표시를 조정합니다.
iOS 및 Android 기기의 경우, 피처, 스탠다드, 코멘트 아티클 컨테이너에서 썸네일이나 이머시브가 아닌 이미지는 마진 없음, 뷰포트에서 24픽셀과 스크롤바 너비를 뺀 너비, 자동 높이로 스타일링됩니다. 캡션은 패딩이 없습니다.
이 컨테이너의 이머시브 이미지는 스크롤바 너비를 뺀 뷰포트 너비로 설정됩니다.
아티클 본문의 프로즈 내에서 인용된 블록쿼트는 사용자 정의 CSS 변수를 사용하여 색상 마커를 표시합니다. 링크는 특정 색상, 6픽셀 오프셋된 밑줄, 변수에서 가져온 장식 색상으로 스타일링됩니다. 호버 시 밑줄 색상은 다른 변수로 변경됩니다.
다크 모드에서, 이 컨테이너의 가구 래퍼 배경 색상은 어두운 회색(#1a1a1a)으로 설정됩니다.
iOS 및 Android 기기의 경우, 피처, 스탠다드, 코멘트 아티클의 콘텐츠 레이블은 새로운 필러 색상을 사용합니다. 이 아티클의 헤드라인은 배경이 없고 헤더 테두리 색상을 사용합니다. 스탠드퍼스트 텍스트와 링크, 작성자 바이라인도 새로운 필러 색상을 채택합니다. 메타 섹션의 아이콘은 동일한 색상으로 스타일링됩니다. 쇼케이스 이미지 캡션은 데이트라인 색상을 사용하며, 아티클 본문 내 인용 텍스트도 동일한 스타일링을 따릅니다.
iOS 및 Android 기기의 경우, 아티클 본문 내 인용 블록의 텍스트 색상은 특정 필러 색상으로 설정됩니다. 추가적으로, 다양한 아티클 본문 컨테이너의 배경 색상은 어두운 배경으로 강제 설정됩니다. iOS에서는 이 컨테이너 내 특정 요소 뒤의
