Bu metin, "Guardian Headline Full" adlı özel bir yazı tipi ailesini birden fazla yazı tipi ağırlığı ve stiliyle tanımlar. Yazı tipi dosyalarını farklı biçimlerde (WOFF2, WOFF ve TrueType) ve tarayıcının ihtiyaç duyduğunda yükleyeceği çevrimiçi konumlarını belirtir. Tanımlar, normal ve italik stillerin her biri için hafif, normal, orta ve yarı kalın ağırlıkları içerir.
Bu CSS kodu, Guardian Headline ve Guardian Titlepiece yazı tipleri için çeşitli yazı tipi ailelerini tanımlayarak, yazı tipi ağırlıkları ve stilleriyle birlikte farklı biçimlerdeki (WOFF2, WOFF ve TrueType) kaynaklarını belirtir. Ayrıca, etkileşimli düzenlerdeki ana içerik sütunu için görünüm alanı boyutuna göre kenar boşluklarını, genişlikleri ve konumlandırmayı ayarlayan duyarlı tasım kurallarını içerir. Örneğin, daha geniş ekranlarda sol kenar boşluğu ve kenarlık eklerken, daha küçük ekranlarda öğelerin genişliklerini ve konumlarını ekrana sığacak şekilde ayarlar. Stiller, paragraflar, listeler ve sürükleyici içerik gibi öğelerin cihazlar arasında uygun şekilde uyum sağlamasını garanti eder.
Ana etkileşimli içerik sütunu için, öğeden önce sola 11 piksel konumlandırılmış sol kenarlık eklenir. Bu sütun içinde, atomların üst veya alt kenar boşluğu yoktur ancak her iki uçta 12 piksel dolgu vardır. Bir atomu bir paragraf takip ettiğinde, dolgu kaldırılır ve bunun yerine 12 piksel kenar boşlukları uygulanır. Satır içi öğeler maksimum 620 piksel genişlikle sınırlıdır ve 61.25em'den geniş ekranlarda, belirli bir role sahip satır içi şekiller de bu genişlik sınırına uyar.
Çeşitli öğeler için (tarih çizgisi, başlık kenarlığı, altyazı metni ve arka plan gibi) renk değişkenleri tanımlanmıştır, öne çıkan renk kırmızı olarak ayarlanmış ve yeni sütun rengi varsayılan olarak öne çıkan renge ayarlanmıştır. Ana sütundaki veya başka yerlerdeki atomların dolgusu yoktur.
Atomlar, giriş kapıları veya yatay kurallar gibi belirli öğeleri takip eden ilk paragraf için (makale gövdesi, etkileşimli içerik, yorumlar, özellikler gibi farklı içerik alanlarında) 14 piksel üst dolgu eklenir. Ayrıca, bu paragrafların ilk harfi, belirli bir yazı tipi ailesi, kalın ağırlık, büyük yazı tipi boyutu, büyük harf metni, sola kayan ve damla başlıklar veya yeni sütun rengi için bir değişken kullanılarak renklendirilmiş şekilde stilize edilir.
Bu içerik alanlarında bir paragraf yatay kuraldan sonra gelirse, üst dolgu sıfır olarak ayarlanır. Belirli içerik alanlarındaki alıntılar 620 piksel genişliği geçmemelidir.
Ana makalelerdeki, özelliklerdeki, standart makalelerdeki ve yorumlardaki vitrin öğeleri için, altyazılar normal konumlarında kalmalı, tam genişliğe yayılmalı ve 620 piksel ile sınırlandırılmalıdır.
Sürükleyici öğeler, kaydırma çubuklarını hesaba katarak tam görünüm alanı genişliğine yayılmalıdır. 71.24em'den küçük ekranlarda, bu öğeler 978 piksel genişliğinde ve altyazılar için 10px yan dolgu ile sınırlandırılır. 30em ile 71.24em arasında, altyazı dolgusu 20px'ye çıkar.
46.25em ile 61.24em arasında, sürükleyici öğeler maksimum 738 piksele ulaşır. 46.24em'in altında, sağ kenar boşluğu olmadan ve 10px sol iç boşlukla sol kenara hizalanır, bu 30em ile 46.24em arasında 20px'ye çıkar, burada altyazılar da 20px dolgu alır.
Daha büyük ekranlar için (61.25em ve üzeri), mobilya sarmalayıcı, tanımlanmış sütun ve satırlarla bir ızgara düzeni kullanır. Başlıklar üst kenarlık alır, meta bilgiler göreceli olarak üst dolguyla konumlandırılır ve standfirst metni belirli bir stile sahiptir: liste öğeleri 20px yazı tipi boyutunda, bağlantılar kenarlık veya arka plan olmadan altı çizili, üzerine gelindiğinde renk değişen ve çok büyük ekranlar (71.25em+) hariç ilk paragraflar üst kenarlıklıdır.
Sarmalayıcı içindeki şekillerin alt kenar boşluğu yoktur ve 10px sol iç boşluğu vardır, satır içi öğeler 630 piksel ile sınırlıdır. En büyük ekranlarda, ızgara sütun yapısını ayarlar.
Düzen, farklı ekran boyutları için belirli sütun ve satırlara sahip bir ızgara kullanır. Daha küçük ekranlar için, ızgaranın sabit ve otomatik yükseklikte üç sütunu ve satırı varken, daha büyük ekranlar satır yüksekliklerini orantılı olarak ayarlar.
Meta bölümü gibi öğelerin üst kenar çizgisi vardır ve standfirst bölümü solda dikey bir çizgi içerir. Başlıklar, daha büyük ekranlarda artan maksimum genişlik ve yazı tipi boyutuyla stilize edilir ve bazı öğeler görünüm alanına göre kenar boşluğu ve dolguda gizlenir veya ayarlanır.
Ana medya alanı ızgaranın içinde konumlandırılır ve mobil cihazlarda tam genişliğe yayılır, altyazılar alt kısımda arka plan rengiyle görünecek şekilde stilize edilir. Meta bölümündeki sosyal ve yorum öğeleri başlık rengiyle eşleşen kenarlıklara sahiptir ve belirli bileşenler görüntülenmez.
Mobilya sarmalayıcı koyu bir arka plan ayarlar ve farklı ekran boyutları için kenar boşluklarını ve dolguyu ayarlar. Daha büyük ekranlarda, eşleşen arka planlar ve kenarlıklarla yan çubuklar ekler.
Başlıklar kalın, açık gri metin kullanırken, makale başlıkları ve sosyal düğmeler özel bir renk (karanlık mod özellik rengi gibi) benimser. Sosyal düğmelerin kenarlığı vardır ve üzerine gelindiğinde renk değiştirir, arka plan ve simge renkleri yer değiştirir.
Altyazılar belirli renkler ve görünürlük kontrolleriyle stilize edilir, sağ alt köşede küçük bir daire olarak görünen bir açma/kapama düğmesi dahil. Medya sorguları, tabletler ve masaüstü bilgisayarlar için dolguyu ve öğe konumlandırmasını ayarlayarak cihazlar arasında uygun boşluk ve hizalamayı sağlar.
Bu CSS kodu, mobilya-sarmalayıcı sınıfı içindeki öğeleri stilize ederek, farklı ekran boyutları için renkleri, kenarlıkları ve düzeni tanımlar. Meta ve standfirst bölümleri için CSS değişkenleri kullanarak bağlantı renklerini ve üzerine gelme efektlerini, metin süslemelerini ve ofsetleri tanımlar. Medya sorguları, çeşitli görünüm alanı genişlikleri için düzeni ayarlayarak, kenarlıkları ve arka plan renkleri olan ve buna göre ölçeklenen yan çubuklar oluşturur. Meta bölümündeki sosyal ve yorum öğeleri de stilize edilir, SVG konturları başlık kenarlığı rengiyle eşleşir.
Yorum bölümünün kenarlık rengi, başlığın kenarlık rengiyle eşleşir.
Ana gövdedeki veya etkileşimli içerikteki makale başlıkları (h2) için yazı tipi ağırlığı hafif (200) olarak ayarlanır. Ancak, bir h2 başlığı güçlü bir öğe içeriyorsa, kalın yazı tipi ağırlığı (700) kullanır.
Ayrıca, Guardian Headline Full yazı tipi ailesi, hem normal hem de italik formlarda hafif, normal, orta ve yarı kalın dahil olmak üzere çeşitli ağırlıklar ve stillerle tanımlanır. Her yazı tipi dosyası, WOFF2, WOFF ve TrueType biçimlerinde belirli URL'lerden kaynaklanır.
Bu CSS kodu, Guardian web sitesi için çeşitli yazı tipi ailelerini ve varyasyonlarını tanımlar. "Guardian Headline Full" yazı tipi için farklı yazı tipi ağırlıklarını ve stillerini (kalın, italik gibi) belirterek, tarayıcılar arası uyumluluk için birden fazla dosya biçimi (WOFF2, WOFF, TTF) sağlar. Ayrıca, "Guardian Titlepiece" yazı tipini kalın ağırlıkta içerir.
Kod ayrıca, iOS ve Android cihazlarda karanlık mod tercihleri için renkleri ayarlayan CSS özel özelliklerini (değişkenler) kurar. Bu mobil platformlardaki makale kaplarındaki paragrafların ilk harfi için, farklı bağlamlarda tutarlı bir tipografik işlem sağlayan belirli bir stil içerir.
Android cihazlar için, standart ve yorum makalelerindeki ilk paragrafın ilk harfi ikincil sütun rengiyle stilize edilir. Hem iOS hem de Android'de, makale başlıkları gizlenir ve mobilya sarmalayıcıları belirli bir dolguya sahiptir. Bu sarmalayıcılar içindeki etiketler, yeni sütun rengiyle başlık stilinde kalın, büyük harfli bir yazı tipi kullanır. Başlıklar 32px, kalın, alt dolgulu ve koyu renkli olarak ayarlanır. Mobilya sarmalayıcılarındaki görseller göreceli olarak konumlandırılır, görünüm alanı genişliği eksi kaydırma çubuğu genişliğine kadar uzanır ve otomatik yüksekliğe sahiptir, iç öğeler ve bağlantılar buna göre stilize edilir.
Android cihazlar için, makale kapları içindeki görseller şeffaf arka plana, görünüm alanı genişliği eksi kaydırma çubuğu genişliğine yayılma ve yüksekliğini otomatik ayarlama özelliğine sahiptir.
Hem iOS hem de Android'de, makalelerdeki standfirst bölümü sırasıyla 4px ve 24px üst ve alt dolguya ve -10px sağ kenar boşluğu ofsetine sahiptir. İçindeki metin Guardian Headline yazı tipi ailesini veya yedek serif yazı tiplerini kullanır.
Her iki platformdaki standfirst içindeki bağlantılar belirli bir renkle, 6px ofsetli alt çizgiyle stilize edilir ve hafif gri alt çizgi kullanır, üzerine gelindiğinde sütun rengine dönüşür. Arka plan resmi veya kenarlıkları yoktur.
Ayrıca, makale kaplarındaki meta bölümü hem iOS hem de Android cihazlara uygulanır.
Android cihazlar için, standart ve yorum makalesi kaplarındaki meta öğelerinden kenar boşluklarını kaldırın.
iOS cihazlar için, özellik, standart ve yorum makalesi kaplarındaki yazar bilgisi ve yazar öğelerinin rengini yeni sütun rengine ayarlayın. Ayrıca, meta çeşitli öğelerinden dolguyu kaldırın ve SVG simgelerinin konturunu yeni sütun rengine ayarlayın. Ek olarak, vitrin öğelerindeki altyazı düğmesini belirli görüntü, dolgu, hizalama ve boyutlarla stilize edin.
Hem iOS hem de Android için, özellik, standart ve yorum makalesi kaplarında makale gövdesi dolgusunu yanlarda 0, üst ve altta 12px olarak ayarlayın.
iOS ve Android cihazlar için, özellik, standart ve yorum makalesi kaplarında, küçük resim veya sürükleyici olmayan görsellerin kenar boşluğu olmayacak, genişliği tam görünüm alanı eksi 24 piksel ve kaydırma çubuğu genişliğinde ve otomatik yükseklikte olacaktır. Altyazılarının dolgusu olmayacaktır.
Bu kaplardaki sürükleyici görseller, kaydırma çubuğu genişliği eksi tam görünüm alanı genişliğine yayılacaktır.
Makale gövdesindeki alıntılanan blok alıntılar, yeni sütun rengini kullanarak renkli bir işaretçi gösterecektir.
Makale gövdesi içindeki bağlantılar, birincil sütun rengiyle, ofsetli alt çizgiyle stilize edilecek ve alt çizgi için başlık kenarlığı rengi kullanılacaktır. Üzerine gelindiğinde, alt çizgi rengi yeni sütun rengine değişecektir.
Karanlık modda, mobilya sarmalayıcı arka planı koyu griye (#1a1a1a) ayarlanacaktır.
iOS ve Android cihazlar için,
