Ce code CSS définit la famille de polices "Guardian Headline Full" avec différents styles et graisses. Il inclut les versions light (300), regular (400), medium (500) et semibold (600), chacune disponible en style normal et italique. Les fichiers de police sont fournis aux formats WOFF2, WOFF et TrueType provenant des ressources web du Guardian.
Ce code CSS définit plusieurs familles de polices pour le site web du Guardian, en spécifiant différentes graisses et styles avec leurs formats de fichiers respectifs (WOFF2, WOFF, TTF). Il inclut également des requêtes média pour un design adaptatif, ajustant les styles en fonction du statut des scripts, des préférences de mouvement de l'utilisateur et de la taille de l'écran. De plus, il définit des variables de couleur, des propriétés de mise en page pour les éléments interactifs, et des styles spécifiques pour des composants comme la carte de crédits et la promotion de films, assurant une apparence cohérente sur tous les appareils.
La carte de crédits utilise des polices et tailles spécifiques pour ses éléments textuels. Les liens et paragraphes dans la carte de crédits sont affichés en inline-block avec une police serif de 24px, en gras et une hauteur de ligne de 115%, avec une marge inférieure de 20px et une largeur maximale correspondant à leur contenu. Les paragraphes sont en minuscules avec un espacement normal des lettres.
Un titre dans la carte de crédits est positionné de manière absolue au centre, utilisant une police sans-serif de 14px, un texte en majuscules avec un espacement des lettres de 2px. D'autres paragraphes dans la carte utilisent également la même police sans-serif et taille, certains ayant un style en majuscules et un espacement des lettres.
Les liens dans la carte de crédits partagent la police serif, la taille, la graisse, la hauteur de ligne, la marge et les propriétés de largeur maximale, et sont de couleur blanche sans soulignement au survol. Le dernier lien n'a pas de marge inférieure. Le conteneur de la carte est positionné de manière absolue, centré, et utilise flexbox pour aligner les éléments verticalement.
Un iframe dans la carte de crédits a une largeur de 85% de la fenêtre d'affichage, un ratio d'aspect de 16:9, une largeur maximale de 680px, et une marge inférieure de 12px.
Le wrapper de la galerie interactive a une hauteur minimale et fixe définie à la hauteur de la fenêtre d'affichage, un fond sombre, un alignement centré, et des marges négatives qui s'ajustent sur les écrans plus larges. Lorsqu'il contient un élément fixe, l'alignement est réinitialisé.
La galerie interactive elle-même a une largeur basée sur la fenêtre d'affichage, une largeur maximale qui change avec la taille de l'écran, un positionnement centré, un texte blanc, un affichage flex, une hauteur maximale de 60% de la fenêtre d'affichage, un débordement caché, une bordure et des coins arrondis. Elle inclut un dégradé en superposition en bas et désactive les événements de pointeur pour les liens. Les figures et légendes sont optimisées pour la performance.
Le conteneur interne de la galerie a une position relative et ajuste sa largeur. En mode fixe, il couvre toute la fenêtre d'affichage avec un fond noir, un positionnement fixe, le défilement activé, et aucune bordure ni coins arrondis. Les éléments textuels en mode fixe ont des réglages spécifiques de remplissage, largeur maximale et couleur, et les figures sont redimensionnées à pleine taille avec des marges et une opacité ajustées. Les images en mode fixe ont une largeur maximale de 980px et sont centrées.
Ce code CSS définit les styles pour une galerie interactive. Il assure que les images et vidéos sont affichées correctement avec un design adaptatif, s'ajustant à différentes tailles d'écran. Les éléments textuels comme les titres et légendes ont des polices, tailles et couleurs spécifiques pour la cohérence. La galerie inclut des fonctionnalités interactives telles que des boutons pour ouvrir et fermer les superpositions, avec des effets de survol pour une meilleure expérience utilisateur. Les vidéos sont réglées pour couvrir entièrement leurs conteneurs, et les légendes sont stylisées pour être claires et lisibles. La mise en page est optimisée pour les vues mobiles et de bureau, maintenant une présentation propre et engageante.
Le code CSS définit les styles pour un en-tête interactif plein écran avec une vidéo en arrière-plan et un texte en superposition. Il positionne les éléments pour couvrir toute la fenêtre d'affichage, cache certains composants, et ajuste les marges et le remplissage pour différentes tailles d'écran. Le texte de l'en-tête est centré en bas avec un arrière-plan semi-transparent, utilisant des polices et tailles spécifiques qui changent sur les écrans plus larges. Le titre inclut un libellé "Interview" et est divisé en parties avec des marges ajustées pour l'alignement visuel.
Pour l'en-tête de la colonne interactive principale, la deuxième partie du titre a une taille de police de 17px, une hauteur de ligne de 125%, aucun remplissage, une graisse de police normale, une largeur maximale de 280px, et est centrée. Sur les écrans plus larges que 46.25em, la taille de police augmente à 20px et la largeur maximale à 335px. Les noms dans cette partie sont affichés en italique.
La section standfirst n'a pas de remplissage, et ses paragraphes sont blancs. La section meta n'a pas de largeur maximale, et ses liens sociaux et boutons deviennent noirs au survol sans soulignement, avec leurs icônes devenant également noires. La fonctionnalité de commentaire est cachée, et les liens de byline n'ont pas de bordures.
Dans le rendu d'application, la hauteur du wrapper d'en-tête est définie à la pleine hauteur de la fenêtre d'affichage. La carte de couverture vidéo est positionnée de manière absolue, couvrant toute la zone avec un arrière-plan noir semi-transparent et une disposition flex pour la distribution du contenu. La vidéo d'affichage est assombrie à 50% de luminosité. Le contenu de couverture est centré avec une description qui a des marges supérieure et inférieure et une largeur maximale de 80% (ou 400px sur les écrans plus larges). Le texte est dans une police sans-serif spécifique, en majuscules avec espacement des lettres, et blanc, avec les titres en graisse normale. Le titre est centré et blanc.
Les contrôles vidéo incluent un bouton de lecture centré avec une bordure circulaire, un texte et une icône blancs, qui changent en texte sombre au survol. Le wrapper de vidéo snap est positionné de manière relative.
Lorsque l'écran fait au moins 740 pixels de large, le wrapper vidéo n'aura pas de marges latérales. Le conteneur vidéo à l'intérieur apparaît ou disparaît en fondu en douceur sur une demi-seconde. Pour les affichages d'application, l'en-tête et le wrapper vidéo sont réglés pour remplir la hauteur d'écran complète, s'adaptant aux vues web et iOS.
Un ensemble de points pour la navigation de page reste fixe sur le côté droit, centré verticalement, arrangé en colonne avec de petits écarts entre eux. Ils apparaissent en douceur et se placent au-dessus des autres contenus. Sur les écrans plus larges, leur position s'ajuste pour rester alignée avec le centre du contenu. Chaque point est un petit rectangle arrondi qui change de couleur au survol ou lorsqu'il est actif.
Les flèches de navigation sont fixes en bas à droite mais ne s'affichent que sur les écrans plus larges. Elles sont stylisées comme des boutons arrondis avec un arrière-plan sombre flou et changent d'apparence au survol. Leur position change également avec la largeur de l'écran pour rester centrée.
Les boutons interactifs pour les galeries et les contrôles vidéo s'éclaircissent en couleur au survol, et leur texte et icônes deviennent sombres.
Crédits :
Interview et cinématographie : David Levene
Éditeur multimédia : Laurence Topham
Design et développement : Harry Fischer et Pip Lev
Éditeur iconographique : Matt Fidler
Cheffe de la photographie : Fiona Shields
"Love+War" sera disponible sur Disney+ et National Geographic à partir du 7 novembre 2025.
Contenu de l'Irak 2003-2004 :
Réflexion : "J'étais si jeune et si naïve"
La couverture inclut l'Irak et l'Afghanistan.
Avertissement : Certaines images peuvent choquer les spectateurs.
Images plein écran :
1. Une femme irakienne cherche son mari dans la fumée d'une usine de gaz en feu à Bassorah, Irak, mai 2003. Photo de Lynsey Addario.
2. Des soldats américains blessés transportés en bus de l'hôpital de Balad vers un vol d'évacuation pendant la bataille de Falloujah, 13 novembre 2004. Photo de Lynsey Addario/Getty Images.
3. Des Marines américains portant un soldat blessé de la 173rd Battle Company dans la vallée de Korengal, Afghanistan, 23 octobre 2007. Photo de Lynsey Addario.
4. Noor Nisa, 18 ans, en travail avec sa mère dans la province de Badakhshan, Afghanistan, novembre 2009. Son mari, dont la première femme était morte en couches, était déterminé à la conduire à l'hôpital, à quatre heures de leur village. Quand la voiture qu'il avait empruntée est tombée en panne, je suis intervenue et les ai conduits là-bas, où Noor a donné naissance à une petite fille.
Des Marines américains dans des équipes d'engagement féminin sont montrés avec l'infirmière de corps HM2 Elena Woods, 24 ans, nettoyant son arme après son retour d'une base opérationnelle avancée au camp Delhi dans le Helmand, Afghanistan, le 29 avril 2010. Ces équipes travaillaient avec l'infanterie marine pour entrer en contact avec les femmes afghanes.
La caporale Lisa Gardner vérifie les signes vitaux de femmes afghanes dans le village de Lakari lors d'une consultation médicale itinérante dans le Helmand, sud de l'Afghanistan, le 3 mai 2010. En raison des normes culturelles, de nombreuses femmes du Helmand ne peuvent pas quitter leur domicile ou consulter des médecins masculins, donc Gardner enregistrait leurs symptômes et transmettait les informations à un médecin pour un diagnostic de base avant de fournir des médicaments.
Des milliers de Syriens ont traversé en Irak près de la frontière de Sahela à Dahuk, nord de l'Irak, le 21 août 2013. L'Agence des Nations Unies pour les réfugiés a signalé que plus de 30 000 étaient entrés depuis la réouverture de la frontière la semaine précédente, avec des traversées quotidiennes de trois à quatre mille. La plupart étaient des réfugiés kurdes fuyant la violence, les difficultés économiques et les pénuries de produits de première nécessité comme l'électricité, l'eau et la nourriture.
Au Darfour de 2004 à 2009, le gouvernement a été accusé de tuer son propre peuple.
Des filles tchadiennes endurent une tempête de sable à Bahaï, Tchad, à environ sept kilomètres de la frontière soudanaise, le 18 août 2004. De nombreux réfugiés ont fui le Soudan vers le Tchad alors que le conflit se poursuivait au Darfour.
Lynsey Addario a photographié des rebelles de l'Armée de libération du Soudan, qui contrôlaient des parties du Darfour, le 19 août 2004.
Des soldats de l'ALS attendent près de leur camion embourbé dans le Darfour le 21 août 2004. Ils boycottaient les pourparlers de paix au Nigeria pour protester contre les attaques sur des civils, affirmant 75 morts dans six villages. Depuis le début du conflit en février 2003, jusqu'à 50 000 étaient morts, et plus d'un million avaient fui leurs maisons, craignant les milices Janjawid.
Des soldats de l'ALS passent près d'un corps mort d'une attaque contre des civils à Farawyaiah, Darfour, le 24 août 2004. Seize corps ont été trouvés dans des ravins après que des hommes de cinq villages auraient été tués par les Janjawid soutenus par les forces gouvernementales.
Des soldats de l'Union africaine découvrent le village de Tama encore fumant plus d'une semaine après une attaque de nomades arabes soutenus par les forces gouvernementales au nord de Nyala en novembre 2005. L'UA essayait de patrouiller et d'enquêter, mais les survivants avaient fui vers un village voisin, bloqués par des nomades qui tiraient sur les véhicules approchant. Des centaines de villages au Darfour ont été brûlés et pillés par des nomades arabes.
Le village de Silea, récemment bombardé par le gouvernement soudanais et attaqué par des Janjawid sur des chameaux, chevaux et ânes dans l'ouest du Darfour le 28 février 2008. Les bombardements étaient une réponse à une embuscade. Deux mois plus tôt, des rebelles du Mouvement pour la justice et l'égalité avaient pris le contrôle, et les renseignements indiquaient qu'ils vivaient dans ces villages et les utilisaient comme base. Photographie : Lynsey Addario/Getty Images
Voir l'image en plein écran : Des femmes soudanaises attendent de l'aide d'organisations humanitaires internationales dans le village de Selea, février 2008. Photographie : Lynsey Addario
Libye 2011
« On pouvait entendre le métal siffler à nos oreilles »
Avertissement : Certains spectateurs pourraient trouver les photographies suivantes choquantes
Voir l'image en plein écran : Des Libyens protestent contre le colonel Mouammar Kadhafi à Benghazi, Libye, 26 février 2011. Des affrontements entre les forces de l'opposition et les loyalistes de Kadhafi se poursuivaient dans tout le pays. Photographie : Lynsey Addario pour The New York Times
Voir l'image en plein écran : Des enfants jouent près d'une voiture en feu dans un quartier de Benghazi, est de la Libye, 28 février 2011. Des confrontations dangereuses continuaient entre l'opposition et les forces pro-Kadhafi. Photographie : Lynsey Addario pour The New York Times
Voir l'image en plein écran : Des soldats de l'opposition engagent des troupes loyalistes de Kadhafi à Brega, Libye, 4 mars 2011. Photographie : Lynsey Addario/Getty Images
Voir l'image en plein écran : Des troupes de l'opposition tirent sur un portrait de Kadhafi en célébrant la reprise de la ville à ses forces, à l'ouest de Ras Lanouf, 5 mars 2011. Photographie : Lynsey Addario/Getty Images
Voir l'image en plein écran : Des troupes de l'opposition se rassemblent et scandent alors que des frappes aériennes gouvernementales touchent le poste de contrôle principal près de la raffinerie de Ras Lanouf, est de la Libye, 11 mars. Photographie : Lynsey Addario pour The New York Times
Voir l'image en plein écran : Des troupes de l'opposition brûlent des pneus pour un écran de fumée pendant les frappes aériennes alors qu'elles se retirent de Ras Lanouf, est de la Libye, 11 mars. Photographie : Lynsey Addario
Voir l'image en plein écran : Des journalistes, incluant les photographes du New York Times Tyler Hicks (à droite) et Lynsey Addario (à l'extrême gauche), se mettent à couvert pendant un bombardement du gouvernement libyen près de la raffinerie de pétrole de Ras Lanouf, 11 mars 2011. Hicks, Addario, et les correspondants du NYT Stephen Farrell et Anthony Shadid ont été signalés disparus après avoir été pris derrière les lignes avançantes de Kadhafi. Photographie : Paul Conroy/Reuters
Ukraine 2022
« C'était très tendu »
Avertissement : Certains spectateurs pourraient trouver les photographies suivantes choquantes
Voir l'image en plein écran : Des Ukrainiens déblaient les débris après une frappe de missile sur un immeuble résidentiel dans le sud de Kyiv, 25 février 2022. Les troupes russes étaient entrées
