이 CSS 코드는 다양한 두께와 스타일을 가진 "Guardian Headline Full" 글꼴 패밀리를 정의하며, 각 변형에 대해 WOFF2, WOFF, TTF와 같은 여러 파일 형식을 제공하여 다양한 브라우저 간 호환성을 보장합니다. 글꼴 파일은 Guardian의 자산 서버에 호스팅되어 있습니다.
이 CSS 코드는 Guardian Headline 및 Guardian Titlepiece 글꼴에 대한 여러 글꼴 패밀리를 정의하고, WOFF2, WOFF, TTF와 같은 다양한 형식의 소스와 함께 글꼴 두께 및 스타일을 지정합니다. 또한 뷰포트 크기에 따라 여백, 너비 및 위치를 조정하여 인터랙티브 레이아웃에서 메인 콘텐츠 열에 대한 반응형 디자인 규칙을 포함합니다. 예를 들어, 더 넓은 화면에서는 왼쪽 여백과 테두리를 추가하고, 더 작은 화면에서는 요소 너비와 위치를 디스플레이에 맞게 조정합니다. 이 코드는 단락 및 목록과 같은 요소가 가독성을 위해 최대 너비를 유지하도록 보장하며, 몰입형 요소는 모바일 장치에서 전체 너비로 확장되고 더 큰 화면에서 레이아웃을 조정합니다.
인터랙티브 메인 열의 경우 콘텐츠 앞에 왼쪽 테두리가 추가되며, 왼쪽으로 11픽셀 위치합니다. 이 열 내부 요소에는 상단 및 하단 여백이 없지만 상단과 하단에 각각 12픽셀의 패딩이 포함됩니다. 단락이 요소를 따를 경우 패딩이 제거되고 대신 12픽셀의 여백이 적용됩니다. 인라인 요소는 최대 620픽셀 너비로 제한되며, 61.25em보다 넓은 화면에서는 인라인 피규어도 이 너비 제한을 따릅니다.
다양한 요소(데이트라인, 헤더 테두리, 캡션 텍스트, 피처 색상 등)에 대한 색상 변수가 정의되며, 새로운 필라 색상은 기본 또는 피처 색상을 기본값으로 합니다. atom 클래스를 가진 요소에는 패딩이 없습니다.
특정 규칙은 다양한 콘텐츠 영역에서 특정 요소 또는 수평 구분선 뒤에 오는 첫 번째 단락에 적용되어 상단에 14픽셀의 패딩을 추가합니다. 또한 이러한 단락의 첫 글자는 특정 서체로 크고 굵은 대문자로 스타일링되며, 드롭 캡 또는 새로운 필라 색상으로 색이 지정되고 왼쪽으로 플로팅되어 여백을 가집니다.
이러한 영역에서 단락 앞에 오는 수평 구분선에는 상단 패딩이 없습니다. 특정 콘텐츠 영역 내의 풀쿼트는 최대 620픽셀 너비로 제한됩니다.
다양한 아티클 컨테이너의 쇼케이스 요소의 경우 캡션은 정적으로 위치하며 전체 너비와 최대 620픽셀 너비를 가집니다.
몰입형 요소는 스크롤바 너비를 제외한 전체 뷰포트 너비를 차지합니다. 71.24em 너비까지의 화면에서 이러한 요소는 978px 너비로 제한되며 캡션 패딩은 10px입니다. 30em에서 71.24em 사이에서는 캡션 패딩이 20px로 증가합니다. 46.25em에서 61.24em 사이의 화면에서는 최대 너비가 738px입니다. 46.24em 미만에서는 몰입형 요소가 왼쪽 가장자리에 정렬되고 조정된 여백을 가지며, 30em에서 46.24em 사이에서는 20px 캡션 패딩을 유지합니다.
가구 래퍼는 61.25em 이상의 화면에서 그리드 레이아웃을 사용하며, 제목, 헤드라인, 메타 정보, 스탠드퍼스트 및 포트레이트 섹션을 구성하기 위해 정의된 열과 행을 가집니다. 헤드라인에는 상단 테두리가 있고, 메타 섹션에는 상단 패딩이 있으며, 스탠드퍼스트 텍스트에는 링크 및 목록 항목에 대한 특정 스타일링이 포함되며, 테두리 하단 대신 밑줄과 새로운 필라 색상을 사용하는 호버 효과가 있습니다. 스탠드퍼스트의 첫 번째 단락은 더 큰 화면에서 상단 테두리를 가지지만 71.25em 이상에서는 제거됩니다. 래퍼 내부의 피규어는 왼쪽 정렬 여백과 인라인 요소에 대해 최대 630px 너비를 가집니다. 71.25em 이상에서는 레이아웃을 개선하기 위해 그리드가 열 구조를 조정합니다.
레이아웃은 다양한 화면 크기에 대해 특정 열과 행을 가진 그리드를 사용합니다. 예를 들어, 더 큰 화면에서 그리드는 제목, 헤드라인 및 메타 섹션에 대해 세 개의 동일한 열, 그 다음 스탠드퍼스트에 대해 다섯 개, 포트레이트에 대해 여덟 개의 열을 가지며 행은 비례적으로 할당됩니다.
스타일링에는 메타 섹션의 상단 테두리와 스탠드퍼스트의 왼쪽 테두리가 포함되며, 둘 다 사용자 정의 색상 변수를 사용합니다. 헤드라인은 굵게 표시되며 뷰포트에 따라 크기와 너비가 조정되며, 더 큰 화면에서는 더 큰 글꼴을 사용합니다.
메타 섹션의 소셜 및 댓글 요소는 동일한 테두리 색상을 공유하며, 특정 구성 요소는 숨겨집니다. 스탠드퍼스트 텍스트는 일반 두께, 특정 글꼴 크기 및 패딩으로 스타일링되며, 왼쪽 여백과 패딩으로 위치합니다.
메인 미디어 요소는 포트레이트 그리드 영역에 배치되며, 전체 너비와 더 작은 화면에서 조정된 여백을 가지며, 캡션은 배경색과 패딩으로 하단에 절대 위치합니다. 중간 화면 이상에서는 일부 라인이 숨겨지고 특정 요소에 대해 여백이 재설정됩니다.
이 CSS 코드는 가구 래퍼 구성 요소의 스타일을 정의하며, 레이아웃, 색상 및 다양한 화면 크기에서의 반응형 동작을 포함합니다. CSS 변수를 사용하여 배경색, 텍스트 색상 및 테두리 스타일을 설정하여 일관성을 유지합니다. 래퍼는 더 큰 화면에서 여백, 패딩 및 위치를 조정하며, 캡션, 버튼 및 헤드라인과 같은 요소에 대한 특정 규칙을 가집니다. 소셜 미디어 버튼은 호버 시 색상이 변경되며, 특정 요소는 조건에 따라 숨겨지거나 표시됩니다. 이 디자인은 다양한 장치에 적응하면서 일관된 모양을 보장합니다.
이 CSS 코드는 웹페이지의 furniture-wrapper 클래스에 대한 스타일을 정의하며, 메타 정보 및 스탠드퍼스트 섹션에 중점을 둡니다. 텍스트 색상을 밝은 회색(#dcdcdc)으로 설정하고 링크 색상을 변수 기반 색조로 설정하며, 색상을 유지하고 밑줄을 추가하는 호버 효과를 가집니다. 스탠드퍼스트의 링크는 특정 오프셋과 색상을 가진 밑줄을 가지며, 테두리와 배경 이미지를 제거합니다.
더 큰 화면(min-width: 61.25em)의 경우 스탠드퍼스트의 첫 번째 단락은 상단 테두리를 가지며, 더 큰 화면(71.25em)에서는 제거됩니다. 이 코드는 또한 의사 요소(:before 및 :after)를 사용하여 뷰포트 크기에 따라 너비와 위치를 조정하는 장식용 사이드바를 생성하며, 어두운 배경과 테두리 가장자리를 특징으로 합니다. 메타 섹션 내의 소셜 및 댓글 요소는 아이콘 및 텍스트에 대해 유사한 스타일링을 상속합니다.
댓글 섹션은 헤더의 테두리 색상과 일치하는 테두리 색상을 가집니다.
아티클에서 본문 내의 두 번째 수준 제목(h2)은 200의 가벼운 글꼴 두께를 사용합니다. 그러나 h2에 strong 요소가 포함된 경우 700의 굵은 글꼴 두께를 채택합니다.
Guardian Headline Full 글꼴 패밀리에는 여러 변형이 포함됩니다:
- Light (두께 300) 일반 및 이탤릭 스타일
- Regular (두께 400) 일반 및 이탤릭 스타일
- Medium (두께 500) 일반 및 이탤릭 스타일
- Semibold (두께 600) 일반 및 이탤릭 스타일
각 스타일은 Guardian의 자산 서버에 호스팅된 WOFF2, WOFF 및 TrueType 형식으로 제공됩니다.
이 CSS 코드는 "Guardian Headline Full" 글꼴 패밀리에 대해 다양한 두께와 스타일(일반 및 이탤릭)을 가진 여러 글꼴 면을 정의하며, semibold(600)부터 black(900)까지 범위를 가집니다. 각 글꼴 면은 Guardian의 자산 서버에서 WOFF2, WOFF 및 TrueType 형식의 소스 파일을 지정합니다.
또한 동일한 파일 형식으로 굵은 두께의 "Guardian Titlepiece" 글꼴을 정의합니다.
이 코드는 iOS 및 Android 장치에서 다크 모드에 대한 색상 구성을 조정하는 CSS 사용자 정의 속성(변수)을 포함합니다. 또한 iOS 및 Android 플랫폼에서 아티클 컨테이너 내 단락의 첫 글자에 대한 특정 스타일링 규칙을 포함하며, 특히 atom 또는 사인인 게이트와 같은 특정 요소 뒤에 올 때 적용됩니다.
Android 장치의 경우 표준 및 댓글 아티클에서 첫 번째 단락의 첫 글자는 보조 필라 색상으로 스타일링됩니다. iOS 및 Android 모두에서 아티클 헤더는 숨겨지고, 가구 래퍼는 특정 패딩을 가집니다. 이러한 래퍼 내의 레이블은 새로운 필라 색상을 사용한 헤드라인 스타일의 굵고 대문자화된 글꼴을 사용합니다. 헤드라인은 32px, 굵게, 하단 패딩 및 어두운 색상으로 설정됩니다. 가구 래퍼의 이미지는 상대적으로 위치하며, 조정된 여백과 스크롤바를 제외한 전체 뷰포트 너비를 가집니다.
Android 장치의 경우 아티클 컨테이너 내 이미지는 투명한 배경을 가지도록 설정되며, 스크롤바를 제외한 전체 뷰포트 너비를 차지하고 높이는 자동으로 조정됩니다.
iOS 및 Android 모두에서 아티클의 스탠드퍼스트 섹션은 각각 4px 및 24px의 상단 및 하단 패딩을 가지며, 오른쪽 여백은 -10px입니다. 내부 텍스트는 Guardian Headline 글꼴 패밀리 또는 유사한 세리프 글꼴을 사용합니다.
두 운영 체제에서 스탠드퍼스트 내 링크는 특정 색상으로 스타일링되며, 오프셋이 있는 밑줄과 특정 색상을 사용하며, 호버 시 링크 색상과 일치하도록 변경됩니다.
또한 아티클의 메타 섹션은 iOS 및 Android 플랫폼에서 일관되게 스타일링됩니다.
Android 장치의 경우 표준 및 댓글 아티클 컨테이너에서 메타 요소의 여백을 제거합니다.
iOS 장치의 경우 피처, 표준 및 댓글 아티클 컨테이너에서 바이라인 및 작성자 요소의 색상을 새로운 필라 색상으로 설정합니다. 또한 메타 기타 요소에서 패딩을 제거하고 그 내부의 SVG 아이콘의 스트로크를 새로운 필라 색상으로 설정합니다. 또한 쇼케이스 요소의 캡션 버튼을 특정 디스플레이, 패딩, 정렬 및 치수로 스타일링합니다.
iOS 및 Android 모두에서 피처, 표준 및 댓글 아티클 컨테이너에서 아티클 본문 패딩을 측면 0, 상하 12px로 설정합니다.
iOS 및 Android 장치의 경우 피처, 표준 및 댓글 아티클 컨테이너에서 아티클 본문 내의 썸네일이 아니고 몰입형이 아닌 이미지는 여백이 없으며, 전체 뷰포트 너비에서 24픽셀과 스크롤바 너비를 뺀 너비와 자동 높이를 가집니다. 그들의 캡션에는 패딩이 없습니다.
이러한 컨테이너의 몰입형 이미지는 스크롤바 너비를 제외한 전체 뷰포트 너비를 차지합니다.
아티클 본문의 인용된 블록쿼트는 새로운 필라 색상을 사용한 색상 마커를 표시합니다.
아티클 본문의 링크는 기본 필라 색상으로 스타일링되며, 오프셋이 있는 밑줄과 헤더 테두리 색상을 밑줄에 사용합니다. 호버 시 밑줄 색상이 새로운 필라 색상으로 변경됩니다.
다크 모드에서 가구 래퍼 배경은 어두운 회색(#1a1a1a)으로 설정됩니다.
iOS 및 Android 장치의 경우 다음 스타일이 피처, 표준 및 댓글 아티클 컨테이너에 적용됩니다:
- 콘텐츠 레이블은 새로운 필라 색상을 사용합니다.
- 헤드라인은 배경이 없고 헤더 테두리 색상을 텍스트에 사용합니다.
- 스탠드퍼스트 단락 및 링크는 헤더 테두리 색상을 사용합니다.
- 작성자 바이라인 및 그들의 링크는 새로운 필라 색상을 사용합니다.
- 기타 메타데이터 아이콘은 새로운 필라 색상으로 스트로크됩니다.
- 쇼케이스 이미지 캡션은 데이트라인 색상을 사용합니다.
- 아티클 본문의 인용된 블록쿼트는 텍스트에 새로운 필라 색상과 일치하는 테두리로 스타일링됩니다.
iOS 및 Android 장치의 경우 아티클 본문의 인용 텍스트는 새로운 필라 색상을 사용합니다.
또한 iOS 및 Android 모두에서 다양한 아티클 본문 섹션의 배경색은 어두운 배경으로 설정됩니다.
iOS에서 아티클 본문의 특정 요소 뒤의 첫 글자에 대해 특정 스타일링이 적용되지만, 세부 사항은 반복적이며 위와 동일한 패턴을 따릅니다.
이는 iOS 및 Android 플랫폼에서 다양한 아티클 컨테이너의 특정 요소 뒤에 오는 단락의 첫 글자를 대상으로 하는 CSS 선택기로 보입니다. 이 선택기는 아티클 본문, 피처 본문, 댓글 섹션 및 인터랙티브 콘텐츠 영역과 같은 다양한 섹션에 적용되며, 특히 'element-atom'과 같은 클래스를 가진 요소 뒤에 오거나 사인인 게이트 앞에 올 때 적용됩니다.
이 CSS 코드는 Android 및 iOS 장치의 특정 요소에 대한 스타일을 정의합니다. 특정 단락의 첫 글자 색상을 흰색 또는 사용자 정의 변수 색상으로 설정합니다. 또한 댓글 아티클의 스탠드퍼스트 요소에 대한 패딩과 여백, h2 제목의 크기, 및 캡션 버튼의 패딩을 iOS와 Android에서 다르게 조정합니다.
다크 모드 환경 설정의 경우 팔로우 텍스트, 아이콘, 스탠드퍼스트 텍스트, 링크 및 바이라인의 색상을 더 밝은 색조와 특정 다크 모드 필라 색상으로 변경합니다. 어두운 배경색을 설정하고 두 플랫폼에서 아티클 헤더를 보이지 않게 합니다. 또한 이러한 스타일을 피처, 표준 및 댓글 아티클 컨테이너의 가구 래퍼에 적용합니다.
iOS 및 Android 장치의 경우 아티클 컨테이너의 가구 래퍼에는 여백이 없습니다. 피처, 표준 및 댓
