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