Tämä CSS-koodi määrittelee "Guardian Headline Full" -fonttiperheen erilaisine tyyleineen ja painoarvoineen. Se sisältää kevyen (300), normaalin (400), keskiraskaan (500) ja puoliraskaan (600) version, kukin sekä normaalina että kursivoituna. Fonttitiedostot on toimitettu WOFF2-, WOFF- ja TrueType-muodoissa Guardianin verkkoresursseista.
Tämä CSS-koodi määrittelee useita fonttiperheitä Guardian-verkkosivustolle, määrittäen eri painoarvot ja tyylit niitä vastaavine tiedostomuotoineen (WOFF2, WOFF, TTF). Se sisältää myös media-kyselyt responsiivista suunnittelua varten, säätäen tyylejä skriptaustilan, käyttäjän liikkemieltymysten ja näytön koon perusteella. Lisäksi se asettaa värimuuttujia, asetteluominaisuuksia interaktiivisille elementeille sekä erityistyylejä komponenteille kuten tekijätiili ja elokuvamainos, varmistaen yhtenäisen ulkoasun laitteiden välillä.
Tekijätiili käyttää tiettyjä fontteja ja kokoja tekstielementeissään. Linkit ja kappaleet tekijätiilissä näytetään inline-blockina serif-fontilla 24px koona, lihavoituna ja 115% rivivälinä, alareunamarginaalilla 20px ja maksimileveydellä, joka sopii niiden sisältöön. Kappaleet asetetaan pieniksi kirjaimiksi normaalilla kirjainvälin asetuksella.
Otsikko tekijätiilissä on absoluuttisesti sijoitettu keskelle, käyttäen sans-serif-fonttia 14px koona, isoilla kirjaimilla 2px kirjainväleillä. Muut kappaleet kortissa käyttävät samaa sans-serif-fonttia ja kokoa, joistain osin isoilla kirjaimilla ja kirjainväleillä.
Linkit tekijätiilissä jakavat samat serif-fontin, koon, painoarvon, rivivälin, marginaalin ja maksimileveysominaisuudet, ja ne ovat väriltään valkoisia ilman alleviivausta hover-tilassa. Viimeisellä linkillä ei ole alareunamarginaalia. Kortin säiliö on absoluuttisesti sijoitettu, keskitetty ja käyttää flexboxia kohteiden vertikaaliseen tasaukseen.
Tekijätiilin iframe on 85% näkymän leveydestä, 16:9 kuvasuhteella, enimmäisleveys 680px ja alareunamarginaali 12px.
Interaktiivisen gallerian wrapperilla on vähimmäis- ja kiinteä korkeus asetettuna näkymän korkeuteen, tumma tausta, keskitetty tasaus ja negatiiviset marginaalit, jotka sopeutuvat suuremmilla näytönkoilla. Kun se sisältää kiinteän elementin, tasaus nollataan.
Interaktiivisella gallerialla itsellään on leveys, joka perustuu näkymään, enimmäisleveys, joka muuttuu näytön koon mukaan, keskitetty sijainti, valkoinen teksti, flex-näyttö, enimmäiskorkeus 60% näkymästä, piilotettu ylivuoto, reunus ja pyöristetyt kulmat. Se sisältää gradienttipäällysteen alareunassa ja poistaa osoitintapahtumat linkeistä. Kuvat ja kuvatekstit on optimoitu suorituskykyyn.
Gallerian sisäinen säiliö on suhteellisessa asemassa ja säätelee leveyttään. Kiinteässä tilassa se peittää koko näkymän mustalla taustalla, kiinteällä sijainnilla, vieritys käytössä ja ilman reunuksia tai pyöristettyjä kulmia. Kiinteässä tilassa olevilla tekstielementeillä on tiettyjä täytteitä, enimmäisleveyttä ja väriasetuksia, ja kuvat skaalautuvat täyteen kokoon säädetyillä marginaaleilla ja läpinäkyvyydellä. Kuvat kiinteässä tilassa ovat enintään 980px leveitä ja keskitettyjä.
Tämä CSS-koodi määrittelee tyylejä interaktiiviselle gallerialle. Se varmistaa, että kuvat ja videot näytetään oikein responsiivisella suunnittelulla, sopeutuen eri näytönkokoisiin. Tekstielementeillä kuten otsikoilla ja kuvateksteillä on tiettyjä fontteja, kokoa ja värejä yhtenäisyyden vuoksi. Galleria sisältää interaktiivisia ominaisuuksia kuten painikkeita päällysten avaamiseen ja sulkemiseen, hover-efekteineen paremman käyttökokemuksen saavuttamiseksi. Videot asetetaan peittämään säiliönsä kokonaan, ja kuvatekstit on tyylitelty selviksi ja luettaviksi. Asettelu on optimoitu sekä mobiili- että työpöytänäkymille, ylläpitäen siistiä ja kiinnostavaa esitystapaa.
CSS-koodi määrittelee tyylejä koko näytön interaktiiviselle otsikolle, jossa on videotausta ja tekstipäällystys. Se sijoittaa elementit peittämään koko näkymän, piilottaa tiettyjä komponentteja ja säätää marginaaleja ja täytteitä eri näytönkoille. Otsikkoteksti on keskitetty alareunaan puoliläpinäkyvällä taustalla, käyttäen tiettyjä fontteja ja kokoa, jotka muuttuvat suuremmilla näytöillä. Otsikko sisältää "Haastattelu"-tekstin ja on jaettu osiin, joiden marginaaleja on säädetty visuaalista tasoitusta varten.
Pääinteraktiivisen sarakkeen otsikossa toisella osalla otsikosta on fonttikoko 17px, 125% riviväli, ei täytteitä, normaali fontin paino, enimmäisleveys 280px ja se on keskitetty. Näytöillä, joiden leveys on yli 46.25em, fonttikoko kasvaa 20px:ään ja enimmäisleveys 335px:ään. Nimet tässä osassa näytetään kursiivilla.
Ingressiosiossa ei ole täytteitä, ja sen kappaleet ovat valkoisia. Metatieto-osalla ei ole enimmäisleveyttä, ja sen sosiaaliset linkit ja painikkeet muuttuvat mustiksi hover-tilassa ilman alleviivauksia, niiden kuvakkeet muuttuen myös mustiksi. Kommentointitoiminto on piilotettu, ja tekijälinkeillä ei ole reunuksia.
Sovellusten renderöinnissä otsikon wrapperin korkeus on asetettu koko näkymän korkeudeksi. Videokansikortti on sijoitettu absoluuttisesti, peittäen koko alueen puoliläpinäkyvällä mustalla taustalla ja flex-asettelulla sisällön jakamiseksi. Esitysvideo on himmennetty 50% kirkkauteen. Kansisisältö on keskitetty kuvauksella, jolla on ylä- ja alamarginaalit ja enimmäisleveys 80% (tai 400px suuremmilla näytöillä). Teksti on tietyssä sans-serif-fontissa, isoilla kirjaimilla kirjainväleillä ja valkoisena, otsikoilla normaalipainoisina. Otsikko on keskitetty ja valkoinen.
Videon toiminnot sisältävät keskitetyn toistopainikkeen, jolla on pyöreä reunus, valkoinen teksti ja kuvake, joka muuttuu hover-tilassa tummaksi tekstiksi. Snap-videon wrapper on suhteellisesti sijoitettu.
Kun näytön leveys on vähintään 740 pikseliä, videowrapperilla ei ole sivumarginaaleja. Sen sisällä oleva videosäiliö häivyttyy tasaisesti sisään tai ulos puolessa sekunnissa. Sovellusnäkymissä sekä otsikko että videowrapper asetetaan täyttämään koko näytön korkeus, sopeutuen verkkonäkymiin ja iOS-näkymiin.
Sivunavigointipisteet pysyvät kiinteästi oikealla puolella, keskitetysti pystysuunnassa, järjestettynä sarakkeeseen pienten väleillä niiden välillä. Ne ilmestyvät tasaisesti ja ovat muun sisällön päällä. Suuremmilla näytöillä niiden sijainti säätyy pysyäkseen sisällön keskipisteen mukana. Jokainen piste on pieni, pyöristetty suorakulmio, joka vaihtaa väriä hover-tilassa tai aktiivisena.
Navigointinuolet ovat kiinteästi oikeassa alareunassa, mutta näkyvät vain suuremmilla näytöillä. Ne on tyylitelty pyöristetyiksi painikkeiksi sumennetulla tummalla taustalla ja muuttuvat ulkonäköä hover-tilassa. Niiden sijainti myös siirtyy näytön leveyden mukaan pysyäkseen keskitettyinä.
Interaktiiviset gallerioiden ja videon hallintapainikkeet vaalenevat hover-tilassa, ja niiden teksti ja kuvakkeet muuttuvat tummiksi.
Tekijänoikeustiedot:
Haastattelu ja kuvaus: David Levene
Multimedia-editori: Laurence Topham
Suunnittelu ja kehitys: Harry Fischer ja Pip Lev
Kuvatoimittaja: Matt Fidler
Valokuvauksen päällikkö: Fiona Shields
"Love+War" tulee saataville Disney+:ssa ja National Geographicissa 7. marraskuuta 2025 alkaen.
Sisältö Irakista 2003-2004:
Reflektio: "Olin niin nuori ja niin naiivi"
Kattaa Irakin ja Afganistanin.
Varoitus: Osa kuvista saattaa olla häiritseviä katsojille.
Kokonäyttökuvat:
1. Irakilainen nainen etsii miestään savusta, joka nousee palavasta kaasutehtaasta Basrassa, Irakissa, toukokuussa 2003. Kuva: Lynsey Addario.
2. Loukkaantuneet yhdysvaltalaiset sotilaat kuljetetaan bussilla Baladin sairaalasta evakuointilennolle Fallujan taistelun aikana, 13. marraskuuta 2004. Kuva: Lynsey Addario/Getty Images.
3. Yhdysvaltalaiset merijalkaväen sotilaat kantavat haavoittunutta sotilasta 173. taistelukomppaniasta Korengalin laaksossa, Afganistanissa, 23. lokakuuta 2007. Kuva: Lynsey Addario.
4. Noor Nisa, 18, synnytyksessä äitinsä kanssa Badakhshanin maakunnassa, Afganistanissa, marraskuussa 2009. Hänen miehensä ensimmäinen vaimo kuoli synnytyksessä. Vauvan piti tulla, joten hän päätti ajaa hänet sairaalaan, neljän tunnin ajomatkan päässä heidän kylästään. Kun lainaamansa auto hajosi, minä puutuin tilanteeseen ja vein heidät sinne, missä Noor synnytti tyttövauvan.
Yhdysvaltalaiset merijalkaväen naisyhteysryhmät näytetään HM2 korpraali Elena Woodsin, 24, kanssa puhdistamassa asettaan palattuaan etuvartioasemalta Camp Delhistä Helmandissa, Afganistanissa, 29. huhtikuuta 2010. Nämä ryhmät työskentelivät merijalkaväen jalkaväen kanssa yhteyden saamiseksi afgaaninaisiin.
Korporaali Lisa Gardner tarkistaa afgaaninaisten elintoiminnan Lakarin kylässä lääketieteellisen avunantotapahtuman aikana Helmandissa, Etelä-Afganistanissa, 3. toukokuuta 2010. Kulttuurinormien vuoksi monet naiset Helmandissa eivät voi lähteä kotoa tai nähdä mieslääkäreitä, joten Gardner kirjasi heidän oireensa ja välitti tiedot lääkärille perusdiagnoosia varten ennen lääkityksen antamista.
Tuhannet syyrialaiset ylittivät rajan Irakiin Sahelan rajanylityspaikalla Dahukissa, Pohjois-Irakissa, 21. elokuuta 2013. YK:n pakolaisjärjestö raportoi yli 30 000:n tulleen sisään sen jälkeen, kun raja avattiin uudelleen edellisviikolla, päivittäisten ylitysten ollessa kolmesta neljään tuhanteen. Suurin osa oli kurdipakolaisia, jotka pakenivat väkivaltaa, taloudellisia vaikeuksia ja perustarvikkeiden kuten sähkön, veden ja ruuan puutetta.
Darfurissa vuosina 2004-2009 hallitusta syytettiin omien kansalaistensa tappamisesta.
Tšadilaiset tytöt kestävät hiekkamyrskyn Bahaïssa, Tšadissa, noin seitsemän kilometrin päässä Sudanin rajasta, 18. elokuuta 2004. Monet pakolaiset pakenivat Sudanista Tšadiin, kun Darfurin konflikti jatkui.
Lynsey Addario valokuvasi Sudanin Vapautusarmeijan kapinallisia, jotka hallitsivat osia Darfurista, 19. elokuuta 2004.
SLA-sotilaat odottavat kuorma-autonsa vieressä, joka on juuttunut mutaan Darfurissa 21. elokuuta 2004. He boikotoivat rauhanneuvotteluja Nigeriassa protestoidakseen siviilien kimppuun kohdistuvia hyökkäyksiä, väittäen 75 kuolonuhria kuudessa kylässä. Siitä lähtien, kun konflikti alkoi helmikuussa 2003, jopa 50 000 oli kuollut, ja yli miljoona pakeni kodeistaan Janjaweed-milissien pelossa.
SLA-sotilaat ohittavat kuolleen ruumiin siviilien kimppuun kohdistetusta hyökkäyksestä Farawyaihissa, Darfurissa, 24. elokuuta 2004. Kuusitoista ruumista löydettiin rotkoista sen jälkeen, kun viiden kylän miehet väitetysti tapettiin hallituksen joukkojen tukemien Janjaweedien toimesta.
Afrikan unionin sotilaat löytävät Taman kylän yhä savuavan yli viikon hyökkäyksen jälkeen, jonka arabien paimentolaiset hallituksen joukkojen tukemina tekivät Nyalan pohjoispuolella marraskuussa 2005. AU yritti partioida ja tutkia, mutta selviytyjät olivat paenneet läheiseen kylään, jonka paimentolaiset olivat sulkeneet ja ampuivat lähestyviin ajoneuvoihin. Sadat Darfurin kylät poltettiin ja ryöstettiin arabien paimentolaisten toimesta.
Silean kylä, jonka Sudanin hallitus oli äskettäin pommittanut ja jota Janjaweedit hyökkäsivät kameleilla, hevosilla ja aaseilla Länsi-Darfurissa 28. helmikuuta 2008. Pommitukset olivat vastaus väijytykseen. Kaksi kuukautta aiemmin Oikeuden ja tasa-arvon liikkeen kapinalliset olivat ottaneet hallinnan, ja tiedustelutietojen mukaan he asuivat näissä kylissä ja käyttivät niitä tukikoht
