이 CSS 코드는 다양한 두께와 스타일을 가진 "Guardian Headline Full" 글꼴 패밀리를 정의합니다. 라이트(300), 일반(400), 미디엄(500), 세미볼드(600) 버전을 포함하며, 각각 일반체와 이탤릭체 스타일로 제공됩니다. 글꼴 파일은 Guardian의 웹 자산에서 WOFF2, WOFF, TrueType 형식으로 제공됩니다.
이 CSS 코드는 Guardian 웹사이트의 헤드라인과 타이틀피스를 위한 여러 글꼴 패밀리를 정의합니다. "Guardian Headline Full" 패밀리에 대해 라이트(300), 일반(400), 볼드(700), 블랙(900) 두께를 포함한 다양한 글꼴 두께와 스타일(일반체와 이탤릭체)을 지정합니다. 각 글꼴은 브라우저 호환성을 위해 여러 형식(WOFF2, WOFF, TrueType)으로 제공됩니다. 또한 동일한 파일 형식으로 볼드 두께(700)의 "Guardian Titlepiece" 글꼴 패밀리를 정의합니다.
이 CSS 코드는 "Guardian Headline Full" 글꼴 패밀리에 대해 다양한 두께와 스타일(일반체와 이탤릭체)을 가진 여러 글꼴 면을 정의합니다. 글꼴들은 Guardian의 자산 서버에 호스팅된 다양한 파일 형식(WOFF2, WOFF, TrueType)에서 가져옵니다. 두께는 일반(400)부터 블랙(900)까지 범위를 이루며, 웹 플랫폼 간 일관성을 유지하면서 다양한 타이포그래피 컨텍스트에서 글꼴을 사용할 수 있도록 합니다.
이 텍스트는 웹사이트, 아마도 The Guardian을 위한 글꼴 스타일과 반응형 그리드 레이아웃을 정의하는 CSS 코드로 보입니다. 다양한 두께와 스타일에 대한 글꼴 파일을 지정한 후, 다양한 화면 너비에서 제목, 미디어, 본문 텍스트와 같은 콘텐츠 영역을 재배치하기 위해 변경되는 그리드 템플릿을 설정합니다. 이 코드는 최적의 표시를 위해 다양한 기기 크기에서 패딩, 열 간격 및 요소 위치를 조정합니다.
특정 콘텐츠 영역에서 몰입형 캡션을 가진 인터랙티브 그리드 피규어의 경우, 캡션 패딩은 상단에 4픽셀, 다른 곳에는 0으로 설정됩니다.
다양한 콘텐츠 섹션에서 인터랙티브 그리드 내의 "lines"와 "meta"라는 요소들은 2행부터 5행, 1열부터 2열까지의 그리드 영역에 위치합니다. "lines" 요소는 콘텐츠에 맞는 높이와 5픽셀의 상단 여백을 가지며, "meta" 요소는 18픽셀의 상단 여백을 가집니다.
더 큰 화면(최소 너비 81.25em)에서 이러한 섹션의 인터랙티브 그리드는 특정 너비를 가진 5열 레이아웃을 사용합니다.
iOS 및 Android 기기의 경우, 기사 헤더는 사용자 정의 스타일을 가집니다: 스탠드퍼스트 텍스트는 미디엄 두께의 특정 글꼴 패밀리를 사용하고, 섹션 키커는 첫 글자를 대문자로 표시하는 블록으로 나타나며, 키라인은 상단 패딩이 증가하고, 바이라인 작성자는 볼드 세리프 글꼴을 사용하며, 이미지 피규어는 높이를 자동으로 조정하고, atomic 요소 다음의 단락은 상단 여백이 없습니다.
또한, 라이트 및 라이트 이탤릭 두께의 Guardian Headline Full 글꼴 면이 각각의 소스 파일과 형식으로 정의됩니다.
이 텍스트는 다양한 스타일과 두께를 가진 "Guardian Headline Full"이라는 사용자 정의 글꼴 패밀리를 정의합니다. 일반, 미디엄, 세미볼드, 볼드 버전을 포함하며, 각각 일반체와 이탤릭체 스타일로 사용 가능합니다. 글꼴 파일은 Guardian 웹사이트에서 WOFF2, WOFF, TrueType 형식으로 제공됩니다.
```css
@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));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width)) !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) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
left: -11px;
}
}
.content__main-column--interactive .element-atom {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 12px;
padding-top: 12px;
}
.content__main-column--interactive p + .element-atom {
padding-top: 0;
padding-bottom: 0;
margin-top: 12px;
margin-bottom: 12px;
}
.content__main-column--interactive .element-inline {
max-width: 620px;
}
@media (min-width: 61.25em) {
figure[data-spacefinder-role="inline"].element {
max-width: 620px;
}
}
:root {
--dateline: #606060;
--headerBorder: #dcdcdc;
--captionText: #999;
--captionBackground: hsla(0, 0%, 7%, 0.72);
--feature: #c70000;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}
.content__main-column--interactive .element.element-atom,
.element.element-atom {
padding: 0;
}
#article-body > div .element-atom:first-of-type + p:first-of-type,
#article-body > div .element-atom:first-of-type + .sign-in-ga {
/ 필요한 경우 여기에 추가 스타일을 넣을 수 있습니다 /
}
```
기사 본문, 인터랙티브 콘텐츠, 댓글, 피처 등 다양한 콘텐츠 섹션의 첫 번째 단락은 14픽셀의 상단 패딩을 가집니다. 또한, 이 단락들의 첫 글자는 특정 글꼴, 크기 및 색상으로 스타일링되어 크고 대문자로 된 드롭 캡으로 나타납니다.
수평 구분선 다음의 단락에 대해서는 상단 패딩이 제거됩니다.
쇼케이스 요소의 캡션은 정적 위치로 설정되고 최대 너비는 620픽셀입니다.
몰입형 요소는 전체 뷰포트 너비를 차지하며, 71.24em보다 작은 화면에서는 최대 978픽셀로 조정됩니다. 이들의 캡션은 작은 기기에서는 10픽셀에서 중간 크기 화면에서는 20픽셀까지 화면 크기에 따라 변하는 패딩을 가집니다.
```css
@media (max-width: 46.24em) {
.element.element--immersive.element-immersive {
margin-left: -10px !important;
margin-right: 0 !important;
left: 0;
}
}
@media (max-width: 46.24em) and (min-width: 30em) {
.element.element--immersive.element-immersive {
margin-left: -20px !important;
}
.element.element--immersive.element-immersive figcaption {
padding-inline: 20px;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 0px;
grid-template-columns: [title-start headline-start meta-start standfirst-start] repeat(5, 1fr) [title-end headline-end meta-end standfirst-end portrait-start] repeat(5, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] .25fr [title-end headline-start] 1fr [headline-end standfirst-start] .75fr [standfirst-end meta-start] auto [meta-end portrait-end];
}
.furniture-wrapper #headline > div:first-child,
.furniture-wrapper [data-gu-name=headline] > div:first-child,
.furniture-wrapper .headline > div:first-child {
border-top: 1px solid var(--headerBorder);
}
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name=meta] {
position: relative;
padding-top: 2px;
margin-right: 0;
}
.furniture-wrapper .standfirst .content__standfirst,
.furniture-wrapper #standfirst .content__standfirst,
.furniture-wrapper [data-gu-name=standfirst] .content__standfirst {
margin-bottom: 4px;
}
.furniture-wrapper .standfirst ul li,
.furniture-wrapper #standfirst ul li,
.furniture-wrapper [data-gu-name=standfirst] ul li {
font-size: 20px;
}
.furniture-wrapper .standfirst li a,
.furniture-wrapper .standfirst a,
.furniture-wrapper #standfirst li a,
.furniture-wrapper #standfirst a,
.furniture-wrapper [data-gu-name=standfirst] li a,
.furniture-wrapper [data-gu-name=standfirst] a {
border-bottom: none;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
}
.furniture-wrapper .standfirst li a:hover,
.furniture-wrapper .standfirst a:hover,
.furniture-wrapper #standfirst li a:hover,
.furniture-wrapper #standfirst a:hover,
.furniture-wrapper [data-gu-name=standfirst] li a:hover,
.furniture-wrapper [data-gu-name=standfirst] a:hover {
text-decoration-color: var(--new-pillar-colour);
}
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name=standfirst] p:first-of-type {
border-top: 1px solid var(--headerBorder);
padding-bottom: 0;
}
}
@media (min-width: 61.25em) and (min-width: 71.25em) {
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name=standfirst] p:first-of-type {
border-top: unset;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper figure {
margin: 0 0 0 -10px;
}
.furniture-wrapper figure[data-spacefinder-role=inline].element {
max-width: 630px;
}
}
@media (min-width: 71.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(2, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(7, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 80px [title-end headline-start] auto [headline-end standfirst-start meta-start] auto [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name=meta]:before {
content: "";
width: 540px;
position: absolute;
top: 0;
background-color: var(--headerBorder);
height: 1px;
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name=standfirst] p {
border-top: unset;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name=standfirst]:before {
content: "";
width: 1px;
background-color: var(--headerBorder);
height: 100%;
position: absolute;
top: 0;
left
