Αυτός ο κώδικας CSS ορίζει την οικογένεια γραμματοσειρών "Guardian Headline Full" με διάφορα βάρη και στυλ, συμπεριλαμβανομένων light, regular, medium και semibold, καθένα σε κανονικές και πλάγιες εκδόσεις. Καθορίζει τα αρχεία γραμματοσειρών σε μορφές WOFF2, WOFF και TrueType που φιλοξενούνται στους διακομιστές του Guardian.
Αυτός ο κώδικας CSS ορίζει πολλές οικογένειες γραμματοσειρών για τις γραμματοσειρές Guardian Headline και Guardian Titlepiece, καθορίζοντας τις πηγές τους σε διαφορετικές μορφές (WOFF2, WOFF, TTF) μαζί με τα βάρη και τα στυλ γραμματοσειράς τους. Περιλαμβάνει επίσης κανόνες ανταποκρινόμενου σχεδιασμού για την κύρια στήλη περιεχομένου σε διαδραστικές διατάξεις, προσαρμόζοντας τα περιθώρια, τα πλάτη και τη θέση βάσει του μεγέθους της οθόνης. Για παράδειγμα, σε ευρύτερες οθόνες, προσθέτει αριστερό περιθώριο και περίγραμμα, ενώ σε μικρότερες οθόνες, επεκτείνει τα στοιχεία σε πλήρες πλάτος και τα κεντράρει. Τα στυλ διασφαλίζουν τη σωστή μορφοποίηση σε όλες τις συσκευές, με μέγιστα πλάτη που ορίζονται για διάφορους τύπους περιεχομένου όπως atoms, showcases και καθηλωτικά στοιχεία.
Για διαδραστικές στήλες περιεχομένου, προστίθεται αριστερό περίγραμμα πριν από το στοιχείο, τοποθετημένο 11 pixels αριστερά. Μέσα σε αυτές τις στήλες, τα atoms (στοιχεία) δεν έχουν περιθώρια πάνω ή κάτω αλλά περιλαμβάνουν padding 12 pixels τόσο πάνω όσο και κάτω. Όταν μια παράγραφος ακολουθεί ένα atom, το padding αφαιρείται και εφαρμόζονται αντί για αυτό περιθώρια 12 pixels. Τα εν σειρά στοιχεία περιορίζονται σε μέγιστο πλάτος 620 pixels, και για ευρύτερες οθόνες (πάνω από 61.25em), τα εν σειρά σχήματα με συγκεκριμένο ρόλο τηρούν επίσης αυτό το όριο πλάτους.
Ορίζονται μεταβλητές χρώματος για διάφορα στοιχεία, όπως datelines, κεφαλίδες, λεζάντες και features, με ένα προεπιλεγμένο χρώμα feature ρυθμισμένο στο κόκκινο. Τα atoms στην κύρια στήλη και αλλού δεν έχουν padding.
Συγκεκριμένοι κανόνες ισχύουν για την πρώτη παράγραφο μετά από συγκεκριμένα στοιχεία ή οριζόντιες γραμμές σε διαφορετικές περιοχές περιεχομένου (κύριο σώμα άρθρου, διαδραστικό περιεχόμενο, σχόλια, features), προσθέτοντας 14 pixels top padding. Επιπλέον, το πρώτο γράμμα αυτών των παραγράφων στυλιστικά έχει μεγάλη, έντονη, κεφαλαία γραμματοσειρά σε συγκεκριμένο typeface, χρωματισμένη σύμφωνα με μια μεταβλητή, και επιπλέει αριστερά με περιθώριο.
Οι οριζόντιες γραμμές που ακολουθούνται από παραγράφους σε αυτές τις ενότητες δεν έχουν top padding. Τα pullquotes εντός συγκεκριμένων περιοχών περιεχομένου περιορίζονται σε μέγιστο πλάτος 620 pixels.
Για στοιχεία showcase σε διάφορες επικεφαλίδες άρθρων, οι λεζάντες τοποθετούνται στατικά με πλήρες πλάτος έως 620 pixels.
Τα καθηλωτικά στοιχεία εκτείνονται σε πλήρες πλάτος viewport μείον το πλάτος της μπάρας κύλισης. Σε οθόνες έως 71.24em πλάτους, αυτά τα στοιχεία περιορίζονται σε πλάτος 978px με padding λεζάντας 10px. Μεταξύ 30em και 71.24em, το padding λεζάντας αυξάνεται σε 20px. Για οθόνες μεταξύ 46.25em και 61.24em, το μέγιστο πλάτος γίνεται 738px. Κάτω από 46.24em, τα καθηλωτικά στοιχεία ευθυγραμμίζονται στην αριστερή άκρη με προσαρμοσμένα περιθώρια και διατηρούν 20px padding λεζάντας μεταξύ 30em και 46.24em.
Το furniture wrapper χρησιμοποιεί μια ανταποκρινόμενη διάταξη πλέγματος σε οθόνες 61.25em και ευρύτερες, οργανώνοντας τίτλο, επικεφαλίδα, μετα-πληροφορίες, standfirst και ενότητες πορτρέτου. Οι επικεφαλίδες διαθέτουν πάνω περίγραμμα, οι ενότητες meta έχουν πάνω padding, και το κείμενο standfirst περιλαμβάνει συγκεκριμένο στυλ για λίστες και συνδέσμους με προσαρμοσμένες υπογραμμίσεις που αλλάζουν χρώμα upon hover. Η πρώτη παράγραφος στο standfirst έχει πάνω περίγραμμα σε μεγαλύτερες οθόνες αλλά το αφαιρεί πάνω από 71.25em.
Τα σχήματα εντός του furniture wrapper έχουν αριστερό περιθώριο και τα εν σειρά στοιχεία περιορίζονται σε πλάτος 630px. Πάνω από 71.25em, η διάταξη πλέγματος προσαρμόζεται για να φιλοξενήσει περισσότερες στήλες για περιεχόμενο πορτρέτου.
Η διάταξη χρησιμοποιεί ένα πλέγμα με συγκεκριμένες στήλες και σειρές για διαφορετικά μεγέθη οθονών. Για μικρότερες οθόνες, το πλέγμα έχει τρεις στήλες και σειρές που προσαρμόζονται αυτόματα, με σταθερό ύψος 80px για τις περιοχές τίτλου και πορτρέτου. Μια λεπτή γραμμή εμφανίζεται πάνω από την ενότητα meta, και η ενότητα standfirst έχει μια κάθετη γραμμή στην αριστερή της πλευρά.
Σε μεγαλύτερες οθόνες, το πλέγμα επεκτείνεται σε περισσότερες στήλες και σειρές με κλασματικές μονάδες για ευελιξία. Η πάνω γραμμή της ενότητας meta διευρύνεται, και η κάθετη γραμμή του standfirst μετατοπίζεται ελαφρά. Οι επικεφαλίδες έχουν μέγιστο πλάτος και μέγεθος γραμματοσειράς που αυξάνονται σε μεγαλύτερες οθόνες, ενώ ορισμένα στοιχεία όπως γραμμές κρύβονται ή προσαρμόζονται σε περιθώρια για διαφορετικά σημεία διακοπής.
Τα κοινωνικά και σχολιασμού στοιχεία στην ενότητα meta μοιράζονται το ίδιο χρώμα περιγράμματος, και ορισμένα στοιχεία δεν εμφανίζονται. Το κείμενο standfirst έχει συγκεκριμένο στυλ με μειωμένο αριστερό περιθώριο και padding, και ιδιότητες γραμματοσειράς. Τα κύρια στοιχεία πολυμέσων τοποθετούνται σχετικά, με πλήρες πλάτος και προσαρμοσμένα περιθώρια σε διάφορες συσκευές, και οι λεζάντες τοποθετούνται απόλυτα στο κάτω μέρος με προσαρμοσμένο φόντο και χρώματα κειμένου.
Αυτός ο κώδικας CSS ορίζει στυλ για ένα στοιχείο furniture wrapper, συμπεριλαμβανομένης της διάταξης, των χρωμάτων και της ανταποκρινόμενης συμπεριφοράς σε διαφορετικά μεγέθη οθονών. Ορίζει χρώματα φόντου, χρώματα κειμένου και στυλ περιγράμματος χρησιμοποιώντας προσαρμοσμένες ιδιότητες CSS για θέματα όπως σκοτεινή λειτουργία. Το wrapper προσαρμόζει περιθώρια, padding και θέση σε μεγαλύτερες οθόνες, και περιλαμβάνει κανόνες για απόκρυψη ή εμφάνιση στοιχείων όπως λεζάντες και κουμπιά. Οι επικεφαλίδες και οι μετα-πληροφορίες στυλιστικά έχουν συγκεκριμένες γραμματοσειρές και χρώματα, και τα κουμπιά κοινωνικών μέσων έχουν εφέ hover που αλλάζουν την εμφάνισή τους. Τα media queries διασφαλίζουν ότι ο σχεδιασμός προσαρμόζεται σε διάφορες συσκευές.
Αυτός ο κώδικας CSS ορίζει στυλ για την κλάση furniture-wrapper μιας ιστοσελίδας, εστιάζοντας σε στοιχεία όπως μετα-πληροφορίες και ενότητες standfirst. Ορίζει τα χρώματα κειμένου σε ανοιχτό γκρι (#dcdcdc) και τα χρώματα συνδέσμων σε μια απόχρωση βασισμένη σε μεταβλητή, με εφέ hover που αλλάζουν τα χρώματα διακόσμησης κειμένου. Οι σύνδεσμοι σε περιοχές standfirst έχουν υπογραμμίσεις με συγκεκριμένες αποστάσεις και χωρίς περιγράμματα, ενώ οι παράγραφοι και τα στοιχεία λίστας υιοθετούν επίσης το ανοιχτό γκρι χρώμα.
Για μεγαλύτερες οθόνες (min-width: 61.25em), η πρώτη παράγραφος στο standfirst παίρνει ένα πάνω περίγραμμα, το οποίο αφαιρείται σε ακόμα μεγαλύτερες οθόνες (71.25em). Ο κώδικας δημιουργεί επίσης διακοσμητικές πλαϊνές μπάρες χρησιμοποιώντας ψευδο-στοιχεία (:before και :after) που προσαρμόζονται σε πλάτος βάσει του μεγέθους της οθόνης, με σκούρα φόντο και περιγραμμένα άκρα. Επιπλέον, στυλιστικά στοιχεία SVG με χρώματα stroke και εικονίδια κοινωνικών μέσων ή σχολίων εντός των ενότητων meta.
Η ενότητα σχολίων έχει χρώματος περιγράμματος που ταιριάζει με το χρώμα περιγράμματος της κεφαλίδας.
Σε άρθρα, οι επικεφαλίδες δεύτερου επιπέδου (h2) εντός του κύριου σώματος έχουν ελαφρύ βάρος γραμματοσειράς 200. Ωστόσο, εάν ένα h2 περιέχει ένα strong στοιχείο, χρησιμοποιεί ένα έντονο βάρος γραμματοσειράς 700.
Η οικογένεια γραμματοσειρών Guardian Headline Full περιλαμβάνει διάφορα στυλ και βάρη, καθένα με συγκεκριμένες πηγές αρχείων σε μορφές WOFF2, WOFF και TrueType:
- Light (βάρος 300, κανονικό στυλ)
- Light Italic (βάρος 300, πλάγιο στυλ)
- Regular (βάρος 400, κανονικό στυλ)
- Regular Italic (βάρος 400, πλάγιο στυλ)
- Medium (βάρος 500, κανονικό στυλ)
- Medium Italic (βάρος 500, πλάγιο στυλ)
- Semibold (βάρος 600, κανονικό στυλ)
- Semibold Italic (βάρος 600, πλάγιο στυλ)
Αυτός ο κώδικας CSS ορίζει πολλά font faces για την οικογένεια γραμματοσειρών "Guardian Headline Full" με διαφορετικά βάρη και στυλ (κανονικό και πλάγιο), κυμαινόμενα από semibold (600) έως black (900). Κάθε font face καθορίζει αρχεία πηγής σε μορφές WOFF2, WOFF και TrueType από τους διακομιστές περιουσιακών στοιχείων του Guardian.
Ορίζει επίσης τη γραμματοσειρά "Guardian Titlepiece" με έντονο βάρος (700) και κανονικό στυλ, χρησιμοποιώντας παρόμοιες μορφές αρχείων από ένα διαφορετικό subdomain.
Ο κώδικας περιλαμβάνει προσαρμοσμένες ιδιότητες CSS (μεταβλητές) για χρωματικά σχήματα, ιδιαίτερα για σκοτεινή λειτουργία σε συσκευές iOS και Android. Ρυθμίζει ένα σκούρο χρώμα φόντου, χρώματα feature για φωτεινή και σκοτεινή λειτουργία, και χρησιμοποιεί media queries για να προσαρμόσει το pillar χρώμα βάσει του προτιμώμενου χρωματικού σχήματος του χρήστη.
Επιπλέον, υπάρχουν συγκεκριμένοι κανόνες στυλ για το πρώτο γράμμα παραγράφων σε επικεφαλίδες άρθρων σε συσκευές iOS και Android, που εφαρμόζονται όταν ακολουθούν ορισμένα στοιχεία όπως atoms, πύλες σύνδεσης ή συγκεκριμένα στοιχεία πυλών.
Για συσκευές Android, το πρώτο γράμμα της πρώτης παραγράφου σε τυπικά άρθρα και άρθρα σχολίων στυλιστικά έχει ένα δευτερεύον pillar χρώμα. Σε iOS και Android, οι κεφαλίδες άρθρων κρύβονται, και τα furniture wrappers έχουν συγκεκριμένο padding. Οι ετικέτες εντός αυτών των wrappers χρησιμοποιούν μια έντονη, κεφαλαιοποιημένη γραμματοσειρά σε στυλ επικεφαλίδας με ένα νέο pillar χρώμα. Οι επικεφαλίδες ρυθμίζονται σε 32px, έντονα, με κάτω padding και ένα σκούρο χρώμα. Οι εικόνες σε furniture wrappers τοποθετούνται σχετικά, εκτείνονται σε πλάτος viewport μείον την μπάρα κύλισης, και προσαρμόζουν το ύψος τους αυτόματα.
Για συσκευές Android, οι εικόνες εντός επικεφαλίδων άρθρων ρυθμίζονται να έχουν διαφανές φόντο, να εκτείνονται σε πλήρες πλάτος viewport μείον την μπάρα κύλισης, και να προσαρμόζουν
