Bu CSS kodu, "Guardian Headline Full" yazı tipi ailesini çeşitli ağırlıklar ve stillerle tanımlar; bunlar arasında light, regular, medium ve semibold yer alır ve her biri normal ve italik versiyonlara sahiptir. Guardian'ın sunucularında barındırılan WOFF2, WOFF ve TrueType formatlarındaki yazı tipi dosyalarını belirtir.
Bu CSS kodu, Guardian Headline ve Guardian Titlepiece yazı tipleri için çeşitli yazı tipi ailelerini tanımlayarak, bunların kaynaklarını farklı formatlarda (WOFF2, WOFF, TTF) yazı tipi ağırlıkları ve stilleriyle birlikte 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 öğeleri tam genişliğe getirip ortalar. Stiller, atomlar, vitrinler ve sürükleyici öğeler gibi çeşitli içerik türleri için maksimum genişlikler belirlenerek cihazlar arasında uygun biçimlendirmeyi sağlar.
Etkileşimli içerik sütunları için, öğeden önce sol kenarlık eklenir ve 11 piksel sola konumlandırılır. Bu sütunlar içinde, atomların (öğeler) üst veya alt kenar boşlukları yoktur ancak hem üst hem de alt tarafta 12 piksel dolgu bulunur. Bir atomu takip eden paragraf olduğunda, 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 daha geniş ekranlarda (61.25em üzeri) belirli bir role sahip satır içi şekiller de bu genişlik sınırına uyar.
Çeşitli öğeler için, örneğin tarih satırları, başlıklar, altyazılar ve özellikler için renk değişkenleri tanımlanmıştır; varsayılan özellik rengi kırmızı olarak ayarlanmıştır. Ana sütundaki ve diğer yerlerdeki atomlarda dolgu yoktur.
Belirli öğelerden veya yatay çizgilerden sonraki ilk paragrafa, farklı içerik alanlarında (makale gövdesi, etkileşimli içerik, yorumlar, özellikler) 14 piksel üst dolgu ekleyen özel kurallar uygulanır. Ayrıca, bu paragrafların ilk harfi, belirli bir yazı tipinde büyük, kalın, büyük harfli olarak, bir değişkene göre renklendirilmiş ve sola yaslanmış bir kenar boşluğu ile stilize edilmiştir.
Bu bölümlerde paragrafların takip ettiği yatay çizgilerde üst dolgu yoktur. Belirli içerik alanlarındaki alıntılar maksimum 620 piksel genişlikle sınırlıdır.
Çeşitli makale konteynerlerindeki vitrin öğeleri için, altyazılar 620 piksele kadar tam genişlikle statik olarak konumlandırılır.
Sürükleyici öğeler, kaydırma çubuğu genişliği çıkarılmış tam görünüm alanı genişliğini kaplar. 71.24em genişliğe kadar olan ekranlarda, bu öğeler 978px genişlikle sınırlıdır ve altyazı dolgusu 10px'dir. 30em ile 71.24em arasında, altyazı dolgusu 20px'ye çıkar. 46.25em ile 61.24em arasındaki ekranlarda maksimum genişlik 738px olur. 46.24em altında, sürükleyici öğeler sol kenara hizalanır, kenar boşlukları ayarlanır ve 30em ile 46.24em arasında 20px altyazı dolgusunu korur.
Mobilya sarmalayıcı, 61.25em ve daha geniş ekranlarda duyarlı bir ızgara düzeni kullanarak başlık, manşet, meta bilgisi, standfirst ve portre bölümlerini düzenler. Manşetler üst kenarlık içerir, meta bölümleri üst dolguya sahiptir ve standfirst metni, üzerine gelindiğinde rengi değişen özel alt çizgilerle listeler ve bağlantılar için belirli stillendirmeyi içerir. Standfirst'taki ilk paragraf, daha büyük ekranlarda üst kenarlığa sahiptir ancak 71.25em üzerinde bunu kaldırır.
Mobilya sarmalayıcı içindeki şekiller sola hizalı kenar boşluklarına sahiptir ve satır içi öğeler 630px genişlikle sınırlıdır. 71.25em üzerinde, ızgara düzeni portre içeriği için daha fazla sütun barındıracak şekilde ayarlanır.
Düzen, farklı ekran boyutları için belirli sütun ve satırlara sahip bir ızgara kullanır. Daha küçük ekranlar için, ızgara üç sütuna ve otomatik ayarlanan satırlara sahiptir; başlık ve portre alanları için 80px sabit yükseklik vardır. Meta bölümünün üstünde ince bir çizgi belirir ve standfirst bölümünün sol tarafında dikey bir çizgi bulunur.
Daha büyük ekranlarda, ızgara esneklik için kesirli birimlerle daha fazla sütun ve satıra genişler. Meta bölümünün üst çizgisi genişler ve standfirst'un dikey çizgisi hafifçe kayar. Manşetler, daha büyük ekranlarda artan maksimum genişlik ve yazı tipi boyutuna sahiptir; çizgiler gibi belirli öğeler farklı kırılma noktalarında gizlenir veya kenar boşlukları ayarlanır.
Meta bölümündeki sosyal ve yorum öğeleri aynı kenarlık rengini paylaşır ve bazı bileşenler görüntülenmez. Standfirst metni, azaltılmış sol kenar boşluğu ve dolgu ile yazı tipi özelliklerine sahip belirli bir stil kullanır. Ana medya öğeleri göreceli olarak konumlandırılır, çeşitli cihazlarda tam genişlik ve ayarlanmış kenar boşluklarına sahiptir; altyazılar ise özel arka plan ve metin renkleriyle altta mutlak konumlandırılır.
Bu CSS kodu, bir mobilya sarmalayıcı bileşeninin stillerini, düzenini, renklerini ve farklı ekran boyutlarındaki duyarlı davranışını tanımlar. Koyu mod gibi temalar için CSS özel özelliklerini kullanarak arka plan renkleri, metin renkleri ve kenarlık stillerini ayarlar. Sarmalayıcı, daha büyük ekranlarda kenar boşluklarını, dolguyu ve konumlandırmayı ayarlar; altyazılar ve düğmeler gibi öğeleri gizleme veya gösterme kurallarını içerir. Manşetler ve meta bilgisi belirli yazı tipleri ve renklerle stilize edilir; sosyal medya düğmeleri, görünümlerini değiştiren üzerine gelme efektlerine sahiptir. Medya sorguları, tasarımın çeşitli cihazlara uyum sağlamasını güvence altına alır.
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ümleri gibi öğelere odaklanır. Metin renklerini açık gri (#dcdcdc) ve bağlantı renklerini değişken tabanlı bir tona ayarlar; üzerine gelindiğinde metin dekorasyonu rengini değiştiren efektler içerir. Standfirst alanlarındaki bağlantılar, belirli ofsetlere sahip alt çizgiler ve kenarlık olmadan stilize edilir; paragraflar ve liste öğeleri de açık gri rengi benimser.
Daha büyük ekranlar için (min-width: 61.25em), standfirst'taki ilk paragraf üst kenarlık alır; bu, daha büyük ekranlarda (71.25em) kaldırılır. Kod ayrıca, görünüm alanı boyutuna göre genişliği ayarlanan, koyu arka plan ve kenarlıklı kenarlara sahip sözde öğeler (:before ve :after) kullanarak dekoratif yan çubuklar oluşturur. Ek olarak, SVG öğelerini vuruş renkleri ve meta bölümlerindeki sosyal medya veya yorum simgeleriyle stilize eder.
Yorum bölümünün kenarlık rengi, başlığın kenarlık rengiyle eşleşir.
Makalelerde, ana gövde içindeki ikinci seviye başlıklar (h2) 200 gibi hafif bir yazı tipi ağırlığına sahiptir. Ancak, bir h2 güçlü bir öğe içeriyorsa, 700 gibi kalın bir yazı tipi ağırlığı kullanır.
Guardian Headline Full yazı tipi ailesi, çeşitli stiller ve ağırlıklar içerir; her biri WOFF2, WOFF ve TrueType formatlarında belirli dosya kaynaklarına sahiptir:
- Light (ağırlık 300, normal stil)
- Light Italic (ağırlık 300, italik stil)
- Regular (ağırlık 400, normal stil)
- Regular Italic (ağırlık 400, italik stil)
- Medium (ağırlık 500, normal stil)
- Medium Italic (ağırlık 500, italik stil)
- Semibold (ağırlık 600, normal stil)
- Semibold Italic (ağırlık 600, italik stil)
Bu CSS kodu, "Guardian Headline Full" yazı tipi ailesi için semibold (600) ile siyah (900) arasında değişen farklı ağırlıklar ve stillerle (normal ve italik) ç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, farklı bir alt alandan benzer dosya formatlarını kullanarak, kalın ağırlık (700) ve normal stile sahip "Guardian Titlepiece" yazı tipini tanımlar.
Kod, özellikle iOS ve Android cihazlarda koyu mod için renk şemalarına yönelik CSS özel özelliklerini (değişkenler) içerir. Koyu bir arka plan rengi, açık ve koyu modlar için özellik renkleri kurar ve kullanıcının tercih ettiği renk şemasına göre sütun rengini ayarlamak için medya sorguları kullanır.
Ek olarak, iOS ve Android cihazlardaki makale konteynerlerindeki paragrafların ilk harfi için, atomlar, giriş kapıları veya belirli kapı öğeleri gibi öğeleri takip ettiklerinde uygulanan özel stil kuralları vardır.
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 dolguya sahiptir. Bu sarmalayıcılar içindeki etiketler, manşet stilinde yeni bir sütun rengiyle kalın, büyük harfli bir yazı tipi kullanır. Manşetler 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, kaydırma çubuğu çıkarılmış görünüm alanı genişliğini kaplar ve yükseklikleri otomatik olarak ayarlanır.
Android cihazlar için, makale konteynerleri içindeki görseller şeffaf arka plana sahiptir, kaydırma çubuğu çıkarılmış 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, -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 üzerine gelindiğinde değişen belirlenmiş bir renk kullanır. Arka plan resmi ve alt kenarlık kaldırılır.
Ayrıca, makalelerdeki meta bölümü, iOS ve Android'de özellik, standart ve yorum konteynerleri için tutarlı şekilde stilize edilir.
Android cihazlar için, standart ve yorum makale konteynerlerindeki meta öğelerinden kenar boşlukları kaldırılır.
iOS cihazlar için, özellik, standart ve yorum makale 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 vuruşu yeni sütun rengine ayarlanır. Ek olarak, vitrin öğelerindeki altyazı düğmesi belirli görüntü, dolgu, hizalama ve boyutlarla stilize edilir.
Hem iOS hem de Android için, özellik, standart ve yorum makale konteynerlerinde makale gövdesi dolgusu yanlarda 0, üst ve altta 12px olarak ayarlanır.
iOS ve Android cihazlar için, özellik, standart ve yorum makale konteynerlerinde, makale gövdesi içind
