Bu CSS kodu, "Guardian Headline Full" yazı tipi ailesini çeşitli stiller ve ağırlıklarla tanımlar. Hafif (300), normal (400), orta (500) ve yarı kalın (600) versiyonlarını içerir ve her biri hem normal hem de italik stillerde mevcuttur. Yazı tipi dosyaları Guardian'ın web varlıklarından WOFF2, WOFF ve TrueType formatlarında sağlanır.
Bu CSS kodu, Guardian web sitesi için birkaç yazı tipi ailesini tanımlayarak farklı ağırlık ve stilleri ilgili dosya formatlarıyla (WOFF2, WOFF, TTF) belirtir. Ayrıca, duyarlı tasarım için medya sorguları içerir; betik durumu, kullanıcı hareket tercihleri ve ekran boyutuna göre stilleri ayarlar. Ek olarak, renk değişkenlerini, etkileşimli öğeler için düzen özelliklerini ve jenerik kartı ve film tanıtımı gibi bileşenler için belirli stilleri ayarlayarak cihazlar arasında tutarlı bir görünüm sağlar.
Jenerik kartı, metin öğeleri için belirli yazı tipleri ve boyutlar kullanır. Jenerik kartı içindeki bağlantılar ve paragraflar, 24px serif yazı tipi, kalın ağırlık ve %115 satır yüksekliği ile yan yana blok olarak görüntülenir, alt boşlukları 20px'dir ve maksimum genişlikleri içeriklerine uyacak şekildedir. Paragraflar, normal harf aralığı ile küçük harfe ayarlanmıştır.
Jenerik kartı içindeki bir başlık, merkezde mutlak konumlandırılmıştır, 14px sans-serif yazı tipi kullanır, büyük harf ve 2px harf aralığına sahiptir. Karttaki diğer paragraflar da aynı sans-serif yazı tipi ve boyutunu kullanır, bazıları büyük harf stili ve harf aralığına sahiptir.
Jenerik kartındaki bağlantılar, serif yazı tipi, boyut, ağırlık, satır yüksekliği, boşluk ve maksimum genişlik özelliklerini paylaşır, beyaz renklidir ve üzerine gelindiğinde alt çizgisi yoktur. Son bağlantının alt boşluğu yoktur. Kartın konteyneri mutlak konumlandırılmıştır, merkezlenmiştir ve öğeleri dikey olarak hizalamak için esnek kutu kullanır.
Jenerik kartındaki bir iframe, görünüm alanının %85'i genişliğindedir, 16:9 en-boy oranına sahiptir, maksimum genişliği 680px'dir ve alt boşluğu 12px'dir.
Etkileşimli galeri sarmalayıcısı, minimum ve sabit yüksekliği görünüm alanı yüksekliğine ayarlanmıştır, koyu bir arka plana, ortalanmış hizalamaya sahiptir ve daha büyük ekran boyutlarında ayarlanan negatif boşlukları vardır. Sabit bir öğe içerdiğinde, hizalama sıfırlanır.
Etkileşimli galerinin kendisi, görünüm alanına dayalı bir genişliğe sahiptir, ekran boyutuyla değişen bir maksimum genişliği vardır, ortalanmış konumlandırmaya, beyaz metne, esnek görünüme, görünüm alanının %60'ı maksimum yüksekliğe, gizli taşmaya, kenarlığa ve yuvarlak köşelere sahiptir. Altta bir degrade kaplama içerir ve bağlantılar için işaretçi olaylarını devre dışı bırakır. Şekiller ve altyazılar performans için optimize edilmiştir.
Galerinin iç konteyneri göreceli bir konuma sahiptir ve genişliğini ayarlar. Sabitlendiğinde, siyah bir arka planla tüm görünüm alanını kaplar, sabit konumlandırmaya sahiptir, kaydırma etkindir ve kenarlık veya yuvarlak köşe yoktur. Sabit moddaki metin öğeleri belirli dolgu, maksimum genişlik ve renk ayarlarına sahiptir ve şekiller tam boyuta ölçeklenirken boşluklar ve opaklık ayarlanır. Sabit moddaki görseller maksimum 980px genişliğe sahiptir ve ortalanmıştır.
Bu CSS kodu, etkileşimli bir galeri için stiller tanımlar. Görsellerin ve videoların farklı ekran boyutlarına uyum sağlayan duyarlı tasarımla doğru şekilde görüntülenmesini sağlar. Başlıklar ve altyazılar gibi metin öğeleri, tutarlılık için belirli yazı tipleri, boyutlar ve renklere sahiptir. Galeri, daha iyi kullanıcı deneyimi için üzerine gelme efektleriyle birlikte, kaplamaları açıp kapamak için düğmeler gibi etkileşimli özellikler içerir. Videolar, kapladıkları alanı tamamen dolduracak şekilde ayarlanır ve altyazılar net ve okunabilir olacak şekilde stilize edilir. Düzen, hem mobil hem de masaüstü görünümleri için optimize edilmiştir, temiz ve ilgi çekici bir sunum sağlar.
CSS kodu, video arka plan ve metin kaplamasına sahip tam ekran etkileşimli bir başlık için stiller tanımlar. Öğeleri tüm görünüm alanını kaplayacak şekilde konumlandırır, belirli bileşenleri gizler ve farklı ekran boyutları için boşlukları ve dolguyu ayarlar. Başlık metni, altta yarı saydam bir arka planla ortalanmıştır, daha büyük ekranlarda değişen belirli yazı tipleri ve boyutlar kullanır. Başlık, "Röportaj" etiketini içerir ve görsel hizalama için ayarlanmış boşluklarla parçalara ayrılmıştır.
Ana etkileşimli sütunun başlığı için, başlığın ikinci kısmı 17px yazı tipi boyutuna, %125 satır yüksekliğine, dolgu olmadan, normal yazı tipi ağırlığına, 280px maksimum genişliğe sahiptir ve ortalanmıştır. 46.25em'den geniş ekranlarda, yazı tipi boyutu 20px'ye ve maksimum genişlik 335px'ye çıkar. Bu kısımdaki isimler italik olarak görüntülenir.
Standfirst bölümünün dolgusu yoktur ve paragrafları beyazdır. Meta bölümünün maksimum genişliği yoktur ve sosyal bağlantıları ve düğmeleri üzerine gelindiğinde siyaha döner ve alt çizgileri olmaz, simgeleri de siyaha değişir. Yorum işlevi gizlidir ve yazar bağlantılarının kenarlığı yoktur.
Uygulama oluşturmada, başlık sarmalayıcısının yüksekliği tam görünüm alanı yüksekliğine ayarlanır. Video kapak kartı mutlak konumlandırılmıştır, tüm alanı yarı saydam siyah bir arka planla kaplar ve içerik dağılımı için esnek düzen kullanır. Poster videosu %50 parlaklığa karartılır. Kapak içeriği ortalanmıştır, üst ve alt boşlukları olan ve maksimum genişliği %80 (veya daha geniş ekranlarda 400px) olan bir açıklaması vardır. Metin, belirli bir sans-serif yazı tipinde, büyük harf ve harf aralığı ile beyazdır, başlıklar normal ağırlıktadır. Başlık ortalanmış ve beyazdır.
Video kontrolleri, dairesel kenarlığa sahip ortalanmış bir oynatma düğmesi içerir, beyaz metin ve simgeye sahiptir, üzerine gelindiğinde koyu metne döner. Anlık video sarmalayıcısı göreceli olarak konumlandırılmıştır.
Ekran en az 740 piksel genişliğinde olduğunda, video sarmalayıcısının yan boşlukları olmaz. İçindeki video konteyneri yarım saniye içinde yumuşak bir şekilde görünür veya kaybolur. Uygulama görüntüleri için, hem başlık hem de video sarmalayıcısı tam ekran yüksekliğini dolduracak şekilde ayarlanır, web ve iOS görünümlerine uyum sağlar.
Sayfa gezintisi için bir dizi nokta, sağ tarafta sabit kalır, dikey olarak ortalanır, aralarında küçük boşluklarla bir sütun halinde düzenlenir. Yumuşak bir şekilde görünürler ve diğer içeriğin üzerinde yer alırlar. Daha geniş ekranlarda, konumları içeriğin merkeziyle hizalanacak şekilde ayarlanır. Her nokta, üzerine gelindiğinde veya etkin olduğunda renk değiştiren küçük, yuvarlatılmış bir dikdörtgendir.
Gezinme okları sağ altta sabittir ancak yalnızca daha büyük ekranlarda gösterilir. Bulanık koyu arka plana sahip yuvarlak düğmeler olarak stilize edilmişlerdir ve üzerine gelindiğinde görünümleri değişir. Konumları da ekran genişliğiyle merkezde kalacak şekilde değişir.
Galeriler ve video kontrolleri için etkileşimli düğmeler, üzerine gelindiğinde rengi açar ve metinleri ile simgeleri koyulaşır.
Jenerik:
Röportaj ve Görüntü Yönetmenliği: David Levene
Multimedya Editörü: Laurence Topham
Tasarım ve Geliştirme: Harry Fischer ve Pip Lev
Fotoğraf Editörü: Matt Fidler
Fotoğraf Şefi: Fiona Shields
"Love+War", 7 Kasım 2025'ten itibaren Disney+ ve National Geographic'te yayınlanacak.
Irak 2003-2004 İçeriği:
Yansıma: "Çok genç ve çok naiftim"
Kapsam Irak ve Afganistan'ı içeriyor.
Uyarı: Bazı görüntüler izleyicileri rahatsız edebilir.
Tam ekran görüntüler:
1. Bir Irak kadını, Irak'ın Basra kentinde yanan bir gaz fabrikasından çıkan dumanlar arasında kocasını arıyor, Mayıs 2003. Fotoğraf: Lynsey Addario.
2. Yaralı ABD askerleri, Felluce Muharebesi sırasında Balad hastanesinden tahliye uçuşuna otobüsle taşınırken, 13 Kasım 2004. Fotoğraf: Lynsey Addario/Getty Images.
3. ABD Deniz Piyadeleri, Afganistan'ın Korengal Vadisi'nde 173. Muharebe Birliği'nden yaralı bir askeri taşırken, 23 Ekim 2007. Fotoğraf: Lynsey Addario.
4. Noor Nisa, 18, annesiyle birlikte Afganistan'ın Badahşan eyaletinde doğum sancıları çekerken, Kasım 2009. Kocasının ilk karısı doğum sırasında ölmüştü. Bebek zamanı geldiği için, onu köylerinden dört saat uzaktaki hastaneye götürmek için yola koyuldu. Ödünç aldığı araba bozulunca, ben devreye girdim ve onları oraya götürdüm, Noor burada bir kız çocuğu doğurdu.
Kadınlarla iletişim ekiplerindeki ABD deniz piyadeleri, HM2 sağlıkçı Elena Woods, 24, ile birlikte Afganistan'ın Helmand eyaletindeki Camp Delhi'deki bir ileri operasyon üssünden döndükten sonra silahını temizlerken, 29 Nisan 2010. Bu ekipler, Afgan kadınlarla bağlantı kurmak için deniz piyade piyadeleriyle birlikte çalıştı.
Çavuş Lisa Gardner, Afganistan'ın güneyindeki Helmand'da bir tıbbi yardım etkinliği sırasında Lakari köyündeki Afgan kadınların hayati belirtilerini kontrol ederken, 3 Mayıs 2010. Kültürel normlar nedeniyle, Helmand'daki birçok kadın evden çıkamıyor veya erkek doktorları göremiyor, bu yüz Gardner onların semptomlarını kaydetti ve ilaç sağlamadan önce temel bir teşhis için bilgiyi bir doktora iletti.
Binlerce Suriyeli, 21 Ağustos 2013'te kuzey Irak'ın Dahuk kenti yakınındaki Sahela sınırından Irak'a geçti. BM Mülteci Örgütü, sınırın bir hafta önce yeniden açılmasından bu yana 30.000'den fazla kişinin girdiğini bildirdi, günlük geçişler üç ila dört bini buluyordu. Çoğu, şiddetten, ekonomik sıkıntılardan ve elektrik, su, gıda gibi temel ihtiyaçların kıtlığından kaçan Kürt mültecilerdi.
Darfur'da 2004'ten 2009'a kadar, hükümet kendi halkını öldürmekle suçlandı.
Çadlı kızlar, 18 Ağustos 2004'te Sudan sınırından yaklaşık yedi kilometre uzaktaki Bahaï, Çad'da bir kum fırtınasına katlanıyor. Birçok mülteci, Darfur'daki çatışmalar devam ederken Sudan'dan Çad'a kaçtı.
Lynsey Addario, Darfur'un bazı bölgelerini kontrol eden Sudan Kurtuluş Ordusu isyancılarını fotoğrafladı, 19 Ağustos 2004.
SKA askerleri, 21 Ağustos 2004'te Darfur'da çamura saplanmış kamyonlarının yanında bekliyor. Sivil saldırıları protesto etmek için Nijerya'daki barış görüşmelerini boykot ediyorlardı, altı köyde 75 ölüm iddia ediyorlardı. Çatışma Şubat 2003'te başladığından bu yana, 50.000'e kadar kişi öldü ve bir milyondan fazla kişi Janjavvit milislerinden kork
