Bu CSS kodu, "Guardian Headline Full" adlı özel bir yazı tipi ailesini birden fazla yazı tipi ağırlığı ve stiliyle tanımlar. Her varyasyon için (açık, normal, orta ve yarı kalın ağırlıkların her birinin normal ve italik stilleri dahil) WOFF2, WOFF ve TrueType formatlarındaki farklı yazı tipi dosyalarını belirtir. Yazı tipi dosyaları Guardian'ın web sitesinde barındırılmaktadır.
Bu CSS kodu, Guardian Headline ve Guardian Titlepiece yazı tipleri için çeşitli yazı tipi ailelerini tanımlar, farklı formatlardaki (WOFF2, WOFF ve TrueType) kaynaklarını, yazı tipi ağırlıklarını ve stillerini belirtir. Ayrıca, farklı cihazlarda uygun düzeni sağlamak için çeşitli ekran boyutlarına göre kenar boşluklarını ve genişlikleri ayarlayarak ana içerik sütunu için duyarlı tasım kurallarını içerir. Örneğin, daha geniş ekranlarda ana sütuna sol kenar boşluğu verilir ve atomlar, vitrinler ve sürükleyici içerik gibi öğelerin maksimum genişlikleri okunabilirliği ve görsel çekiciliği koruyacak şekilde ayarlanır.
Bu, bir web sitesinin etkileşimli içerik düzeni için stiller tanımlayan CSS kodu gibi görünüyor. Sütun kenarlıkları, öğe aralıkları, tipografi ve farklı ekran boyutları için duyarlı tasarım kurallarını içerir. Kod, paragraflardaki ilk harfler (drop cap) gibi öğeler için renkleri, dolguyu, kenar boşluklarını ve özel biçimlendirmeyi belirtir.
Makalelerdeki yatay kuralları takip eden paragraflar, yorumlar ve özellikler gibi belirli öğeler için üst dolguyu kaldırın.
Bu bölümlerdeki alıntıların genişliğini 620 piksel ile sınırlayın.
Çeşitli makale türlerindeki vitrin öğelerinde, açıklamaları normal konumunda tutun, tam genişliği 620 piksele kadar kaplayacak şekilde ayarlayın.
Sürükleyici öğelerin, kaydırma çubuklarını hesaba katarak tam görünüm alanı genişliğini kaplamasını sağlayın.
71.24em genişliğe kadar olan ekranlarda, sürükleyici öğeleri 978 pikselde sınırlandırın ve açıklamalara 10px yan dolgu ekleyin. 30em ile 71.24em arasında, bu dolguyu 20px'ye çıkarın.
46.25em ile 61.24em arasındaki ekranlar için, sürükleyici öğelerin maksimum genişliğini 738 piksel olarak ayarlayın.
46.24em genişliğe kadar olan cihazlarda, sol kenar boşluğunu kaldırın ve sürükleyici öğeleri sol kenara hizalayın. 30em ile 46.24em arasında, sol kenar boşluğunu -20px olarak ayarlayın ve açıklamalar için 20px yan dolguyu koruyun.
Daha büyük ekranlardaki (61.25em ve üzeri) mobilya sarmalayıcıları için, tanımlanmış sütun ve satırlara sahip bir ızgara düzeni kullanın. Başlıkları üst kenarlıkla stillendirin, meta bilgilerini göreli konumlandırma ile üst dolgu vererek konumlandırın ve özel renkler ve ofsetlerle alt çizgi içeren bağlantı stilleriyle, belirli kenar boşlukları, yazı tipi boyutları ve bağlantı stilleriyle tanıtım metni içeriğini ayarlayın. Başlangıçta, tanıtım metnindeki ilk paragrafa üst kenarlık ekleyin, ancak 71.25em ve daha geniş ekranlarda kaldırın.
Ayrıca, daha büyük ekranlarda, şekillerden sol kenar boşluğunu kaldırın ve satır içi öğeleri maksimum 630 piksel genişliğinde ayarlayın. 71.25em ve üzeri ekranlar için, ızgara şablonu sütunlarını buna göre ayarlayın.
Düzen, farklı ekran boyutları için tanımlanmış sütun ve satırlara sahip bir ızgara kullanır. Orta boy ekranlar için, sütunlar başlık, manşet, meta bilgisi, tanıtım metni ve portre için belirli satır yükseklikleriyle bölümlere ayrılır. Daha büyük ekranlarda, sütun ve satır yapısı ayarlanır, meta bölümünün üst kenarlığı genişler ve tanıtım metninin sol kenarlığı kayar.
Başlıklar, ekran boyutuyla değişen maksimum genişlik ve yazı tipi boyutuna sahiptir, daha büyük ekranlarda daha büyük ve dar hale gelir. Bazı dekoratif çizgiler daha büyük ekranlarda gizlenirken, meta bölümündeki sosyal ve yorum öğeleri başlıktaki kenarlık rengini alır.
Tanıtım metni, sol kenarlıkla girintili yapılır ve belirli yazı tipi stillendirmesine sahiptir, orta ekranlarda üst dolgu eklenir. Ana medya alanı, portre ızgarası alanında konumlandırılır, tam genişlikte olur ve daha büyük ekranlarda kenar boşlukları ayarlanır, küçük ekranlarda görünüm alanı genişliğine genişler ve sol kenar boşlukları buna göre ayarlanır. Açıklamalar mutlak konumlandırma ile ayarlanır.
Görseller için açıklama, dolgu, arka plan rengi ve metin rengi ile altta konumlandırılır. Alt kısımda kenar boşluğu olmadan tam genişliği kaplar ve minimum yüksekliği vardır. Açıklama içindeki bazı öğeler türlerine göre gizlenir veya görüntülenir, biri gizlenirken diğeri genişliğin çoğunu kaplar.
Daha büyük ekranlarda, açıklamanın dolgusu artar. Açıklama için bir düğme sağ alt kısma yerleştirilir, dairesel şekildedir ve daha büyük ekranlarda konumu ayarlanır.
Etkileşimli içerik için, başlıkların genişliği sınırlandırılır. iOS ve Android cihazlarda, karanlık mod ve özellikler için kullanıcı tercihlerine göre ayarlanan belirli renkler belirlenir.
Bu cihazlarda, belirli öğelerden sonraki ilk paragrafın ilk harfi ikincil renkle stillendirilir ve başlıkların yüksekliği yoktur. Açıklamalar gibi öğeleri içeren mobilya sarmalayıcısının üst kısmındaki dolgu azaltılır.
iOS ve Android cihazlar için, aşağıdaki stiller özellik, standart ve yorum makalelerine uygulanır:
- İçerik etiketleri, belirli bir renkte kalın Guardian veya Georgia yazı tiplerini kullanır ve büyük harfle yazılır.
- Başlıklar 32px, kalın, 12px alt dolgulu ve koyu gri renktedir.
- Görseller göreli olarak konumlandırılır, ekran genişliğinin neredeyse tamamını kaplar ve yükseklikleri otomatik olarak ayarlanır.
- Görsel öğeleri ve bağlantılar şeffaf arka plana sahiptir ve ekran genişliğiyle eşleşir.
- Tanıtım metni bölümleri, sağ kenar boşluğu ofseti ile üst ve alt dolguya sahiptir.
- Tanıtım metni bölümlerindeki paragraflar bu stilleri devralır.
Tanıtım metni için şu yazı tipi ailesini kullanın: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif.
iOS ve Android cihazlarda, özellik, standart ve yorum makalesi konteynırları içinde, tanıtım metnindeki bağlantılar yeni sütun rengine sahip olmalı, arka plan resmi olmamalı, metin 6px ofsetli alt çizgili ve başlık kenarlığıyla eşleşen kenarlık rengine sahip olmalı, hiçbir alt kenarlığı olmamalıdır. Üzerine gelindiğinde, alt çizgi rengi yeni sütun rengine değişmelidir.
Ayrıca, hem iOS hem de Android'deki bu konteynırlarda, meta bölümünün kenar boşluğu olmamalı ve yazar adı, yazar isimleri ve ilgili bağlantılar gibi öğeler buna göre stillendirilmelidir.
Android cihazlar için, makale mobilya öğelerindeki yazarın adı ve yazar bilgisi belirli bir renk değişkeniyle stillendirilir. Hem iOS hem de Android'de, mobilya sarmalayıcılarındaki çeşitli meta veri bölümünün dolgusu yoktur ve içindeki herhangi bir SVG simgesi, konturları için aynı renk değişkenini kullanır.
Vitrin öğelerindeki açıklama düğmesi, esnek bir konteynır olarak görüntülenir, belirli boyutlar ve konumlandırma ile ortalanır. Ana makale gövdesi yatay dolguya sahiptir ve standart görsel şekilleri (küçük resimler ve sürükleyici türler hariç) dolgu ve kaydırma çubuğu çıkarılarak tam görünüm alanı genişliğini kaplar, yükseklik ayarı otomatiktir. Açıklamaları tutarlı stillendirmeyi korur.
iOS ve Android cihazlar için, aşağıdaki stiller özellik, standart ve yorum makalesi konteynırlarına uygulanır:
- Sürükleyici görseller, kaydırma çubuklarını hesaba katarak tam görünüm alanı genişliğini kaplar.
- Alıntı yapılan blockquote'lar, dekoratif öğeleri için yeni sütun rengini kullanır.
- Düzyazıdaki bağlantılar, birincil sütun rengiyle, başlık kenarlığından belirli bir ofset ve renkle altı çizili olarak stillendirilir, üzerine gelindiğinde yeni sütun rengine değişir.
Karanlık modda:
- Mobilya sarmalayıcıları koyu gri arka plana sahiptir.
- İçerik etiketleri yeni sütun rengini alır.
- Başlıklar arka planlarını kaldırır ve metin için başlık kenarlık rengini kullanır.
- Tanıtım metni paragrafları ve bağlantıları da başlık kenarlık rengini kullanır.
iOS ve Android cihazlar için, aşağıdaki stillendirme kuralları çeşitli makale konteynırlarına uygulanır:
- Tanıtım metni bölümündeki bağlantılar ve yazar bilgileri yeni sütun rengi değişkeni kullanılarak renklendirilir.
- Meta bölümündeki simgeler, konturları için yeni sütun rengini kullanır.
- Vitrin görselleri için açıklamalar, tarih çizgisi renginde görüntülenir.
- Makale gövdesi içindeki alıntılanan metin yeni sütun rengini alır.
- Makalelerin ana içerik alanları, özellik, standart ve yorum parçaları dahil olmak üzere her iki platformda da tutarlı şekilde stillendirilir.
Bu CSS kodu, Android cihazlardaki belirli konteynırlar için koyu bir arka plan ayarlar ve iOS cihazlardaki belirli öğeleri takip eden paragrafların ilk harfini stillendirir.
Bu, iOS ve Android cihazlardaki makale konteynırları içindeki belirli öğeleri takip eden paragrafların ilk harfini hedef alan bir CSS seçicisi gibi görünüyor. Seçici, çeşitli makale türlerine (özellik, standart, yorum) uygulanır ve farklı içerik yapılarını ve giriş kapısı öğelerini hesaba katar.
Android cihazlar için, yorum makalelerindeki belirli paragrafların ilk harfi beyaz veya belirlenmiş yeni bir renkte görünecektir. Hem iOS hem de Android'de, yorum makalesi girişlerinin 24 piksel üst dolgusu vardır ve üst kenar boşluğu yoktur. Makaleler içindeki başlıklar 24 piksel olarak ayarlanır, açıklama düğmelerinin işletim sistemleri arasında hafif dolgu farklılıkları vardır.
Karanlık modda, metin ve bağlantı renkleri daha iyi okunabilirlik için ayarlanırken, marka öğeleri görünür kalır. Hem iOS hem de Android beyaz arka plan kullanır, etiketler ve başlıklar kalın yazı tipindedir. Makale alt başlıkları genellikle açık renktedir, ancak güçlü vurgu içeriyorsa kalın olur.
Görseli tam ekranda görüntüle
Fotoğraf: Tim Alexander/The Guardian
Evden Çıkmak
Akıllı hoparlörler, çocukların genellikle uyduğu zamanlayıcılar kurmaktan, zor anlarda Alexa aracılığıyla ödevlere yardımcı olmaya kadar yararlı bir ebeveynlik aracı görevi görüyor. Okuyucu Katie Matthews akıllıca bir çözüm bulmuş: "Çocukları kapıdan çıkarmak için sürekli söylenirdim. Artık Google hoparlörümüz beş dakika önceden uyarı vererek son dakika oyalanmalarını bitirmelerini işaret ediyor. Zamanı geldiğinde, 'Ayakkabıları giyin, hadi gidelim!' diye duyuruyor. Bu sabahlarımızı gerçekten devrim yarattı."
Yemek Zorunlulukları
Bir çocuğu sevgiyle hazırlanmış bir yemeği
