Acest cod CSS definește familia de fonturi „Guardian Headline Full” cu diferite stiluri și greutăți. Include versiuni light (300), regular (400), medium (500) și semibold (600), fiecare atât în stil normal cât și italic. Fișierele de font sunt furnizate în formatele WOFF2, WOFF și TrueType din resursele web ale Guardian.
Acest cod CSS definește mai multe familii de fonturi pentru site-ul Guardian, specificând diferite greutăți și stiluri cu formatele lor de fișiere respective (WOFF2, WOFF, TTF). De asemenea, include interogări media pentru design responsiv, ajustând stilurile în funcție de starea de scripting, preferințele de mișcare ale utilizatorului și dimensiunea ecranului. În plus, stabilește variabile de culoare, proprietăți de layout pentru elementele interactive și stiluri specifice pentru componente precum cardul de credite și promoția de film, asigurând o aspect consistent pe toate dispozitivele.
Cardul de credite utilizează fonturi și dimensiuni specifice pentru elementele sale textuale. Linkurile și paragrafele din cardul de credite sunt afișate inline-block cu un font serif de 24px, greutate bold și înălțimea liniei de 115%, cu o margine inferioară de 20px și o lățime maximă care se potrivește conținutului lor. Paragrafele sunt setate la litere mici cu spațiere normală a literelor.
Un titlu din cardul de credite este poziționat absolut în centru, folosind un font sans-serif de 14px, text cu majuscule și spațiere a literelor de 2px. Alte paragrafe din card folosesc de asemenea același font și dimensiune sans-serif, unele având stilul cu majuscule și spațiere a literelor.
Linkurile din cardul de credite împărtășesc proprietățile de font serif, dimensiune, greutate, înălțime a liniei, margine și lățime maximă, și sunt colorate alb fără subliniere la hover. Ultimul link nu are margine inferioară. Containerul cardului este poziționat absolut, centrat și folosește flexbox pentru a alinia elementele pe verticală.
Un iframe în cardul de credite are o lățime de 85% din viewport, un raport de aspect 16:9, o lățime maximă de 680px și o margine inferioară de 12px.
Învelișul galeriei interactive are o înălțime minimă și fixă setată la înălțimea viewport-ului, un fundal întunecat, aliniere centrată și margini negative care se ajustează la dimensiuni mai mari ale ecranului. Când conține un element fix, alinierea este resetată.
Galerie interactivă în sine are o lățime bazată pe viewport, o lățime maximă care se schimbă cu dimensiunea ecranului, poziționare centrată, text alb, afișare flex, o înălțime maximă de 60% din viewport, overflow ascuns, bordură și colțuri rotunjite. Include o suprapunere gradient la bază și dezactivează evenimentele de pointer pentru linkuri. Figurile și capturile sunt optimizate pentru performanță.
Containerul interior al galeriei are o poziție relativă și își ajustează lățimea. Când este fix, acoperă întregul viewport cu un fundal negru, poziționare fixă, scrolling activat și fără borduri sau colțuri rotunjite. Elementele textuale în modul fix au setări specifice de padding, lățime maximă și culoare, iar figurile sunt scalate la dimensiune completă cu margini și opacitate ajustate. Imaginile în modul fix au o lățime maximă de 980px și sunt centrate.
Acest cod CSS definește stiluri pentru o galerie interactivă. Asigură că imaginile și videoclipurile sunt afișate corect cu design responsiv, adaptându-se la diferite dimensiuni de ecran. Elementele textuale precum titluri și capturi au fonturi, dimensiuni și culori specifice pentru consistență. Galeria include funcționalități interactive precum butoane pentru a deschide și închide suprapuneri, cu efecte hover pentru o experiență mai bună a utilizatorului. Videoclipurile sunt setate să acopere complet containerele lor, iar capturile sunt stilizate pentru a fi clare și lizibile. Layout-ul este optimizat atât pentru vizualizări mobile cât și desktop, menținând o prezentare curată și captivantă.
Codul CSS definește stiluri pentru un antet interactiv pe tot ecranul cu un fundal video și suprapunere de text. Poziționează elemente pentru a acoperi întregul viewport, ascunde anumite componente și ajustează marginile și padding-ul pentru diferite dimensiuni de ecran. Textul antetului este centrat în partea de jos cu un fundal semi-transparent, folosind fonturi și dimensiuni specifice care se schimbă pe ecrane mai mari. Titlul include o etichetă „Interviu” și este împărțit în părți cu margini ajustate pentru alinierea vizuală.
Pentru antetul coloanei interactive principale, a doua parte a titlului are o dimensiune a fontului de 17px, înălțimea liniei de 125%, fără padding, greutate normală a fontului, o lățime maximă de 280px și este centrată. Pe ecrane mai late de 46.25em, dimensiunea fontului crește la 20px și lățimea maximă la 335px. Numele din această parte sunt afișate în cursive.
Secțiunea standfirst nu are padding, iar paragrafele sale sunt albe. Secțiunea meta nu are lățime maximă, iar linkurile și butoanele sale sociale devin negre la hover fără subliniere, cu iconițele lor devenind de asemenea negre. Funcționalitatea de comentarii este ascunsă, iar linkurile byline nu au borduri.
În randarea aplicației, înălțimea învelișului antetului este setată la înălțimea completă a viewport-ului. Cardul video de copertă este poziționat absolut, acoperind întreaga zonă cu un fundal negru semi-transparent și un layout flex pentru distribuirea conținutului. Videoclipul poster este estompat la 50% luminozitate. Conținutul de copertă este centrat cu o descriere care are margini superioară și inferioară și o lățime maximă de 80% (sau 400px pe ecrane mai late). Textul este într-un font sans-serif specific, cu majuscule și spațiere a literelor, și alb, cu titluri în greutate normală. Titlul este centrat și alb.
Controalele video includ un buton de redare centrat cu o bordură circulară, text și iconiță albe, care se schimbă în text întunecat la hover. Învelișul video snap este poziționat relativ.
Când ecranul are cel puțin 740 de pixeli lățime, învelișul video nu va avea margini laterale. Containerul video din interior apare sau dispare treptat pe parcursul unei jumătăți de secundă. Pentru afișările în aplicație, atât antetul cât și învelișul video sunt setate să umple înălțimea completă a ecranului, adaptându-se la vizualizările web și iOS.
Un set de puncte pentru navigarea pe pagină rămâne fix în partea dreaptă, centrat pe verticală, aranjat într-o coloană cu mici goluri între ele. Ele apar treptat și se află deasupra altui conținut. Pe ecrane mai late, poziția lor se ajustează pentru a rămâne aliniată cu centrul conținutului. Fiecare punct este un mic dreptunghi rotunjit care își schimbă culoarea la hover sau când este activ.
Săgețile de navigare sunt fixate în dreapta jos dar apar doar pe ecrane mai mari. Sunt stilizate ca butoane rotunjite cu un fundal întunecat estompat și își schimbă aspectul la hover. Poziția lor se deplasează de asemenea cu lățimea ecranului pentru a rămâne centrate.
Butoanele interactive pentru galerii și controale video se luminează în culoare la hover, iar textul și iconițele lor devin întunecate.
Credite:
Interviu și cinematografie: David Levene
Editor multimedia: Laurence Topham
Design și dezvoltare: Harry Fischer și Pip Lev
Editor imagine: Matt Fidler
Șef al fotografiei: Fiona Shields
„Love+War” va fi disponibil pe Disney+ și National Geographic începând cu 7 noiembrie 2025.
Conținut din Irak 2003-2004:
Reflecție: „Eram atât de tânără și atât de naivă”
Acoperirea include Irak și Afganistan.
Avertisment: Unele imagini pot fi dureroase pentru spectatori.
Imagini pe tot ecranul:
1. O femeie irakiană își caută soțul printre fumul unei fabrici de gaz în flăcări din Basra, Irak, mai 2003. Foto: Lynsey Addario.
2. Soldați americani răniți transportați cu autobuzul de la spitalul Balad la un zbor de evacuare în timpul Bătăliei pentru Fallujah, 13 noiembrie 2004. Foto: Lynsey Addario/Getty Images.
3. Infanteriști americani care poartă un soldat rănit din Compania a 173-a de Luptă în Valea Korengal, Afganistan, 23 octombrie 2007. Foto: Lynsey Addario.
4. Noor Nisa, 18 ani, în travaliu cu mama sa în provincia Badakhshan, Afganistan, noiembrie 2009. Prima soție a soțului ei a murit la naștere. Bebelușul trebuia să se nască, așa că el a hotărât să o conducă la spital, la patru ore de satul lor. Când mașina pe care a împrumutat-o nu a funcționat, am intervenit și i-am condus acolo, unde Noor a născut o fetiță.
Infanteriștii americani din echipele de implicare feminină sunt arătați cu caporalul medical HM2 Elena Woods, 24 de ani, curățându-și arma după întoarcerea de la o bază operațională avanstată la Camp Delhi în Helmand, Afganistan, pe 29 aprilie 2010. Aceste echipe au lucrat cu infanteria marină pentru a se conecta cu femeile afgane.
Caporalul Lisa Gardner verifică semnele vitale ale femeilor afgane în satul Lakari în timpul unei acțiuni medicale de proximitate în Helmand, sudul Afganistanului, pe 3 mai 2010. Din cauza normelor culturale, multe femei din Helmand nu pot părăsi casa sau nu pot consulta medici bărbați, așa că Gardner și-a notat simptomele și a transmis informațiile unui medic pentru un diagnostic de bază înainte de a furniza medicamente.
Mii de sirieni au trecut în Irak lângă granița Sahela în Dahuk, nordul Irakului, pe 21 august 2013. Agenția ONU pentru Refugiați a raportat că peste 30.000 intraseră de la redeschiderea graniței în săptămâna precedentă, cu treceri zilnice de trei până la patru mii. Majoritatea erau refugiați kurzi care scăpau de violență, dificultăți economice și lipsuri de esențiale precum electricitate, apă și mâncare.
În Darfur din 2004 până în 2009, guvernul a fost acuzat că și-a ucis propriul popor.
Fete din Ciad îndură o furtună de nisip în Bahaï, Ciad, la aproximativ șapte kilometri de granița sudaneză, pe 18 august 2004. Mulți refugiați au fugit din Sudan în Ciad pe măsură ce conflictul continua în Darfur.
Lynsey Addario a fotografiat rebeli din Armata de Eliberare Sudană, care controlau părți din Darfur, pe 19 august 2004.
Soldații SLA așteaptă lângă camionul lor blocat în noroi în Darfur pe 21 august 2004. Aceștia boicotau discuțiile de pace din Nigeria pentru a protesta împotriva atacurilor asupra civililor, susținând 75 de morți în șase sate. De la începutul conflictului în februarie 2003, până la 50.000 muriseră, iar peste un milion fuseseră nevoiți să părăsească casele lor din teama milițiilor Janjaweed.
Soldații SLA trec pe lângă un cadavru dintr-un atac asupra civililor în Farawyaiah, Darfur, pe 24 august 2004. Șaisprezece cadavre au fost găsite în râpe după ce bărbații din cinci sate au fost uciși, se presupune, de Janjaweed sprijiniți de forțele guvernamentale.
Soldații Uniunii Africane descoperă satul Tama încă fumegând peste o săptămână după un atac al nomazilor arabi sprijiniți de forțele guvernamentale la nord de Nyala în noiembrie 2005. UA a încercat să patruleze și să investigheze, dar supraviețuitorii fugiseră într-un sat din apropiere, blocat de nomazi care trăgeau asupra vehiculelor care se apropiau. Sute de sate din Darfur au fost arse și jefuite de nomazi arabi.
Satul Silea, bombardat recent de guvernul sudanez și atacat de Janjaweed pe cămile, cai și măgari în Darfurul de Vest pe 28 februarie 2008. Bombardamentele au fost un răspuns la o ambuscadă. Cu două luni înainte, rebeli din Mișcarea pentru Justiție și Egalitate preluaseră controlul, iar informațiile indicau că trăiau în aceste sate și le foloseau ca bază. Fotografie: Lynsey Addario/Getty Images
Vedeți imaginea pe tot ecranul: Femei sudaneze așteaptă ajutor de la organizațiile internaționale umanitare în satul Selea, februarie 2008. Fotografie: Lynsey Addario
Libia 2011
„Puteai auzi metalul șuierând pe lângă urechi”
Avertisment: Unii spectatori pot considera următoarele fotografii dureroase
Vedeți imaginea pe tot ecranul: Libieni protestează împotriva colonelului Muammar Gaddafi în Benghazi, Libia, 26 februarie 2011. Ciocniri între forțele opoziției și loialiști ai lui Gaddafi erau în desfășurare în toată țara. Fotografie: Lynsey Addario pentru The New York Times
Vedeți imaginea pe tot ecranul: Copii se joacă lângă o mașină în flăcări într-un cartier din Benghazi, Libia de Est, 28 februarie 2011. Confruntări periculoase continuau între opoziție și forțele pro-Gaddafi. Fotografie: Lynsey Addario pentru The New York Times
Vedeți imaginea pe tot ecranul:
