Questo codice CSS definisce la famiglia di caratteri "Guardian Headline Full" con vari stili e spessori. Include versioni light (300), regular (400), medium (500) e semibold (600), ciascuna in stili normale e corsivo. I file dei font sono forniti nei formati WOFF2, WOFF e TrueType dalle risorse web del Guardian.
Questo codice CSS definisce diverse famiglie di caratteri per il sito web del Guardian, specificando diversi pesi e stili con i rispettivi formati di file (WOFF2, WOFF, TTF). Include anche media query per il design responsivo, adattando gli stili in base allo stato dello scripting, alle preferenze di movimento dell'utente e alle dimensioni dello schermo. Inoltre, imposta variabili di colore, proprietà di layout per elementi interattivi e stili specifici per componenti come la scheda dei crediti e la promo cinematografica, garantendo un aspetto coerente su tutti i dispositivi.
La scheda dei crediti utilizza caratteri e dimensioni specifici per i suoi elementi testuali. I link e i paragrafi all'interno della scheda dei crediti vengono visualizzati in inline-block con un carattere serif a 24px, peso grassetto e altezza della linea al 115%, con un margine inferiore di 20px e una larghezza massima che si adatta al loro contenuto. I paragrafi sono impostati in minuscolo con spaziatura delle lettere normale.
Un'intestazione all'interno della scheda dei crediti è posizionata in modo assoluto al centro, utilizzando un carattere sans-serif a 14px, testo in maiuscolo con spaziatura delle lettere di 2px. Altri paragrafi nella scheda utilizzano lo stesso carattere sans-serif e dimensione, alcuni con stile maiuscolo e spaziatura delle lettere.
I link nella scheda dei crediti condividono le proprietà del carattere serif, dimensione, peso, altezza della linea, margine e larghezza massima, e sono colorati di bianco senza sottolineatura al passaggio del mouse. L'ultimo link non ha margine inferiore. Il contenitore della scheda è posizionato in modo assoluto, centrato e utilizza flexbox per allineare gli elementi verticalmente.
Un iframe nella scheda dei crediti ha una larghezza dell'85% della viewport, un rapporto d'aspetto 16:9, una larghezza massima di 680px e un margine inferiore di 12px.
Il wrapper della galleria interattiva ha un'altezza minima e fissa impostata all'altezza della viewport, uno sfondo scuro, allineamento centrato e margini negativi che si adattano a schermi più grandi. Quando contiene un elemento fisso, l'allineamento viene reimpostato.
La galleria interattiva stessa ha una larghezza basata sulla viewport, una larghezza massima che cambia con le dimensioni dello schermo, posizionamento centrato, testo bianco, display flex, un'altezza massima del 60% della viewport, overflow nascosto, un bordo e angoli arrotondati. Include una sovrapposizione sfumata in basso e disabilita gli eventi del puntatore per i link. Figure e didascalie sono ottimizzate per le prestazioni.
Il contenitore interno della galleria ha una posizione relativa e adatta la sua larghezza. Quando è fisso, copre l'intera viewport con uno sfondo nero, posizionamento fisso, scorrimento abilitato e nessun bordo o angoli arrotondati. Gli elementi testuali nella modalità fissa hanno impostazioni specifiche di padding, larghezza massima e colore, e le figure sono ridimensionate a grandezza naturale con margini e opacità regolati. Le immagini in modalità fissa hanno una larghezza massima di 980px e sono centrate.
Questo codice CSS definisce gli stili per una galleria interattiva. Assicura che immagini e video vengano visualizzati correttamente con un design responsivo, adattandosi a diverse dimensioni dello schermo. Elementi testuali come intestazioni e didascalie hanno caratteri, dimensioni e colori specifici per coerenza. La galleria include funzionalità interattive come pulsanti per aprire e chiudere sovrapposizioni, con effetti al passaggio del mouse per una migliore esperienza utente. I video sono impostati per coprire completamente i loro contenitori e le didascalie sono stilizzate per essere chiare e leggibili. Il layout è ottimizzato sia per visualizzazioni mobili che desktop, mantenendo una presentazione pulita e coinvolgente.
Il codice CSS definisce gli stili per un'intestazione interattiva a schermo intero con uno sfondo video e una sovrapposizione di testo. Posiziona gli elementi per coprire l'intera viewport, nasconde alcuni componenti e regola margini e padding per diverse dimensioni dello schermo. Il testo dell'intestazione è centrato in basso con uno sfondo semitrasparente, utilizzando caratteri e dimensioni specifici che cambiano su schermi più grandi. Il titolo include un'etichetta "Intervista" ed è diviso in parti con margini regolati per l'allineamento visivo.
Per l'intestazione della colonna interattiva principale, la seconda parte del titolo ha una dimensione del carattere di 17px, un'altezza della linea del 125%, nessun padding, un peso del carattere normale, una larghezza massima di 280px ed è centrata. Su schermi più larghi di 46,25em, la dimensione del carattere aumenta a 20px e la larghezza massima a 335px. I nomi all'interno di questa parte sono visualizzati in corsivo.
La sezione standfirst non ha padding e i suoi paragrafi sono bianchi. La sezione meta non ha una larghezza massima e i suoi link sociali e pulsanti diventano neri al passaggio del mouse senza sottolineature, con le loro icone che cambiano anch'esse in nero. La funzionalità dei commenti è nascosta e i link della firma non hanno bordi.
Nel rendering dell'app, l'altezza del wrapper dell'intestazione è impostata all'altezza completa della viewport. La scheda video è posizionata in modo assoluto, coprendo l'intera area con uno sfondo nero semitrasparente e un layout flex per la distribuzione dei contenuti. Il video poster è scurito al 50% di luminosità. Il contenuto della copertina è centrato con una descrizione che ha margini superiore e inferiore e una larghezza massima dell'80% (o 400px su schermi più larghi). Il testo è in un carattere sans-serif specifico, maiuscolo con spaziatura delle lettere e bianco, con intestazioni in peso normale. Il titolo è centrato e bianco.
I controlli video includono un pulsante di riproduzione centrato con un bordo circolare, testo e icona bianchi, che cambiano in testo scuro al passaggio del mouse. Il wrapper del video snap è posizionato in modo relativo.
Quando lo schermo è largo almeno 740 pixel, il wrapper del video non avrà margini laterali. Il contenitore video all'interno si dissolve in entrata o in uscita dolcemente in mezzo secondo. Per i display delle app, sia l'intestazione che il wrapper del video sono impostati per riempire l'altezza completa dello schermo, adattandosi alle visualizzazioni web e iOS.
Una serie di punti per la navigazione delle pagine rimane fissa sul lato destro, centrata verticalmente, disposta in una colonna con piccoli spazi tra di loro. Appaiono dolcemente e si trovano sopra altri contenuti. Su schermi più larghi, la loro posizione si adatta per rimanere allineata con il centro del contenuto. Ogni punto è un piccolo rettangolo arrotondato che cambia colore al passaggio del mouse o quando è attivo.
Le frecce di navigazione sono fissate in basso a destra ma vengono mostrate solo su schermi più grandi. Sono stilizzate come pulsanti arrotondati con uno sfondo scuro sfocato e cambiano aspetto al passaggio del mouse. Anche la loro posizione si sposta con la larghezza dello schermo per rimanere centrata.
I pulsanti interattivi per gallerie e controlli video si schiariscono di colore al passaggio del mouse e il loro testo e le icone diventano scuri.
Crediti:
Intervista e cinematografia: David Levene
Redattore multimediale: Laurence Topham
Design e sviluppo: Harry Fischer e Pip Lev
Redattore fotografico: Matt Fidler
Capo della fotografia: Fiona Shields
"Love+War" sarà disponibile su Disney+ e National Geographic a partire dal 7 novembre 2025.
Contenuti dall'Iraq 2003-2004:
Riflessione: "Ero così giovane e così ingenuo"
La copertura include Iraq e Afghanistan.
Avvertenza: Alcune immagini potrebbero turbare gli spettatori.
Immagini a schermo intero:
1. Una donna irachena cerca il marito tra il fumo di una fabbrica di gas in fiamme a Bassora, Iraq, maggio 2003. Foto di Lynsey Addario.
2. Soldati statunitensi feriti trasportati in autobus dall'ospedale di Balad a un volo di evacuazione durante la battaglia di Falluja, 13 novembre 2004. Foto di Lynsey Addario/Getty Images.
3. Marines statunitensi che trasportano un soldato ferito della 173rd Battle Company nella valle di Korengal, Afghanistan, 23 ottobre 2007. Foto di Lynsey Addario.
4. Noor Nisa, 18 anni, in travaglio con la madre nella provincia del Badakhshan, Afghanistan, novembre 2009. La prima moglie di suo marito era morta di parto. Il bambino era in arrivo, quindi era deciso a portarla in ospedale, a quattro ore di distanza dal loro villaggio. Quando l'auto che aveva preso in prestito si è guastata, sono intervenuto e li ho portati lì, dove Noor ha dato alla luce una bambina.
Le marine statunitensi nei team di coinvolgimento femminile sono mostrati con l'appuntato HM2 Elena Woods, 24 anni, mentre pulisce la sua arma dopo il ritorno da una base operativa avanzata a Camp Delhi nell'Helmand, Afghanistan, il 29 aprile 2010. Questi team lavoravano con la fanteria marina per connettersi con le donne afghane.
La caporale Lisa Gardner controlla i segni vitali delle donne afghane nel villaggio di Lakari durante un'assistenza medica nell'Helmand, Afghanistan meridionale, il 3 maggio 2010. A causa di norme culturali, molte donne nell'Helmand non possono lasciare casa o vedere medici maschi, quindi Gardner registrava i loro sintomi e passava le informazioni a un medico per una diagnosi di base prima di fornire farmaci.
Migliaia di siriani sono entrati in Iraq vicino al confine di Sahela a Dahuk, Iraq settentrionale, il 21 agosto 2013. L'UNHCR ha riferito che oltre 30.000 erano entrati da quando il confine era stato riaperto la settimana precedente, con attraversamenti giornalieri di tre-quattromila persone. La maggior parte erano rifugiati curdi in fuga da violenze, difficoltà economiche e carenze di beni essenziali come elettricità, acqua e cibo.
In Darfur dal 2004 al 2009, il governo è stato accusato di uccidere la propria gente.
Ragazze ciadiane sopportano una tempesta di sabbia a Bahaï, Ciad, circa sette chilometri dal confine sudanese, il 18 agosto 2004. Molti rifugiati sono fuggiti dal Sudan in Ciad mentre il conflitto continuava in Darfur.
Lynsey Addario ha fotografato i ribelli dell'Esercito di Liberazione Sudanese, che controllavano parti del Darfur, il 19 agosto 2004.
Soldati dell'SLA aspettano vicino al loro camion bloccato nel fango in Darfur il 21 agosto 2004. Stavano boicottando i colloqui di pace in Nigeria per protestare contro gli attacchi ai civili, affermando 75 morti in sei villaggi. Da quando il conflitto è iniziato nel febbraio 2003, fino a 50.000 persone erano morte e oltre un milione erano fuggite dalle loro case per paura delle milizie Janjaweed.
Soldati dell'SLA passano accanto a un corpo senza vita da un attacco ai civili a Farawyaiah, Darfur, il 24 agosto 2004. Sedici corpi sono stati trovati in burroni dopo che uomini di cinque villaggi sono stati presumibilmente uccisi da Janjaweed supportate dalle forze governative.
Soldati dell'Unione Africana scoprono il villaggio di Tama ancora fumante oltre una settimana dopo un attacco da parte di nomadi arabi sostenuti dalle forze governative a nord di Nyala nel novembre 2005. L'UA cercava di pattugliare e investigare, ma i sopravvissuti erano fuggiti in un villaggio vicino, bloccati da nomadi che sparavano ai veicoli in avvicinamento. Centinaia di villaggi in Darfur sono stati bruciati e saccheggiati da nomadi arabi.
Il villaggio di Silea, recentemente bombardato dal governo sudanese e attaccato da Janjaweed su cammelli, cavalli e asini nel Darfur occidentale il 28 febbraio 2008. I bombardamenti erano una risposta a un'imboscata. Due mesi prima, ribelli del Movimento per la Giustizia e l'Uguaglianza avevano preso il controllo e l'intelligence indicava che vivevano in questi villaggi e li usavano come base. Fotografia: Lynsey Addario/Getty Images
Visualizza l'immagine a schermo intero: Donne sudanesi aspettano aiuti da organizzazioni umanitarie internazionali nel villaggio di Selea, febbraio 2008. Fotografia: Lynsey Addario
Libia 2011
"Si sentiva il metallo sibilare vicino alle orecchie"
Avvertenza: Alcuni spettatori potrebbero trovare le seguenti fotografie disturbanti
Visualizza l'immagine a schermo intero: Libici protestano contro il colonnello Muammar Gheddafi a Bengasi, Libia, 26 febbraio 2011. Scontri tra forze dell'opposizione e fedeli a Gheddafi erano in corso in tutto il paese. Fotografia: Lynsey Addario per The New York Times
Visualizza l'immagine a schermo intero: Bambini giocano vicino a un'auto in fiamme in un quartiere di Bengasi, Libia orientale, 28 febbraio 2011. Pericolosi scontri continuavano tra forze dell'opposizione e filo-Gheddafi. Fotografia: Lynsey Addario per The New York Times
Visualizza l'immagine a schermo intero: Soldati dell'opposizione ingaggiano truppe fedeli a Gheddafi a Brega, Libia, 4 marzo 2011. Fotografia: Lynsey Addario/Getty Images
Visualizza l'immagine a schermo intero: Truppe dell'opposizione sparano a un ritratto di Gheddafi mentre celebrano la riconquista della città dalle sue forze, a ovest di Ras Lanuf, 5 marzo 2011. Fotografia: Lynsey Addario/Getty Images
Visualizza l'immagine a schermo intero: Truppe dell'opposizione si radunano e cantano mentre attacchi aerei governativi colpiscono il posto di blocco principale vicino alla raffineria di Ras Lanuf, Libia orientale, 11 marzo. Fotografia: Lynsey Addario per The New York Times
Visualizza l'immagine a schermo intero: Truppe dell'opposizione bruciano pneumatici per copertura di fumo durante attacchi aerei mentre si ritirano da Ras Lanuf, Libia orientale, 11 marzo. Fotografia: Lynsey Addario
Visualizza l'immagine a schermo intero: Giornalisti, inclusi i fotografi del New York Times Tyler Hicks (a destra) e Lynsey Addario (all'estrema sinistra), si riparano durante un bombardamento del governo libico vicino alla raffineria di petrolio di Ras Lanuf, 11 marzo 2011. Hicks, Addario e i corrispondenti del NYT Stephen Farrell e Anthony Shadid sono stati dati per dispersi dopo essere rimasti intrappolati dietro le linee avanzate di Gheddafi. Fotografia: Paul Conroy/Reuters
Ucraina 2022
"Si sentiva una tensione molto forte"
Avvertenza: Alcuni spettatori potrebbero trovare le seguenti fotografie disturbanti
Visualizza l'immagine a schermo intero: Ucraini ripuliscono detriti dopo un attacco missilistico a un edificio residenziale nel sud di Kyiv, 25 febb
