Denna CSS-kod definierar teckensnittsfamiljen "Guardian Headline Full" med olika stilar och vikter. Den inkluderar versioner för lätt (300), normal (400), medium (500) och halvfet (600), varje version i både normal och kursiv stil. Teckensnittsfilerna tillhandahålls i WOFF2-, WOFF- och TrueType-format från Guardians webbtillgångar.
Denna CSS-kod definierar flera teckensnittsfamiljer för Guardian-webbplatsen, med specifikation av olika vikter och stilar med respektive filformat (WOFF2, WOFF, TTF). Den inkluderar även media queries för responsiv design, som justerar stilar baserat på skriptstatus, användares rörelsepreferenser och skärmstorlek. Dessutom sätter den färgvariabler, layoutegenskaper för interaktiva element och specifika stilar för komponenter som kreditkort och filmpromo, vilket säkerställer ett konsekvent utseende över enheter.
Kreditkortet använder specifika teckensnitt och storlekar för sina textelement. Länkar och stycken inom kreditkortet visas som inline-block med serif-teckensnitt i 24px, fet vikt och 115% radhöjd, med en bottenmarginal på 20px och en maxbredd som passar deras innehåll. Stycken är satta till gemener med normal bokstavsavstånd.
En rubrik inom kreditkortet är positionerad absolut i mitten, med sans-serif-teckensnitt i 14px, versaler med 2px bokstavsavstånd. Andra stycken i kortet använder samma sans-serif-teckensnitt och storlek, med vissa som har versalstil och bokstavsavstånd.
Länkar i kreditkortet delar serif-teckensnitt, storlek, vikt, radhöjd, marginal och maxbredd-egenskaper, och är vita utan understrykning vid hovring. Den sista länken har ingen bottenmarginal. Kortets behållare är absolut positionerad, centrerad och använder flexbox för att justera objekt vertikalt.
En iframe i kreditkortet har en bredd på 85% av visningsporten, ett 16:9 bildförhållande, en maxbredd på 680px och en bottenmarginal på 12px.
Den interaktiva gallerivynkeln har en minimi- och fix höjd satt till visningsportens höjd, en mörk bakgrund, centrerad justering och negativa marginaler som justeras vid större skärmstorlekar. När den innehåller ett fixerat element återställs justeringen.
Det interaktiva galleriet självt har en bredd baserad på visningsporten, en maxbredd som ändras med skärmstorleken, centrerad positionering, vit text, flex-visning, en maxhöjd på 60% av visningsporten, dold overflow, en ram och rundade hörn. Den inkluderar en gradientöverläggning i botten och inaktiverar pekarevents för länkar. Figurer och bildtexter är optimerade för prestanda.
Galleriets innerbehållare har en relativ position och justerar sin bredd. När den är fixerad täcker den hela visningsporten med svart bakgrund, fixerad positionering, scrollning aktiverad och inga ramar eller rundade hörn. Textelement inom fixerat läge har specifik padding, maxbredd och färginställningar, och figurer skalas till full storlek med justerade marginaler och opacitet. Bilder i fixerat läge har en maxbredd på 980px och är centrerade.
Denna CSS-kod definierar stilar för ett interaktivt galleri. Den säkerställer att bilder och videor visas korrekt med responsiv design, anpassning till olika skärmstorlekar. Textelement som rubriker och bildtexter har specifika teckensnitt, storlekar och färger för konsistens. Galleriet inkluderar interaktiva funktioner som knappar för att öppna och stänga överlägg, med hovringseffekter för bättre användarupplevelse. Videor är inställda att täcka sina behållare helt, och bildtexter är stiliserade för att vara tydliga och läsbara. Layouten är optimerad för både mobila och desktop-vyer, med bibehållen ren och engagerande presentation.
CSS-koden definierar stilar för en helskärmsinteraktiv header med videobakgrund och textöverlägg. Den positionerar element för att täcka hela visningsporten, döljer vissa komponenter och justerar marginaler och padding för olika skärmstorlekar. Headertexten är centrerad i botten med en semitransparent bakgrund, med specifika teckensnitt och storlekar som ändras på större skärmar. Rubriken inkluderar en "Intervju"-etikett och är uppdelad i delar med justerade marginaler för visuell justering.
För huvudkolumnens interaktiva header har den andra delen av rubriken en teckenstorlek på 17px, 125% radhöjd, ingen padding, normal teckensnittsvikt, en maxbredd på 280px och är centrerad. På skärmar bredare än 46,25 em ökar teckenstorleken till 20px och maxbredden till 335px. Namn inom denna del visas i kursiv stil.
Standfirst-sektionen har ingen padding, och dess stycken är vita. Meta-sektionen har ingen maxbredd, och dess sociala länkar och knappar blir svarta vid hovring utan understrykningar, med deras ikoner som också ändras till svarta. Kommentarsfunktionen är dold, och byline-länkar har inga ramar.
I app-rendering är header-omslagets höjd satt till hela visningsportens höjd. Videoförslags-kortet är absolut positionerat, täcker hela området med en semitransparent svart bakgrund och en flexlayout för innehållsfördelning. Postervideon är dämpad till 50% ljusstyrka. Omslagsinnehållet är centrerat med en beskrivning som har topp- och bottenmarginaler och en maxbredd på 80% (eller 400px på bredare skärmar). Text är i ett specifikt sans-serif-teckensnitt, versaler med bokstavsavstånd och vit, med rubriker i normal vikt. Titeln är centrerad och vit.
Videokontroller inkluderar en centrerad play-knapp med en cirkulär ram, vit text och ikon, som ändras till mörk text vid hovring. Snap-video-omslaget är relativt positionerat.
När skärmen är minst 740 pixlar bred kommer video-omslaget att ha inga sidomarginaler. Videobehållaren inuti tonas jämnt in eller ut över en halv sekund. För appvisningar är både headern och video-omslaget inställda att fylla helskärmshöjden, anpassning för webb- och iOS-vyer.
En uppsättning punkter för sidnavigering förblir fixerade på höger sida, centrerade vertikalt, ordnade i en kolumn med små mellanrum mellan dem. De visas jämnt och ligger ovanför annat innehåll. På bredare skärmar justeras deras position för att förbli i linje med innehållets centrum. Varje punkt är en liten, rundad rektangel som ändrar färg vid hovring eller aktivitet.
Navigeringspilar är fixerade längst ner till höger men visas endast på större skärmar. De är stiliserade som rundade knappar med en suddig mörk bakgrund och ändrar utseende vid hovring. Deras position skiftar också med skärmbredden för att förbli centrerade.
Interaktiva knappar för gallerier och videokontroller ljusnar i färg vid hovring, och deras text och ikoner blir mörka.
Krediter:
Intervju och filmfotografering: David Levene
Multimedieredaktör: Laurence Topham
Design och utveckling: Harry Fischer och Pip Lev
Bildredaktör: Matt Fidler
Chefsfotograf: Fiona Shields
"Love+War" kommer att finnas tillgänglig på Disney+ och National Geographic från 7 november 2025.
Innehåll från Irak 2003-2004:
Reflektion: "Jag var så ung och så naiv"
Täckning inkluderar Irak och Afghanistan.
Varning: Vissa bilder kan vara upprörande för tittare.
Helskärmsbilder:
1. En irakisk kvinna söker efter sin make bland röken från en brinnande gasfabrik i Basra, Irak, maj 2003. Foto: Lynsey Addario.
2. Skadade amerikanska soldater transporteras med buss från Balad-sjukhuset till en evakueringsflygning under slaget om Fallujah, 13 november 2004. Foto: Lynsey Addario/Getty Images.
3. amerikanska marinsoldater bär en sårad soldat från 173rd Battle Company i Korengal-dalen, Afghanistan, 23 oktober 2007. Foto: Lynsey Addario.
4. Noor Nisa, 18, i förlossningsarbete med sin mor i Badakhshan-provinsen, Afghanistan, november 2009. Hennes makes första fru dog i barnsäng.Barnet var försenat, så han var fast besluten att köra henne till sjukhuset, fyra timmar från deras by. När bilen han lånade strulade, klev jag in och körde dem dit, där Noor födde en flickbaby.
Amerikanska marinsoldater i kvinnliga engagemangteam visas med HM2-sjukvårdare Elena Woods, 24, som rengör sitt vapen efter att ha kommit tillbaka från en framskjuten operationsbas på Camp Delhi i Helmand, Afghanistan, den 29 april 2010. Dessa team arbetade med marininfanteriet för att koppla samman med afghanska kvinnor.
Korpral Lisa Gardner kontrollerar de afghanska kvinnornas vitala tecken i Lakari-by under ett medicinskt utreach i Helmand, södra Afghanistan, den 3 maj 2010. På grund av kulturella normer kan många kvinnor i Helmand inte lämna hemmet eller träffa manliga läkare, så Gardner registrerade deras symptom och förmedlade informationen till en läkare för en grundläggande diagnos innan medicinering.
Tusentals syrier korsade in i Irak nära Sahela-gränsen i Dahuk, norra Irak, den 21 augusti 2013. FN:s flyktingorgan rapporterade att över 30 000 hade kommit in sedan gränsen öppnades igen veckan innan, med dagliga korsningar på tre till fyra tusen. De flesta var kurdiska flyktingar som flydde våld, ekonomisk nöd och brist på förnödenheter som el, vatten och mat.
I Darfur från 2004 till 2009 anklagades regeringen för att döda sitt eget folk.
Tjadiska flickor uthärdar en sandstorm i Bahaï, Tchad, ungefär sju kilometer från den sudanesiska gränsen, den 18 augusti 2004. Många flyktingar flydde från Sudan in i Tchad medan konflikten fortsatte i Darfur.
Lynsey Addario fotograferade Sudanese Liberation Army-rebeller, som kontrollerade delar av Darfur, den 19 augusti 2004.
SLA-soldater väntar vid sin lastbil fast i lera i Darfur den 21 augusti 2004. De bojkottade fredsförhandlingar i Nigeria för att protestera mot attacker på civila, och hävdade 75 dödsfall i sex byar. Sedan konflikten började i februari 2003 hade upp till 50 000 dött, och över en miljon flytt från sina hem av rädsla för Janjaweed-miliserna.
SLA-soldater passerar en död kropp från en attack på civila i Farawyaiah, Darfur, den 24 augusti 2004. Sexton kroppar hittades i raviner efter att män från fem byar påstås ha dödats av Janjaweed som stöddes av regeringsstyrkor.
Afrikanska unionens soldater upptäcker byn Tama fortfarande ryker över en vecka efter en attack av arabiska nomader som stöddes av regeringsstyrkor norr om Nyala i november 2005. AU försökte patrullera och undersöka, men överlevande hade flytt till en närliggande by, blockerad av nomader som sköt på närliggande fordon. Hundratals byar i Darfur brändes och plundrades av arabiska nomader.
Byn Silea, nyligen bombad av den sudanesiska regeringen och attackerad av Janjaweed på kameler, hästar och åsnor i Västra Darfur den 28 februari 2008. Bombningarna var ett svar på ett bakhåll.Två månader tidigare hade rebeller från Justice and Equality Movement tagit kontroll, och underrättelser indikerade att de bodde i dessa byar och använde dem som bas. Fotograf: Lynsey Addario/Getty Images
Visa bild i helskärm: Sudanesiska kvinnor väntar på hjälp från internationella humanitära organisationer i byn Selea, februari 2008. Fotograf: Lynsey Addario
Libyen 2011
‘Man kunde höra metallen vina förbi öronen’
Varning: Vissa tittare kan uppfatta följande fotografier som störande
Visa bild i helskärm: Libyer protesterar mot överste Muammar Gaddafi i Benghazi, Libyen, 26 februari 2011. Sammandrabbningar mellan oppositionsstyrkor och Gaddafi-trogna pågick över hela landet. Fotograf: Lynsey Addario för The New York Times
Visa bild i helskärm: Barn leker nära en brinnande bil i ett grannskap i Benghazi, östra Libyen, 28 februari 2011. Farliga konfrontationer fortsatte mellan opposition och pro-Gaddafi-styrkor. Fotograf: Lynsey Addario för The New York Times
Visa bild i helskärm: Oppositionssoldater bekämpar Gaddafi-trogna trupper i Brega, Libyen, 4 mars 2011. Fotograf: Lynsey Addario/Getty Images
Visa bild i helskärm: Oppositionssoldater skjuter på en porträttbild av Gaddafi medan de firar återtagandet av staden från hans styrkor, väster om Ras Lanuf, 5 mars 2011. Fotograf: Lynsey Addario/Getty Images
Visa bild i helskärm: Oppositionssoldater samlas och sjunger medan regeringens flyganfall träffar huvudkontrollpunkten nära Raffinaderiet Ras Lanuf, östra Libyen, 11 mars. Fotograf: Lynsey Addario för The New York Times
Visa bild i helskärm: Oppositionssoldater bränner däck för röcktäcke under flyganfall medan de retirerar från Ras Lanuf, östra Libyen, 11 mars. Fotograf: Lynsey Addario
Visa bild i helskärm: Journalister, inklusive New York Times-fotograferna Tyler Hicks (höger) och Lynsey Addario (längst till vänster), söker skydd under ett libyskt regeringsbombning nära Raffinaderiet Ras Lanuf, 11 mars 2011. Hicks, Addario och NYT-korrespondenterna Stephen Farrell och Anthony Shadid rapporterades saknade efter att ha fastnat bakom Gaddafis framryckande linjer. Fotograf: Paul Conroy/Reuters
Ukraina 2022
‘Det kändes mycket spänt’
Varning: Vissa tittare kan uppfatta följande fotografier som störande
Visa bild i helskärm: Ukrainska städar upp skräp efter en missilattack på en bostadsbyggnad i södra Kyiv, 25 februari 2022. Ryska trupper hade kommit in i staden, och invånare förberedde sig för en strid. Fotograf: Lynsey Addario för The New York Times
Visa bild i helskärm: Julia, en 29-årig ukrainsk lärare och volontär
