Αυτός ο κώδικας CSS ορίζει την οικογένεια γραμματοσειρών "Guardian Headline Full" με πολλαπλά στυλ και βάρη. Περιλαμβάνει εκδόσεις light (300), regular (400), medium (500) και semibold (600), καθεμία σε κανονικό και πλάγιο στυλ. Για κάθε στυλ, παρέχει αρχεία γραμματοσειρών σε μορφές WOFF2, WOFF και TrueType από τον διακομιστή πόρων του Guardian.
Αυτός ο κώδικας CSS ορίζει πολλές οικογένειες γραμματοσειρών για τις γραμματοσειρές Guardian Headline και Guardian Titlepiece, καθορίζοντας τις πηγές τους σε διαφορετικές μορφές (WOFF2, WOFF και TrueType) μαζί με τα βάρη και τα στυλ τους. Επίσης, περιλαμβάνει κανόνες ανταποδοτικής σχεδίασης για την κύρια στήλη περιεχομένου σε διαδραστικές διατάξεις, προσαρμόζοντας τα περιθώρια, τα πλάτη και τη θέση με βάση το μέγεθος της οθόνης. Για παράδειγμα, σε ευρύτερες οθόνες, προσθέτει αριστερό περιθώριο και περίγραμμα, ενώ σε μικρότερες οθόνες, προσαρμόζει τα πλάτη και τις θέσεις των στοιχείων για να ταιριάζουν στην οθόνη. Ο κώδικας διασφαλίζει ότι στοιχεία όπως παράγραφοι και λίστες διατηρούν ένα μέγιστο πλάτος για ευανάγνωση και χειρίζεται τα καθηλωτικά στοιχεία επεκτείνοντάς τα σε πλήρες πλάτος σε κινητές συσκευές και προσαρμόζοντας τη διάταξή τους σε μεγαλύτερες οθόνες.
Για διαδραστικές στήλες περιεχομένου, προστίθεται αριστερό περίγραμμα με ανοιχτό γκρι χρώμα και τοποθετείται ελαφρώς αριστερά. Τα στοιχεία μέσα σε αυτές τις στήλες δεν έχουν περιθώρια πάνω ή κάτω αλλά περιλαμβάνουν πάδινγκ 12px. Όταν μια παράγραφος ακολουθεί ένα στοιχείο, το πάδινγκ αφαιρείται και τα περιθώρια ορίζονται σε 12px. Τα ενσωματωμένα στοιχεία περιορίζονται σε μέγιστο πλάτος 620px και για ευρύτερες οθόνες, οι εικόνες με συγκεκριμένο ρόλο τηρούν επίσης αυτό το όριο πλάτους.
Ορίζονται μεταβλητές χρωμάτων για διάφορα κείμενα και στοιχεία φόντου, συμπεριλαμβανομένων ημερομηνιών, περιγραμμάτων κεφαλίδων, λεζάντων και χρωμάτων χαρακτηριστικών, με προεπιλεγμένο χρώμα χαρακτηριστικού το κόκκινο.
Τα στοιχεία με στυλ atoms δεν έχουν πάδινγκ. Ειδικοί κανόνες ισχύουν για την πρώτη παράγραφο που ακολουθεί συγκεκριμένα στοιχεία ή οριζόντιες γραμμές σε διαφορετικές περιοχές περιεχομένου, προσθέτοντας πάδινγκ 14px πάνω. Επιπλέον, το πρώτο γράμμα αυτών των παραγράφων στυλιζάρεται με μεγάλη, έντονη, κεφαλαία γραμματοσειρά σε στυλ επικεφαλίδας, χρωματισμένη σύμφωνα με το καθορισμένο χρώμα χαρακτηριστικού και πλέκεται προς τα αριστερά με περιθώριο.
Οι οριζόντιες γραμμές που ακολουθούνται από παραγράφους σε διάφορες ενότητες περιεχομένου δεν έχουν πάδινγκ πάνω. Τα παράθεση εντός συγκεκριμένων περιοχών περιεχομένου έχουν μέγιστο πλάτος 620 pixel.
Για στοιχεία επίδειξης σε διάφορες επικεφαλίδες άρθρων, τα λεζάντα τοποθετούνται στατικά με πλήρες πλάτος και μέγιστο πλάτος 620 pixel.
Τα καθηλωτικά στοιχεία εκτείνονται σε πλήρες πλάτος προβολής μείον το πλάτος της μπάρας κύλισης. Σε οθόνες έως 71.24em πλάτους, αυτά τα στοιχεία περιορίζονται σε 978 pixel, με πάδινγκ λεζάντας 10 pixel. Μεταξύ 30em και 71.24em, το πάδινγκ λεζάντας αυξάνεται σε 20 pixel. Για οθόνες μεταξύ 46.25em και 61.24em, το μέγιστο πλάτος είναι 738 pixel. Κάτω από 46.24em, τα καθηλωτικά στοιχεία ευθυγραμμίζονται προς τα αριστερά με προσαρμοσμένα περιθώρια και πάδινγκ λεζάντας 20 pixel μεταξύ 30em και 46.24em.
Ο περιέκτης επίπλων χρησιμοποιεί διάταξη πλέγματος σε οθόνες 61.25em και ευρύτερες, με καθορισμένες στήλες και σειρές για την οργάνωση του περιεχομένου. Οι επικεφαλίδες διαθέτουν πάνω περίγραμμα, οι ενότητες meta έχουν πάδινγκ πάνω και τα στοιχεία standfirst περιλαμβάνουν στυλισμένους συνδέσμους με υπογραμμίσεις που αλλάζουν χρώμα upon hover. Αρχικά, η πρώτη παράγραφος στο standfirst έχει πάνω περίγραμμα και κανένα πάδινγκ κάτω, το οποίο αφαιρείται σε οθόνες 71.25em και άνω.
Οι εικόνες εντός του περιέκτη επίπλων έχουν αριστερά περιθώρια και μέγιστο πλάτος 630 pixel για ενσωματωμένα στοιχεία. Σε μεγαλύτερες οθόνες (71.25em και άνω), οι στήλες του πλέγματος αναδιαμορφώνονται για διαφορετική τοποθέτηση περιεχομένου.
Η διάταξη χρησιμοποιεί ένα πλέγμα με συγκεκριμένες στήλες και σειρές για διαφορετικά μεγέθη οθονών. Για μικρότερες οθόνες, το πλέγμα ορίζει περιοχές για τον τίτλο, την επικεφαλίδα, το standfirst, τις πληροφορίες meta και το πορτρέτο, με σειρές σε σταθερά και αυτόματα ύψη. Μια λεπτή γραμμή εμφανίζεται πάνω από την ενότητα meta και το standfirst έχει μια κάθετη γραμμή στην αριστερή του πλευρά.
Σε μεγαλύτερες οθόνες, το πλέγμα προσαρμόζεται για χρήση κλασματικών μονάδων για σειρές και επεκτείνει τα εύρη στηλών. Το μέγεθος γραμματοσειράς της επικεφαλίδας αυξάνεται και το μέγιστο πλάτος της αλλάζει, ενώ κάποια στοιχεία όπως γραμμές κρύβονται. Το κείμενο του standfirst στυλιζάρεται με συγκεκριμένο βάρος και μέγεθος γραμματοσειράς και η κύρια περιοχή μέσων τοποθετείται εντός του πλέγματος, με προσαρμογές για πλάτος και περιθώρια σε μικρότερες συσκευές. Τα λεζάντα τοποθετούνται απόλυτα στο κάτω μέρος με χρώμα φόντου και πάδινγκ.
Ο κώδικας CSS ορίζει στυλ για ένα στοιχείο περιέκτη επίπλων, συμπεριλαμβανομένης της διάταξης, των χρωμάτων και της ανταποδοτικής συμπεριφοράς σε διαφορετικά μεγέθη οθονών. Ορίζει χρώματα φόντου, χρώματα κειμένου και στυλ περιγραμμάτων χρησιμοποιώντας προσαρμοσμένες ιδιότητες CSS για θέματα όπως σκοτεινή λειτουργία. Ο περιέκτης προσαρμόζει περιθώρια, πάδινγκ και θέση σε μεγαλύτερες οθόνες και περιλαμβάνει κρυφά στοιχεία και διαδραστικά κουμπιά με εφέ hover για κοινωνική κοινοποίηση. Οι επικεφαλίδες και οι πληροφορίες meta στυλιζάρονται με συγκεκριμένες γραμματοσειρές και χρώματα, διασφαλίζοντας συνοχή στο σχέδιο.
Αυτός ο κώδικας CSS ορίζει στυλ για στοιχεία εντός της κλάσης "furniture-wrapper", εστιάζοντας στις ενότητες πληροφοριών meta και standfirst. Ορίζει τα χρώματα κειμένου σε ανοιχτό γκρι (#dcdcdc) και τα χρώματα συνδέσμων σε απόχρωση βασισμένη σε μεταβλητή, με εφέ hover που αλλάζουν το χρώμα διακόσμησης κειμένου. Οι σύνδεσμοι στο standfirst υπογραμμίζονται με συγκεκριμένη απόσταση και χρώμα και οι καταστάσεις hover προσαρμόζουν ανάλογα το χρώμα της υπογράμμισης.
Για μεγαλύτερες οθόνες (min-width: 61.25em), η πρώτη παράγραφος στο standfirst αποκτά πάνω περίγραμμα, το οποίο αφαιρείται σε ακόμα μεγαλύτερες οθόνες (min-width: 71.25em). Τα στοιχεία λίστας στο standfirst υιοθετούν επίσης το ανοιχτό γκρι χρώμα κειμένου.
Ο κώδικας περιλαμβάνει στοιχεία ανταποδοτικής σχεδίας χρησιμοποιώντας media queries για διαφορετικά πλάτη οθόνης (46.25em, 61.25em, 71.25em και 81.25em). Αυτά προσαρμόζουν το πλάτος και τη θέση ψευδο-στοιχείων (:before και :after) για να δημιουργήσουν περιοχές φόντου με περιγράμματα, υπολογίζοντας διαστάσεις με βάση το πλάτος προβολής και προσαρμογές μπάρας κύλισης.
Επιπλέον, στυλιζάρει στοιχεία SVG εντός keylines και στοιχεία κοινωνικών μέσων ή σχολίων στην ενότητα meta, ρυθμίζοντας το stroke και τα χρώματα κειμένου να ταιριάζουν με το θέμα χρησιμοποιώντας μεταβλητές CSS.
Η ενότητα σχολίων έχει χρώμα περιγράμματος που ταιριάζει με το χρώμα περιγράμματος της κεφαλίδας. Σε άρθρα, οι επικεφαλίδες δεύτερου επιπέδου έχουν ελαφρύ βάρος γραμματοσειράς 200, αλλά εάν περιέχουν ένα ισχυρό στοιχείο, χρησιμοποιούν έντονο βάρος 700.
Επιπλέον, η οικογένεια γραμματοσειρών Guardian Headline Full ορίζεται με διάφορα στυλ και βάρη, συμπεριλαμβανομένων light, regular, medium και semibold, καθεμία σε κανονικές και πλάγιες εκδόσεις. Αυτές οι γραμματοσειρές προέρχονται από συγκεκριμένες URLs σε μορφές WOFF2, WOFF και TrueType.
Αυτός ο κώδικας CSS ορίζει πολλά font faces για την οικογένεια γραμματοσειρών "Guardian Headline Full", καθένα με διαφορετικά βάρη και στυλ (κανονικό και πλάγιο), που κυμαίνονται από semibold (600) έως black (900). Περιλαμβάνει επίσης ένα font face για το "Guardian Titlepiece" σε έντονο. Οι γραμματοσειρές προέρχονται από συγκεκριμένες URLs σε μορφές WOFF2, WOFF και TrueType.
Επιπλέον, ο κώδικας ορίζει προσαρμοσμένες ιδιότητες CSS (μεταβλητές) για σκοτεινά φόντα και χρώματα χαρακτηριστικών, προσαρμόζοντάς τα με βάση την προτίμηση του χρήστη για χρωματικό σχήμα ή όταν ο ιστότοπος προβάλλεται σε συσκευές iOS ή Android. Περιλαμβάνει επίσης στυλ για το πρώτο γράμμα παραγράφων σε επικεφαλίδες άρθρων σε αυτές τις κινητές πλατφόρμες, με συγκεκριμένους επιλογείς για να χειρίζεται πύλες εισόδου.
Για συσκευές Android, το πρώτο γράμμα της πρώτης παραγράφου σε τυπικά άρθρα και άρθρα σχολίων στυλιζάρεται με ένα δευτερεύον χρώμα πυλώνα. Σε iOS και Android, οι κεφαλίδες άρθρων κρύβονται και οι περιέκτες επίπλων έχουν συγκεκριμένο πάδινγκ. Οι ετικέτες εντός αυτών των περιεκτών χρησιμοποιούν μια έντονη, κεφαλαιοποιημένη γραμματοσειρά σε στυλ επικεφαλίδας με ένα νέο χρώμα πυλώνα. Οι επικεφαλίδες ορίζονται σε 32px, έντονα, με πάδινγκ κάτω και σκούρο χρώμα. Οι εικόνες σε περιέκτες επίπλων τοποθετούνται σχετικά, εκτείνονται σε πλάτος προβολής μείον τη μπάρα κύλισης και προσαρμόζουν το ύψος τους αυτόματα.
Για συσκευές Android, οι εικόνες εντός επικεφαλίδων άρθρων ορίζονται να έχουν διαφανές φόντο, να εκτείνονται σε πλήρες πλάτος προβολής μείον τη μπάρα κύλισης και να προσαρμόζουν το ύψος τους αυτόματα.
Σε iOS και Android, οι ενότητες περίληψης άρθρων έχουν πάδινγκ πάνω και κάτω 4px και 24px αντίστοιχα, με δεξί περιθώριο -10px.
Το κείμενο σε αυτές τις περιλήψεις χρησιμοποιεί την οικογένεια γραμματοσειρών Guardian Headline ή παρόμοιες serif γραμματοσειρές.
Οι σύνδεσμοι εντός των περιλήψεων στυλιζάρονται με συγκεκριμένο χρώμα, υπογραμμίζονται με απόσταση 6px και χρησιμοποιούν ένα καθορισμένο χρώμα για την υπογράμμιση
