Ten kod CSS definiuje rodzinę czcionek "Guardian Headline Full" z różnymi stylami i wagami. Zawiera wersje lekką (300), normalną (400), średnią (500) i półgrubą (600), każdą w wersjach normalnej i kursywy. Pliki czcionek są dostarczane w formatach WOFF2, WOFF i TrueType z zasobów internetowych Guardiana.
Ten kod CSS definiuje kilka rodzin czcionek dla strony internetowej Guardiana, określając różne wagi i style wraz z odpowiadającymi im formatami plików (WOFF2, WOFF, TTF). Zawiera również zapytania medialne dla projektowania responsywnego, dostosowując style w zależności od statusu skryptów, preferencji użytkownika dotyczących ruchu oraz rozmiaru ekranu. Dodatkowo ustawia zmienne kolorów, właściwości układu dla elementów interaktywnych oraz konkretne style dla komponentów takich jak karta credits i promocja filmu, zapewniając spójny wygląd na różnych urządzeniach.
Karta credits używa konkretnych czcionek i rozmiarów dla swoich elementów tekstowych. Linki i akapity wewnątrz karty credits są wyświetlane jako inline-block z czcionką szeryfową o rozmiarze 24px, pogrubione, z interlinią 115%, dolnym marginesem 20px i maksymalną szerokością dopasowaną do ich zawartości. Akapity są ustawione na małe litery z normalnym odstępem między literami.
Nagłówek wewnątrz karty credits jest pozycjonowany absolutnie na środku, używając czcionki bezszeryfowej o rozmiarze 14px, tekst jest pisany wielkimi literami z odstępem między literami 2px. Inne akapity w karcie również używają tej samej czcionki bezszeryfowej i rozmiaru, niektóre mają styl wielkich liter i odstęp między literami.
Linki w karcie credits współdzielą właściwości czcionki szeryfowej, rozmiaru, wagi, interlini, marginesu i maksymalnej szerokości, są koloru białego i nie mają podkreślenia po najechaniu. Ostatni link nie ma dolnego marginesu. Kontener karty jest pozycjonowany absolutnie, wyśrodkowany i używa flexboxa do wyrównania elementów w pionie.
Iframe w karcie credits ma szerokość 85% viewportu, proporcje 16:9, maksymalną szerokość 680px i dolny margines 12px.
Opakowanie interaktywnej galerii ma minimalną i stałą wysokość ustawioną na wysokość viewportu, ciemne tło, wyśrodkowanie oraz ujemne marginesy, które dostosowują się przy większych rozmiarach ekranu. Gdy zawiera element fixed, wyrównanie jest resetowane.
Sama interaktywna galeria ma szerokość opartą na viewporcie, maksymalną szerokość, która zmienia się z rozmiarem ekranu, wyśrodkowane pozycjonowanie, biały tekst, display flex, maksymalną wysokość 60% viewportu, ukryty overflow, obramowanie i zaokrąglone rogi. Zawiera gradientową nakładkę na dole i wyłącza zdarzenia wskaźnika dla linków. Elementy figure i podpisy są zoptymalizowane pod kątem wydajności.
Wewnętrzny kontener galerii ma pozycję względną i dostosowuje swoją szerokość. Gdy jest ustalony (fixed), pokrywa cały viewport z czarnym tłem, pozycjonowaniem fixed, włączonym przewijaniem i bez obramowań czy zaokrąglonych rogów. Elementy tekstowe w trybie fixed mają konkretne ustawienia paddingu, maksymalnej szerokości i koloru, a elementy figure są skalowane do pełnego rozmiaru z dostosowanymi marginesami i przezroczystością. Obrazy w trybie fixed mają maksymalną szerokość 980px i są wyśrodkowane.
Ten kod CSS definiuje style dla interaktywnej galerii. Zapewnia poprawne wyświetlanie obrazów i filmów z responsywnym designem, dostosowując się do różnych rozmiarów ekranu. Elementy tekstowe takie jak nagłówki i podpisy mają konkretne czcionki, rozmiary i kolory dla spójności. Galeria zawiera funkcje interaktywne takie jak przyciski do otwierania i zamykania nakładek, z efektami hover dla lepszego doświadczenia użytkownika. Filmy są ustawione, aby w pełni pokrywać swoje kontenery, a podpisy są stylizowane tak, aby były wyraźne i czytelne. Layout jest zoptymalizowany zarówno dla widoków mobilnych, jak i desktopowych, utrzymując czystą i angażującą prezentację.
Kod CSS definiuje style dla pełnoekranowego interaktywnego nagłówka z tłem wideo i nakładką tekstową. Pozycjonuje elementy tak, aby pokrywały cały viewport, ukrywa pewne komponenty i dostosowuje marginesy oraz padding dla różnych rozmiarów ekranu. Tekst nagłówka jest wyśrodkowany na dole z półprzezroczystym tłem, używając konkretnych czcionek i rozmiarów, które zmieniają się na większych ekranach. Nagłówek zawiera etykietę "Wywiad" i jest podzielony na części z dostosowanymi marginesami dla wizualnego wyrównania.
Dla nagłówka głównej kolumny interaktywnej, druga część nagłówka ma rozmiar czcionki 17px, interlinię 125%, brak paddingu, normalną wagę czcionki, maksymalną szerokość 280px i jest wyśrodkowana. Na ekranach szerszych niż 46.25em, rozmiar czcionki zwiększa się do 20px, a maksymalna szerokość do 335px. Nazwy w tej części są wyświetlane kursywą.
Sekcja standfirst nie ma paddingu, a jej akapity są białe. Sekcja meta nie ma maksymalnej szerokości, a jej linki społecznościowe i przyciski stają się czarne po najechaniu bez podkreśleń, ich ikony również zmieniają się na czarne. Funkcjonalność komentarzy jest ukryta, a linki byline nie mają obramowań.
W renderowaniu aplikacji, wysokość opakowania nagłówka jest ustawiona na pełną wysokość viewportu. Karta wideo cover jest pozycjonowana absolutnie, pokrywając cały obszar z półprzezroczystym czarnym tłem i układem flex do dystrybucji treści. Wideo poster jest przyciemnione do 50% jasności. Zawartość covera jest wyśrodkowana z opisem, który ma górny i dolny margines oraz maksymalną szerokość 80% (lub 400px na szerszych ekranach). Tekst jest w konkretnej czcionce bezszeryfowej, wielkimi literami z odstępem między literami i biały, z nagłówkami w normalnej wadze. Tytuł jest wyśrodkowany i biały.
Kontrolki wideo obejmują wyśrodkowany przycisk odtwarzania z okrągłym obramowaniem, białym tekstem i ikoną, które zmieniają się na ciemny tekst po najechaniu. Opakowanie snap video jest pozycjonowane względnie.
Gdy ekran ma co najmniej 740 pikseli szerokości, opakowanie wideo nie będzie miało marginesów bocznych. Kontener wideo wewnątrz płynnie pojawia się lub znika przez pół sekundy. Dla wyświetlaczy aplikacji, zarówno nagłówek, jak i opakowanie wideo są ustawione na wypełnienie pełnej wysokości ekranu, dostosowując się do widoków internetowych i iOS.
Zestaw kropek do nawigacji stron pozostaje ustalony po prawej stronie, wyśrodkowany w pionie, ułożony w kolumnę z małymi odstępami między nimi. Pojawiają się płynnie i znajdują się nad inną zawartością. Na szerszych ekranach ich pozycja dostosowuje się, aby pozostać wyrównaną ze środkiem zawartości. Każda kropka to mały, zaokrąglony prostokąt, który zmienia kolor po najechaniu lub gdy jest aktywny.
Strzałki nawigacyjne są ustalone na dole po prawej, ale pokazują się tylko na większych ekranach. Są stylizowane jako zaokrąglone przyciski z rozmytym ciemnym tłem i zmieniają wygląd po najechaniu. Ich pozycja również przesuwa się z szerokością ekranu, aby pozostać wyśrodkowaną.
Interaktywne przyciski dla galerii i kontrolek wideo rozjaśniają kolor po najechaniu, a ich tekst i ikony stają się ciemne.
Credits:
Wywiad i zdjęcia: David Levene
Redaktor multimediów: Laurence Topham
Projekt i rozwój: Harry Fischer i Pip Lev
Redaktor zdjęć: Matt Fidler
Kierownik działu fotografii: Fiona Shields
"Miłość+Wojna" będzie dostępna na Disney+ i National Geographic od 7 listopada 2025 roku.
Zawartość z Iraku 2003-2004:
Refleksja: "Byłam tak młoda i tak naiwna"
Zasięg obejmuje Irak i Afganistan.
Ostrzeżenie: Niektóre zdjęcia mogą być wstrząsające dla widzów.
Obrazy pełnoekranowe:
1. Iracka kobieta szuka swojego męża wśród dymu z płonącej fabryki gazu w Basrze, Irak, maj 2003. Zdjęcie: Lynsey Addario.
2. Ranni żołnierze amerykańscy transportowani autobusem ze szpitala w Balad na lot ewakuacyjny podczas bitwy o Falludżah, 13 listopada 2004. Zdjęcie: Lynsey Addario/Getty Images.
3. Amerykańscy marines niosą rannego żołnierza z 173. kompanii bojowej w dolinie Korengal, Afganistan, 23 października 2007. Zdjęcie: Lynsey Addario.
4. Noor Nisa, 18 lat, podczas porodu z matką w prowincji Badakhshan, Afganistan, listopad 2009. Jej mąż miał pierwszą żonę, która zmarła przy porodzie. Ponieważ dziecko było już spodziewane, postanowił zawieźć ją do szpitala, cztery godziny drogi od ich wioski. Gdy pożyczony samochód się zepsuł, ja interweniowałam i zawiozłam ich tam, gdzie Noor urodziła dziewczynkę.
Żołnierki US Marines w zespołach kontaktowych z kobietami są pokazane z sanitariuszką HM2 Elena Woods, 24 lata, czyszczącą broń po powrocie z bazy operacyjnej w Camp Delhi w Helmand, Afganistan, 29 kwietnia 2010. Te zespoły współpracowały z piechotą morską, aby nawiązywać kontakt z afgańskimi kobietami.
Kapral Lisa Gardner sprawdza parametry życiowe afgańskich kobiet w wiosce Lakari podczas akcji medycznej w Helmand, południowy Afganistan, 3 maja 2010. Z powodu norm kulturowych wiele kobiet w Helmand nie może opuszczać domu ani widywać lekarzy płci męskiej, więc Gardner zapisywała ich objawy i przekazywała informacje lekarzowi w celu podstawowej diagnozy przed podaniem leków.
Tysiące Syryjczyków przekroczyło granicę z Irakiem w pobliżu przejścia granicznego Sahela w Dahuk, północny Irak, 21 sierpnia 2013. Agencja ONZ ds. Uchodźców podała, że od ponownego otwarcia granicy tydzień wcześniej wjechało ponad 30 000 osób, z dziennymi przekroczeniami od trzech do czterech tysięcy. Większość stanowili uchodźcy kurdyjscy uciekający przed przemocą, trudnościami gospodarczymi i brakami podstawowych rzeczy takich jak prąd, woda i żywność.
W Darfurze od 2004 do 2009 roku rząd był oskarżany o zabijanie własnych ludzi.
Czadyjskie dziewczynki przetrwają burzę piaskową w Bahaï, Czad, około siedem kilometrów od granicy z Sudanem, 18 sierpnia 2004. Wielu uchodźców uciekło z Sudanu do Czadu, gdy konflikt w Darfurze trwał.
Lynsey Addario sfotografowała rebeliantów Sudańskiej Armii Wyzwolenia, którzy kontrolowali części Darfuru, 19 sierpnia 2004.
Żołnierze SLA czekają przy swoim ciężarówce utkniętej w błocie w Darfurze 21 sierpnia 2004. Bojkotowali rozmowy pokojowe w Nigerii w proteście przeciwko atakom na cywilów, twierdząc, że zginęło 75 osób w sześciu wioskach. Od początku konfliktu w lutym 2003 roku zginęło do 50 000 osób, a ponad milion uciekło z domów w obawie przed milicjami Dżandżawid.
Żołnierze SLA mijają martwe ciało z ataku na cywilów w Farawyaiah, Darfur, 24 sierpnia 2004. Szesnaście ciał znaleziono w wąwozach po tym, jak mężczyźni z pięciu wiosek rzekomo zostali zabici przez Dżandżawid wspieranych przez siły rządowe.
Żołnierze Unii Afrykańskiej odkrywają wioskę Tama wciąż dymiącą ponad tydzień po ataku arabskich koczowników wspieranych przez siły rządowe na północ od Nyali w listopadzie 2005. UA próbowała patrolować i badać, ale ocaleni uciekli do pobliskiej wioski, zablokowani przez koczowników, którzy strzelali do nadjeżdżających pojazdów. Setki wiosek w Darfurze zostało spalonych i splądrowanych przez arabskich koczowników.
Wioska Silea, niedawno zbombardowana przez rząd sudański i zaatakowana przez Dżandżawid na wielbłądach, koniach i osłach w Zachodnim Darfurze 28 lutego 2008. Bombardowania były odpowiedzią na zasadzkę. Dwa miesiące wcześniej rebelianci z Ruchu na rzecz Sprawiedliwości i Równości przejęli kontrolę, a wywiad wskazywał, że mieszkali w tych wioskach i używali ich jako bazy. Fotografia: Lynsey Addario/Getty Images
Zobacz obraz w pełnym ekranie: Sudańskie kobiety czekają na pomoc od międzynarodowych organizacji humanitarnych w wiosce Selea, luty 2008. Fotografia: Lynsey Addario
Libia 2011
„Słyszałeś, jak metal świszczy koło uszu”
Ostrzeżenie: Niektórych widzów mogą zaniepokoić poniższe fotografie
Zobacz obraz w pełnym ekranie: Libijczycy protestują przeciwko pułkownikowi Muammarowi Kaddafiemu w Bengazi, Libia, 26 lutego 2011. Starcia między siłami opozycyjnymi a zwolennikami Kaddafiego trwały w całym kraju. Fotografia: Lynsey Addario dla The New York Times
Zobacz obraz w pełnym ekranie: Dzieci bawią się przy płonącym samochodzie w dzielnicy Bengazi, wschodnia Libia, 28 lutego 2011. Niebezpieczne konfrontacje między opozycją a siłami pro-Kaddafiego trwały. Fotografia: Lynsey Addario dla The New York Times
Zobacz obraz w pełnym ekranie: Żołnierze opozycji staczają walkę z wojskami lojalistów Kaddafiego w Brega, Libia, 4 marca 2011. Fotografia: Lyn
