Bu CSS kodu, "Guardian Headline Full" adlı özel bir yazı tipi ailesini birden fazla yazı tipi ağırlığı ve stiliyle tanımlar. Yazı tipi dosyalarını farklı formatlarda (WOFF2, WOFF ve TrueType) ve tarayıcının yükleyebilmesi için ilgili URL'lerini belirtir. Yazı tipi ağırlıkları hafif (300) ile yarı kalın (600) arasında değişir ve her biri normal ve italik stillere sahiptir.
Bu CSS kodu, Guardian web sitesi için çeşitli yazı tipi aileleri ve stilleri tanımlar. WOFF2, WOFF ve TrueType formatlarındaki farklı yazı tipi dosyalarının kaynaklarını, ağırlıklarını ve stillerini belirtir. Örneğin, Guardian Headline Full yazı tipi kalın, kalın italik, siyah ve siyah italik çeşitlerini içerirken, Guardian Titlepiece kalın bir stil kullanır.
Kod ayrıca, komut dosyası etkinleştirildiğinde ve azaltılmış hareket tercih edilmediğinde ana içeriğin opaklığını kontrol ederek soluklaşmasını sağlayan medya sorgularını içerir. Ayrıca, site genelinde kullanılan renkler ve stiller için çeşitli CSS özel özelliklerini (değişkenler) ayarlar; örneğin, kaplama solmaları, altyazılar ve metin renkleri gibi.
Makale öğeleri için, başlıkların stilini belirleyerek yazı tipi ailesini, ağırlığını, boyutunu ve satır yüksekliğini tanımlar ve daha büyük ekranlar için ayarlamalar yapar. Başlıktaki belirli span'lar gibi bazı öğeler görüntüden gizlenir.
Makale başlıkları için, bağlantı veya seri adı, belirli bir renkte, 20px boyutunda ve kalın ağırlıkta Guardian Headline yazı tipiyle, özel alt çizgi ve %115 satır yüksekliği kullanılarak satır içinde görünür. Başlık bağlantısının üzerine gelindiğinde altı çizilir.
Görüşülen kişi adları, aynı satır yüksekliğine sahip hafif, italik, 28px yazı tipiyle stilize edilmiştir.
Makale özeti ve bağlantıları, orta renkte, 500 ağırlıkta 17px yazı tipi kullanır ve daha geniş ekranlarda 20px'ye çıkar. Özetteki bağlantıların üzerine gelindiğinde alt kenarlığı belirir.
Altyazılar ve video transkript bağlantıları, %130 satır yüksekliğine sahip, daha küçük, 12px sans-serif yazı tipindedir.
Yazar bağlantıları, Guardian Headline yazı tipini 17px ve kalın olarak kullanırken, yazar düğmeleri orta ağırlıkta bir sans-serif yazı tipine sahiptir. Yayın tarihi bir altyazı rengi kullanır.
Kaydırmalı alıntılar, açık renkli, 32px başlık yazı tipi (büyük ekranlarda 42px'ye çıkar) ve özel sayı stilizasyonu içerir ve altyazıları 14px sans-serif'dir. Orta boy ekranlarda bunlar medya metin renklerini benimser.
Ana içeriğin ilk harfi, başlık yazı tipini kullanan büyük, renkli bir süs baş harfidir.
Medya bölümleri, tam görünüm alanı yüksekliğinde bir arka plana sahiptir, negatif kenar boşluklarıyla kabın biraz ötesine uzanır ve bir ızgara düzeni kullanır. Mobilde başlık, mobilya alanına yerleştirilirken, masaüstünde medya kabının çoğu alanı kapladığı iki sütunlu bir ızgaraya kayar.
Daha geniş ekranlar için medya bölümü sabit bir genişliğe sahiptir ve görünüm alanını doldurmak için kenarlıklı renkli yan çubuklar ekleyerek çerçeveli bir görünüm oluşturur.
Medya öğesi, sağlam bir kenarlığa sahiptir ve sağa konumlandırılmıştır, genişliği görünüm alanı ve gövde genişliğine göre hesaplanır. Daha büyük ekranlar için gövde genişliği belirli kırılma noktalarında ayarlanır: 61.25em için 978px, 71.25em için 1138px ve 81.25em için 1298px.
Makalenin içerik ızgara düzeni ekran boyutuyla değişir. Daha küçük ekranlarda medya, meta, standfirst ve gövdeyi dikey olarak istifler. Orta boy ekranlarda (61.25em ve üzeri), medyanın her iki sütunu da kapsadığı ve diğer öğelerin buna göre düzenlendiği iki sütunlu bir düzen kullanır. Daha büyük ekranlar için (71.25em ve 81.25em) daha fazla sütun ekler ve daha iyi organizasyon için ızgara alanlarını iyileştirir.
Standfirst'ün üst kenar boşluğu vardır ve çizgiler gizlenir. Başlık ve video altyazıları, belirli stil ve boşluklara sahip simgeler içerir. "Makaleyi Dinle" düğmesinin dikey kenar boşlukları vardır.
Başlık, yüksek bir z-index ile göreceli olarak konumlandırılmıştır. iOS'ta, medya başlıklarındaki belirli sözde öğeler gizlenir. Komut dosyası devre dışı bırakıldığında, düzen farklı ekran boyutlarında daha basit, istiflenmiş bir yapıya uyum sağlar.
Ekran okuyucuya özel bir sınıf, içeriği görsel olarak gizler ancak yardımcı teknolojiler için erişilebilir tutar.
Ana sütundaki etkileşimli içerik için, destekleyici şekiller %75 genişliğe ayarlanır ve önceki öğeleri temizlemez.
Orta boy ekranlarda (46.25em ve daha geniş), bu şekiller %75 genişlikte kalır, yüzdürülmeden statik olarak konumlandırılır ve üst kenar boşluğu olmadan standart satır yüksekliğine sahiptir.
Daha büyük ekranlar için (71.25em ve üzeri), şekillerin sol kenar boşluğu yoktur ve altyazıları sabit genişlik olmadan statik olarak konumlandırılır.
Çok büyük ekranlarda (81.25em ve üzeri), şekiller sol kenar boşluğu olmadan %75 genişliklerini korur ve altyazıların maksimum genişlik kısıtlaması yoktur.
Orta ila büyük ekranlarda (46.25em ila 61.24em), ana sütundaki sürükleyici öğelerin negatif 20px sağ kenar boşluğu vardır.
Statik ve video başlıkları için, başlık kapları ve görüşülen kişi bölümleri küçük ekranlarda 10px yan dolguya sahiptir, 30em ve daha geniş ekranlarda 20px'ye çıkar.
Bu başlıklardaki medya kabı, ızgara alanının tam genişliğini ve yüksekliğini kaplar. 61.25em ve daha büyük ekranlarda 4:5 en-boy oranını korur.
Medya kabı içindeki resim sarmalayıcılar, üste yapışır ve gizli taşma ile mevcut alanı doldurur. Daha büyük ekranlarda (61.25em+), göreceli konumlandırmaya geçerler.
Bu sarmalayıcılar içindeki tüm resimler ve resimler, en-boy oranını bozmadan kaplarını tamamen kaplar.
Resimleri takip eden span ve bağlantılar gibi ek öğeler gizlenir.
İkincil bir resim katmanı (img-2), mutlak olarak sol üst köşede konumlandırılmıştır.
Mobil mobilya sarmalayıcılar alta yapışır ve arka plan rengiyle esnek bir sütun düzenine sahiptir. Daha büyük ekranlarda (61.25em+), normal içerik akışının bir parçası haline gelirler.
Bu sarmalayıcılar içinde, başlıklar ikinci sırada ve görüşülen kişi bilgileri üçüncü sırada görünür.
Daha küçük ekranlarda (61.24em'e kadar), bir degrade kaplama, mobil mobilyanın üzerinde bir solma efekti oluşturur.
Statik ve video başlıklarındaki başlık kapları, dolgu, arka plan rengi ve 2 z-index ile altta konumlandırılmıştır. Başlıklar için bir ızgara düzeni kullanırlar.
Hem birincil hem de ikincil başlıklar, kap içinde aynı ızgara alanını kaplar.
61.25em'den geniş ekranlar için, statik ve video başlıklarındaki başlık kabını, üst kenar boşluğunu kaldırarak, maksimum genişliği 540px olarak ayarlayarak ve üst kenarlık ekleyerek ayarlayın.
61.24em'e kadar olan daha küçük ekranlarda, ilk başlığı başlangıca hizalayın. İkinci başlık 620px maksimum genişliğe sahip olmalı ve ilk harfi büyük harfle yazılmalıdır. En az 30em genişliğindeki ekranlarda, onu 20px sola kaydırın ve 61.25em veya daha geniş olanlarda, üstten 4px konumlandırın.
Azaltılmış hareket tercih edildiğinde, başlık kabını bir blok olarak görüntüleyin ve 46.24em genişliğe kadar olan ekranlardaki başlıklar için üst kenar boşluklarını kaldırın. Ayrıca, ikinci başlığın üstüne 10px dolgu ekleyin.
Görüşülen kişi bölümü, 20px alt dolgu ile 'interviewee' ızgara alanına yerleştirilmelidir. Video kontrolleri altta sabittir.
46.24em genişliğe kadar olan ekranlarda, başlık yüksekliğini %100 olarak ayarlayın. iOS cihazlar için, alt araç çubuğu için ızgara satırlarını ve görüşülen kişi dolgusunu ayarlayın. Android'de, üst çubuk için ızgara satırlarını ve dolguyu değiştirin.
700px genişliğe kadar olan ekranlarda yatay yönlendirmede, başlık yüksekliğini içeriğine uyacak şekilde ayarlayın ve medya kabını ve sarmalayıcıyı buna göre ayarlayın.
Uygulamalar için, resim sarmalayıcılardaki etiketleri gizleyin.
Video kapları alanlarını, videoların alanı kapladığı ve etkin olduğunda soluklaşarak göründüğü şekilde doldurmalıdır. Kontroller, dairesel düğmelerle sağ altta konumlandırılmıştır.
Daha geniş ekranlardaki medya öğeleri için, video kabının en-boy oranını 4/5 olarak ayarlayın.
Kaydırmalı alıntılar, mutlak konumlandırılmış öğeleri tutan yapışkan bir medya kabıyla tam görünüm alanı yüksekliğini kaplar.
Kaydırmalı alıntı bölümündeki resim, kabını tamamen kaplayacak ve en-boy oranını koruyacak şekilde ayarlanmıştır. Alıntı kabı, görünüm alanının üstüne yapışacak ve tam genişliği kaplayacak şekilde konumlandırılmıştır, öğeleri yarı saydam bir arka plana ve alıntılar ve altyazılar için esnek bir düzene sahiptir. Daha büyük ekranlarda, arka plan şeffaf hale gelir ve düzen iki sütunlu bir ızgaraya kayar.
Kaydırmalı alıntı bileşeni, genişliğini ve kenar boşluklarını duyarlı bir şekilde ayarlar, orta ekranlarda genişler ve daha büyük ekranlarda yan arka planlarla ortalanır. Yüksekliği, görünüm alanı birimleri ve içerik uzunluğuna göre hesaplanır, azaltılmış hareket tercihleri onu kısaltır. iOS cihazları için, uygun boyutlandırmayı sağlamak amacıyla belirli görünüm alanı birimleri kullanılır.
Ana sütundaki şekiller ve blok alıntılar gibi etkileşimli öğeler, görünüme yumuşak giriş animasyonlarına sahiptir, soluklaşır ve kayarak görünür. Karanlık modda, renk değişkenleri daha iyi kontrast ve okunabilirlik için ayarlanır, medya, yazar bilgileri ve alıntılar için tonlar temaya uyacak şekilde değiştirilir.
Metin, CSS kodu ve Anthony Hopkins hakkında bir makalenin bir karışımı gibi görünüyor. İşte makale kısmının akıcı, doğal Türkçe ile yeniden yazılmış hali:
---
Resmi tam ekranda görüntüle
Anthony Hopkins, 2017. Fotoğraf: Sebastien Micke/Paris Match/Contour/Getty Images
"Orada hava nasıl?" Anthony Hopkins video görüşmemiz başlar başlamaz soruyor. Onlarca yıldır Kaliforniya'da yaşamasına rağmen, Galli köklerinin izleri hala var - belirgin, melodik sesinde, şimdi biraz daha boğuk olabilir, ve hava durumuna olan ilgisinde. Londra'da karanlık bir akşam, ama Los Angeles'ta parlak, güneşli bir sabah. Hopkins de havaya uyuyor, neşeli görünüyor ve turkuaz ve yeşil bir gömlek giyiyor.
"Buraya 50 yıl önce geldim," diyor. "Birisi 'Satılık mı oldun?' diye sordu. Ben de 'Hayır,
