Bu CSS kodu, "Guardian Headline Full" adlı özel bir yazı tipi ailesini tanımlar ve birden fazla yazı tipi ağırlığı ile stili içerir. Açık, normal, orta ve yarı kalın ağırlıkların her birinin hem normal hem de italik versiyonlarını barındırır. Her stil için, kod, Guardian'ın sunucularında barındırılan ve geniş tarayıcı uyumluluğu sağlayan üç farklı yazı tipi dosya formatını (woff2, woff ve ttf) belirtir.
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-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/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-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/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 {
left: 160px;
border-left: 1px solid #dcdcdc;
z-index: 0;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
left: 240px;
}
}
.content__main-column--interactive .element-atom {
margin-top: 0;
margin-bottom: 0;
padding-top: 12px;
padding-bottom: 18px;
}
.content__main-column--interactive p + .element-atom,
.content__main-column--interactive .element-atom + p {
padding-top: 0;
padding-bottom: 0;
margin-top: 18px;
margin-bottom: 18px;
}
.content__main-column--interactive .element-inline {
max-width: 100%;
}
.content__main-column--interactive figure[role="inline"] {
max-width: 100%;
}
@media (min-width: 46.25em) {
.content__main-column--interactive figure[role="inline"] {
max-width: 620px;
}
}
:root {
--dateline: #7d7569;
--headline: #121212;
--byline: #595959;
--caption: #595959;
--feature: #ab0613;
--primary-pillar-colour: var(--feature);
}
.content__main-column--interactive .element-atom,
.element-atom {
padding-top: 0;
padding-bottom: 0;
}
.content__article-body .element--supporting + p:first-of-type,
.content__article-body .element-showcase + p:first-of-type,
.content__article-body .element-atom + p:first-of-type,
.content__article-body hr + p:first-of-type,
.content__interactive .element--supporting + p:first-of-type,
.content__interactive .element-showcase + p:first-of-type,
.content__interactive .element-atom + p:first-of-type,
.content__interactive hr + p:first-of-type,
.content__feature .element--supporting + p:first-of-type,
.content__feature .element-showcase + p:first-of-type,
.content__feature .element-atom + p:first-of-type,
.content__feature hr + p:first-of-type,
.content__comment .element--supporting + p:first-of-type,
.content__comment .element-showcase + p:first-of-type,
.content__comment .element-atom + p:first-of-type,
.content__comment hr + p:first-of-type {
padding-top: 6px;
}
.content__article-body .element--supporting + p:first-of-type:first-letter,
.content__article-body .element-showcase + p:first-of-type:first-letter,
.content__article-body .element-atom + p:first-of-type:first-letter,
.content__article-body hr + p:first-of-type:first-letter,
.content__interactive .element--supporting + p:first-of-type:first-letter,
.content__interactive .element-showcase + p:first-of-type:first-letter,
.content__interactive .element-atom + p:first-of-type:first-letter,
.content__interactive hr + p:first-of-type:first-letter,
.content__feature .element--supporting + p:first-of-type:first-letter,
.content__feature .element-showcase + p:first-of-type:first-letter,
.content__feature .element-atom + p:first-of-type:first-letter,
.content__feature hr + p:first-of-type:first-letter,
.content__comment .element--supporting + p:first-of-type:first-letter,
.content__comment .element-showcase + p:first-of-type:first-letter,
.content__comment .element-atom + p:first-of-type:first-letter,
.content__comment hr + p:first-of-type:first-letter {
font-family: Guardian Headline Full, Guardian Egyptian Web, Georgia, serif;
font-size: 60px;
line-height: 50px;
font-weight: 700;
padding-right: 5px;
float: left;
color: var(--primary-pillar-colour);
}
.content__article-body hr + p,
.content__interactive hr + p,
.content__feature hr + p,
.content__comment hr + p {
padding-top: 0;
}
.pullquote {
max-width: 620px;
}
.content__article-body .element-showcase figcaption,
.content__interactive .element-showcase figcaption,
.content__feature .element-showcase figcaption,
.content__comment .element-showcase figcaption,
.content__main-column .element-showcase figcaption,
.article__container .element-showcase figcaption {
position: static;
width: 100%;
max-width: 620px;
}
.content__main-column--interactive .element-immersive {
width: calc(100vw - var(--scrollbar-width));
}
@media (max-width: 71.24em) {
.content__main-column--interactive .element-immersive {
max-width: 978px;
}
}
@media (max-width: 71.24em) {
.content__main-column--interactive .element-immersive figcaption {
padding-left: 10px;
padding-right: 10px;
}
}
@media (min-width: 30em) and (max-width: 71.24em) {
.content__main-column--interactive .element-immersive figcaption {
padding-left: 20px;
padding-right: 20px;
}
}
@media (min-width: 46.25em) and (max-width: 61.24em) {
.content__main-column--interactive .element-immersive {
max-width: 738px;
}
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-immersive {
margin-left: 0;
left: 0;
margin-left: -10px;
}
}
@media (min-width: 30em) and (max-width: 46.24em) {
.content__main-column--interactive .element-immersive {
margin-left: -20px;
}
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-immersive figcaption {
padding-left: 20px;
padding-right: 20px;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper {
display: grid;
grid-template-columns: [title-start] 1fr [title-end headline-start] 2fr [headline-end meta-start] 1fr [meta-end];
grid-template-rows: [title] auto [headline] auto [meta] auto [standfirst] auto [portrait] auto;
}
}
.furniture-wrapper > :first-child {
border-top: 1px solid var(--headline);
}
.furniture-wrapper .meta {
position: relative;
padding-top: 12px;
margin-right: 0;
}
.furniture-wrapper .standfirst {
margin-bottom: 24px;
}
.furniture-wrapper .standfirst li {
font-size: 20px;
}
.furniture-wrapper .standfirst a {
text-decoration: underline;
text-decoration-color: var(--byline);
}
.furniture-wrapper .standfirst a:hover {
text-decoration-color: var(--headline);
}
.furniture-wrapper .standfirst > p:first-of-type {
border-top: 1px solid var(--headline);
padding-bottom: 0;
}
@media (min-width: 71.25em) {
.furniture-wrapper .standfirst > p:first-of-type {
border-top: none;
}
}
.furniture-wrapper figure {
margin-left: 0;
}
.furniture-wrapper figure[role="inline"] {
max-width: 630px;
}
@media (min-width: 71.25em) {
.furniture-wrapper {
grid-template-columns: [title-start] 1fr [title-end headline-start] 2fr [headline-end meta-start] 1fr [meta-end];
grid-template-rows: [title] auto [headline] auto [meta] auto [standfirst] auto [portrait] auto;
}
}
@media (min-width: 46.25em) and (max-width: 71.24em) {
.furniture-wrapper {
grid-template-columns: [title-start] 1fr [title-end headline-start] 2fr [headline-end];
grid-template-rows: [title] auto [headline] auto [meta] auto [standfirst] auto [portrait] auto;
}
}
@media (min-width: 30em) and (max-width: 46.24em) {
.furniture-wrapper {
grid-template-columns: [title-start] 1fr [title-end headline-start] 2fr [headline-end];
grid-template-rows: [title] auto [headline] auto [meta] auto [standfirst] auto [portrait] auto;
}
}
.furniture-wrapper .meta {
border-top: 1px solid var(--headline);
}
.furniture-wrapper .standfirst {
border-left: 1px solid var(--headline);
padding-left: 20px;
}
.furniture-wrapper .headline {
max-width: 620px;
font-size: 40px;
}
@media (min-width: 46.25em) {
.furniture-wrapper .headline {
font-size: 50px;
}
}
@media (min-width: 71.25em) {
.furniture-wrapper .headline {
font-size: 60px;
}
}
.furniture-wrapper .social-sharing,
.furniture-wrapper .comment {
border-top: 1px solid var(--headline);
}
.furniture-wrapper .comment {
display: none;
}
@media (min-width: 46.25em) {
.furniture-wrapper .comment {
display: block;
}
}
.furniture-wrapper .standfirst {
padding-top: 12px;
padding-bottom: 12px;
font-family: Guardian Text Egyptian Web, Georgia, serif;
font-size: 20px;
line-height: 28px;
}
.furniture-wrapper .main-media {
grid-column: portrait;
grid-row: portrait;
}
@media (max-width: 46.24em) {
.furniture-wrapper .main-media {
width: calc(100vw - var(--scrollbar-width));
margin-left: -20px;
}
}
.furniture-wrapper figcaption {
position: absolute;
bottom: 0;
margin-bottom: 0;
padding: 10px;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
width: 100%;
min-height: 46px;
}
.furniture-wrapper figcaption span:first-of-type {
display: none;
}
.furniture-wrapper figcaption span:last-of-type {
display: block;
