Bu CSS kodu, "Guardian Headline Full" adlı özel bir yazı tipi ailesini tanımlar ve bu aileye birden fazla yazı tipi ağırlığı ve stili ekler. İçinde hem normal hem de italik stillerde hafif, normal, orta ve yarı kalın ağırlıklar bulunur. Yazı tipi dosyaları, Guardian'ın sunucularında barındırılan WOFF2, WOFF ve TrueType formatlarında sağlanmıştır.@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;
}
div#maincontent:focus {
box-shadow: none !important;
}
#init-1, #end-1, #init-2, #end-2, #init-3, #end-3, #init-4, #end-4, #init-5, #end-5,
h2#interactive-slot-1, h2#interactive-slot-2, h2#interactive-slot-3, h2#interactive-slot-4, h2#interactive-slot-5 {
visibility: hidden;
height: 0;
margin: 0;
padding: 0;
border: none;
}
:root {
--fires-bg-color: #0b0a32;
--headline-bg-color: #0b0a32;
--custom-text-color: #fff;
--article-border: #fac99b;
--primary-accent-color: #fac99b;
--secondary-accent-color: #ff5943;
--tertiary-accent-color: #59433c;
--block-quote-fill: var(--primary-accent-color);
--share-button: var(--primary-accent-color);
--share-button-hover: var(--fires-bg-color);
--interactive-block-background-datawrapper: transparent;
--branding-border: var(--tertiary-accent-color);
--section-background: #ffffff;
--interactive-block-background: transparent;
--caption-text: var(--primary-accent-color);
--sub-meta-label-text: #fff;
--dateline: var(--secondary-accent-color);
--sub-meta-background: --fires-bg-color;
--sub-meta-text: var(--primary-accent-color);
--sub-meta-text-hover: var(--fires-bg-color);
--straight-lines: var(--primary-accent-color);
--article-meta-lines: var(--primary-accent-color);
--article-background: var(--fires-bg-color);
}
li:before {
background-color: var(--secondary-accent-color) !important;
}
body {
background-color: var(--fires-bg-color) !important;
}
.content--interactive {
background-color: transparent !important;
}
body .content--interactive h1,
body .article h1 {
order: 1;
text-align: left;
color: #fff;
min-width: 50%;
margin: 0 auto 13px 10px;
color: var(--secondary-accent-color) !important;
}
.content__standfirst p {
margin: 0 auto 13px 10px;
}
.content__label__link span {
margin: 0 0 0 10px !important;
}Kapsayıcı özetinin sol kenar boşluğu 10 pikseldir ve metni için belirli bir vurgu rengi kullanır. "data-print-layout" özelliği "hide" olarak ayarlanmış öğeler görüntülenmez.
Etkileşimli içerik ve makaleler içindeki paragraflar ve ana başlıklar özel metin renkleri kullanır. Ana başlık yazı tipi boyutu 3 rem olarak ayarlanmıştır ve orta boyutlu ekranlarda 2.5 rem'e ayarlanır. İkincil başlıklar, hafif bir yazı tipi ağırlığı, 32 piksel boyut ve özel bir metin rengi ile stilize edilmiştir.
Etkileşimli içerikteki giriş metni, birincil vurgu rengini kullanır ve maksimum 320 piksel genişliğe sahiptir. Makaleler ve etkileşimli içerik içindeki bağlantılar ikincil bir vurgu rengiyle renklendirilmiştir. Başlık etiketi bağlantısı da birincil vurgu rengini kullanır.
Gövde, metin, arka planlar, çizgiler, düğmeler, vurgular ve belirli marka renkleri için CSS özel özelliklerini kullanarak kapsamlı bir renk şeması tanımlar. Genel sayfa arka planı özel bir değişkenle ayarlanmıştır.
Makale başlıkları ve gövdeleri şeffaf bir arka plana sahiptir. Etkileşimli içerik için ana sütun genişliğini ayarlar ve varsayılan kenar boşluklarını kaldırır. İlk şekil ve ilk atom öğesi renkli alt kenarlıklara sahiptir.
Ana etkileşimli makale kapsayıcısı, yatay kaydırma olmadan tam görünüm alanı genişliğini kaplar ve belirli bir ızgara alanı kullanır. Daha büyük ekranlarda, düzen çok sütunlu bir ızgara kullanır. Makale gövdesi tüm ızgarayı kaplar ve taşmayı gizler.
Bir kenarlık öğesi gizlenir ve ana içerik alanının üst kenar boşluğu yoktur. Çok geniş ekranlar için, ızgara, gövde dışındaki öğeler için sol kenar boşluğu ile 1300px'lik merkezi bir sütun tanımlar. Bu merkezi sütun ve kenar boşluğu, farklı ekran genişlikleri için çeşitli kesme noktalarında ayarlanır.
Etkileşimli ızgaradaki gövde dışı öğeler daha yüksek bir yığın sırasına sahiptir ve daha büyük ekranlarda yan dolgu alır. Android ve iOS'ta, makale gövdesinin dolgusu yoktur ve başlık mutlak konumlandırılmıştır ve şeffaf bir arka plana sahiptir. Yazar bilgisi metni ve meta bölümü içindeki bağlantılar da bu mobil platformlarda şeffaflığı korur.Yazar bilgisi, yazar bağlantıları ve başlık etiketleri ikincil vurgu rengini kullanacak şekilde ayarlanmıştır. Meta-yazar bilgisi bileşeninin sol kenar boşluğu 10px'dir. Yazar bağlantılarının alt kenar boşluğu 13px'dir. Başlık ve manşet bölümlerinin üst dolgusu 5vh'dir, başlığın ayrıca alt dolgusu 4px'dir. Çizgiler öğesi ve meta bölümü kenarlıkları Android ve iOS'ta gizlenir.
Android ve iOS'ta, yayınlanma tarihinin üst dolgusu 4px'dir. Meta bölümündeki sosyal medya düğmeleri, metin ve kenarlıklar için ikincil vurgu rengini kullanır ve simgeleri aynı renkle doldurulur. İçerik meta kapsayıcısındaki simgeler gizlenir. Etkileşimli ızgaradaki tüm gövde dışı öğelerin sol ve sağ dolgusu 10px'dir. Meta alanındaki sosyal medya bölümünün üst kenarlığı yoktur ve yorum bölümü gizlenir. Paylaş düğmesi, üzerine gelindiğinde beyaz simgeli ikincil vurgu rengine dönüşür.
İlk atom öğesi şekli, alt kenar boşluğu 12px olacak şekilde tüm sütunları kaplar. Sürükleyici öğe şekilleri, yan kenar boşlukları olmadan, 1260px'ye kadar tam genişliktedir ve sondan bir önceki sütundan ikinci sütuna kadar uzanır.
Küçük ekranlarda (30em altında), ana sütundaki tüm sürükleyici olmayan öğelerin yan kenar boşlukları 10px'dir. Orta ekranlarda (46.25em ve üzeri), ana etkileşimli sütun göreceli konuma sahiptir ve solda dikey bir çizgi vardır. Atom olmayan öğeler gövde ızgara sütununa yerleştirilir.
Farklı ekran boyutları için, düzen belirli ızgara şablonlarını kullanır:
- 46.25em ile 61.24em arasında: üç sütunlu bir düzen.
- 61.25em ile 71.24em arasında: dört sütunlu bir düzen.
- 71.25em ile 81.24em arasında: sol ve sağ sütunlu beş sütunlu bir düzen.
- 81.25em üzerinde: daha geniş sütunlu beş sütunlu bir düzen.
Başlık, üstten 20dvh konumlandırılmıştır, tam genişliktedir ve üst kenar boşluğu yoktur. 20em ile 46.24em arasındaki ekranlarda, 10dvh'ye taşınır. Başlık etiketlerinin kenarlığı yoktur.
Manşet de 20dvh'dedir, tam genişliktedir, koyu bir arka plana, dolguya ve üst kenarlığa sahiptir. Orta ekranlarda, 10dvh'ye taşınır.
Standfirst, 20dvh'de konumlandırılmıştır, tam genişliktedir, koyu bir arka plana ve dolguya sahiptir. Orta ekranlarda, 10dvh'ye taşınır.
Etkileşimli ızgara, manşet, standfirst, medya, çizgiler, meta ve gövde için alanlar tanımlar.
Meta bölümü tam genişliktedir, 20dvh'de konumlandırılmıştır, koyu bir arka plana ve 5 z-index değerine sahiptir. Orta ekranlarda, 10dvh'ye taşınır. Tarih çizgisinin sol kenar boşluğu 10px'dir.
Svelte-scroller-outer, göreceli konumlandırmaya sahip bir blok olarak görüntülenir.CSS kodu, bir kaydırıcı bileşeni için stiller tanımlar ve Guardian Headline Full yazı tipi ailesi için font-face kurallarını içerir. Kaydırıcı, blok görüntüleme, göreceli konumlandırma ve tam genişliğe sahiptir. Ön planı daha yüksek bir z-index değerine ayarlanmıştır ve float'ları temizler, arka plan kapsayıcısı ise mutlak konumlandırılmıştır, işaretçi olayları yoktur ve dönüşüm değişiklikleri için optimize edilmiştir. Font-face kuralları, Guardian'ın sunucularından Guardian Headline Full yazı tipinin çeşitli ağırlıklarını ve stillerini yükler, hem normal hem de italik stillerde hafif, normal, orta ve yarı kalın varyantları belirtir ve WOFF2, WOFF ve TTF formatları için destek sağlar.Guardian, manşetleri ve başlık parçaları için özel yazı tipleri kullanır. Bu yazı tipleri, geniş tarayıcı uyumluluğu sağlamak için WOFF2, WOFF ve TTF gibi birden fazla formatta sunucularından yüklenir. Kalın veya italik gibi her yazı tipi varyasyonu, belirli ağırlıklar ve stillerle tanımlanır.
Sayfa, veri alımı sırasında görünen dönen bir animasyon içeren bir yükleme kaplaması içerir. Ana içerik alanı, tam ekran bir harita ve kaydırılabilir bir anlatı bölümü içerir. Bu bölüm içindeki metin kutuları, Guardian'ın Mısır Web yazı tipini gövde metni için kullanarak stilize edilmiş bir arka plan, kenarlık ve tipografiye sahiptir. Bel
