Bu CSS kodu, "Guardian Headline Full" yazı tipi ailesini çeşitli ağırlıklar ve stillerle tanımlayarak farklı tarayıcılar arasında uyumluluğu sağlamak için her varyant için birden fazla dosya formatı (WOFF2, WOFF, TTF) sunar. Yazı tipi dosyaları Guardian'ın varlık sunucusunda barındırılmaktadır.
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ı formatlardaki (WOFF2, WOFF, TTF) 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ı tasarı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. Kod, paragraflar ve listeler gibi öğelerin okunabilirlik için maksimum genişliği korumasını sağlar ve mobil cihazlarda sarmalayan öğeleri tam genişliğe genişleterek ve daha büyük ekranlarda düzenlerini ayarlayarak işler.
Etkileşimli ana sütun için, içeriğin öncesine 11 piksel sola konumlandırılmış sol kenarlık eklenir. Bu sütun içindeki öğelerin üst veya alt kenar boşluğu yoktur ancak hem üst hem de alt kısımda 12 piksel dolgu bulunur. Bir paragraf bir öğeyi 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ş ekranlar için satır içi şekiller de bu genişlik sınırına uyar.
Çeşitli öğeler için, yayın tarihi, başlık kenarlığı, altyazı metni ve özellik renkleri gibi renk değişkenleri tanımlanır, yeni sütun rengi varsayılan olarak birincil veya özellik rengine ayarlanır. Atom sınıfına sahip öğelerin dolgusu yoktur.
Belirli kurallar, farklı içerik alanlarındaki belirli öğeleri veya yatay kuralları takip eden ilk paragraf için geçerlidir, 14 piksel üst dolgu eklenir. Ayrıca, bu paragrafların ilk harfi, belirli bir yazı tipinde büyük, kalın, büyük harfli olarak stilize edilir, damla başlık veya yeni sütun rengine göre renklendirilir ve sola yaslanır ve kenar boşluğu ile konumlandırılır.
Bu alanlardaki paragrafları takip eden yatay kuralların üst dolgusu yoktur.
Belirli içerik alanlarındaki alıntılar maksimum 620 piksel genişlikle sınırlıdır.
Çeşitli makine konteynerlerindeki vitrin öğeleri için, altyazılar tam genişlik ve maksimum 620 piksel genişlikle statik olarak konumlandırılır.
Sarmalayan öğeler, kaydırma çubuğu genişliği hariç tam görünüm alanı genişliğini kaplar. 71.24em genişliğe kadar olan ekranlarda, bu öğeler 978px genişliğinde sınırlandırılır ve 10px altyazı dolgusu vardır. 30em ile 71.24em arasında, altyazı dolgusu 20px'ye çıkar. 46.25em ile 61.24em arasındaki ekranlar için maksimum genişlik 738px'dir. 46.24em'in altında, sarmalayan öğeler sol kenara hizalanır ve kenar boşlukları ayarlanır, 30em ile 46.24em arasında 20px altyazı dolgusunu korur.
Mobilya sarmalayıcı, 61.25em ve daha geniş ekranlarda ızgara düzeni kullanır, başlık, manşet, meta bilgisi, standfirst ve portre bölümlerini düzenlemek için tanımlanmış sütunlar ve satırlar vardır. Manşetler üst kenarlık içerir, meta bölümleri üst dolguya sahiptir ve standfirst metni, bağlantılar ve liste öğeleri için belirli stillendirme içerir, alt kenarlık yerine alt çizgiler ve yeni sütun rengini kullanan hover efektleri vardır. Standfirst'taki ilk paragraf, daha büyük ekranlarda üst kenarlığa sahiptir ancak 71.25em ve üzerinde kaldırılır. Sarmalayıcı içindeki şekiller, sola hizalanmış kenar boşluklarına ve satır içi öğeler için maksimum 630px genişliğe sahiptir. 71.25em ve daha geniş ekranlarda, ızgara daha iyi düzen için sütun yapısını ayarlar.
Düzen, farklı ekran boyutları için belirli sütunlar ve satırlar içeren bir ızgara kullanır. Örneğin, daha büyük ekranlarda, ızgaranın başlık, manşet ve meta bölümleri için üç eşit sütunu, ardından standfirst için beş ve portre için sekiz sütunu vardır, satırlar orantılı olarak ayrılmıştır.
Stilleme, meta bölümü için üst kenarlık ve standfirst için sol kenarlık içerir, her ikisi de özel bir renk değişkeni kullanır. Manşetler kalındır ve görünüm alanına göre boyut ve genişlik ayarlanır, daha büyük ekranlarda daha büyük yazı tipleri kullanılır.
Meta bölümündeki sosyal ve yorum öğeleri aynı kenarlık rengini paylaşırken, belirli bileşenler gizlenir. Standfirst metni normal ağırlıkta, belirli bir yazı tipi boyutu ve dolgu ile stilize edilir ve sol kenar boşluğu ve dolgu ile konumlandırılır.
Ana medya öğeleri, portre ızgara alanına yerleştirilir, tam genişlik ve daha küçük ekranlarda ayarlanmış kenar boşlukları ile, ve altyazılar arka plan rengi ve dolgu ile altta mutlak konumlandırılır. Orta ekranlarda ve üzerinde, bazı satırlar gizlenir ve belirli öğeler için kenar boşlukları sıfırlanır.
CSS kodu, bir mobilya sarmalayıcı bileşeni için stilleri tanımlar, düzeni, renkleri ve farklı ekran boyutlarındaki duyarlı davranışını içerir. Tutarlılık için CSS değişkenleri kullanarak arka plan renkleri, metin renkleri ve kenarlık stilleri ayarlar. Sarmalayıcı, daha büyük ekranlarda kenar boşluklarını, dolguyu ve konumlandırmayı ayarlar, altyazılar, düğmeler ve manşetler gibi öğeler için belirli kurallar içerir. Sosyal medya düğmeleri hoverda renk değiştirir ve belirli öğeler koşullara göre gizlenir veya görüntülenir. Tasarım, çeşitli cihazlara uyum sağlarken uyumlu bir görünüm sağlar.
Bu CSS kodu, bir web sayfasının mobilya-sarmalayıcı sınıfı için stilleri tanımlar, meta bilgisi ve standfirst bölümlerine odaklanır. Metin renklerini açık gri (#dcdcdc) ve bağlantı renklerini değişken tabanlı bir tona ayarlar, rengi koruyan ve alt çizgi ekleyen hover efektleri içerir. Standfirst'taki bağlantılar, belirli ofsetler ve renklerle alt çizgilere sahiptir, kenarlıklar ve arka plan resimleri kaldırılır.
Daha büyük ekranlar (min-genişlik: 61.25em) için, standfirst'taki ilk paragraf üst kenarlığı alır, bu daha da büyük ekranlarda (71.25em) kaldırılır. Kod ayrıca, görünüm alanı boyutuna göre genişlik ve konum ayarlayan, koyu arka planlar ve kenarlıklı kenarlar içeren sözde öğeler (:before ve :after) kullanarak dekoratif yan çubuklar oluşturur. Meta bölümündeki sosyal ve yorum öğeleri, simgeler ve metin için benzer stillemeyi miras alır.
Yorum bölümü, başlığın kenarlık rengiyle eşleşen bir kenarlık rengine sahiptir.
Makalelerde, ana gövde içindeki ikinci seviye başlıklar (h2) 200 gibi hafif bir yazı tipi ağırlığı kullanır. Ancak, bir h2 güçlü bir öğe içeriyorsa, 700 gibi kalın bir yazı tipi ağırlığı benimser.
Guardian Headline Full yazı tipi ailesi çeşitli varyasyonlar içerir:
- Light (ağırlık 300) normal ve italik stillerde
- Regular (ağırlık 400) normal ve italik stillerde
- Medium (ağırlık 500) normal ve italik stillerde
- Semibold (ağırlık 600) normal ve italik stillerde
Her stil, Guardian'ın varlık sunucusunda barındırılan WOFF2, WOFF ve TrueType formatlarında mevcuttur.
Bu CSS kodu, "Guardian Headline Full" yazı tipi ailesi için yarı kalından (600) siyaha (900) kadar farklı ağırlıklar ve stiller (normal ve italik) içeren çeşitli yazı tipi yüzlerini tanımlar. Her yazı tipi yüzü, Guardian'ın varlık sunucularından WOFF2, WOFF ve TrueType formatlarındaki kaynak dosyalarını belirtir.
Ayrıca, aynı dosya formatlarıyla "Guardian Titlepiece" yazı tipini kalın ağırlıkta tanımlar.
Kod, iOS ve Android cihazlarda karanlık mod için renk şemalarını ayarlayan CSS özel özelliklerini (değişkenler) içerir. Ek olarak, iOS ve Android platformlarında, özellikle atomlar veya giriş kapıları gibi belirli öğeleri takip ettiklerinde, makine konteynerlerindeki paragrafların ilk harfi için belirli stilleme kuralları 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, makine başlıkları gizlenir ve mobilya sarmalayıcıları belirli dolguya sahiptir. Bu sarmalayıcılar içindeki etiketler, manşet stilinde kalın, büyük harfli bir yazı tipi ve yeni sütun rengi kullanır. Manşetler 32px, kalın, alt dolgulu ve koyu renkte ayarlanır. Mobilya sarmalayıcılarındaki görseller göreceli olarak konumlandırılır, kenar boşlukları ayarlanır ve kaydırma çubuğu genişliği hariç tam görünüm alanı genişliğine sahiptir.
Android cihazlar için, makine konteynerleri içindeki görseller şeffaf arka plana sahiptir, kaydırma çubuğu genişliği hariç tam görünüm alanı genişliğini kaplar ve yükseklikleri otomatik olarak ayarlanır.
Hem iOS hem de Android'de, makalelerdeki standfirst bölümü sırasıyla 4px ve 24px üst ve alt dolguya sahiptir, sağ kenar boşluğu -10px'dir. İçindeki metin Guardian Headline yazı tipi ailesini veya benzer serif yazı tiplerini kullanır.
Her iki işletim sistemindeki standfirst içindeki bağlantılar, belirli bir renkle stilize edilir, ofsetli alt çizgi ile ve hoverda bağlantı rengiyle eşleşecek şekilde değişen belirli bir renk kullanır.
Ayrıca, makalelerdeki meta bölümü iOS ve Android platformlarında tutarlı bir şekilde stilize edilir.
Android cihazlar için, standart ve yorum makalesi konteynerlerindeki meta öğelerinden kenar boşlukları kaldırılır.
iOS cihazlar için, özellik, standart ve yorum makalesi konteynerlerindeki yazar satırı ve yazar öğelerinin rengi yeni sütun rengine ayarlanır. Ayrıca, meta çeşitli öğelerinden dolgu kaldırılır ve içlerindeki SVG simgelerinin konturu yeni sütun rengine ayarlanır. Ek olarak, vitrin öğelerindeki altyazı düğmesi belirli görüntüleme, dolgu, hizalama ve boyutlarla stilize edilir.
Hem iOS hem de Android için, makine gövdesi dolgusu, özellik, standart ve yorum makalesi konteynerlerinde yanlarda 0, üst ve altta 12px olarak ayarlanır.
iOS ve Android cihazlar için, özellik, standart ve yorum makalesi konteynerlerinde, makine gövdesi içindeki küçük resim olmayan ve sarmalayan olmayan görsellerin kenar boşluğu olmayacak, genişliği 24 piksel ve kaydırma çubuğu genişliği hariç tam görünüm alanı genişliği olacak ve yükseklikleri otomatik ayarlanacaktır. Altyazılarının dolgusu olmayacaktır.
Bu konteynerlerdeki sarmalayan görseller, kaydırma çubuğu genişliği hariç tam görünüm alanı genişliğini kaplayacaktır.
Makine gövdesindeki alıntılanmış blok alıntılar, yeni sütun rengini kullanarak renkli bir işaretçi gösterecektir.
Makine gövdesindeki bağlantılar, birincil sütun rengiyle stilize
