클래스 "canvas.svelte-o3oskp"를 가진 요소는 블록으로 표시되도록 설정되어 있습니다.
"Guardian Headline Full"이라는 사용자 정의 글꼴이 다양한 두께와 스타일로 정의되었습니다:
- Light (300) 일반체와 이탤릭체
- Regular (400) 일반체와 이탤릭체
- Medium (500) 일반체와 이탤릭체
- Semibold (600) 일반체와 이탤릭체
각 글꼴 스타일은 Guardian의 자산 서버에서 WOFF2, WOFF, TrueType 형식으로 제공됩니다. Guardian 웹사이트는 헤드라인과 제목에 특정 글꼴을 사용합니다. 여기에는 굵은체, 굵은 이탤릭체, 블랙, 블랙 이탤릭체 스타일의 Guardian Headline Full과 굵은체 Guardian Titlepiece가 포함됩니다. 각 글꼴은 호환성을 위해 woff2, woff, truetype과 같은 여러 파일 형식으로 제공됩니다.
캐러셀 섹션의 경우 제목은 Guardian Text Sans Web 글꼴을 사용하여 흰색 텍스트로 표시되며, 크기는 17px, 중간 두께를 가집니다. 절대 위치로 지정되며, 밝은 녹색으로 스타일링된 링크가 포함되어 있고 두껍게 표시되며 밑줄은 없습니다.
캐러셀 자체는 수평으로 스크롤되는 컨테이너로, 스크롤할 때 항목이 제자리에 고정되며, 사용자가 동작 감소를 선호하지 않는 한 기본적으로 부드러운 스크롤을 제공합니다. 스크롤바는 숨겨져 있으며 항목 간 간격은 10px입니다.
캐러셀의 각 카드는 너비 310px, 높이 160px로, 흰색 배경과 오른쪽에 맞춰 확대/축소되는 이미지를 특징으로 합니다. 이미지 컨테이너는 120px x 150px 크기에 회색 배경을 가지며, 사용자가 동작 감소를 선호하지 않는 경우 호버 시 이미지가 약간 확대됩니다. 카드에는 패딩이 포함되며 플렉스 컨테이너로 표시되어 콘텐츠를 하단에 정렬합니다.
캐러셀 컴포넌트에서 카드의 이미지 컨테이너에는 전환 효과가 없습니다. 각 카드 내의 콘텐츠 컨테이너는 유연한 열 레이아웃으로 설정됩니다. 콘텐츠 컨테이너 내의 제목과 단락은 어두운 회색으로 스타일링되며 텍스트 장식이 없습니다. 제목은 특정 세리프 글꼴 스택을 사용하며, 24px 글꼴 크기, 115% 줄 간격, 일반 두께, 투명한 하단 테두리를 가집니다. 단락은 산세리프 글꼴 스택을 사용하며 14px 글꼴 크기와 115% 줄 간격을 가지며, 첫 번째 단락은 굵게 표시됩니다.
카드가 선택되면 해당 이미지가 20% 확대됩니다. 비활성화된 카드는 반투명 흰색 배경 위에 굵은 텍스트로 "Coming soon" 오버레이를 왼쪽 상단에 표시합니다.
컨트롤 섹션은 공간을 균등하게 배분하는 플렉스 행으로, 흰색 12px 산세리프 글꼴을 사용한 페이지네이션 텍스트를 포함합니다. 컨트롤 버튼은 원형이며 지름 40px, 회색 테두리와 투명한 배경을 가지며 24px 아이콘을 포함합니다. 첫 번째 버튼의 아이콘은 수평으로 뒤집혀 있습니다.
Guardian Headline Full의 글꼴 면은 light, light italic, regular, regular italic 변형으로 정의되며 woff2, woff, ttf 파일에서 소싱됩니다. Guardian Headline Full 글꼴 패밀리에는 다양한 스타일과 두께가 포함되어 있으며, 각각 WOFF2, WOFF, TrueType 형식의 특정 소스 파일로 정의됩니다. 세부 사항은 다음과 같습니다:
- Regular Italic: 두께 400, 이탤릭 스타일
- Medium: 두께 500, 일반 스타일
- Medium Italic: 두께 500, 이탤릭 스타일
- Semibold: 두께 600, 일반 스타일
- Semibold Italic: 두께 600, 이탤릭 스타일
- Bold: 두께 700, 일반 스타일
- Bold Italic: 두께 700, 이탤릭 스타일
- Black: 두께 900, 일반 스타일
- Black Italic: 두께 900, 이탤릭 스타일
모든 글꼴 파일은 Guardian의 자산 도메인에서 지정된 URL에 호스팅됩니다.@font-face {
font-family: Guardian Headline Full;
src: 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;
}
.globe-overlay-wrapper {
overflow: auto;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 30;
background: #121212e6;
backdrop-filter: blur(2px);
display: flex;
justify-content: center;
}
.globe-overlay-wrapper .body-width-wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 100%;
padding: 22px 16px;
}
@media (min-width: 46.25em) {
.globe-overlay-wrapper .body-width-wrapper {
max-width: 740px;
}
}
@media (min-width: 61.25em) {
.globe-overlay-wrapper .body-width-wrapper {
max-width: 980px;
}
}
@media (min-width: 71.25em) {
.globe-overlay-wrapper .body-width-wrapper {
max-width: 1140px;
}
}
button {
padding: 1px 8px 3px;
border-radius: 30px;
border: 1px solid #fff;
background: var(--Neutral-neutral-neutral-7, #121212);
color: var(--Neutral-neutral-neutral-100, #fff);
font-family: Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 130%;
align-self: flex-start;
position: relative;
z-index: 60;
}
button:hover {
cursor: pointer;
}
.canvas-container {
width: 100vw;
height: 100vw;
max-width: min(600px, 100vh - 340px);
max-height: min(600px, 100vh - 340px);
align-self: center;
position: fixed;
top: 40px;
z-index: 40;
}
@media (min-width: 23.4375em) {
.canvas-container {
top: calc(50% - 120px);
left: 50%;
transform: translate(-50%, -50%);
}
}
.carousel-container {
height: calc(100vh - 116px);
height: calc(100dvh - 116px);
position: relative;
z-index: 50;
}
body.android .globe-overlay-wrapper .body-width-wrapper > button {
top: 58px;
}
body.ios .carousel-container {
height: calc(100vh - 180px) !important;
height: calc(100dvh - 180px) !important;
}
body.ios .canvas-container {
top: calc(50% - 170px) !important;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.ttf) format("truetype");
font-weight: 300;
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-LightItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.ttf) format("truetype");
font-weight: 300;
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-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.ttf) format("truetype");
font-weight: 400;
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-RegularItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format("truetype");
font-weight: 400;
font-style: italic;
}이 CSS 코드는 "Guardian Headline Full" 글꼴 패밀리에 대한 여러 글꼴 스타일을 정의합니다. 일반체와 이탤릭체의 다양한 두께(일반체(400)부터 블랙(900)까지)를 포함하며, 각 스타일은 크로스 브라우저 호환성을 위해 여러 파일 형식(WOFF2, WOFF, TrueType)으로 지정되고 Guardian의 자산 서버에서 소싱됩니다. 이 텍스트는 웹 페이지용 사용자 정의 글꼴과 스타일을 정의합니다. 두 가지 글꼴을 지정합니다: 두께 900의 블랙 이탤릭체 Guardian Headline과 두께 700의 굵은체 Guardian Titlepiece로, 둘 다 다양한 형식의 특정 URL에서 로드됩니다.
또한 버튼에 대한 CSS 규칙을 포함합니다. 예를 들어, 호버 시 약간 확대되고 포커스 링이 있는 원형 버튼이 있습니다. 특정 패딩, 테두리 및 텍스트 스타일을 가진 "탐색" 행동 유도 버튼도 있습니다.
또한, 코드는 너비가 변경되고 다양한 배경색을 가지는 진행률 표시줄을 설정하며, 다양한 화면 크기에 대한 반응형 디자인 조정을 포함합니다. 지구본 버튼 래퍼는 특정 조건에서만 보이도록 고정 위치로 스타일링되며, Android와 iOS 기기에 대해 다른 레이아웃을 가집니다.
마지막으로, 녹색 테두리와 중앙 정렬된 콘텐츠를 가진 원형 아이콘으로 제목 화살표 요소를 정의합니다.이 CSS 코드는 웹 페이지 스타일을 정의하며, 다음을 포함합니다:
- "title-arrow" 클래스를 가진 요소 중앙 정렬
- "title-arrow" 내 이미지를 전체 너비와 높이로 설정
- iOS 및 Android 기기에서 다크 모드를 위한 색상 반전 필터 적용
- Lenis 부드러운 스크롤 라이브러리를 사용한 스크롤 동작 구성
- Guardian 서버에서 "Guardian Headline Full" 서체의 여러 두께와 스타일 로드
이 코드는 뉴스 웹사이트 레이아웃을 위한 반응형 디자인, 접근성 기능 및 타이포그래피를 처리합니다.Guardian 웹사이트는 헤드라인과 제목에 특정 글꼴을 사용하며, WOFF2, WOFF, TrueType과 같은 다양한 형식으로 해당 서버에서 로드합니다. 이러한 글꼴에는 세미볼드, 볼드, 블랙과 같은 다양한 스타일과 두께가 일반체와 이탤릭체 버전으로 포함됩니다.
대화형 콘텐츠의 경우 레이아웃은 화면 크기에 따라 조정됩니다. 더 넓은 화면에서는 기본 열이 왼쪽으로 이동하며 여백이 증가하는 반면, atom, showcase, 몰입형 콘텐츠와 같은 요소는 뷰포트에 따라 변경되는 설정된 최대 너비를 가집니다. 더 작은 화면에서는 몰입형 요소가 전체 너비로 확장되며, 적절한 정렬을 위해 스크롤바에 대한 조정이 이루어집니다.이 텍스트는 웹 페이지 레이아웃 스타일을 위한 CSS 코드로 보입니다. 다양한 화면 크기, 색상, 간격 및 대화형 요소에 대한 스타일을 정의합니다. 코드는 콘텐츠 영역의 최대 너비를 설정하고, 테두리를 생성하며, 링크 및 배경과 같은 다양한 요소에 대한 색상 변수를 정의하고, 스크립트가 활성화되거나 비활성화될 때 페이지가 어떻게 나타나는지 처리합니다. 또한 기본 콘텐츠 열 내의 헤더, 단락 및 목록에 대한 특정 스타일링을 포함하며, 다양한 기기에 대해 여백과 패딩을 조정합니다.헤더 래퍼의 단락 링크는 텍스트에서 4px 떨어진 녹색 밑줄을 가집니다. 호버 시 밑줄은 어두워집니다.
헤드라인 섹션은 미묘한 녹색 줄무늬 배경을 특징으로 하며 제목에 상단 패딩이 없도록 합니다. 제목 링크는 특정 글꼴로 스타일링되며, 크기는 38px, 밝은 회색 색상 및 부드러운 전환 효과를 가집니다. 호버 시 밑줄이 제거되고 색상이 어두워지며 화살표 아이콘의 대비가 증가합니다. 동작 감소가 선호되는 경우 전환 효과가 비활성화됩니다. 제목의 비링크 스팬은 숨겨집니다.
스탠드퍼스트(부제목) 영역에는 추가 하단 패딩이 있으며 해당 단락에 제목과 동일한 글꼴과 크기를 사용합니다.
애니메이션은 제목과 스탠드퍼스트가 뷰에 들어올 때 페이드인되도록 제어하며, 제목이 먼저 페이드인됩니다. 이러한 애니메이션은 동작 감소가 활성화되었거나 스크립팅을 사용할 수 없는 경우 건너뜁니다.
첫 번째 인라인 요소는 4:5 종횡비로 제한되며 이미지가 상단으로 잘립니다. 헤드라인 섹션에는 하단 패딩이 있으며 기본 제목을 특정 타이포그래피로 스타일링합니다.
그림에는 하단에 위치한
