Guardian Headline Full yazı tipi ailesi, her biri farklı ağırlık ve italik stillerine sahip çeşitli stiller içerir. İnce versiyon (ağırlık 300) hem düz hem de italik stillerde mevcuttur, aynı şekilde normal versiyon (ağırlık 400) da öyledir. Orta (ağırlık 500) ve yarı kalın (ağırlık 600) stillerinin de düz ve italik seçenekleri vardır. Her yazı tipi dosyası, Guardian'ın sunucularından WOFF2, WOFF ve TrueType formatlarında temin edilebilir.@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;
}
}Ana interaktif içerik sütunu, elementler için özel stillendirmeye sahiptir. Bu sütun içindeki elementlerin üst ve alt marjı yoktur ancak dolgu içerirler. Bir paragraf bir elementin ardından geldiğinde, boşluk buna göre ayarlanır. Satır içi elementler maksimum 620 piksel genişliğiyle sınırlıdır.
Daha büyük ekranlar için, satır içi şekiller de 620 piksel ile sınırlandırılır. Video döngüleri için özel stillendirme uygulanır; bu, düğme yerleşimi ve altyazı konumlandırmasını içerir. Kendi barındırılan videolar, ortalanmış kenar boşluklarıyla maksimum 620 piksel genişliğe ayarlanırken, sürükleyici videolar daha büyük ekranlarda ayarlanmış kenar boşluklarıyla tam genişliğe genişler.
Renk değişkenleri, tarih çizgisi, başlık sınırları ve altyazı renkleri gibi temayı tanımlar. Karanlık modda, bu renkler daha koyu bir palete uyum sağlar. Belirli elementlerden sonraki ilk paragraf ek üst dolgu alır ve ilk paragrafın ilk harfi ayırt edici şekilde stilize edilebilir.CSS kodu, bir web sitesinin makaleler, yorumlar ve özellikler gibi farklı bölümlerindeki sarkan başlıklar, alıntılar ve çeşitli düzen elementleri için stiller tanımlar. Paragrafların ilk harfi için belirli yazı tipleri, boyutlar ve renkler belirler, sürükleyici ve vitrin elementlerinin genişliğini ve konumlandırmasını ayarlar ve daha büyük ekranlar için duyarlı bir ızgara düzeni oluşturur. Stillere ayrıca farklı ekran boyutlarına uyum sağlamak için medya sorguları dahildir.Mobilya sarmalayıcısı, standfirst içeriğini 2 piksel üst dolgulu ve sağ marjı olmayacak şekilde göreceli konumlandırır. Standfirst içinde, liste öğeleri 20 piksel yazı tipi boyutuna sahiptir ve bağlantıların kenarlığı yoktur, arka plan resmi yoktur, 6 piksel ofsetli bir alt çizgisi vardır ve rengi özel özellik `--headerBorder`'dan (varsayılan olarak `#dcdcdc`) alır. Üzerine gelindiğinde, bağlantı alt çizgisi `--new-pillar-colour` ile tanımlanan renge değişir.
Daha büyük ekranlar için (61.25em ve üzeri), şekillerin sol marjı yoktur ve belirli bir role sahip satır içi elementler maksimum 630 piksel genişliği ile sınırlıdır. 71.25em ve üzerinde, düzen tanımlanmış sütunlar ve satırlar içeren bir ızgara kullanır. Meta bölümünden önce dekoratif bir çizgi görünür ve standfirst'tan önce dikey bir çizgi eklenir. Paragraf kenarlıkları bu kesme noktasında kaldırılır.
81.25em'de, ızgara daha fazla sütun içerecek şekilde ayarlanır ve dekoratif çizgiler yeniden konumlandırılır.
Başlıklar 600 yazı tipi ağırlığına ve 620 piksel maksimum genişliğe sahiptir, yazı tipi boyutu 32 pikseldir. Daha büyük ekranlarda (71.25em ve üzeri), başlık yazı tipi boyutu 50 piksele çıkar ve maksimum genişlik 540 piksele düşer.
Orta boy ekranlar için (46.25em ve üzeri), `keyline-4` sınıfına veya `data-gu-name=lines` özniteliğine sahip elementlerin sağ marjı yoktur. Daha büyük ekranlarda (61.25em ve üzeri), bu elementler gizlenir. SVG çizgileri `--headerBorder` rengini kullanır.Bu CSS kodu, özellikle mobilya temalı bir sarmalayıcı için bir web sayfası düzeni stillerini tanımlar. Meta bilgileri, standfirst metni, ana medya ve altyazılar gibi elementler için çeşitli özellikler belirler. Stillere, medya sorguları kullanılarak farklı ekran boyutları için belirli kurallarla birlikte kenar boşlukları, dolgu, renkler ve konumlandırma ayarlamaları dahildir. Tasarım, karanlık mod özellikleri ve arka plan tonları gibi renkler için özel CSS değişkenleri kullanır ve cihazlar arasında duyarlı davranış sağlar.CSS kodu, bir furniture-wrapper sınıfı içindeki elementleri stillendirir. Başlıklar (h1) kalın ve açık gridir (#dcdcdc). Başlıklardaki şekillerin üst marjı yoktur ve küçük bir alt marjı vardır.
71.25em'den geniş ekranlar için, meta bölümünden önce renkli bir çizgi görünür. Meta bölümündeki metin ve özetler açık gridir. Sosyal medya düğmelerinin renkli bir kenarlığı ve simgesi vardır; simge ve metin üzerine gelindiğinde renk değiştirir.
Meta bölümündeki bağlantılar bir tema rengi kullanır ve üzerine gelindiğinde bu rengi korur, aynı renkte bir alt çizgi ile. Standfirst bölümünde, bağlantılar üzerine gelindiğinde tema rengine değişen açık gri bir çizgi ile altı çizilidir. Standfirst'taki paragraflar ve liste öğeleri açık gridir.
61.25em'den geniş ekranlarda, standfirst'taki ilk paragrafın üst kenarlığı vardır; bu, 71.25em'den geniş ekranlarda kaldırılır. Bu daha büyük ekranlarda, standfirst'tan önce renkli bir çizgi de görünür.
46.25em'den geniş ekranlar için, furniture-wrapper koyu bir arka plan ve sağ kenarlık alır.CSS, `.furniture-wrapper`'ı yan çubuklar oluşturan sözde elementlerle tanımlar. Bunlar, kaydırma çubuğu genişliğini hesaba katarak farklı kesme noktalarında sabit genişliklerde (738px, 978px, 1138px, 1298px) ortalanmış bir içerik alanını korumak için görünüm alanı boyutuna göre genişlik ve konumu ayarlar. Kenarlıklar ve arka plan renkleri CSS özel özellikleri kullanılarak uygulanır.
Makaleler içindeki başlıklar için, `h2` elementleri hafif bir yazı tipi ağırlığı (200) kullanır, ancak bir `strong` elementi içeriyorsa kalın (700) olarak değişir.
`@font-face` kuralları, "Guardian Headline Full" yazı tipi ailesini Guardian'ın sunucularından çeşitli ağırlık ve stillerde (Light, Light Italic, Regular, Regular Italic) yükler.@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.ttf) format("truetype");
font-weight: 400;
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-RegularItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format("truetype");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim
