Αυτός ο κώδικας CSS ορίζει μια προσαρμοσμένη οικογένεια γραμματοσειρών με την ονομασία "Guardian Headline Full" με πολλαπλά βάρη και στυλ γραμματοσειράς. Καθορίζει τα αρχεία γραμματοσειρών σε διαφορετικές μορφές (WOFF2, WOFF και TrueType) και τις αντίστοιχες URLs τους για να φορτώσει το πρόγραμμα περιήγησης. Τα βάρη γραμματοσειράς κυμαίνονται από ελαφρύ (300) έως ημι-έντονο (600), καθένα με κανονικά και πλάγια στυλ.
Αυτός ο κώδικας CSS ορίζει πολλές οικογένειες και στυλ γραμματοσειρών για τον ιστότοπο του Guardian. Καθορίζει τις πηγές για διαφορετικά αρχεία γραμματοσειρών σε μορφές WOFF2, WOFF και TrueType, μαζί με τα βάρη και τα στυλ τους. Για παράδειγμα, η γραμματοσειρά Guardian Headline Full περιλαμβάνει τις παραλλαγές έντονη, έντονη πλάγια, μαύρη και μαύρη πλάγια, ενώ η Guardian Titlepiece χρησιμοποιεί ένα έντονο στυλ.
Ο κώδικας περιλαμβάνει επίσης media queries που ελέγχουν την αδιαφάνεια του κύριου περιεχομένου, κάνοντάς το να εμφανίζεται με εξασθένιση όταν η δέσμη ενεργειών είναι ενεργοποιημένη και όταν δεν προτιμάται η μειωμένη κίνηση. Επιπλέον, ορίζει διάφορες προσαρμοσμένες ιδιότητες CSS (μεταβλητές) για χρώματα και στυλ που χρησιμοποιούνται σε όλο τον ιστότοπο, όπως επικαλύψεις εξασθένισης, λεζάντες και χρώματα κειμένου.
Για στοιχεία άρθρων, ορίζει στυλ για τίτλους, καθορίζοντας οικογένεια γραμματοσειράς, βάρος, μέγεθος και ύψος γραμμής, με προσαρμογές για μεγαλύτερες οθόνες. Μερικά στοιχεία, όπως συγκεκριμένα spans στον τίτλο, αποκρύπτονται από την εμφάνιση.
Για τίτλους άρθρων, ο σύνδεσμος ή το όνομα της σειράς εμφανίζεται ενσωματωμένα με ένα συγκεκριμένο χρώμα, χρησιμοποιώντας τη γραμματοσειρά Guardian Headline σε μέγεθος 20px και έντονο βάρος, με προσαρμοσμένη υπογράμμιση και ύψος γραμμής 115%. Το πέρασμα του δείκτη πάνω από τον τίτλο τον υπογραμμίζει.
Τα ονόματα των συνομιλητών στυλιζάρονται με μια ελαφριά, πλάγια, γραμματοσειρά 28px με το ίδιο ύψος γραμμής.
Η περίληψη του άρθρου και οι σύνδεσμοί της χρησιμοποιούν ένα μεσαίο χρώμα, γραμματοσειρά 17px σε βάρος 500, αυξανόμενη σε 20px σε πλατύτερες οθόνες. Οι σύνδεσμοι στην περίληψη λαμβάνουν ένα κάτω περίγραμμα στο πέρασμα του δείκτη.
Οι λεζάντες και οι σύνδεσμοι μεταγραφής βίντεο είναι σε μια μικρότερη, sans-serif γραμματοσειρά στα 12px με ύψος γραμμής 130%.
Οι σύνδεσμοι byline χρησιμοποιούν τη γραμματοσειρά Guardian Headline στα 17px και έντονα, ενώ τα κουμπιά byline έχουν μια sans-serif γραμματοσειρά μεσαίου βάρους. Η ημερομηνία δημοσίευσης χρησιμοποιεί ένα χρώμα λεζάντας.
Τα scrolly quotes διαθέτουν έναν ελαφρύ χρωματισμό, γραμματοσειρά τίτλου 32px (που αυξάνεται σε 42px σε μεγάλες οθόνες) με ειδικό στυλ αριθμών και οι λεζάντες τους είναι σε sans-serif 14px. Σε μεσαίες οθόνες, αυτά υιοθετούν τα χρώματα κειμένου media.
Το πρώτο γράμμα του κύριου περιεχομένου είναι ένα μεγάλο, χρωματισμένο drop cap που χρησιμοποιεί τη γραμματοσειρά τίτλου.
Οι τομείς media έχουν ένα φόντο πλήρους ύψους θύρας προβολής, εκτείνονται ελαφρώς πέρα από το κοντέινερ με αρνητικά περιθώρια και χρησιμοποιούν διάταξη πλέγματος. Σε κινητά, ο τίτλος τοποθετείται στην περιοχή επίπλωσης, ενώ σε επιτραπέζιους υπολογιστές, μετατοπίζεται σε ένα πλέγμα δύο στηλών με το κοντέινερ media να καταλαμβάνει τον περισσότερο χώρο.
Για πλατύτερες οθόνες, ο τομέας media έχει σταθερό πλάτος και προσθέτει χρωματισμένες πλαϊνές μπάρες με περιγράμματα για να γεμίσει την θύρα προβολής, δημιουργώντας μια εμφάνιση πλαισίου.
Το στοιχείο media έχει ένα συμπαγές περίγραμμα και τοποθετείται στα δεξιά, με το πλάτος του να υπολογίζεται με βάση την θύρα προβολής και το πλάτος του σώματος. Για μεγαλύτερες οθόνες, το πλάτος του σώματος προσαρμόζεται σε συγκεκριμένα σημεία διακοπής: 978px για 61.25em, 1138px για 71.25em και 1298px για 81.25em.
Η διάταξη πλέγματος περιεχομένου του άρθρου αλλάζει με το μέγεθος της οθόνης. Σε μικρότερες οθόνες, στοιβάζει τα media, meta, standfirst και σώμα κάθετα. Σε μεσαίες οθόνες (61.25em και πάνω), χρησιμοποιεί διάταξη δύο στηλών με τα media να εκτείνονται και στις δύο στήλες και άλλα στοιχεία να ταξινομούνται ανάλογα. Για μεγαλύτερες οθόνες (71.25em και 81.25em), προσθέτει περισσότερες στήλες και βελτιώνει τις περιοχές του πλέγματος για καλύτερη οργάνωση.
Το standfirst έχει ένα πάνω περιθώριο και οι γραμμές κρύβονται. Οι λεζάντες για κεφαλίδες και βίντεο περιλαμβάνουν εικονίδια με συγκεκριμένο στυλ και απόσταση. Το κουμπί "Ακούστε το Άρθρο" έχει κάθετα περιθώρια.
Η κεφαλίδα τοποθετείται σχετικά με υψηλό z-index. Στο iOS, ορισμένα ψευδο-στοιχεία σε κεφαλίδες media κρύβονται. Όταν η δέσμη ενεργειών είναι απενεργοποιημένη, η διάταξη προσαρμόζεται σε μια απλούστερη, στοιβαγμένη δομή σε διαφορετικά μεγέθη οθονών.
Μια κλάση screen-reader-only κρύβει το περιεχόμενο οπτικά αλλά το διατηρεί προσβάσιμο σε τεχνολογίες υποβοήθησης.
Για διαδραστικό περιεχόμενο στην κύρια στήλη, τα σχήματα υποστήριξης ορίζονται σε πλάτος 75% και δεν καθαρίζουν προηγούμενα στοιχεία.
Σε μεσαίες οθόνες (46.25em και πλατύτερες), αυτά τα σχήματα παραμένουν σε πλάτος 75%, τοποθετημένα στατικά χωρίς πλευρισμό και έχουν κανονικό ύψος γραμμής χωρίς πάνω περιθώριο.
Για μεγαλύτερες οθόνες (71.25em και πάνω), τα σχήματα δεν έχουν αριστερό περιθώριο και οι λεζάντες τους τοποθετούνται στατικά χωρίς σταθερό πλάτος.
Σε εξαιρετικά μεγάλες οθόνες (81.25em και πάνω), τα σχήματα διατηρούν το πλάτος τους 75% χωρίς αριστερό περιθώριο και οι λεζάντες δεν έχουν περιορισμό μέγιστου πλάτους.
Σε μεσαίες έως μεγάλες οθόνες (46.25em έως 61.24em), τα στοιχεία immersion στην κύρια στήλη έχουν αρνητικό δεξί περιθώριο 20px.
Για στατικές και βιντεοκεφαλίδες, οι εναποθέτες τίτλων και οι τομείς συνομιλητών έχουν πλαϊνό padding 10px σε μικρές οθόνες, αυξανόμενο σε 20px σε οθόνες 30em και πλατύτερες.
Το κοντέινερ media σε αυτές τις κεφαλίδες καταλαμβάνει το πλήρες πλάτος και ύψος της περιοχής πλέγματός του. Σε οθόνες 61.25em και μεγαλύτερες, διατηρεί λόγο διαστάσεων 4:5.
Οι εναποθέτες εικόνας μέσα στο κοντέινερ media κολλούν στην κορυφή και γεμίζουν τον διαθέσιμο χώρο με κρυφή υπερχείλιση. Σε μεγαλύτερες οθόνες (61.25em+), αλλάζουν σε σχετική τοποθέτηση.
Όλες οι εικόνες και οι εικόνες μέσα σε αυτούς τους εναποθέτες καλύπτουν πλήρως τα κοντέινερ τους χωρίς να διαστρεβλώνουν τον λόγο διαστάσεων.
Πρόσθετα στοιχεία όπως spans και σύνδεσμοι που ακολουθούν εικόνες κρύβονται.
Ένα δευτερεύον στρώμα εικόνας (img-2) τοποθετείται απόλυτα στην επάνω αριστερή γωνία.
Οι εναποθέτες επίπλωσης κινητού κολλούν στο κάτω μέρος και έχουν μια ευέλικτη διάταξη στήλης με χρώμα φόντου. Σε μεγαλύτερες οθόνες (61.25em+), γίνονται μέρος της κανονικής ροής περιεχομένου.
Μέσα σε αυτούς τους εναποθέτες, οι τίτλοι εμφανίζονται δεύτεροι και οι πληροφορίες συνομιλητών τρίτες στη σειρά.
Σε μικρότερες οθόνες (έως 61.24em), μια επικάλυψη διαβάθμισης δημιουργεί ένα εφέ εξασθένισης πάνω από την επίπλωση κινητού.
Οι εναποθέτες τίτλων σε στατικές και βιντεοκεφαλίδες τοποθετούνται στο κάτω μέρος με padding, χρώμα φόντου και z-index 2. Χρησιμοποιούν διάταξη πλέγματος για τίτλους.
Τόσο οι πρωτεύοντες όσο και οι δευτερεύοντες τίτλοι καταλαμβάνουν την ίδια περιοχή πλέγματος μέσα στον εναποθέτη.
Για οθόνες πλατύτερες από 61.25em, προσαρμόστε τον εναποθέτη τίτλων σε στατικές και βιντεοκεφαλίδες αφαιρώντας το πάνω περιθώριο, ορίζοντας ένα μέγιστο πλάτος 540px και προσθέτοντας ένα πάνω περίγραμμα.
Σε μικρότερες οθόνες έως 61.24em, ευθυγραμμίστε τον πρώτο τίτλο στην αρχή. Ο δεύτερος τίτλος πρέπει να έχει μέγιστο πλάτος 620px, με το πρώτο γράμμα του κεφαλαιοποιημένο. Σε οθόνες πλάτους τουλάχιστον 30em, μετατοπίστε τον 20px προς τα αριστερά και σε εκείνες 61.25em ή πλατύτερες, τοποθετήστε τον 4px από την κορυφή.
Όταν προτιμάται η μειωμένη κίνηση, εμφανίστε τον εναποθέτη τίτλων ως block και αφαιρέστε τα πάνω περιθώρια για τίτλους σε οθόνες έως 46.24em πλάτους. Επίσης, προσθέστε 10px padding στην κορυφή του δεύτερου τίτλου.
Ο τομέας συνομιλητών θα πρέπει να τοποθετηθεί στην περιοχή πλέγματος 'interviewee' με κάτω padding 20px. Τα στοιχεία ελέγχου βίντεο είναι σταθερά στο κάτω μέρος.
Σε οθόνες έως 46.24em πλάτους, ορίστε το ύψος κεφαλίδας στο 100%. Για συσκευές iOS, προσαρμόστε τις σειρές πλέγματος και το padding συνομιλητών για να ληφθεί υπόψη η κάτω γραμμή εργαλείων. Στο Android, τροποποιήστε τις σειρές πλέγματος και το padding για την επάνω γραμμή.
Σε οριζόντια προσανατολισμό σε οθόνες έως 700px πλάτους, κάντε το ύψος κεφαλίδας να ταιριάζει με το περιεχόμενό της και προσαρμόστε το κοντέινερ media και τον εναποθέτη ανάλογα.
Για εφαρμογές, κρύψτε τις ετικέτες σε εναποθέτες εικόνας.
Τα κοντέινερ βίντεο πρέπει να γεμίζουν το χώρο τους με βίντεο που καλύπτουν την περιοχή και εμφανίζονται με εξασθένιση όταν είναι ενεργά. Τα στοιχεία ελέγχου τοποθετούνται κάτω δεξιά με κυκλικά κουμπιά.
Για στοιχεία media σε πλατύτερες οθόνες, ορίστε τον λόγο διαστάσεων του κοντέινερ βίντεο σε 4/5.
Τα scrolly quotes καταλαμβάνουν το πλήρες ύψος θύρας προβολής με ένα κοντέινερ media που κολλάει και κρατάει απόλυτα τοποθετημένα αντικείμενα.
Η εικόνα στην ενότητα scrolly-quote ορίζεται να καλύπτει πλήρως το κοντέινερ της, διατηρώντας τον λόγο διαστάσεων. Το κοντέινερ παράθεσης τοποθετείται να κολλάει στην κορυφή της θύρας προβολής και εκτείνεται σε πλήρες πλάτος
