이 CSS 코드는 "Guardian Headline Full"이라는 사용자 정의 글꼴 패밀리를 정의하며, 여러 스타일과 두께를 포함합니다. 라이트, 레귤러, 미디엄, 세미볼드 버전이 각각 일반체와 이탤릭체 스타일로 제공됩니다. 글꼴 파일은 온라인에 호스팅되어 있으며 WOFF2, WOFF, TrueType(TTF) 세 가지 형식으로 제공됩니다.
@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-인덱스로 왼쪽 테두리가 추가됩니다. 더 큰 화면에서는 테두리의 왼쪽 위치가 약간 조정됩니다. 이 칼럼 내에서 아토믹 요소는 상하 여백이 없지만 패딩을 포함합니다. 단락이 아토믹 요소 앞에 오면 패딩이 제거되고 대신 여백이 추가됩니다. 인라인 요소는 최대 너비 620px로 제한됩니다.
루프 역할을 하는 피규어의 경우, 캡션은 더 높은 z-인덱스로 설정되고 루프 버튼은 특정 크기와 정렬로 스타일링됩니다. 셀프 호스팅 비디오 요소는 전체 너비로 설정되며 620px로 제한되고 상하 여백을 포함합니다. 몰입형 비디오 레이아웃의 경우 너비 제약이 제거되고 여백이 조정됩니다. 더 넓은 화면에서는 몰입형 비디오의 너비가 확장되고 왼쪽으로 이동합니다.
색상 변수는 데이트라인, 테두리, 캡션 및 피처 요소의 스타일을 정의합니다. 다크 모드에서는 텍스트와 아이콘 색상이 다크 테마에 맞게 조정됩니다. 콘텐츠 칼럼 내의 아토믹 요소에는 패딩이 없습니다. 특정 규칙은 특정 요소나 수평선 이후의 첫 번째 단락이 기사, 댓글, 피처와 같은 다양한 콘텐츠 섹션에서 적절하게 스타일링되도록 보장합니다.
로그인 게이트나 수평선(마지막 제외) 이후 첫 번째 단락은 상단 패딩 14픽셀을 가집니다.
다양한 콘텐츠 본문 내에서 초기 요소, 로그인 게이트 또는 수평선(마지막 제외) 이후 첫 번째 단락의 첫 글자에 특정 드롭 캡 스타일을 적용합니다. 이는 가디언 헤드라인 글꼴을 사용하며, 볼드체, 크기 111픽셀, 줄 높이 92픽셀입니다. 왼쪽으로 플로팅되며, 대문자, border-box 사이징, 오른쪽 여백 8픽셀, 상단 정렬, 사용자 정의 색상 변수를 사용합니다.
이 콘텐츠 본문 내에서 수평선 바로 뒤에 오는 단락은 상단 패딩이 없습니다.
이 콘텐츠 본문 내의 풀쿼트는 최대 너비 620픽셀입니다.
메인 콘텐츠 및 기사 컨테이너의 쇼케이스 요소에 대한 캡션은 정적으로 위치하며, 최대 620픽셀까지 전체 너비를 차지합니다.
몰입형 요소는 스크롤바를 고려하여 전체 뷰포트 너비에 걸칩니다. 더 큰 화면(최대 71.24em)에서는 978픽셀로 제한되며, 캡션 패딩이 다른 중단점에서 조정됩니다. 중간 화면(46.25em ~ 61.24em)에서는 최대 너비가 738픽셀입니다. 더 작은 화면(46.24em 미만)에서는 조정된 여백과 캡션 패딩으로 왼쪽 가장자리에 정렬됩니다.
대형 화면(61.25em 이상)의 가구 래퍼의 경우, 헤드라인 구성 요소를 배치하기 위해 정의된 열과 행이 있는 그리드 레이아웃이 사용됩니다.
CSS 스타일은 웹페이지의 헤더 섹션인 "furniture-wrapper"의 레이아웃과 외관을 정의합니다. 테두리, 간격, 타이포그래피 및 다양한 화면 크기에 맞게 조정되는 그리드 구조를 설정합니다.
더 큰 화면(71.25em 이상)의 경우, 제목, 헤드라인, 메타 정보, 스탠드퍼스트(부제), 포트레이트와 같은 요소에 대한 특정 열과 행이 있는 복잡한 그리드 레이아웃이 설정됩니다. 테두리와 선과 같은 시각적 요소는 특정 중단점에서 조정되거나 제거됩니다. 헤드라인 글꼴 크기가 증가하고 최대 너비가 더 큰 화면에서 변경됩니다. 스탠드퍼스트 내의 링크는 호버 시 색상이 변경되는 밑줄로 스타일링됩니다.
740픽셀보다 넓은 화면에서는 `.keyline-4` 클래스 또는 `[data-gu-name="lines"]` 속성을 가진 요소를 숨깁니다. `.furniture-wrapper` 내에서 이러한 요소 내의 SVG 스트로크에 `--headerBorder` 색상 변수를 사용하도록 스타일링합니다.
740픽셀보다 넓은 화면에서는 `.furniture-wrapper` 내의 `#meta` ID 또는 `[data-gu-name="meta"]` 속성을 가진 요소에서 오른쪽 여백을 제거합니다. 이러한 메타 요소의 경우, 소셜 링크, 댓글 섹션 및 해당 자식 스팬의 테두리 색상을 `--headerBorder`로 설정합니다. 또한 `.content__meta-container_dcr` 내의 모든 `gu-island` 구성 요소를 숨깁니다.
스탠드퍼스트 섹션(클래스, ID 또는 `data-gu-name`으로 선택)에 대해 음수 왼쪽 여백과 일치하는 패딩을 적용하고 위치를 상대적으로 설정합니다. 더 넓은 화면(740px 이상)에서는 작은 상단 패딩을 추가합니다. 스탠드퍼스트 내 단락을 글꼴 두께 400, 크기 20픽셀, 하단 패딩 14픽셀로 스타일링합니다.
메인 미디어 영역(ID 또는 `data-gu-name`으로 선택)은 상대적으로 위치하며, 상단 여백 없음, 작은 하단 여백, "portrait" 그리드 영역에 배치됩니다. 내부 div가 전체 너비를 차지하고 수평 여백이 없도록 합니다. 매우 넓은 화면(980px 이상)에서는 하단 여백을 제거합니다. 더 작은 화면(740px 미만)에서는 스크롤바를 뺀 전체 뷰포트 너비로 설정하고 음수 왼쪽 여백을 적용합니다. 480px에서 740px 사이의 화면에서는 이 음수 왼쪽 여백을 -20px로 증가시킵니다.
피규어 캡션을 하단에 절대적으로 위치하도록 스타일링하고, CSS 변수에서 특정 패딩과 배경/텍스트 색상을 설정합니다. 너비를 100%로 설정하고 최대 너비 없음, 하단 여백 제거, 최소 높이 설정합니다. 캡션 내의 스팬 색상을 `--headerBorder`로 설정하고, 해당 SVG를 동일한 색상으로 채웁니다. 첫 번째 스팬을 숨기고 두 번째 스팬을 블록 요소로 표시하며 너비를 90%로 제한합니다. 480px보다 넓은 화면에서는 캡션의 수평 패딩을 증가시킵니다. 캡션의 `.hidden` 클래스는 불투명도를 0으로 설정합니다.
캡션 버튼은 블록으로 표시되며, 하단 오른쪽 근처에 절대적으로 위치하고 높은 z-인덱스를 가집니다. 원형 배경, 테두리 없음, 특정 패딩을 가집니다. SVG 아이콘을 약간 축소합니다. 480px보다 넓은 화면에서는 오른쪽 위치를 조정합니다. 매우 넓은 화면(1140px 이상)에서는 `.content__main-column--interactive` 의사 요소의 상단과 높이를 조정합니다. 또한 이 칼럼 내 h2 제목의 최대 너비를 620픽셀로 제한합니다.
본문에 `.ios` 또는 `.android` 클래스가 있는 루트 요소의 경우, 다크 모드 색상 변수 세트를 정의합니다. 다크 색상 구성표 선호도에서 `--new-pillar-colour` 변수를 그에 맞게 업데이트합니다.
iOS 장치에서 다양한 기사 컨테이너의 특정 초기 요소 이후 첫 번째 단락을 대상으로 하고 해당 첫 글자를 스타일링합니다. 이는 해당 첫 요소와 단락 사이에 로그인 게이트 요소가 나타나는 경우에도 적용됩니다.
로그인 게이트 이후 첫 번째 단락, 또는 요소 아톰 이후 로그인 게이트가 오는 경우의 첫 글자는 보조 필러 변수를 사용하여 색상이 지정되어야 합니다. 이는 iOS와 Android 모두에서 피처, 스탠다드, 댓글 기사 컨테이너에 적용됩니다.
iOS와 Android에서, 피처, 스탠다드, 댓글 기사 컨테이너의 기사 헤더 높이는 0으로 설정되어야 합니다.
이 컨테이너의 가구 래퍼는 상단 패딩 4픽셀과 수평 패딩 10픽셀을 가져야 합니다. 내부 콘텐츠 레이블은 볼드, 세리프 글꼴 패밀리를 사용하고, 새로운 필러 변수로 색상이 지정되며, 텍스트가 대문자화되어야 합니다.
가구 래퍼 내의 헤드라인은 크기 32픽셀, 볼드체, 하단 패딩 12픽셀, 색상 #121212을 사용해야 합니다.
가구 래퍼 내의 이미지 요소는 상대적으로 위치하며, 상단 여백 14픽셀, 왼쪽 여백 -10픽셀, 뷰포트 너비에서 스크롤바 너비를 뺀 계산된 너비, 자동 높이를 가져야 합니다. 이는 iOS의 피처 기사 컨테이너 내부의 내부 피규어, 이미지 및 링크 요소에 적용됩니다.
iOS 및 Android 장치의 경우, 기사 컨테이너 내의 이미지는 투명한 배경으로 설정되며, 스크롤바 너비를 뺀 전체 뷰포트 너비와 동일한 너비와 자동 높이를 가집니다.
이 컨테
