이 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://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;
}
div#maincontent:focus {
box-shadow: none !important;
}
#init-1, #end-1, #init-2, #end-2, #init-3, #end-3, #init-4, #end-4, #init-5, #end-5,
h2#interactive-slot-1, h2#interactive-slot-2, h2#interactive-slot-3, h2#interactive-slot-4, h2#interactive-slot-5 {
visibility: hidden;
height: 0;
margin: 0;
padding: 0;
border: none;
}
:root {
--fires-bg-color: #0b0a32;
--headline-bg-color: #0b0a32;
--custom-text-color: #fff;
--article-border: #fac99b;
--primary-accent-color: #fac99b;
--secondary-accent-color: #ff5943;
--tertiary-accent-color: #59433c;
--block-quote-fill: var(--primary-accent-color);
--share-button: var(--primary-accent-color);
--share-button-hover: var(--fires-bg-color);
--interactive-block-background-datawrapper: transparent;
--branding-border: var(--tertiary-accent-color);
--section-background: #ffffff;
--interactive-block-background: transparent;
--caption-text: var(--primary-accent-color);
--sub-meta-label-text: #fff;
--dateline: var(--secondary-accent-color);
--sub-meta-background: --fires-bg-color;
--sub-meta-text: var(--primary-accent-color);
--sub-meta-text-hover: var(--fires-bg-color);
--straight-lines: var(--primary-accent-color);
--article-meta-lines: var(--primary-accent-color);
--article-background: var(--fires-bg-color);
}
li:before {
background-color: var(--secondary-accent-color) !important;
}
body {
background-color: var(--fires-bg-color) !important;
}
.content--interactive {
background-color: transparent !important;
}
body .content--interactive h1,
body .article h1 {
order: 1;
text-align: left;
color: #fff;
min-width: 50%;
margin: 0 auto 13px 10px;
color: var(--secondary-accent-color) !important;
}
.content__standfirst p {
margin: 0 auto 13px 10px;
}
.content__label__link span {
margin: 0 0 0 10px !important;
}
컨테이너 요약은 왼쪽 여백이 10픽셀이며 텍스트에 특정 액센트 색상을 사용합니다. data-print-layout 속성이 "hide"로 설정된 요소는 표시되지 않습니다.
인터랙티브 콘텐츠와 아티클 내의 단락 및 주요 제목은 사용자 정의 텍스트 색상을 사용합니다. 주요 제목 글꼴 크기는 3rem으로 설정되며 중간 크기 화면에서는 2.5rem으로 조정됩니다. 보조 제목은 가벼운 글꼴 두께, 32픽셀 크기 및 사용자 정의 텍스트 색상으로 스타일링됩니다.
인터랙티브 콘텐츠의 도입 텍스트는 기본 액센트 색상을 사용하며 최대 너비는 320픽셀입니다. 아티클 및 인터랙티브 콘텐츠 내의 링크는 보조 액센트 색상으로 색상이 지정됩니다. 제목 레이블 링크도 기본 액센트 색상을 사용합니다.
본문은 텍스트, 배경, 선, 버튼, 강조 표시 및 특정 브랜드 색상에 대한 CSS 사용자 정의 속성을 사용하여 포괄적인 색상 체계를 정의합니다. 전체 페이지 배경은 사용자 정의 변수로 설정됩니다.
아티클 헤더와 본문은 투명한 배경을 가집니다. 인터랙티브 콘텐츠의 주요 열은 너비를 조정하고 기본 여백을 제거합니다. 첫 번째 그림과 첫 번째 아톰 요소는 색상이 지정된 하단 테두리를 가집니다.
주요 인터랙티브 아티클 컨테이너는 수평 스크롤 없이 전체 뷰포트 너비를 차지하며 특정 그리드 영역을 사용합니다. 더 큰 화면에서는 다중 열 그리드 레이아웃을 사용합니다. 아티클 본문은 전체 그리드를 차지하며 오버플로를 숨깁니다.
테두리 요소는 숨겨지며 주요 콘텐츠 영역에는 상단 여백이 없습니다. 매우 넓은 화면의 경우 그리드는 비본문 요소에 대한 왼쪽 여백과 함께 1300픽셀 중앙 열을 정의합니다. 이 중앙 열과 여백은 다양한 화면 너비에 대해 여러 중단점에서 조정됩니다.
인터랙티브 그리드의 비본문 요소는 더 높은 쌓임 순서를 가지며 더 큰 화면에서 측면 패딩을 받습니다. Android 및 iOS에서는 아티클 본문에 패딩이 없으며 헤더는 투명한 배경으로 절대 위치에 배치됩니다. 작성자 바이라인 텍스트 및 메타 섹션 내의 링크도 이러한 모바일 플랫폼에서 투명도를 유지합니다.
바이라인, 작성자 링크 및 제목 레이블은 보조 액센트 색상을 사용하도록 설정됩니다. 메타-바이라인 구성 요소는 왼쪽 여백이 10픽셀입니다. 작성자 링크는 하단 여백이 13픽셀입니다. 제목 및 헤드라인 섹션은 상단 패딩이 5vh이며 제목은 하단 패딩이 4픽셀입니다. 선 요소 및 메타 섹션 테두리는 Android 및 iOS에서 숨겨집니다.
Android 및 iOS에서는 게시 날짜의 상단 패딩이 4픽셀입니다. 메타 섹션의 소셜 미디어 버튼은 텍스트와 테두리에 보조 액센트 색상을 사용하며 아이콘은 동일한 색상으로 채워집니다. 콘텐츠 메타 컨테이너의 아이콘은 숨겨집니다. 인터랙티브 그리드의 모든 비본문 요소는 왼쪽 및 오른쪽 패딩이 10픽셀입니다. 메타 영역의 소셜 미디어 섹션에는 상단 테두리가 없으며 댓글 섹션은 숨겨집니다. 공유 버튼은 호버 시 흰색 아이콘과 함께 보조 액센트 색상으로 변경됩니다.
첫 번째 아톰 요소 그림은 하단 여백이 12픽셀로 모든 열에 걸쳐 있습니다. 몰입형 요소 그림은 최대 1260픽셀까지 전체 너비이며 측면 여백이 없고 두 번째에서 마지막 열부터 두 번째 열까지 걸쳐 있습니다.
작은 화면(30em 미만)에서는 주요 열의 모든 비몰입형 요소가 측면 여백 10픽셀을 가집니다. 중간 화면(46.25em 이상)에서는 주요 인터랙티브 열이 상대적 위치를 가지며 왼쪽에 수직선이 있습니다. 비아톰 요소는 본문 그리드 열에 배치됩니다.
다양한 화면 크기에 대해 레이아웃은 특정 그리드 템플릿을 사용합니다:
- 46.25em에서 61.24em 사이: 3열 레이아웃.
- 61.25em에서 71.24em 사이: 4열 레이아웃.
- 71.25em에서 81.24em 사이: 왼쪽 및 오른쪽 열이 있는 5열 레이아웃.
- 81.25em 이상: 더 넓은 열이 있는 5열 레이아웃.
제목은 상단에서 20dvh에 위치하며 전체 너비이고 상단 여백이 없습니다. 20em에서 46.24em 사이의 화면에서는 10dvh로 이동합니다. 제목 레이블에는 테두리가 없습니다.
헤드라인도 상단에서 20dvh에 위치하며 전체 너비, 어두운 배경, 패딩 및 상단 테두리를 가집니다. 중간 화면에서는 10dvh로 이동합니다.
스탠드퍼스트는 상단에서 20dvh에 위치하며 전체 너비, 어두운 배경 및 패딩을 가집니다. 중간 화면에서는 10dvh로 이동합니다.
인터랙티브 그리드는 헤드라인, 스탠드퍼스트, 미디어, 선, 메타 및 본문 영역을 정의합니다.
메타 섹션은 전체 너비이며 상단에서 20dvh에 위치하며 어두운 배경과 z-index 5를 가집니다. 중간 화면에서는 10dvh로 이동합니다. 날짜 라인은 왼쪽 여백이 10픽셀입니다.
svelte-scroller-outer는 블록 표시와 상대적 위치 지정으로 표시됩니다.
CSS 코드는 스크롤러 구성 요소에 대한 스타일을 정의하고 Guardian Headline Full 글꼴 패밀리에 대한 font-face 규칙을 포함합니다. 스크롤러는 블록 표시, 상대적 위치 지정 및 전체 너비를 가집니다. 전경은 더 높은 z-index로 설정되고 플로트를 제거하며 배경 컨테이너는 포인터 이벤트 없이 절대 위치에 배치되고 변환 변경에 최적화됩니다. font-face 규칙은 Guardian 서버에서 Guardian Headline Full 글꼴의 다양한 두께와 스타일을 로드하며, 일반 및 이탤릭 스타일의 라이트, 레귤러, 미디엄, 세미볼드 변형을 WOFF2, WOFF 및 TTF 형식 지원과 함께 지정합니다.
Guardian은 헤드라인과 타이틀피스에 사용자 정의 글꼴을 사용합니다. 이러한 글꼴은 넓은 브라우저 호환성을 보장하기 위해 WOFF2, WOFF, TTF와 같은 여러 형식으로 서버에서 로드됩니다. 굵게나 이탤릭과 같은 각 글꼴 변형은 특정 두께와 스타일로 정의됩니다.
페이지에는 데이터 가져오기 동안 나타나는 회전 애니메이션이 있는 로딩 오버레이가 포함됩니다. 주요 콘텐츠 영역에는 전체 화면 지도와 스크롤 내러티브 섹션이 있습니다. 이 섹션 내의 텍스트 상자는 본문 텍스트에 Guardian의 Egyptian Web 글꼴을 사용하는 스타일링된 배경, 테두리 및 타이포그래피를 가집니다. 특정 텍스트 범위는 강조를 위해 색상이 지정된 배경으로 강조 표시됩니다.
CSS는 12픽셀의 테두리 반경을 정의하고 Guardian Headline Full 글꼴 패밀리를 로드합니다. 여기에는 Guardian 서버에서 다양한 두께와 스타일(라이트, 레귤러, 미디엄, 세미볼드 및 해당 이탤릭 버전)의 여러 글꼴 파일이 포함됩니다. 파일은 넓은 브라우저 호환성을 보장하기 위해 WOFF2, WOFF 및 TrueType 형식으로 제공됩니다.
2024년 매일, 산불이 몰타보다 큰 360제곱킬로미터 이상의 숲을 태웠습니다. 연말까지 134,000제곱킬로미터 이상이 화염에 소비되었으며, 이는 잉글랜드 전체 면적보다 더 큰 총량입니다. 지난 24년 동안 산불은 1.5
세계는 몽골 면적만큼의 숲을 산불로 잃고 있으며, 전문가들은 이 속도가 지속 불가능하다고 경고합니다. 산불은 생태계의 자연적인 부분이지만, 탄소가 풍부한 숲에서의 규모, 빈도 및 강도는 최근 수십 년 동안 급증했습니다.
세계자원연구소(WRI)의 연구에 따르면 현재 화재로 인한 나무 덮개 손실이 20년 전보다 두 배 이상 많습니다. 2024년 한 해만 135,000제곱킬로미터의 숲이 타서 기록상 가장 극심한 산불 해가 되었습니다.
흥미롭게도 태즈메이니아 대학의 연구에 따르면 다른 경관의 화재는 같은 방식으로 증가하지 않았습니다. 전 세계적으로 타는 총 면적은 실제로 수십 년 동안 감소했는데, 부분적으로 아프리카의 농장 확장으로 인해 불길 확산이 느려졌기 때문입니다. 그러나 숲은 화재의 새로운 핫
