Bu CSS kodu, "Guardian Headline Full" adlı özel bir yazı tipi ailesini birden fazla yazı tipi ağırlığı ve stiliyle tanımlar. İnce, normal, orta ve yarı kalın ağırlıkların her birini hem normal hem de italik versiyonlarıyla içerir. Yazı tipleri, farklı tarayıcılar arasında uyumluluğu sağlamak için Guardian'ın sunucularından WOFF2, WOFF ve TrueType formatlarında yüklenir.
@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, 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) {
}
Etkileşimli içerik sütunları için, belirli bir konumlandırma ve z-index ile sol kenarlık eklenir. Daha büyük ekranlarda, kenarlığın sol konumu hafifçe ayarlanır. Bu sütunlar içinde, atomik öğelerin üst veya alt kenar boşluğu yoktur ancak dolgu içerir. Paragraflar atomik öğelerden önce geliyorsa, dolgu kaldırılır ve bunun yerine kenar boşlukları eklenir. Satır içi öğeler maksimum bir genişlikle sınırlandırılır.
Orta ekranlar ve üzeri için satır içi şekillere maksimum genişlik belirlenir. Döngü şekilleri içeren medya bölümlerinde, altyazılar üstte katmanlanır ve döngü düğmeleri belirli boyutlar ve hizalama ile stilize edilir. Altyazı düğmeleri üste yerleştirilir.
Gövde bölümünde, kendi barındırılan video adaları, maksimuma kadar tam genişlik alır, merkezli kenar boşlukları ile. Bu adalar içindeki döngü şekilleri ve videolar da tam genişlik alır. Sürükleyici video öğeleri için, genişlik kısıtlamaları kaldırılır ve kenar boşlukları ayarlanır. Daha büyük ekranlarda, sürükleyici videolar genişlik olarak genişler ve sola doğru kayar, altyazılar buna göre girintilenir.
Renk değişkenleri, tarih çizgileri, kenarlıklar, altyazılar ve özellik renkleri gibi çeşitli kullanıcı arayüzü öğelerini tanımlar; sütun renkleri alt başlıkları, alıntıları ve blok alıntıları etkiler. Karanlık modda, bu renkler karanlık temaya uyum sağlar.
İçerik sütunları içindeki atomik öğelerin dolgusu yoktur. Belirli kurallar, makaleler, etkileşimli içerik, yorumlar ve özellikler gibi farklı içerik alanlarındaki belirli öğelerden veya yatay kurallardan sonraki ilk paragrafları ayarlayarak uygun boşluk ve düzeni sağlar.
Bir giriş kapısından veya yatay bir çizgiden (sonuncusu hariç) sonraki ilk paragrafın üst dolgusu 14 pikseldir.
Çeşitli içerik alanlarındaki (makale gövdesi, etkileşimli içerik, yorumlar, özellikler veya `data-gu-name` özelliği "body" olan öğeler) bir atom, giriş kapısı veya yatay bir çizgiden (sonuncusu hariç) sonraki ilk paragrafın ilk harfi için özel bir düşen başlık stili uygulanır. Bu stil, belirli başlık yazı tiplerini kullanır, yazı tipi boyutunu 111px ve satır yüksekliğini 92px olarak ayarlar, sola yaslar, büyük harf yapar, 8px sağ kenar boşluğu ekler, metnin üstüne hizalar ve düşen başlıklar için özel bir değişkenle renklendirir.
Bu içerik alanlarındaki yatay bir çizgiden hemen sonra gelen paragrafların üst dolgusu olmamalıdır.
Bu içerik alanlarındaki alıntılar maksimum 620 piksel genişlikle sınırlandırılır.
Ana içerik, özellik makaleleri, standart makaleler ve yorum bölümlerindeki vitrin öğeleri için altyazılar statik olarak konumlandırılır, maksimum 620 piksele kadar tam genişlik alır.
Sürükleyici öğeler, kaydırma çubuğunu hesaba katarak tam görünüm alanı genişliğini kaplar. Daha büyük ekranlarda (71.24em'e kadar), maksimum genişlikleri 978px'dir, altyazı dolgusu farklı kesme noktalarında ayarlanır. Orta ekranlarda (46.25em ile 61.24em arasında), maksimum genişlik 738px'dir. Daha küçük ekranlarda (46.24em altında), sürükleyici öğeler sol kenara hizalanır, kenar boşlukları ve altyazı dolgusu ayarlanır.
Daha geniş ekranlar için (61.25em üzerinde), mobilya sarmalayıcısı, başlık, manşet, meta veri, standfirst ve portre gibi öğeleri konumlandırmak için tanımlanmış sütun ve satırlarla bir CSS Grid düzeni kullanır.
CSS stilleri, makale bileşenleri için bir düzen sarmalayıcısı tanımlar. Manşetlerin üst kenarlığı vardır ve boyutları daha büyük ekranlarda 32px'den 50px'ye ayarlanır, maksimum genişlikleri de değişir. Meta bilgisi, geniş ekranlarda dekoratif bir üst çizgi içerir. Standfirst bölümü, üzerine gelindiğinde rengi değişen özel bir renkle altı çizili bağlantılar içerir ve ilk paragrafının daha küçük ekranlarda üst kenarlığı vardır, bu daha büyük ekranlarda kaldırılır. Standfirst'ta geniş ekranlarda dikey bir ayırıcı çizgi görünür.
71.25em ve daha geniş ekranlar için ve tekrar 81.25em ve daha geniş ekranlar için düzen ızgaraları tanımlanır, başlık, manşet, meta, standfirst ve portre alanları gibi öğelerin konumlandırılması için sütun ve satır şablonları belirtilir. Şekillerin belirli kenar boşlukları ve maksimum genişlikleri vardır. Genel olarak, stiller makale başlıklarının ve tanıtıcı içeriğin duyarlı sunumunu kontrol eder.
740px'den geniş ekranlar için, `.keyline-4` sınıfına veya `[data-gu-name="lines"]` özelliğine sahip öğeleri gizleyin. `.furniture-wrapper` içinde, bu öğelerin içindeki SVG çizgilerini özel bir renk değişkeniyle stilize edin.
Orta ekranlar ve üzerinde, `#meta` kimliğine veya `[data-gu-name="meta"]` özelliğine sahip öğelerden sağ kenar boşluğunu kaldırın.
Meta bölümü içinde, sosyal bağlantılar, yorum öğeleri ve alt açıklamaları için kenarlık rengini özel bir değişkene ayarlayın. Ayrıca, belirli bir kapsayıcı içindeki `gu-island` öğelerini gizleyin.
Standfirst bölümü için, konumlandırmasını ve dolgusunu ayarlayın, sol ofset ekleyin. Orta ekranlarda, küçük bir üst dolgu ekleyin. İçindeki paragrafı normal yazı tipi ağırlığı, 20px boyut ve alt dolgu ile stilize edin.
Ana medya alanı göreceli olarak konumlandırılır, 'portre' ızgara alanına yerleştirilir ve belirli kenar boşlukları verilir. İç div'lerin tam genişlik almasını sağlayın. Daha büyük ekranlarda, alt kenar boşluğunu kaldırın. Daha küçük ekranlarda, genişliği ve sol kenar boşluğunu ayarlayın, orta-küçük ekranlar için ek bir ayarlama ile.
Şekil altyazılarını, özel bir arka plan ve metin rengiyle altta görünecek şekilde stilize edin, varsayılan genişlik ve kenar boşluklarını geçersiz kılın. İçindeki ilk açıklamayı gizleyin ve ikincisini görüntüleyin, genişliğini sınırlandırın. Orta ekranlarda, altyazı dolgusunu ayarlayın. Gizli bir durum, altyazıyı şeffaf yapar.
Bir altyazı düğmesi sağ altta konumlandırılır, dairesel bir arka plan ve ölçeklenmiş simge ile stilize edilir, konumu orta ekranlarda ayarlanır.
Çok büyük ekranlardaki etkileşimli makale sütunları için, bir sözde öğenin konumunu ve yüksekliğini ayarlayın. Ayrıca, seviye-2 başlıklarının genişliğini sınırlayın.
iOS veya Android'de, bir dizi karanlık tema renk değişkeni tanımlayın. Karanlık modda, birincil ren
