Dieser CSS-Code definiert die Schriftfamilie "Guardian Headline Full" mit verschiedenen Stilen und Gewichten. Er enthält Versionen für Light (300), Regular (400), Medium (500) und Semibold (600), jeweils in normaler und kursiver Ausführung. Die Schriftdateien werden in den Formaten WOFF2, WOFF und TrueType aus den Web-Assets des Guardian bereitgestellt.
Dieser CSS-Code definiert mehrere Schriftfamilien für die Guardian-Website, gibt verschiedene Gewichte und Stile mit ihren jeweiligen Dateiformaten (WOFF2, WOFF, TTF) an. Er enthält auch Media Queries für responsives Design, die Stile basierend auf Scripting-Status, Benutzereinstellungen zur Bewegung und Bildschirmgröße anpassen. Zudem werden Farbvariablen, Layouteigenschaften für interaktive Elemente und spezifische Stile für Komponenten wie die Credits-Karte und Filmwerbung festgelegt, um ein einheitliches Erscheinungsbild auf allen Geräten zu gewährleisten.
Die Credits-Karte verwendet spezifische Schriftarten und Größen für ihre Textelemente. Links und Absätze innerhalb der Credits-Karte werden als Inline-Block mit einer Serifenschrift in 24px, fettem Gewicht und 115% Zeilenhöhe angezeigt, mit einem unteren Rand von 20px und einer maximalen Breite, die ihrem Inhalt entspricht. Absätze werden in Kleinbuchstaben mit normalem Zeichenabstand gesetzt.
Eine Überschrift innerhalb der Credits-Karte ist absolut in der Mitte positioniert, verwendet eine Sans-Serif-Schrift in 14px, Großbuchstaben mit 2px Zeichenabstand. Andere Absätze in der Karte verwenden dieselbe Sans-Serif-Schrift und Größe, einige haben Großschreibung und Zeichenabstand.
Links in der Credits-Karte teilen sich die Serifenschrift, Größe, Gewicht, Zeilenhöhe, Rand und maximale Breite und sind weiß gefärbt ohne Unterstreichung beim Überfahren. Der letzte Link hat keinen unteren Rand. Der Container der Karte ist absolut positioniert, zentriert und verwendet Flexbox, um Elemente vertikal auszurichten.
Ein Iframe in der Credits-Karte hat eine Breite von 85% der Viewport-Größe, ein 16:9-Seitenverhältnis, eine maximale Breite von 680px und einen unteren Rand von 12px.
Der interaktive Galerie-Wrapper hat eine minimale und feste Höhe, die auf die Viewport-Höhe gesetzt ist, einen dunklen Hintergrund, zentrierte Ausrichtung und negative Ränder, die sich bei größeren Bildschirmgrößen anpassen. Wenn er ein festes Element enthält, wird die Ausrichtung zurückgesetzt.
Die interaktive Galerie selbst hat eine Breite basierend auf dem Viewport, eine maximale Breite, die sich mit der Bildschirmgröße ändert, zentrierte Positionierung, weißen Text, Flex-Anzeige, eine maximale Höhe von 60% des Viewports, verborgenen Überlauf, einen Rahmen und abgerundete Ecken. Sie enthält einen Farbverlauf am unteren Ende und deaktiviert Zeigerereignisse für Links. Figuren und Bildunterschriften sind für Leistung optimiert.
Der innere Container der Galerie hat eine relative Position und passt seine Breite an. Im festen Modus bedeckt er den gesamten Viewport mit schwarzem Hintergrund, fester Positionierung, aktiviertem Scrollen und ohne Rahmen oder abgerundete Ecken. Textelemente im festen Modus haben spezifische Polsterung, maximale Breite und Farbeinstellungen, und Figuren werden auf vollständige Größe skaliert mit angepassten Rändern und Deckkraft. Bilder im festen Modus haben eine maximale Breite von 980px und sind zentriert.
Dieser CSS-Code definiert Stile für eine interaktive Galerie. Er stellt sicher, dass Bilder und Videos korrekt mit responsivem Design angezeigt werden, das sich an verschiedene Bildschirmgrößen anpasst. Textelemente wie Überschriften und Bildunterschriften haben spezifische Schriftarten, Größen und Farben für Konsistenz. Die Galerie enthält interaktive Funktionen wie Schaltflächen zum Öffnen und Schließen von Overlays mit Hover-Effekten für bessere Benutzererfahrung. Videos sind so eingestellt, dass sie ihre Container vollständig abdecken, und Bildunterschriften sind so gestaltet, dass sie klar und lesbar sind. Das Layout ist für mobile und Desktop-Ansichten optimiert und behält eine saubere und ansprechende Präsentation bei.
Der CSS-Code definiert Stile für einen interaktiven Vollbild-Header mit Video-Hintergrund und Text-Overlay. Er positioniert Elemente, um den gesamten Viewport zu bedecken, verbirgt bestimmte Komponenten und passt Ränder und Polsterung für verschiedene Bildschirmgrößen an. Der Header-Text ist unten zentriert mit einem halbtransparenten Hintergrund, verwendet spezifische Schriftarten und Größen, die sich auf größeren Bildschirmen ändern. Die Überschrift enthält ein "Interview"-Label und ist in Teile aufgeteilt mit angepassten Rändern für visuelle Ausrichtung.
Für den Header der Hauptspalte hat der zweite Teil der Überschrift eine Schriftgröße von 17px, 125% Zeilenhöhe, keine Polsterung, normales Schriftgewicht, eine maximale Breite von 280px und ist zentriert. Auf Bildschirmen breiter als 46,25em erhöht sich die Schriftgröße auf 20px und die maximale Breite auf 335px. Namen innerhalb dieses Teils werden kursiv angezeigt.
Der Standfirst-Bereich hat keine Polsterung, und seine Absätze sind weiß. Der Meta-Bereich hat keine maximale Breite, und seine Social-Links und Schaltflächen werden beim Überfahren schwarz ohne Unterstreichungen, wobei ihre Symbole ebenfalls schwarz werden. Kommentarfunktionalität ist verborgen, und Byline-Links haben keine Ränder.
Beim App-Rendering ist die Höhe des Header-Wrappers auf die volle Viewport-Höhe gesetzt. Die Video-Cover-Karte ist absolut positioniert, bedeckt den gesamten Bereich mit einem halbtransparenten schwarzen Hintergrund und einem Flex-Layout für die Inhaltsverteilung. Das Poster-Video wird auf 50% Helligkeit abgedunkelt. Der Cover-Inhalt ist zentriert mit einer Beschreibung, die obere und untere Ränder und eine maximale Breite von 80% (oder 400px auf breiteren Bildschirmen) hat. Text ist in einer spezifischen Sans-Serif-Schrift, Großbuchstaben mit Zeichenabstand und weiß, mit Überschriften in normalem Gewicht. Der Titel ist zentriert und weiß.
Video-Steuerelemente enthalten eine zentrierte Play-Schaltfläche mit kreisförmigem Rand, weißem Text und Symbol, die sich bei Hover in dunklen Text ändert. Der Snap-Video-Wrapper ist relativ positioniert.
Wenn der Bildschirm mindestens 740 Pixel breit ist, hat der Video-Wrapper keine Seitenränder. Der Video-Container innen blende sanft über eine halbe Sekunde ein oder aus. Für App-Anzeigen sind sowohl der Header als auch der Video-Wrapper auf die volle Bildschirmhöhe eingestellt, passend für Web- und iOS-Ansichten.
Ein Satz Punkte zur Seitennavigation bleibt fest auf der rechten Seite, vertikal zentriert, in einer Spalte mit kleinen Abständen zwischen ihnen angeordnet. Sie erscheinen sanft und liegen über anderen Inhalten. Auf breiteren Bildschirmen passt sich ihre Position an, um mit der Mitte des Inhalts ausgerichtet zu bleiben. Jeder Punkt ist ein kleines, abgerundetes Rechteck, das bei Hover oder Aktivierung die Farbe ändert.
Navigationspfeile sind unten rechts fixiert, zeigen aber nur auf größeren Bildschirmen. Sie sind als abgerundete Schaltflächen mit unscharfem dunklem Hintergrund gestaltet und ändern das Aussehen bei Hover. Ihre Position verschiebt sich auch mit der Bildschirmbreite, um zentriert zu bleiben.
Interaktive Schaltflächen für Galerien und Video-Steuerelemente werden bei Hover heller, und ihr Text und ihre Symbole werden dunkel.
Credits:
Interview und Kamera: David Levene
Multimedia-Redakteur: Laurence Topham
Design und Entwicklung: Harry Fischer und Pip Lev
Bildredakteur: Matt Fidler
Leiterin der Fotografie: Fiona Shields
"Love+War" wird ab 7. November 2025 auf Disney+ und National Geographic verfügbar sein.
Inhalte aus dem Irak 2003-2004:
Reflexion: "Ich war so jung und so naiv"
Berichterstattung umfasst Irak und Afghanistan.
Warnung: Einige Bilder könnten für Betrachter beunruhigend sein.
Vollbildbilder:
1. Eine irakische Frau sucht nach ihrem Ehemann im Rauch einer brennenden Gasfabrik in Basra, Irak, Mai 2003. Foto: Lynsey Addario.
2. Verletzte US-Soldaten werden per Bus vom Balad-Krankenhaus zu einem Evakuierungsflug während der Schlacht von Falludscha transportiert, 13. November 2004. Foto: Lynsey Addario/Getty Images.
3. US-Marines tragen einen verwundeten Soldaten der 173. Battle Company im Korengal-Tal, Afghanistan, 23. Oktober 2007. Foto: Lynsey Addario.
4. Noor Nisa, 18, in Wehen mit ihrer Mutter in der Provinz Badakhshan, Afghanistan, November 2009. Die erste Frau ihres Mannes war bei der Geburt gestorben. Das Baby war fällig, also war er entschlossen, sie ins Krankenhaus zu fahren, vier Stunden entfernt von ihrem Dorf. Als das Auto, das er geliehen hatte, versagte, sprang ich ein und fuhr sie dorthin, wo Noor ein Mädchen zur Welt brachte.
US-Marines in Female Engagement Teams werden mit HM2 Sanitäterin Elena Woods, 24, gezeigt, die ihre Waffe reinigt, nachdem sie von einem Vorposten in Camp Delhi in Helmand, Afghanistan, zurückgekehrt ist, am 29. April 2010. Diese Teams arbeiteten mit Marine-Infanterie zusammen, um Kontakt mit afghanischen Frauen herzustellen.
Korporalin Lisa Gardner überprüft die Vitalzeichen afghanischer Frauen in Lakari während einer medizinischen Versorgung in Helmand, Südafghanistan, am 3. Mai 2010. Aufgrund kultureller Normen können viele Frauen in Helmand nicht das Haus verlassen oder männliche Ärzte sehen, also zeichnete Gardner ihre Symptome auf und gab die Informationen an einen Arzt zur Grunddiagnose weiter, bevor sie Medikamente bereitstellte.
Tausende Syrer überquerten die Grenze zum Irak bei Sahela in Dahuk, Nordirak, am 21. August 2013. Das UN-Flüchtlingshilfswerk berichtete, dass seit der Wiedereröffnung der Grenze in der Vorwoche über 30.000 eingereist waren, mit täglichen Grenzübertritten von drei- bis viertausend. Die meisten waren kurdische Flüchtlinge, die vor Gewalt, wirtschaftlicher Not und Engpässen bei Grundbedürfnissen wie Strom, Wasser und Nahrung flohen.
In Darfur von 2004 bis 2009 wurde die Regierung beschuldigt, eigene Menschen getötet zu haben.
Tschadische Mädchen ertragen einen Sandsturm in Bahaï, Tschad, etwa sieben Kilometer von der sudanesischen Grenze entfernt, am 18. August 2004. Viele Flüchtlinge flohen aus dem Sudan in den Tschad, während der Konflikt in Darfur weiterging.
Lynsey Addario fotografierte Rebellen der Sudanesischen Befreiungsarmee, die Teile von Darfur kontrollierten, am 19. August 2004.
SLA-Soldaten warten bei ihrem im Schlamm steckenden Lastwagen in Darfur am 21. August 2004. Sie boykottierten Friedensgespräche in Nigeria, um Angriffe auf Zivilisten zu protestieren, und behaupteten 75 Tote in sechs Dörfern. Seit Beginn des Konflikts im Februar 2003 waren bis zu 50.000 gestorben, und über eine Million hatten aus Angst vor Janjaweed-Milizen ihre Heimat verlassen.
SLA-Soldaten passieren eine Leiche von einem Angriff auf Zivilisten in Farawyaiah, Darfur, am 24. August 2004. Sechzehn Leichen wurden in Schluchten gefunden, nachdem Männer aus fünf Dörfern angeblich von Janjaweed getötet wurden, die von Regierungstruppen unterstützt wurden.
Afrikanische Union-Soldaten entdecken das Dorf Tama eine Woche nach einem Angriff arabischer Nomaden, die von Regierungstruppen nördlich von Nyala unterstützt wurden, im November 2005 noch glimmend. Die AU versuchte zu patrouillieren und zu untersuchen, aber Überlebende waren in ein nahes Dorf geflohen, blockiert von Nomaden, die auf nahende Fahrzeuge schossen. Hunderte Dörfer in Darfur wurden von arabischen Nomaden niedergebrannt und geplündert.
Das Dorf Silea, kürzlich von der sudanesischen Regierung bombardiert und von Janjaweed auf Kamelen, Pferden und Eseln in West-Darfur am 28. Februar 2008 angegriffen. Die Bombardierungen waren eine Antwort auf einen Hinterhalt. Zwei Monate zuvor hatten Rebellen der Bewegung für Gerechtigkeit und Gleichheit die Kontrolle übernommen, und Geheimdienstinformationen deuteten darauf hin, dass sie in diesen Dörfern lebten und sie als Basis nutzten. Fotografie: Lynsey Addario/Getty Images
Bild im Vollbild ansehen: Sudanesische Frauen warten auf Hilfe von internationalen humanitären Organisationen im Dorf Selea, Februar 2008. Fotografie: Lynsey Addario
Libyen 2011
‚Man konnte die Metallteile an den Ohren vorbeizischen hören‘
Warnung: Die folgenden Fotos könnten für einige Betrachter beunruhigend sein
Bild im Vollbild ansehen: Libyer protestieren gegen Oberst Muammar Gaddafi in Bengasi, Libyen, 26. Februar 2011. Zusammenstöße zwischen Oppositionskräften und Gaddafi-Treuen fanden landesweit statt. Fotografie: Lynsey Addario für The New York Times
Bild im Vollbild ansehen: Kinder spielen nahe einem brennenden Auto in einem Viertel von Bengasi, Ostlibyen, 28. Februar 2011. Gefährliche Auseinandersetzungen zwischen Opposition und pro-Gaddafi-Kräften dauerten an. Fotografie: Lynsey Addario für The New York Times
Bild im Vollbild ansehen: Oppositionssoldaten bekämpfen Gaddafi-treue Truppen in Brega, Libyen, 4. März 2011. Fotografie: Lynsey Addario/Getty Images
Bild im Vollbild ansehen: Oppositionssoldaten schießen auf ein Porträt Gaddafis, während sie die Rückeroberung der Stadt von seinen Truppen feiern, westlich von Ras Lanuf, 5. März 2011. Fotografie: Lynsey Addario/Getty Images
Bild im Vollbild ansehen: Oppositionssoldaten sammeln sich und skandieren, während Regierungs-Luftschläge den Hauptkontrollpunkt nahe der Raffinerie in Ras Lanuf treffen, Ostlibyen, 11. März. Fotografie: Lynsey Addario für The New York Times
Bild im Vollbild ansehen: Oppositionssoldaten verbrennen Reifen zur Rauchabdeckung während Luftangriffen, als sie sich aus Ras Lanuf zurückziehen, Ostlibyen, 11. März. Fotografie: Lynsey Addario
Bild im Vollbild ansehen: Journalisten, darunter New York Times-Fotografen Tyler Hicks (rechts) und Lynsey Addario (ganz links), decken sich während einer Bombardierung der libyschen Regierung nahe der Ölraffinerie in Ras Lanuf ab, 11. März 2011. Hicks, Addario und NYT-Korrespondenten Stephen Farrell und Anthony Shadid wurden als vermisst gemeldet, nachdem sie hinter Gaddafis vorrückenden Linien gefangen waren. Fotografie: Paul Conroy/Reuters
Ukraine 2022
‚Es fühlte sich sehr angespannt an‘
Warnung: Die folgenden Fotos könnten für einige Betrachter beunruhigend sein
Bild im Vollbild ansehen: Ukrainer räumen Trümmer nach einem Raketenangriff auf ein Wohngebäude im Süden von Kiew, 25. Februar 2022. Russische Truppen waren in die Stadt eingedrungen, und Bewohner bereiteten sich auf eine Schlacht vor. Fotografie: Lynsey Addario für The New York Times
Bild im Vollbild ansehen: Julia, eine 29-jährige ukrainische Lehrerin und Freiwillige, weint, während sie auf ihren Einsatz gegen russische Kräfte in Kiew wartet, 26. Februar 2022. Fotografie: Lynsey Addario für The New York Times
Bild im Voll
