Αυτός ο κώδικας CSS ορίζει την οικογένεια γραμματοσειρών "Guardian Headline Full" με διάφορα στυλ και βάρη. Περιλαμβάνει εκδόσεις ελαφριά (300), κανονική (400), μέτρια (500) και ημι-έντονη (600), καθεμία σε κανονικό και πλάγιο στυλ. Τα αρχεία γραμματοσειρών παρέχονται σε μορφές WOFF2, WOFF και TrueType από τα web assets του Guardian.
Αυτός ο κώδικας CSS ορίζει πολλές οικογένειες γραμματοσειρών για τον ιστότοπο του Guardian, καθορίζοντας διαφορετικά βάρη και στυλ με τις αντίστοιχες μορφές αρχείων (WOFF2, WOFF, TTF). Περιλαμβάνει επίσης media queries για ανταποκρισιμό design, προσαρμόζοντας στυλ βάσει της κατάστασης δέσμης ενεργειών, των προτιμήσεων κίνησης χρήστη και του μεγέθους οθόνης. Επιπλέον, ορίζει μεταβλητές χρωμάτων, ιδιότητες διάταξης για διαδραστικά στοιχεία και συγκεκριμένα στυλ για στοιχεία όπως η κάρτα πιστώσεων και η προώθηση ταινιών, διασφαλίζοντας μια συνεπή εμφάνιση σε όλες τις συσκευές.
Η κάρτα πιστώσεων χρησιμοποιεί συγκεκριμένες γραμματοσειρές και μεγέθη για τα στοιχεία κειμένου της. Οι σύνδεσμοι και οι παράγραφοι μέσα στην κάρτα πιστώσεων εμφανίζονται ως inline-block με serif γραμματοσειρά 24px, έντονο βάρος και ύψος γραμμής 115%, με κάτω περιθώριο 20px και μέγιστο πλάτος που ταιριάζει στο περιεχόμενό τους. Οι παράγραφοι ορίζονται σε πεζά με κανονικό κενό μεταξύ γραμμάτων.
Ένας τίτλος μέσα στην κάρτα πιστώσεων τοποθετείται απόλυτα στο κέντρο, χρησιμοποιώντας sans-serif γραμματοσειρά 14px, κεφαλαία γράμματα με 2px κενό μεταξύ γραμμάτων. Άλλες παράγραφοι στην κάρτα χρησιμοποιούν επίσης την ίδια sans-serif γραμματοσειρά και μέγεθος, με ορισμένες να έχουν κεφαλαία στυλ και κενό μεταξύ γραμμάτων.
Οι σύνδεσμοι στην κάρτα πιστώσεων μοιράζονται τις ιδιότητες serif γραμματοσειράς, μεγέθους, βάρους, ύψους γραμμής, περιθωρίου και μέγιστου πλάτους, και έχουν λευκό χρώμα χωρίς υπογράμμιση όταν το ποντίκι περνά από πάνω. Ο τελευταίος σύνδεσμος δεν έχει κάτω περιθώριο. Το περιέκτη της κάρτας τοποθετείται απόλυτα, στο κέντρο και χρησιμοποιεί flexbox για ευθυγράμμιση των στοιχείων κάθετα.
Ένα iframe στην κάρτα πιστώσεων έχει πλάτος 85% του viewport, λόγο διαστάσεων 16:9, μέγιστο πλάτος 680px και κάτω περιθώριο 12px.
Ο περιέκτης του διαδραστικού gallery έχει ένα ελάχιστο και σταθερό ύψος ίσο με το ύψος του viewport, σκούρο φόντο, κεντραρισμένη στοίχιση και αρνητικά περιθώρια που προσαρμόζονται σε μεγαλύτερα μεγέθη οθόνης. Όταν περιέχει ένα σταθερό στοιχείο, η στοίχιση επαναφέρεται.
Το ίδιο το διαδραστικό gallery έχει πλάτος βάσει του viewport, ένα μέγιστο πλάτος που αλλάζει με το μέγεθος οθόνης, κεντραρισμένη τοποθέτηση, λευκό κείμενο, εμφάνιση flex, μέγιστο ύψος 60% του viewport, κρυφή υπερχείλιση, περίγραμμα και στρογγυλεμένες γωνίες. Περιλαμβάνει μια διαβάθμιση στο κάτω μέρος και απενεργοποιεί τα pointer events για τους συνδέσμους. Οι εικόνες και οι λεζάντες βελτιστοποιούνται για απόδοση.
Ο εσωτερικός περιέκτης του gallery έχει σχετική θέση και προσαρμόζει το πλάτος του. Όταν είναι σταθερός, καλύπτει ολόκληρο το viewport με μαύρο φόντο, σταθερή τοποθέτηση, ενεργοποιημένη κύλιση και χωρίς περιγράμματα ή στρογγυλεμένες γωνίες. Τα στοιχεία κειμένου εντός της σταθερής λειτουργίας έχουν συγκεκριμένες ρυθμίσεις padding, μέγιστου πλάτους και χρώματος, και οι εικόνες κλιμακώνονται σε πλήρες μέγεθος με προσαρμοσμένα περιθώρια και διαφάνεια. Οι εικόνες στη σταθερή λειτουργία έχουν μέγιστο πλάτος 980px και είναι κεντραρισμένες.
Αυτός ο κώδικας CSS ορίζει στυλ για ένα διαδραστικό gallery. Διασφαλίζει ότι οι εικόνες και τα βίντεο εμφανίζονται σωστά με ανταποκρισιμό design, προσαρμόζοντας σε διαφορετικά μεγέθη οθόνης. Τα στοιχεία κειμένου όπως τίτλοι και λεζάντες έχουν συγκεκριμένες γραμματοσειρές, μεγέθη και χρώματα για συνοχή. Το gallery περιλαμβάνει διαδραστικά χαρακτηριστικά όπως κουμπιά για άνοιγμα και κλείσιμο επικαλύψεων, με εφέ hover για καλύτερη εμπειρία χρήστη. Τα βίντεο ρυθμίζονται να καλύπτουν πλήρως τους περιέκτες τους και οι λεζάντες στυλιάζονται για να είναι ξεκάθαρες και ευανάγνωστες. Η διάταξη βελτιστοποιείται τόσο για κινητές όσο και για επιτραπέζιες όψεις, διατηρώντας μια καθαρή και ελκυστική παρουσίαση.
Ο κώδικας CSS ορίζει στυλ για μια πλήρους οθόνης διαδραστική κεφαλίδα με βίντεο φόντο και επικάλυψη κειμένου. Τοποθετεί στοιχεία για κάλυψη ολόκληρου του viewport, αποκρύπτει ορισμένα στοιχεία και προσαρμόζει περιθώρια και padding για διαφορετικά μεγέθη οθόνης. Το κείμενο της κεφαλίδας είναι κεντραρισμένο στο κάτω μέρος με ημιδιαφανές φόντο, χρησιμοποιώντας συγκεκριμένες γραμματοσειρές και μεγέθη που αλλάζουν σε μεγαλύτερες οθόνες. Ο τίτλος περιλαμβάνει μια ετικέτα "Συνέντευξη" και χωρίζεται σε μέρη με προσαρμοσμένα περιθώρια για οπτική ευθυγράμμιση.
Για την κεφαλίδα της κύριας διαδραστικής στήλης, το δεύτερο μέρος του τίτλου έχει μέγεθος γραμματοσειράς 17px, ύψος γραμμής 125%, χωρίς padding, κανονικό βάρος γραμματοσειράς, μέγιστο πλάτος 280px και είναι κεντραρισμένο. Σε οθόνες πλατύτερες από 46.25em, το μέγεθος γραμματοσειράς αυξάνεται σε 20px και το μέγιστο πλάτος σε 335px. Τα ονόματα εντός αυτού του μέρους εμφανίζονται με πλάγια γράμματα.
Η ενότητα standfirst δεν έχει padding και οι παράγραφοί της είναι λευκές. Η ενότητα meta δεν έχει μέγιστο πλάτος και οι κοινωνικοί σύνδεσμοί της και τα κουμπιά γίνονται μαύρα στο hover χωρίς υπογραμμίσεις, με τα εικονίδιά τους να αλλάζουν επίσης σε μαύρα. Η λειτουργία σχολιασμού είναι κρυφή και οι σύνδεσμοι byline δεν έχουν περιγράμματα.
Στην απόδοση εφαρμογής, το ύψος του περιέκτη της κεφαλίδας ορίζεται στο πλήρες ύψος του viewport. Η κάρτα βίντεο τοποθετείται απόλυτα, καλύπτοντας ολόκληρη την περιοχή με ημιδιαφανές μαύρο φόντο και διάταξη flex για κατανομή περιεχομένου. Το βίντεο poster αποχρωματίζεται σε φωτεινότητα 50%. Το περιεχόμενο του cover είναι κεντραρισμένο με μια περιγραφή που έχει άνω και κάτω περιθώρια και μέγιστο πλάτος 80% (ή 400px σε πλατύτερες οθόνες). Το κείμενο είναι σε συγκεκριμένη sans-serif γραμματοσειρά, κεφαλαία με κενό μεταξύ γραμμάτων και λευκό, με τίτλους σε κανονικό βάρος. Ο τίτλος είναι κεντραρισμένος και λευκός.
Οι έλεγχοι βίντεο περιλαμβάνουν ένα κεντραρισμένο κουμπί play με κυκλικό περίγραμμα, λευκό κείμενο και εικονίδιο, που αλλάζει σε σκούρο κείμενο στο hover. Ο περιέκτης snap video έχει σχετική θέση.
Όταν η οθόνη είναι τουλάχιστον 740 pixels πλάτος, ο περιέκτης βίντεο δεν θα έχει πλαϊνά περιθώρια. Ο περιέκτης βίντεο μέσα εμφανίζεται ή εξαφανίζεται ομαλά σε μισό δευτερόλεπτο. Για εμφανίσεις εφαρμογών, τόσο η κεφαλίδα όσο και ο περιέκτης βίντεο ρυθμίζονται να γεμίζουν το πλήρες ύψος οθόνης, προσαρμόζοντας σε προβολές web και iOS.
Ένα σύνολο κουκκίδων για πλοήγηση σελίδων παραμένει σταθερό στη δεξιά πλευρά, κεντραρισμένο κάθετα, διατεταγμένο σε στήλη με μικρά κενά μεταξύ τους. Εμφανίζονται ομαλά και βρίσκονται πάνω από άλλο περιεχόμενο. Σε πλατύτερες οθόνες, η θέση τους προσαρμόζεται για να παραμείνει ευθυγραμμισμένη με το κέντρο του περιεχομένου. Κάθε κουκκίδα είναι ένα μικρό, στρογγυλεμένο ορθογώνιο που αλλάζει χρώμα όταν το ποντίκι περνά από πάνω ή είναι ενεργό.
Τα βέλη πλοήγησης είναι σταθερά κάτω δεξιά αλλά εμφανίζονται μόνο σε μεγαλύτερες οθόνες. Είναι στυλισμένα ως στρογγυλεμένα κουμπιά με θολωμένο σκούρο φόντο και αλλάζουν εμφάνιση στο hover. Η θέση τους αλλάζει επίσης με το πλάτος οθόνης για να παραμείνουν κεντραρισμένα.
Τα διαδραστικά κουμπιά για galleries και ελέγχους βίντεο ανοίγουν στο χρώμα όταν το ποντίκι περνά από πάνω και το κείμενό τους και τα εικονίδια γίνονται σκούρα.
Πιστώσεις:
Συνέντευξη και κινηματογράφηση: David Levene
Πολυμεσικός επιμελητής: Laurence Topham
Σχεδιασμός και ανάπτυξη: Harry Fischer και Pip Lev
Επιμελητής εικόνας: Matt Fidler
Επικεφαλής φωτογραφίας: Fiona Shields
Το "Love+War" θα είναι διαθέσιμο στο Disney+ και στο National Geographic από 7 Νοεμβρίου 2025.
Περιεχόμενο από το Ιράκ 2003-2004:
Σκέψη: "Ήμουν τόσο νέα και τόσο αφελής"
Η κάλυψη περιλαμβάνει Ιράκ και Αφγανιστάν.
Προειδοποίηση: Ορισμένες εικόνες μπορεί να είναι ανησυχητικές για τους θεατές.
Εικόνες πλήρους οθόνης:
1. Μια Ιρακινή γυναίκα αναζητά τον σύζυγό της μέσα στον καπνό από ένα εργοστάσιο αερίου που καίγεται στο Basra, Ιράκ, Μάιος 2003. Φωτογραφία: Lynsey Addario.
2. Τραυματισμένοι Αμερικανοί στρατιώτες μεταφέρονται με λεωφορείο από το νοσοκομείο Balad σε πτήση εκκένωσης κατά τη διάρκεια της Μάχης του Fallujah, 13 Νοεμβρίου 2004. Φωτογραφία: Lynsey Addario/Getty Images.
3. Αμερικανοί πεζοναύτες μεταφέρουν έναν τραυματισμένο στρατιώτη από την 173rd Battle Company στην Κοιλάδα Korengal, Αφγανιστάν, 23 Οκτωβρίου 2007. Φωτογραφία: Lynsey Addario.
4. Η Noor Nisa, 18 ετών, σε τοκετό με τη μητέρα της στην επαρχία Badakhshan, Αφγανιστάν, Νοέμβριος 2009. Η πρώτη γυναίκα του συζύγου της πέθανε κατά τον τοκετό. Το μωρό ήταν έτοιμο να γεννηθεί, οπότε αποφάσισε να την οδηγήσει στο νοσοκομείο, τέσσερις ώρες μακριά από το χωριό τους. Όταν το αυτοκίνητο που δάνεισε απέτυχε, παρενέβηκα και τους οδήγησα εκεί, όπου η Noor γέννησε ένα κοριτσάκι.
Αμερικανοί πεζοναύτες σε ομάδες αλληλεπίδρασης με γυναίκες εμφανίζονται με την HM2 corpsman Elena Woods, 24 ετών, να καθαρίζει το όπλο της μετά την επιστροφή από μια μπροστινή βάση operations στο Camp Delhi στο Helmand, Αφγανιστάν, στις 29 Απριλίου 2010. Αυτές οι ομάδες συνεργάζονταν με πεζοναύτες για να συνδεθούν με Αφγανές γυναίκες.
Η Δεκανέας Lisa Gardner ελέγχει τα ζωτικά σημε
