가디언 헤드라인 풀 폰트 패밀리에는 여러 스타일이 포함되어 있으며, 각 스타일은 여러 파일 형식으로 제공됩니다. 라이트 스타일(font-weight: 300)은 일반체와 이탤릭체 버전으로 제공됩니다. 레귤러 스타일(font-weight: 400)도 일반체와 이탤릭체 변형이 있습니다. 마찬가지로 미디엄 스타일(font-weight: 500)과 세미볼드 스타일(font-weight: 600) 각각 일반체와 이탤릭체 옵션을 제공합니다. 모든 폰트 파일은 지정된 웹 주소에 호스팅되어 있습니다.@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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;
}
@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, 0px));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width, 0px)) !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;
}
}제공된 텍스트는 웹사이트 스타일시트의 일부로 보이는 CSS 코드 조각입니다. 이 코드는 기사, 댓글, 인터랙티브 콘텐츠 등 다양한 요소에 대한 색상, 간격, 레이아웃 규칙과 같은 시각적 스타일을 정의합니다. 코드에는 여백, 패딩, 텍스트 및 배경 색상, 그리고 다양한 화면 크기에 대한 반응형 디자인 설정에 대한 구체적인 지침이 포함되어 있습니다.
CSS 코드는 웹페이지의 드롭 캡, 풀쿼트, 몰입형 요소 등 다양한 요소에 대한 스타일을 정의합니다. 이 코드는 특히 61.25em 이상의 더 넓은 화면을 위해 다양한 화면 크기에 맞춰 여백, 패딩, 그리드 레이아웃을 조정하는 반응형 디자인 규칙을 포함합니다.
CSS 코드는 레이아웃 래퍼에 대한 스타일을 정의하며, 다양한 화면 크기에 걸쳐 그리드 구조, 타이포그래피, 요소 가시성을 조정합니다. 더 큰 화면의 경우, 특정 그리드 템플릿을 설정하고, 헤드라인 폰트 크기와 너비를 수정하며, 선 및 소셜 구성 요소와 같은 특정 요소를 숨깁니다. 테두리와 간격이 사용자 정의되며, 미디어 쿼리는 다양한 장치 너비에 대한 반응형 동작을 보장합니다.@media (max-width: 46.24em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
width: calc(100vw - var(--scrollbar-width, 0px));
margin-left: -10px;
}
}
@media (max-width: 46.24em) and (min-width: 30em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
margin-left: -20px;
}
}
.furniture-wrapper figcaption {
position: absolute;
bottom: 0;
padding: 4px 10px 12px;
background-color: var(--captionBackground);
color: var(--captionText);
max-width: unset;
width: 100%;
margin-bottom: 0;
min-height: 46px;
}
.furniture-wrapper figcaption span {
color: var(--headerBorder);
}
.furniture-wrapper figcaption span svg {
fill: var(--headerBorder);
}
.furniture-wrapper figcaption span:nth-of-type(1) {
display: none;
}
.furniture-wrapper figcaption span:nth-of-type(2) {
display: block;
max-width: 90%;
}
@media (min-width: 30em) {
.furniture-wrapper figcaption {
padding: 4px 20px 12px;
}
}
.furniture-wrapper figcaption.hidden {
opacity: 0;
}
.furniture-wrapper #caption-button {
display: block;
position: absolute;
bottom: 10px;
right: 8px;
z-index: 30;
background-color: var(--captionBackground);
border: none;
border-radius: 50%;
padding: 6px 5px 5px;
}
.furniture-wrapper #caption-button svg {
transform: scale(0.85);
}
@media (min-width: 30em) {
.furniture-wrapper #caption-button {
right: 10px;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive:before {
top: -12px !important;
height: calc(100% + 24px) !important;
}
}
.content__main-column--interactive h2 {
max-width: 620px;
}
:root {
--new-pillar-colour: var(--darkmode-pillar, var(--darkModeFeature)) !important;
--headerBorderColor: #606060;
--darkModeFeature: #ff5943;
}
nav + section {
display: none;
}
nav + aside {
display: none;
}
aside + section {
display: none;
}
.furniture-wrapper {
background-color: var(--darkBackground);
margin: 0 -10px;
padding: 0 10px 4px;
}
@media (min-width: 30em) {
.furniture-wrapper {
margin: 0 -20px;
padding: 0 20px 8px;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper {
padding: 0 20px;
}
}
@media (min-width: 81.25em) {
.furniture-wrapper:before {
content: "";
width: calc((100vw - 1298px) / 2);
height: 100%;
position: absolute;
left: calc((100vw - 1298px) / -2);
background-color: var(--darkBackground);
border-right: 1px solid var(--headerBorderColor);
}
.furniture-wrapper:after {
content: "";
width: calc((100vw - 1298px) / 2);
height: 100%;
position: absolute;
right: calc((100vw - 1298px) / -2);
background-color: var(--darkBackground);
}
}
.furniture-wrapper .article-header,
.furniture-wrapper [data-gu-name="title"] a,
.furniture-wrapper [data-gu-name="title"] span {
color: var(--new-pillar-colour, --darkModeFeature);
}
@media (min-width: 61.25em) {
.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(--headerBorderColor);
}
}
.furniture-wrapper #headline h1,
.furniture-wrapper [data-gu-name="headline"] h1,
.furniture-wrapper .headline h1 {
font-weight: 700;
color: #dcdcdc;
}
.furniture-wrapper #headline figure,
.furniture-wrapper [data-gu-name="headline"] figure,
.furniture-wrapper .headline figure {
margin-top: 0;
margin-bottom: 2px;
}
@media (min-width: 71.25em) {
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
background-color: var(--headerBorderColor);
}
}
.furniture-wrapper #meta details,
.furniture-wrapper #meta summary,
.furniture-wrapper #meta summary span,
.furniture-wrapper [data-gu-name="meta"] details,
.furniture-wrapper [data-gu-name="meta"] summary,
.furniture-wrapper [data-gu-name="meta"] summary span {
color: #dcdcdc;
}
.furniture-wrapper #meta .meta__social a,
.furniture-wrapper #meta .meta__social button,
.furniture-wrapper [data-gu-name="meta"] .meta__social a,
.furniture-wrapper [data-gu-name="meta"] .meta__social button {
border-color: var(--headerBorderColor);
color: var(--new-pillar-colour, --darkModeFeature);
}
.furniture-wrapper #meta .meta__social a svg,
.furniture-wrapper #meta .meta__social button svg,
.furniture-wrapper [data-gu-name="meta"] .meta__social a svg,
.furniture-wrapper [data-gu-name="meta"] .meta__social button svg {
fill: var(--new-pillar-colour, --darkModeFeature);
}
.furniture-wrapper #meta .meta__social a:hover,
.furniture-wrapper #meta .meta__social button:hover,
.furniture-wrapper [data-gu-name="meta"] .meta__social가구 래퍼 내 링크나 소셜 미디어 버튼 위에 마우스를 올리면 텍스트 색상이 어두운 배경색으로 바뀌고, 배경색은 새로운 필러 색상이나 다크 모드 기능 색상을 사용합니다. 이러한 요소 내 아이콘도 마우스 오버 시 어두운 배경색으로 채워집니다.
메타 섹션 내 텍스트는 연한 회색(#dcdcdc)인 반면, 링크는 새로운 필러 색상이나 다크 모드 기능 색상을 사용합니다. 이러한 링크 위에 마우스를 올리면 색상과 밑줄이 동일한 색상으로 변경됩니다.
스탠드퍼스트 섹션에서 링크는 하단 테두리가 없고, 새로운 필러 색상을 사용하며, 헤더 테두리 색상을 기반으로 한 색상으로 밑줄이 그어집니다. 마우스 오버 시 밑줄 색상이 새로운 필러 색상으로 변경됩니다. 스탠드퍼스트의 단락 텍스트는 연한 회색이며, 더 큰 화면에서는 첫 번째 단락에 상단 테두리가 있을 수 있고, 더 큰 화면에서는 사라질 수 있습니다. 스탠드퍼스트의 목록 항목도 연한 회색이며, 더 큰 화면에서는 스탠드퍼스트 앞에 배경 선이 나타납니다.
더 넓은 화면의 경우, 가구 래퍼는 어두운 배경과 테두리를 가진 사이드바를 추가합니다. 이러한 사이드바의 너비는 다양한 브레이크포인트(738px, 978px, 1138px, 1298px)에서 뷰포트 너비에서 스크롤바를 뺀 값을 기준으로 계산되어 조정됩니다.
1298px보다 넓은 화면의 경우, 오른쪽 위치는 뷰포트 너비(스크롤바 제외)와 1298px의 차이의 절반으로 계산되지만, 음수 값으로 설정됩니다.
가구 래퍼에서 "keyline-4" 클래스를 가진 요소나 "data-gu-name" 속성이 "lines"로 설정된 요소 내 SVG의 스트로크 색상은 CSS 변수 "--headerBorderColor"를 사용합니다. 마찬가지로, 메타 섹션 내 소셜 공유, 댓글 요소 및 그 자식 스팬의 테두리 색상도 이 변수를 사용합니다.
표준 또는 인터랙티브 콘텐츠의 기
