Αυτός ο κώδικας CSS ορίζει την οικογένεια γραμματοσειρών "Guardian Headline Full" με διάφορα βάρη και στυλ, παρέχοντας πολλαπλές μορφές αρχείων (WOFF2, WOFF, TTF) για κάθε παραλλαγή για να διασφαλιστεί η συμβατότητα σε διαφορετικά προγράμματα περιήγησης. Τα αρχεία γραμματοσειρών φιλοξενούνται στον διακομιστή πόρων του Guardian.
Αυτός ο κώδικας CSS ορίζει πολλές οικογένειες γραμματοσειρών για τις γραμματοσειρές Guardian Headline και Guardian Titlepiece, καθορίζοντας τις πηγές τους σε διαφορετικές μορφές (WOFF2, WOFF, TTF) μαζί με τα βάρη και τα στυλ γραμματοσειράς τους. Περιλαμβάνει επίσης κανόνες ανταποκρινόμενου σχεδιασμού για την κύρια στήλη περιεχομένου σε διαδραστικές διατάξεις, προσαρμόζοντας τα περιθώρια, τα πλάτη και τη θέση με βάση το μέγεθος της οθόνης. Για παράδειγμα, σε ευρύτερες οθόνες, προσθέτει αριστερό περιθώριο και περίγραμμα, ενώ σε μικρότερες οθόνες, προσαρμόζει τα πλάτη και τις θέσεις των στοιχείων για να ταιριάζουν στην οθόνη. Ο κώδικας διασφαλίζει ότι στοιχεία όπως παράγραφοι και λίστες διατηρούν ένα μέγιστο πλάτος για την αναγνωσιμότητα και χειρίζεται τα καθηλωτικά στοιχεία επεκτείνοντάς τα σε πλήρες πλάτος σε κινητές συσκευές και προσαρμόζοντας τη διάταξή τους σε μεγαλύτερες οθόνες.
Για την κύρια διαδραστική στήλη, προστίθεται ένα αριστερό περίγραμμα πριν από το περιεχόμενο, τοποθετημένο 11 pixels αριστερά. Τα στοιχεία μέσα σε αυτή τη στήλη δεν έχουν περιθώριο πάνω ή κάτω αλλά περιλαμβάνουν 12 pixels εσωτερικού περιθωρίου τόσο πάνω όσο και κάτω. Όταν μια παράγραφος ακολουθεί ένα στοιχείο, το εσωτερικό περιθώριο αφαιρείται και εφαρμόζονται περιθώρια 12 pixels. Τα ενσωματωμένα στοιχεία περιορίζονται σε μέγιστο πλάτος 620 pixels και για οθόνες ευρύτερες από 61.25em, οι ενσωματωμένες εικόνες τηρούν επίσης αυτό το όριο πλάτους.
Ορίζονται μεταβλητές χρώματος για διάφορα στοιχεία, όπως η ημερομηνία, το περίγραμμα κεφαλίδας, το κείμενο λεζάντας και τα χρώματα χαρακτηριστικών, με το νέο χρώμα πυλώνα να ορίζεται προεπιλεγμένα ως το κύριο ή το χρώμα χαρακτηριστικού. Τα στοιχεία με την κλάση atom δεν έχουν εσωτερικό περιθώριο.
Ειδικοί κανόνες ισχύουν για την πρώτη παράγραφο που ακολουθεί ορισμένα στοιχεία ή οριζόντιες γραμμές σε διαφορετικές περιοχές περιεχομένου, προσθέτοντας 14 pixels εσωτερικού περιθωρίου πάνω. Επιπλέον, το πρώτο γράμμα αυτών των παραγράφων στυλιστικά με μεγάλη, έντονη, κεφαλαία γραμματοσειρά σε συγκεκριμένο τύπο, χρωματισμένο σύμφωνα με το χρώμα του αρχικού γράμματος ή το νέο χρώμα πυλώνα και πλευρικά τοποθετημένο αριστερά με περιθώριο.
Οι οριζόντιες γραμμές που ακολουθούνται από παραγράφους σε αυτές τις περιοχές δεν έχουν εσωτερικό περιθώριο πάνω. Τα αποσπάσματα εντός συγκεκριμένων περιοχών περιεχομένου περιορίζονται σε μέγιστο πλάτος 620 pixels.
Για τα στοιχεία επίδειξης σε διάφορες περιοχές άρθρων, οι λεζάντες τοποθετούνται στατικά με πλήρες πλάτος και μέγιστο πλάτος 620 pixels.
Τα καθηλωτικά στοιχεία εκτείνονται σε πλήρες πλάτος προβολής μείον το πλάτος της γραμμής κύλισης. Σε οθόνες έως 71.24em πλάτους, αυτά τα στοιχεία περιορίζονται σε 978px πλάτους με εσωτερικό περιθώριο λεζάντας 10px. Μεταξύ 30em και 71.24em, το εσωτερικό περιθώριο λεζάντας αυξάνεται σε 20px. Για οθόνες μεταξύ 46.25em και 61.24em, το μέγιστο πλάτος είναι 738px. Κάτω από 46.24em, τα καθηλωτικά στοιχεία ευθυγραμμίζονται με την αριστερή άκρη με προσαρμοσμένα περιθώρια και διατηρούν 20px εσωτερικό περιθώριο λεζάντας μεταξύ 30em και 46.24em.
Ο περιέκτης επίπλων χρησιμοποιεί διάταξη πλέγματος σε οθόνες 61.25em και ευρύτερες, με καθορισμένες στήλες και σειρές για την οργάνωση των τμημάτων τίτλου, επικεφαλίδας, μετα-πληροφοριών, εισαγωγικού κειμένου και πορτρέτου. Οι επικεφαλίδες διαθέτουν πάνω περίγραμμα, τα τμήματα μετα-πληροφοριών έχουν εσωτερικό περιθώριο πάνω και το κείμενο εισαγωγικού περιλαμβάνει συγκεκριμένο στυλ για συνδέσμους και στοιχεία λίστας, με υπογραμμίσεις αντί για κάτω περιγράμματα και εφέ αιώρησης χρησιμοποιώντας το νέο χρώμα πυλώνα. Η πρώτη παράγραφος στο εισαγωγικό κείμενο έχει πάνω περίγραμμα σε μεγαλύτερες οθόνες αλλά το αφαιρεί στα 71.25em και πάνω. Οι εικόνες εντός του περιέκτη έχουν αριστερό περιθώριο και μέγιστο πλάτος 630px για ενσωματωμένα στοιχεία. Στα 71.25em και ευρύτερα, το πλέγμα προσαρμόζει τη δομή των στηλών για καλύτερη διάταξη.
Η διάταξη χρησιμοποιεί ένα πλέγμα με συγκεκριμένες στήλες και σειρές για διαφορετικά μεγέθη οθονών. Για παράδειγμα, σε μεγαλύτερες οθόνες, το πλέγμα έχει τρεις ίσες στήλες για τα τμήματα τίτλου, επικεφαλίδας και μετα-πληροφοριών, ακολουθούμενες από πέντε για το εισαγωγικό κείμενο και οκτώ για το πορτρέτο, με σειρές κατανεμημένες αναλογικά.
Το στυλ περιλαμβάνει ένα πάνω περίγραμμα για το τμήμα μετα-πληροφοριών και ένα αριστερό περίγραμμα για το εισαγωγικό κείμενο, και τα δύο χρησιμοποιώντας μια προσαρμοσμένη μεταβλητή χρώματος. Οι επικεφαλίδες είναι έντονες και προσαρμόζονται σε μέγεθος και πλάτος με βάση την οθόνη, με μεγαλύτερες γραμματοσειρές σε μεγαλύτερες οθόνες.
Τα κοινωνικά και σχολιασμού στοιχεία στο τμήμα μετα-πληροφοριών μοιράζονται το ίδιο χρώμα περιγράμματος, ενώ ορισμένα στοιχεία κρύβονται. Το κείμενο εισαγωγικού έχει στυλ με κανονικό βάρος, συγκεκριμένο μέγεθος γραμματοσειράς και εσωτερικό περιθώριο, και τοποθετείται με αριστερό περιθώριο και εσωτερικό περιθώριο.
Τα κύρια στοιχεία πολυμέσων τοποθετούνται στην περιοχή πλέγματος πορτρέτου, με πλήρες πλάτος και προσαρμοσμένα περιθώρια σε μικρότερες οθόνες, και οι λεζάντες τοποθετούνται απόλυτα στο κάτω μέρος με χρώμα φόντου και εσωτερικό περιθώριο. Σε μεσαίες οθόνες και άνω, ορισμένες γραμμές κρύβονται και τα περιθώρια επαναφέρονται για ορισμένα στοιχεία.
Ο κώδικας CSS ορίζει στυλ για ένα στοιχείο περιέκτη επίπλων, συμπεριλαμβανομένης της διάταξής του, των χρωμάτων και της ανταποκρινόμενης συμπεριφοράς σε διαφορετικά μεγέθη οθονών. Ορίζει χρώματα φόντου, χρώματα κειμένου και στυλ περιγράμματος χρησιμοποιώντας μεταβλητές CSS για συνέπεια. Ο περιέκτης προσαρμόζει περιθώρια, εσωτερικά περιθώρια και θέση σε μεγαλύτερες οθόνες, με συγκεκριμένους κανόνες για στοιχεία όπως λεζάντες, κουμπιά και επικεφαλίδες. Τα κουμπιά κοινωνικών μέσων αλλάζουν χρώμα στο αιώρηση και ορισμένα στοιχεία κρύβονται ή εμφανίζονται με βάση συνθήκες. Ο σχεδιασμός διασφαλίζει μια συνεκτική εμφάνιση ενώ προσαρμόζεται σε διάφορες συσκευές.
Αυτός ο κώδικας CSS ορίζει στυλ για την κλάση furniture-wrapper μιας ιστοσελίδας, εστιάζοντας στα τμήματα μετα-πληροφοριών και εισαγωγικού κειμένου. Ορίζει τα χρώματα κειμένου σε ανοιχτό γκρι (#dcdcdc) και τα χρώματα συνδέσμων σε μια απόχρωση βασισμένη σε μεταβλητή, με εφέ αιώρησης που διατηρούν το χρώμα και προσθέτουν υπογραμμίσεις. Οι σύνδεσμοι στο εισαγωγικό κείμενο έχουν υπογραμμίσεις με συγκεκριμένες αποστάσεις και χρώματα, ενώ αφαιρούν τα περιγράμματα και τις εικόνες φόντου.
Για μεγαλύτερες οθόνες (min-width: 61.25em), η πρώτη παράγραφος στο εισαγωγικό κείμενο παίρνει ένα πάνω περίγραμμα, το οποίο αφαιρείται σε ακόμα μεγαλύτερες οθόνες (71.25em). Ο κώδικας δημιουργεί επίσης διακοσμητικές πλαϊνές μπάρες χρησιμοποιώντας ψευδο-στοιχεία (:before και :after) που προσαρμόζουν το πλάτος και τη θέση τους με βάση το μέγεθος της οθόνης, με σκούρα φόντα και περιγραμμένα άκρα. Τα κοινωνικά και σχολιασμού στοιχεία εντός του τμήματος μετα-πληροφοριών κληρονομούν παρόμοιο στυλ για εικονίδια και κείμενο.
Το τμήμα σχολιασμού έχει χρώμα περιγράμματος που ταιριάζει με το χρώμα περιγράμματος της κεφαλίδας.
Σε άρθρα, οι επικεφαλίδες δεύτερου επιπέδου (h2) εντός του κύριου σώματος χρησιμοποιούν ελαφρύ βάρος γραμματοσειράς 200. Ωστόσο, εάν ένα h2 περιέχει ένα ισχυρό στοιχείο, υιοθετεί ένα έντονο βάρος γραμματοσειράς 700.
Η οικογένεια γραμματοσειρών Guardian Headline Full περιλαμβάνει πολλές παραλλαγές:
- Light (βάρος 300) σε κανονικό και πλάγιο στυλ
- Regular (βάρος 400) σε κανονικό και πλάγιο στυλ
- Medium (βάρος 500) σε κανονικό και πλάγιο στυλ
- Semibold (βάρος 600) σε κανονικό και πλάγιο στυλ
Κάθε στυλ είναι διαθέσιμο σε μορφές WOFF2, WOFF και TrueType, φιλοξενούμενο στον διακομιστή πόρων του Guardian.
Αυτός ο κώδικας CSS ορίζει πολλά πρότυπα γραμματοσειράς για την οικογένεια γραμματοσειρών "Guardian Headline Full" με διαφορετικά βάρη και στυλ (κανονικό και πλάγιο), που κυμαίνονται από semibold (600) έως black (900). Κάθε πρότυπο γραμματοσειράς καθορίζει αρχεία πηγής σε μορφές WOFF2, WOFF και TrueType από τους διακομιστές πόρων του Guardian.
Ορίζει επίσης τη γραμματοσειρά "Guardian Titlepiece" σε έντονο βάρος με τις ίδιες μορφές αρχείων.
Ο κώδικας περιλαμβάνει προσαρμοσμένες ιδιότητες CSS (μεταβλητές) για χρωματικά σχήματα, προσαρμόζοντάς τα για σκοτεινή λειτουργία σε συσκευές iOS και Android. Επιπλέον, περιέχει συγκεκριμένους κανόνες στυλ για το πρώτο γράμμα παραγράφων σε περιέκτες άρθρων σε πλατφόρμες iOS και Android, ειδικά όταν ακολουθούν ορισμένα στοιχεία όπως άτομα ή πύλες σύνδεσης.
Για συσκευές Android, το πρώτο γράμμα της πρώτης παραγράφου σε τυπικά άρθρα και άρθρα σχολιασμού στυλιστικά με ένα δευτερεύον χρώμα πυλώνα. Σε iOS και Android, οι κεφαλίδες άρθρων κρύβονται και οι περιέκτες επίπλων έχουν συγκεκριμένο εσωτερικό περιθώριο. Οι ετικέτες εντός αυτών των περιέκτων χρησιμοποιούν μια έντονη, κεφαλαιοποιημένη γραμματοσειρά σε στυλ επικεφαλίδας με ένα νέο χρώμα πυλώνα. Οι επικεφαλίδες ορίζονται σε 32px, έντονες, με κάτω εσωτερικό περιθώριο και σκούρο χρώμα. Οι εικόν
