Αυτό το κείμενο ορίζει μια προσαρμοσμένη οικογένεια γραμματοσειρών με την ονομασία "Guardian Headline Full" με πολλαπλά βάρη και στυλ γραμματοσειράς. Καθορίζει τα αρχεία γραμματοσειρών σε διαφορετικές μορφές (WOFF2, WOFF και TrueType) και τις διαδικτυακές τους τοποθεσίες για να φορτώσει το πρόγραμμα περιήγησης όταν χρειαστεί. Οι ορισμοί περιλαμβάνουν ελαφριά, κανονικά, μεσαία και ημι-έντονα βάρη, καθένα με κανονικά και πλάγια στυλ.
Αυτός ο κώδικας CSS ορίζει πολλές οικογένειες γραμματοσειρών για τις γραμματοσειρές Guardian Headline και Guardian Titlepiece, καθορίζοντας τις πηγές τους σε διαφορετικές μορφές (WOFF2, WOFF και TrueType) μαζί με τα βάρη και τα στυλ γραμματοσειράς τους. Περιλαμβάνει επίσης κανόνες ανταποκρινόμενου σχεδιασμού για την κύρια στήλη περιεχομένου σε διαδραστικές διατάξεις, προσαρμόζοντας τα περιθώρια, τα πλάτη και τη θέση βάσει του μεγέθους της οθόνης. Για παράδειγμα, σε ευρύτερες οθόνες, προσθέτει αριστερό περιθώριο και περίγραμμα, ενώ σε μικρότερες οθόνες, προσαρμόζει τα πλάτη και τις θέσεις των στοιχείων για να ταιριάζουν στην οθόνη. Τα στυλ διασφαλίζουν ότι στοιχεία όπως παράγραφοι, λίστες και εμβαπτιστικό περιεχόμενο προσαρμόζονται κατάλληλα σε όλες τις συσκευές.
Για την κύρια στήλη διαδραστικού περιεχομένου, προστίθεται ένα αριστερό περίγραμμα πριν από το στοιχείο, τοποθετημένο 11 pixels αριστερά. Μέσα σε αυτή τη στήλη, τα άτομα δεν έχουν περιθώριο πάνω ή κάτω αλλά padding 12 pixels και στα δύο άκρα. Όταν μια παράγραφος ακολουθεί ένα άτομο, το padding αφαιρείται και εφαρμόζονται περιθώρια 12 pixels αντίθετα. Τα εν σειρά στοιχεία περιορίζονται σε μέγιστο πλάτος 620 pixels, και για οθόνες ευρύτερες από 61.25em, οι εν σειρά εικόνες με συγκεκριμένο ρόλο τηρούν επίσης αυτό το όριο πλάτους.
Ορίζονται μεταβλητές χρώματος για διάφορα στοιχεία, όπως η ημερομηνία, το περίγραμμα κεφαλίδας, το κείμενο λεζάντας και το φόντο, με ένα χρώμα χαρακτηριστικού ρυθμισμένο σε κόκκινο και ένα νέο χρώμα πυλώνα που προεπιλέγει στο χρώμα χαρακτηριστικού. Τα άτομα στην κύρια στήλη ή αλλού δεν έχουν padding.
Για την πρώτη παράγραφο που ακολουθεί συγκεκριμένα στοιχεία όπως άτομα, πύλες σύνδεσης ή οριζόντιες γραμμές σε διαφορετικές περιοχές περιεχομένου (σώμα άρθρου, διαδραστικό περιεχόμενο, σχόλια, χαρακτηριστικά), προστίθεται επάνω padding 14 pixels. Επιπλέον, το πρώτο γράμμα αυτών των παραγράφων στυλιστικά με συγκεκριμένη οικογένεια γραμματοσειράς, έντονο βάρος, μεγάλο μέγεθος γραμματοσειράς, κεφαλαία γράμματα, επιπλέοντας αριστερά και χρωματισμένο χρησιμοποιώντας μια μεταβλητή για drop caps ή το νέο χρώμα πυλώνα.
Εάν μια παράγραφος έρχεται μετά από μια οριζόντια γραμμή σε αυτές τις περιοχές περιεχομένου, το επάνω padding ρυθμίζεται στο μηδέν.
Οι πλαϊνές παραθέσεις εντός συγκεκριμένων περιοχών περιεχομένου δεν πρέπει να υπερβαίνουν τα 620 pixels σε πλάτος.
Για στοιχεία επίδειξης σε κύρια άρθρα, χαρακτηριστικά, τυπικά άρθρα και σχόλια, οι λεζάντες πρέπει να παραμένουν στην κανονική τους θέση, να εκτείνονται σε πλήρες πλάτος και να περιορίζονται σε 620 pixels.
Τα εμβαπτιστικά στοιχεία πρέπει να εκτείνονται σε πλήρες πλάτος θέασης, λαμβάνοντας υπόψη τις μπάρες κύλισης. Σε οθόνες μικρότερες από 71.24em, αυτά τα στοιχεία περιορίζονται σε 978 pixels πλάτος με 10px πλευρικό padding για λεζάντες. Μεταξύ 30em και 71.24em, το padding λεζάντας αυξάνεται σε 20px.
Μεταξύ 46.25em και 61.24em, τα εμβαπτιστικά στοιχεία φτάνουν μέγιστα στα 738 pixels. Κάτω από 46.24em, ευθυγραμμίζονται στην αριστερή άκρη χωρίς δεξί περιθώριο και 10px αριστερή εσοχή, αυξάνοντας σε 20px μεταξύ 30em και 46.24em, όπου οι λεζάντες λαμβάνουν επίσης 20px padding.
Για μεγαλύτερες οθόνες (61.25em και πάνω), ο furniture-wrapper χρησιμοποιεί διάταξη πλέγματος με καθορισμένες στήλες και σειρές. Οι τίτλοι λαμβάνουν ένα επάνω περίγραμμα, οι πληροφορίες μετα-δεδομένων τοποθετούνται σχετικά με επάνω padding, και το standfirst κείμενο έχει συγκεκριμένο στυλ: στοιχεία λίστας σε μέγεθος γραμματοσειράς 20px, σύνδεσμοι υπογραμμισμένοι χωρίς περιγράμματα ή φόντα, αλλάζοντας χρώμα στο hover, και πρώτες παράγραφοι με επάνω περιγράμματα εκτός από πολύ μεγάλες οθόνες (71.25em+).
Οι εικόνες εντός του wrapper δεν έχουν κάτω περιθώριο και έχουν 10px αριστερή εσοχή, με εν σειρά στοιχεία περιορισμένα σε 630 pixels. Στις μεγαλύτερες οθόνες, το πλέγμα προσαρμόζει τη δομή των στηλών του.
Η διάταξη χρησιμοποιεί ένα πλέγμα με συγκεκριμένες στήλες και σειρές για διαφορετικά μεγέθη οθονών. Για μικρότερες οθόνες, το πλέγμα έχει τρεις στήλες και σειρές με σταθερά και αυτόματα ύψη, ενώ οι μεγαλύτερες οθόνες προσαρμόζουν τα ύψη των σειρών αναλογικά.
Στοιχεία όπως η ενότητα μετα-δεδομένων έχουν μια επάνω γραμμή περιγράμματος, και η ενότητα standfirst διαθέτει μια κάθετη γραμμή στα αριστερά. Οι τίτλοι στυλιστικά με μέγιστο πλάτος και μέγεθος γραμματοσειράς που αυξάνεται σε μεγαλύτερες οθόνες, και κάποια στοιχεία κρύβονται ή προσαρμόζονται σε περιθώριο και padding βάσει της οθόνης.
Η κύρια περιοχή μέσων τοποθετείται εντός του πλέγματος και εκτείνεται σε πλήρες πλάτος σε κινητές συσκευές, με λεζάντες στυλιστικά να εμφανίζονται στο κάτω μέρος με χρώμα φόντου. Κοινωνικά και σχολιασμού στοιχεία στην ενότητα μετα-δεδομένων έχουν περιγράμματα που ταιριάζουν με το χρώμα της κεφαλίδας, και ορισμένα στοιχεία δεν εμφανίζονται.
Ο furniture-wrapper ορίζει ένα σκούρο φόντο και προσαρμόζει τα περιθώρια και το padding για διαφορετικά μεγέθη οθονών. Σε μεγαλύτερες οθόνες, προσθέτει πλαϊνές μπάρες με αντίστοιχα φόντα και περιγράμματα.
Οι τίτλοι χρησιμοποιούν έντονο, ανοιχτό γκρι κείμενο, ενώ οι τίτλοι άρθρων και τα κοινωνικά κουμπιά υιοθετούν ένα προσαρμοσμένο χρώμα (όπως ένα χρώμα χαρακτηριστικού σκοτεινής λειτουργίας). Τα κοινωνικά κουμπιά έχουν περίγραμμα και αλλάζουν χρώμα στο hover, με το φόντο και τα χρώματα εικονιδίων να ανταλλάσσονται.
Οι λεζάντες στυλιστικά με συγκεκριμένα χρώματα και έλεγχο ορατότητας, συμπεριλαμβανομένου ενός κουμπιού εναλλαγής που εμφανίζεται ως ένας μικρός κύκλος κάτω δεξιά. Τα media queries προσαρμόζουν το padding και τη θέση των στοιχείων για ταμπλέτες και επιτραπέζιους, διασφαλίζοντας κατάλληλη απόσταση και ευθυγράμμιση σε όλες τις συσκευές.
Αυτός ο κώδικας CSS στυλιστικά στοιχεία εντός μιας κλάσης furniture-wrapper, ρυθμίζοντας χρώματα, περιγράμματα και διάταξη για διαφορετικά μεγέθη οθονών. Ορίζει χρώματα συνδέσμων και εφέ hover χρησιμοποιώντας μεταβλητές CSS για τις ενότητες μετα-δεδομένων και standfirst, με διακοσμήσεις κειμένου και offsets. Τα media queries προσαρμόζουν τη διάταξη για διάφορα πλάτη θέασης, δημιουργώντας πλαϊνές μπάρες με περιγράμματα και χρώματα φόντου που κλιμακώνονται αναλόγως. Κοινωνικά και σχολιασμού στοιχεία στην ενότητα μετα-δεδομένων στυλιστικά επίσης, με τα strokes SVG να ταιριάζουν με το χρώμα περιγράμματος της κεφαλίδας.
Η ενότητα σχολίων έχει ένα χρώμα περιγράμματος που ταιριάζει με το χρώμα περιγράμματος της κεφαλίδας.
Για τίτλους άρθρων (h2) στο κύριο σώμα ή διαδραστικό περιεχόμενο, το βάρος γραμματοσειράς ρυθμίζεται σε ελαφρύ (200). Ωστόσο, εάν ένας τίτλος h2 περιέχει ένα ισχυρό στοιχείο, χρησιμοποιεί ένα έντονο βάρος γραμματοσειράς (700).
Επιπλέον, η οικογένεια γραμματοσειράς Guardian Headline Full ορίζεται με διάφορα βάρη και στυλ, συμπεριλαμβανομένων ελαφριού, κανονικού, μεσαίου και ημι-έντονου, και στις δύο κανονικές και πλάγιες μορφές. Κάθε αρχείο γραμματοσειράς προέρχεται από συγκεκριμένες URLs σε μορφές WOFF2, WOFF και TrueType.
Αυτός ο κώδικας CSS ορίζει πολλές οικογένειες γραμματοσειρών και τις παραλλαγές τους για τον ιστότοπο του Guardian. Καθορίζει διαφορετικά βάρη και στυλ γραμματοσειράς (όπως έντονα, πλάγια) για τη γραμματοσειρά "Guardian Headline Full", παρέχοντας πολλαπλές μορφές αρχείων (WOFF2, WOFF, TTF) για διαπλατφορική συμβατότητα προγραμμάτων περιήγησης. Επιπλέον, περιλαμβάνει τη γραμματοσειρά "Guardian Titlepiece" σε έντονο βάρος.
Ο κώδικας ορίζει επίσης προσαρμοσμένες ιδιότητες CSS (μεταβλητές) για χρώματα, προσαρμόζοντάς τες για προτιμήσεις σκοτεινής λειτουργίας σε συσκευές iOS και Android. Περιλαμβάνει συγκεκριμένο στυλ για το πρώτο γράμμα παραγράφων σε κοντέινερ άρθρων σε αυτές τις κινητές πλατφόρμες, διασφαλίζοντας μια συνεπή τυπογραφική αντιμετώπιση σε διαφορετικά πλαίσια.
Για συσκευές Android, το πρώτο γράμμα της πρώτης παραγράφου σε τυπικά άρθρα και άρθρα σχολίων στυλιστικά με ένα δευτερεύον χρώμα πυλώνα. Σε iOS και Android, οι κεφαλίδες άρθρων κρύβονται, και οι furniture wrappers έχουν συγκεκριμένο padding. Ετικέτες εντός αυτών των wrappers χρησιμοποιούν μια έντονη, κεφαλαιοποιημένη γραμματοσειρά σε στυλ επικεφαλίδας με ένα νέο χρώμα πυλώνα. Οι τίτλοι ρυθμίζονται σε 32px, έντονα, με κάτω padding και ένα σκούρο χρώμα. Οι εικόνες σε furniture wrappers τοποθετούνται σχετικά, εκτείνονται στο πλάτος θέασης μείον το πλάτος μπάρας κύλισης και έχουν αυτόματο ύψος, με εσωτερικά στοιχεία και συνδέσμους στυλιστικά ανάλογα.
Για συσκευές Android, οι εικόνες εντός κοντέινερ άρθρων ρυθμίζονται να έχουν διαφανές φόντο, να εκτείνονται σε πλήρες πλάτος θέασης μείον τη μπάρα κύλισης και να προσαρμόζουν το ύψος τους αυτόματα.
Σε iOS και Android, η ενότητα standfirst σε άρθρα έχει επάνω και κάτω padding 4px και 24px αντίστοιχα, με δεξί offset περιθωρίου -10px. Το κείμενο μέσα χρησιμοποιεί την οικογένεια γραμματοσειράς Guardian Headline ή εφεδρικές γραμματοσειρές serif.
Σύνδεσμοι εντός του standfirst και στις δύο πλατφόρμες στυλιστικά με ένα συγκεκριμένο χρώμα, υπογραμμισμένοι με offset 6px και χρησιμοποιούν ανοιχτό γκρι υπογράμμιση που αλλάζει στο χρώμα πυλώνα στο hover.
