이 CSS 코드는 "Guardian Headline Full" 글꼴 패밀리를 여러 스타일과 두께로 정의합니다. 300(라이트), 400(일반), 500(미디엄), 600(세미볼드) 변형을 포함하며, 각각 일반체와 이탤릭체 스타일을 제공합니다. 각 스타일에 대해 Guardian의 자산 서버에서 WOFF2, WOFF, TrueType 형식의 글꼴 파일을 지정합니다.
이 CSS 코드는 Guardian Headline 및 Guardian Titlepiece 글꼴에 대한 여러 글꼴 패밀리를 정의하며, 글꼴 두께와 스타일과 함께 다양한 형식(WOFF2, WOFF, TrueType)의 소스를 지정합니다. 또한 인터랙티브 레이아웃에서 메인 콘텐츠 칼럼에 대한 반응형 디자인 규칙을 포함하여 뷰포트 크기에 따라 여백, 너비 및 위치를 조정합니다. 예를 들어, 더 넓은 화면에서는 왼쪽 여백과 테두리를 추가하고, 더 작은 화면에서는 요소 너비와 위치를 디스플레이에 맞게 조정합니다. 이 코드는 단락과 목록과 같은 요소가 가독성을 위해 최대 너비를 유지하도록 보장하며, 몰입형 요소는 모바일 기기에서 전체 너비로 확장되고 더 큰 화면에서 레이아웃을 조정합니다.
인터랙티브 콘텐츠 칼럼에는 연한 회색의 왼쪽 테두리가 추가되고 약간 왼쪽으로 위치합니다. 이러한 칼럼 내 요소에는 위아래 여백이 없지만 12px 안쪽 여백이 포함됩니다. 요소 뒤에 단락이 오면 안쪽 여백이 제거되고 여백이 12px로 설정됩니다. 인라인 요소는 최대 620px 너비로 제한되며, 더 넓은 화면에서는 특정 역할을 가진 figure도 이 너비 제한을 따릅니다.
날짜줄, 헤더 테두리, 캡션, 피처 색상을 포함한 다양한 텍스트 및 배경 요소에 대한 색상 변수가 정의되며, 기본 피처 색상은 빨간색으로 설정됩니다.
atom으로 스타일링된 요소에는 안쪽 여백이 없습니다. 특정 규칙이 다양한 콘텐츠 영역에서 특정 요소 또는 수평 구분선 뒤에 오는 첫 번째 단락에 적용되어 14px의 위쪽 안쪽 여백을 추가합니다. 또한 이러한 단락의 첫 글자는 헤드라인 스타일로 크고 굵은 대문자로 스타일링되며, 정의된 피처 색상으로 색이 지정되고 왼쪽으로 떠 있으며 여백이 있습니다.
다양한 콘텐츠 섹션에서 단락 앞에 오는 수평 구분선에는 위쪽 안쪽 여백이 없습니다. 특정 콘텐츠 영역 내의 끌어온 인용문(pullquote)은 최대 620픽셀 너비를 가집니다.
다양한 아티클 컨테이너 내 쇼케이스 요소의 경우, 캡션은 정적으로 위치하며 전체 너비와 620픽셀 최대 너비를 가집니다.
몰입형 요소는 스크롤바를 제외한 전체 뷰포트 너비를 차지합니다. 71.24em 너비까지의 화면에서 이러한 요소는 978픽셀로 제한되며, 캡션 안쪽 여백은 10픽셀입니다. 30em에서 71.24em 사이에서는 캡션 안쪽 여백이 20픽셀로 증가합니다. 46.25em에서 61.24em 사이의 화면에서는 최대 너비가 738픽셀입니다. 46.24em 미만에서는 몰입형 요소가 왼쪽에 정렬되며 조정된 여백과 30em에서 46.24em 사이에서는 20픽셀의 캡션 안쪽 여백을 가집니다.
가구 래퍼(furniture wrapper)는 61.25em 이상의 화면에서 그리드 레이아웃을 사용하며, 콘텐츠를 구성하기 위해 정의된 열과 행을 가집니다. 헤드라인에는 위쪽 테두리가, 메타 섹션에는 위쪽 안쪽 여백이 있으며, 스탠드퍼스트 요소에는 호버 시 색상이 변하는 밑줄이 있는 스타일링된 링크가 포함됩니다. 처음에는 스탠드퍼스트의 첫 번째 단락에 위쪽 테두리가 있고 아래쪽 안쪽 여백이 없으며, 이는 71.25em 이상의 화면에서 제거됩니다.
가구 래퍼 내 figure에는 왼쪽 여백이 있으며 인라인 요소의 경우 최대 너비는 630픽셀입니다. 더 큰 화면(71.25em 이상)에서는 그리드 열이 다른 콘텐츠 배치를 위해 재구성됩니다.
레이아웃은 다양한 화면 크기에 대해 특정 열과 행을 가진 그리드를 사용합니다. 더 작은 화면의 경우, 그리드는 제목, 헤드라인, 스탠드퍼스트, 메타 정보, 초상화를 위한 영역을 정의하며, 행은 고정 및 자동 높이로 설정됩니다. 메타 섹션 위에 얇은 선이 나타나며, 스탠드퍼스트에는 왼쪽에 수직선이 있습니다.
더 큰 화면에서는 그리드가 행에 분수 단위를 사용하도록 조정되고 열 범위를 확장합니다. 헤드라인 글꼴 크기가 증가하고 최대 너비가 변경되며, 선과 같은 일부 요소는 숨겨집니다. 스탠드퍼스트 텍스트는 특정 글꼴 두께와 크기로 스타일링되며, 주요 미디어 영역은 그리드 내에 위치하며, 더 작은 기기에서는 너비와 여백이 조정됩니다. 캡션은 배경색과 안쪽 여백을 가지고 하단에 절대적으로 위치합니다.
CSS 코드는 가구 래퍼 컴포넌트의 스타일, 레이아웃, 색상 및 다양한 화면 크기에서의 반응형 동작을 정의합니다. 다크 모드와 같은 테마를 위한 CSS 사용자 지정 속성을 사용하여 배경색, 텍스트 색상 및 테두리 스타일을 설정합니다. 래퍼는 더 큰 화면에서 여백, 안쪽 여백 및 위치를 조정하며, 숨겨진 요소와 소셜 공유를 위한 호버 효과가 있는 인터랙티브 버튼을 포함합니다. 헤드라인과 메타 정보는 특정 글꼴과 색상으로 스타일링되어 디자인 일관성을 보장합니다.
이 CSS 코드는 "furniture-wrapper" 클래스 내 요소의 스타일을 정의하며, 메타 정보와 스탠드퍼스트 섹션에 중점을 둡니다. 텍스트 색상을 연한 회색(#dcdcdc)으로 설정하고 링크 색상을 변수 기반 색조로 설정하며, 호버 효과는 텍스트 장식 색상을 변경합니다. 스탠드퍼스트의 링크는 특정 오프셋과 색상으로 밑줄이 그어지며, 호버 상태는 이에 따라 밑줄 색상을 조정합니다.
더 큰 화면(최소 너비 61.25em)의 경우, 스탠드퍼스트의 첫 번째 단락에 위쪽 테두리가 생기며, 이는 더 큰 화면(최소 너비 71.25em)에서 제거됩니다. 스탠드퍼스트의 목록 항목도 연한 회색 텍스트 색상을 채택합니다.
코드는 다양한 화면 너비(46.25em, 61.25em, 71.25em, 81.25em)에 대한 미디어 쿼리를 사용하는 반응형 디자인 요소를 포함합니다. 이들은 배경 영역과 테두리를 생성하기 위해 의사 요소(:before 및 :after)의 너비와 위치를 조정하며, 뷰포트 너비와 스크롤바 조정을 기반으로 치수를 계산합니다.
또한, 키라인 및 메타 섹션의 소셜 미디어 또는 댓글 요소 내 SVG 요소의 스타일을 지정하며, CSS 변수를 사용하여 테마에 맞게 스트로크와 텍스트 색상을 설정합니다.
댓글 섹션의 테두리 색상은 헤더의 테두리 색상과 일치합니다. 아티클에서 두 번째 수준 제목은 200의 가벼운 글꼴 두께를 사용하지만, strong 요소를 포함하는 경우 700의 굵은 두께를 사용합니다.
또한, Guardian Headline Full 글꼴 패밀리는 일반체와 이탤릭체 버전 각각을 포함하여 라이트, 일반, 미디엄, 세미볼드 등 다양한 스타일과 두께로 정의됩니다. 이러한 글꼴은 WOFF2, WOFF, TrueType 형식으로 특정 URL에서 가져옵니다.
이 CSS 코드는 "Guardian Headline Full" 글꼴 패밀리에 대한 여러 글꼴 면을 정의하며, 각각 세미볼드(600)부터 블랙(900)까지 다양한 두께와 스타일(일반체 및 이탤릭체)을 가집니다. 또한 "Guardian Titlepiece"에 대한 굵은체 글꼴 면을 포함합니다. 글꼴은 WOFF2, WOFF, TrueType 형식으로 특정 URL에서 가져옵니다.
추가적으로, 코드는 사용자의 색상 구성표 선호도 또는 iOS 또는 Android 기기에서 사이트가 볼 때를 기반으로 조정되는 다크 모드 배경 및 피처 색상에 대한 CSS 사용자 지정 속성(변수)을 설정합니다. 또한 이러한 모바일 플랫폼에서 아티클 컨테이너 내 단락의 첫 글자에 대한 스타일링을 포함하며, 로그인 게이트를 처리하기 위한 특정 선택자를 포함합니다.
Android 기기의 경우, 표준 및 댓글 아티클에서 첫 번째 단락의 첫 글자는 보조 필러 색상으로 스타일링됩니다. iOS와 Android 모두에서 아티클 헤더는 숨겨지고, 가구 래퍼에는 특정 안쪽 여백이 있습니다. 이러한 래퍼 내 레이블은 새 필러 색상으로 헤드라인 스타일의 굵고 대문자화된 글꼴을 사용합니다. 헤드라인은 32px, 굵게, 아래쪽 안쪽 여백 및 어두운 색상으로 설정됩니다. 가구 래퍼의 이미지는 상대적으로 위치하며, 스크롤바를 제외한 뷰포트 너비를 차지하고 높이를 자동으로 조정합니다.
Android 기기의 경우, 아티클 컨테이너 내 이미지는 투명한 배경을 가지도록 설정되며, 스크롤바를 제외한 전체 뷰포트 너비를 차지하고 높이를 자동으로 조정합니다.
iOS와 Android 모두에서, 아티클 요약 섹션은 위쪽 4px, 아래쪽 24px의 안쪽 여백과 오른쪽 -10px의 여백 오프셋을 가집니다.
이러한 요약의 텍스트는 Guardian Headline 글꼴 패밀리 또는 유사한 세리프 글꼴을 사용합니다.
요약 내 링크는 특정 색상으로 스타일링되며, 6px 오프셋으로 밑줄이 그어지고, 지정된 색상을 밑줄에 사용하며, 호버 시 링크 색상과 일치하도록 변경됩니다.
또한, 두 운영 체제에서 아티클의 메타데이터 섹션은 일관된 스타일링을 가집니다.
Android 기기의 경우, 표준 및 댓글 아티클 컨테이너에서 메타 요소의 여백은 0으로 설정됩니다.
iOS 기기의 경우, 피처, 표준 및 댓글 아티클 컨테이너의 바이라인과 작성자 정보는 지정된 필러 색상으로 나타납니다. 마찬가지로, Android 기기의 경우, 피처, 표준 및 댓글 아티클 컨테이너의 동일한 요소도 필러 색상을 사용합니다.
iOS와 Android 모두에서, 피처, 표준 및 댓글 아티클 컨테이너의 기타 메타 정보에는 안쪽 여백이 없으며, 그 안의 SVG 아이콘은 스트로크에 필러 색상이 적용됩니다.
iOS와 Android 모두에서 피처, 표준 및 댓글 아티클의 쇼케이스 요소 내 캡션 버튼은 플렉스 컨테이너로 표시됩니다. 중앙에 정렬되며, 28x28 픽셀 크기이며, 오른쪽에서 14픽셀 떨어져 위치하고 5픽셀의 안쪽 여백을 가집니다.
iOS와 Android용 피처, 표준 및 댓글 컨테이너의 아티클 본문은 수평 12픽셀 안쪽 여백을 가지며 수직 안쪽 여백은 없습니다.
iOS 및 Android 기기의 피처, 표준 및 댓글 아티클 컨테이너에서, 아티클 본문 내 썸네일이 아니고 몰입형이 아닌 이미지는 여백이 없으며, 전체 뷰포트 너비에서 24픽셀과 스크롤바 너비를 뺀 너비를 가지며 높이는 자동입니다. 그들의 캡션에는 안쪽 여백이 없습니다.
이러한 컨테이너의 몰입형 이미지는 스크롤바 너비를 제외한 전체 뷰포트 너비를 차지합니다.
아티클 본문의 내용에서 인용된 blockquote는 새 필러 색상을 사용하여 색상 표시기를 표시합니다. 링크는 기본 필러 색상으로 스타일링되며, 오프셋으로 밑줄이 그어지고 밑줄에 헤더 테두리 색상을 사용합니다. 호버 시 밑줄 색상은 새 필러 색상으로 변경됩니다.
다크 모드에서 가구 래퍼의 배경은 어두운 회색(#1a1a1a)으로 설정됩니다.
iOS 및 Android 기기의 경우, 피처, 표준 및 댓글 아티클 컨테이너에 다음 스타일을 적용합니다:
- 콘텐츠 레이블에 새 필러 색상을 사용합니다.
- 헤드라인의 배경색을 제거하고 텍스트 색상을 헤더 테두리 색상으로 설정하여 이것이 우선권을 갖도록 합니다.
- 스탠드퍼스트 단락과 링크가 헤더 테두리 색상을 채택하도록 합니다.
- 바이라인 작성자와 그들의 링크에 새 필러 색상을 사용합니다.
- 기타 메타 아이콘의 스트로크에 새 필러 색상을 적용합니다.
- 쇼케이스 이미지 캡션의 색상을 날짜줄 색상으로 설정합니다.
- 아티클 본문 내용에서 인용된 blockquote를 그에 따라 스타일링합니다.
iOS 및 Android 기기의 경우, 아티클 본문에서 인용된 블록의 텍스트 색상은 특정 필러 색상으로 설정됩니다.
또한, 두 운영 체제에서 다양한 아티클 본문 섹션의 배경색은 어두운 배경으로 강제됩니다.
iOS에서, 아티클 본문에서 특정 요소 뒤의 첫 글자는 드롭 캡 효과로 스타일링됩니다.
이는 iOS 및 Android 플랫폼에서 다양한 아티클 컨테이너(표준, 피처, 댓글) 내 특정 요소 뒤에 오는 단락의 첫 글자를 대상으로 하는 CSS 선택자로 보입니다. 이 선택자는 다양한 아티클 유형에 적용되며 요소 사이에 나타날 수 있는 로그인 게이트를 고려합니다.
이 CSS 코드는 Android 및 iOS 기기의 특정 요소에 대한 스타일을 정의합니다. 특정 단락의 첫 글자 색상을 흰색 또는 사용자 지정 변수 색상으로 설정합니다. 또한 댓글 아티클의 스탠드퍼스트 요소에 대한 안쪽 여백과 여백을 조정하고, h2 제목의 글꼴 크기를 설정하며, 캡션 버튼의 안쪽 여백을 수정합니다.
다크 모드의 경우, 텍스트와 아이콘 색상을 더 밝은 색조로 변경하고 어두운 배경색을 정의합니다. 또한 아티클 헤더를 완전히 투명하게 만들어 숨기고 가구 래퍼에 스타일을 적용하지만, 마지막 규칙은 불완전해 보입니다.
iOS 및 Android 기기의 경우, 아티클 컨테이너의 가구 래퍼에는 여백이 없습니다. 피처, 표준 및 댓글 아티클의 레이블은 새 필러
