Αυτός ο κώδικας CSS ορίζει την οικογένεια γραμματοσειρών Guardian Headline Full με διάφορα βάρη και στυλ. Περιλαμβάνει εκδόσεις ελαφριά (300), κανονική (400), μέτρια (500) και ημι-έντονη (600), καθεμία διαθέσιμη τόσο σε κανονικό όσο και σε πλάγιο στυλ. Τα αρχεία γραμματοσειρών παρέχονται σε μορφές WOFF2, WOFF και TrueType από τον διακομιστή πόρων του Guardian.
Αυτός ο κώδικας CSS ορίζει πολλά γραμματοσειρικά πρόσωπα για τις γραμματοσειρές Guardian Headline Full και Guardian Titlepiece, καθορίζοντας τις πηγές τους σε διαφορετικές μορφές (WOFF2, WOFF και TrueType) μαζί με τα βάρη και τα στυλ τους. Περιλαμβάνει επίσης κανόνες ανταποκρινόμενου σχεδιασμού για τη στήλη διαδραστικού περιεχομένου, προσαρμόζοντας τα περιθώρια, τα πλάτη και τους μετασχηματισμούς με βάση το μέγεθος της οθόνης. Για παράδειγμα, σε ευρύτερες οθόνες, το αριστερό περιθώριο της στήλης αυξάνεται και στοιχεία όπως άτομα, βιτρίνες και εμβαπτιστικό περιεχόμενο έχουν συγκεκριμένα μέγιστα πλάτη ή συμπεριφορά πλήρους πλάτους σε μικρότερες οθόνες.
Αυτός ο κώδικας CSS ορίζει στυλ για μια στήλη διαδραστικού περιεχομένου. Ορίζει περιγράμματα, χρώματα και απόσταση για διάφορα στοιχεία όπως παραγράφους, εικόνες και πρωτόγραμμα γράμματα. Τα στυλ προσαρμόζονται για διαφορετικά μεγέθη οθόνης και διασφαλίζουν συνεπή μορφοποίηση σε ενότητες άρθρων, σχολίων και δυνατοτήτων. Βασικά χαρακτηριστικά περιλαμβάνουν ένα χρώμα έμφασης κόκκινο για επισημάνσεις, συγκεκριμένη τυπογραφία για πρωτόγραμμα γράμματα και κανόνες ανταποκρινόμενου σχεδιασμού για βέλτιστη προβολή σε διάφορες συσκευές.
Για συγκεκριμένα στοιχεία όπως παράγραφοι που ακολουθούν οριζόντιες γραμμές σε άρθρα, σχόλια και δυνατότητες, αφαιρέστε την επάνω πληρωμή.
Περιορίστε το πλάτος των εισαγωγικών σε αυτές τις ενότητες σε 620 pixel.
Βεβαιωθείτε ότι οι λεζάντες για στοιχεία βιτρίνας σε κύριο περιεχόμενο και εμπορευματοκιβώτια άρθρων είναι κανονικά τοποθετημένες, εκτείνονται σε πλήρες πλάτος έως 620 pixel.
Κάντε τα εμβαπτιστικά στοιχεία να εκτείνονται σε πλήρες πλάτος θύρας προβολής, λαμβάνοντας υπόψη τις μπάρες κύλισης. Σε οθόνες έως 71.24em πλάτους, περιορίστε το πλάτος τους στα 978px και προσθέστε 10px πλευρική πληρωμή στις λεζάντες. Μεταξύ 30em και 71.24em, αυξήστε την πληρωμή λεζάντων σε 20px. Για πλάτη μεταξύ 46.25em και 61.24em, ορίστε ένα μέγιστο πλάτος 738px. Κάτω από 46.24em, αφαιρέστε το αριστερό περιθώριο και ευθυγραμμίστε στην αριστερή άκρη, με μείωση αριστερού περιθωρίου 10px μεταξύ 30em και 46.24em και 20px πληρωμή για λεζάντες.
Για περιτυλίγματα επίπλων σε οθόνες 61.25em και ευρύτερες, χρησιμοποιήστε διάταξη πλέγματος με καθορισμένες στήλες και σειρές. Στυλιάστε τους τίτλους με επάνω περίγραμμα, τοποθετήστε τις μετα-πληροφορίες σχετικά με επάνω πληρωμή και προσαρμόστε τη μορφοποίηση standfirst: μειώστε το κάτω περιθώριο, ορίστε το μέγεθος γραμματοσειράς στοιχείων λίστας σε 20px, στυλιάστε τους συνδέσμους με υπογραμμίσεις και συγκεκριμένα χρώματα και προσθέστε ένα επάνω περίγραμμα στην πρώτη παράγραφο εκτός από οθόνες 71.25em και πάνω όπου αφαιρείται. Τοποθετήστε εικόνες με αριστερό περιθώριο και περιορίστε τα εν σειρά στοιχεία σε πλάτος 630px. Σε οθόνες 71.25em και ευρύτερες, προσαρμόστε τις στήλες πλέγματος αναλόγως.
Η διάταξη χρησιμοποιεί ένα πλέγμα με στήλες και σειρές που ορίζονται για διαφορετικά μεγέθη οθόνης. Για μεσαίες οθόνες, οι στήλες χωρίζονται σε ενότητες για τον τίτλο, την επικεφαλίδα, τις μετα-πληροφορίες, το standfirst και το πορτρέτο, με συγκεκριμένα ύψη σειρών. Σε μεγαλύτερες οθόνες, η δομή της στήλης προσαρμόζεται και τα μεγέθη των σειρών αλλάζουν αναλογικά.
Μια λεπτή γραμμή εμφανίζεται πάνω από τις μετα-πληροφορίες και το κείμενο standfirst έχει μια κάθετη γραμμή στα αριστερά του σε μεσαίες οθόνες, μετατοπίζοντας ελαφρώς σε μεγαλύτερες οθόνες. Οι επικεφαλίδες έχουν ένα μέγιστο πλάτος και μέγεθος γραμματοσειράς που αυξάνεται σε μεγαλύτερες οθόνες, ενώ οι ετικέτες λαμβάνουν μικρή επάνω πληρωμή.
Τα κοινωνικά και σχολιασμού στοιχεία στην ενότητα μετα-πληροφοριών μοιράζονται το ίδιο χρώμα περιγράμματος και ορισμένα στοιχεία κρύβονται. Το κείμενο standfirst στυλιάζεται με συγκεκριμένο βάρος γραμματοσειράς, μέγεθος και πληρωμή και τοποθετείται με αριστερό περιθώριο και πληρωμή.
Το κύριο περιεχόμενο πολυμέσων τοποθετείται στην περιοχή πλέγματος πορτρέτου, με πλήρες πλάτος και προσαρμοσμένα περιθώρια σε διάφορες συσκευές, εξαφανίζοντας σε μεγαλύτερες οθόνες. Οι λεζάντες ορίζονται σε απόλυτη τοποθέτηση, αν και ο κώδικας είναι ατελής.
Η λεζάντα για εικόνες τοποθετείται στο κάτω μέρος με πληρωμή, ένα χρώμα φόντου και χρώμα κειμένου που ορίζονται σε προσαρμοσμένες ιδιότητες. Εκτείνεται σε πλήρες πλάτος χωρίς περιθώριο στο κάτω μέρος και έχει ένα ελάχιστο ύψος. Μέσα στην λεζάντα, το πρώτο span κρύβεται, ενώ το δεύτερο είναι ορατό και καταλαμβάνει το μεγαλύτερο μέρος του πλάτους, με το εικονίδιό του να ταιριάζει με το χρώμα του περιγράμματος.
Σε μεγαλύτερες οθόνες, η πληρωμή της λεζάντας αυξάνεται. Μπορεί να κρυφθεί μειώνοντας την αδιαφάνειά της. Ένα κουμπί για εναλλαγή της λεζάντας τοποθετείται κάτω δεξιά, με κυκλικό φόντο και ένα κλιμακωμένο εικονίδιο, προσαρμόζοντας ελαφρώς τη θέση του σε ευρύτερες οθόνες.
Για διαδραστικό περιεχόμενο, η κύρια στήλη έχει προσαρμοσμένη απόσταση και οι επικεφαλίδες περιορίζονται σε πλάτος. Σε iOS και Android, η υποστήριξη σκοτεινής λειτουργίας αλλάζει τα χρώματα φόντου και δυνατοτήτων, με τα χρώματα πυλώνων να αλλάζουν σε σκοτεινή λειτουργία.
Επιπλέον, σε αυτές τις κινητές πλατφόρμες, το πρώτο γράμμα της πρώτης παραγράφου μετά από συγκεκριμένα στοιχεία στυλιάζεται με δευτερεύον χρώμα, οι κεφαλίδες άρθρων δεν έχουν ύψος και τα περιτυλίγματα επίπλων έχουν μειωμένη πληρωμή με ετικέτες μέσα τους.
Για συσκευές iOS και Android, τα ακόλουθα στυλ ισχύουν για άρθρα δυνατοτήτων, τυπικά και σχολίων:
- Οι ετικέτες περιεχομένου χρησιμοποιούν έντονες γραμματοσειρές Guardian ή Georgia σε συγκεκριμένο χρώμα και κεφαλαιοποιούνται.
- Οι επικεφαλίδες είναι 32px, έντονες, έχουν 12px κάτω πληρωμή και είναι σκούρο γκρι.
- Οι εικόνες τοποθετούνται σχετικά, εκτείνονται σε σχεδόν πλήρες πλάτος οθόνης και προσαρμόζουν το ύψος αυτόματα.
- Τα στοιχεία εικόνας έχουν διαφανή φόντα και ταιριάζουν με το πλάτος οθόνης.
- Οι ενότητες standfirst έχουν επάνω και κάτω πληρωμή με offset δεξιού περιθωρίου.
- Οι παράγραφοι standfirst μοιράζονται αυτές τις ρυθμίσεις πληρωμής και περιθωρίου.
Για το κείμενο standfirst, χρησιμοποιήστε την οικογένεια γραμματοσειρών: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif.
Σε συσκευές iOS και Android, μέσα σε εμπορευματοκιβώτια άρθρων δυνατοτήτων, τυπικών ή σχολίων, οι σύνδεσμοι στο standfirst πρέπει να έχουν το νέο χρώμα πυλώνα, καμία εικόνα φόντου, υπογραμμισμένο κείμενο με offset 6px και χρώμα περιγράμματος που ταιριάζει με το περίγραμμα κεφαλίδας, χωρίς κανένα κάτω περίγραμμα. Όταν αιωρούνται, το χρώμα της υπογράμμισης πρέπει να αλλάζει στο νέο χρώμα πυλώνα.
Επίσης, σε αυτά τα εμπορευματοκιβώτια και στα δύο iOS και Android, η ενότητα μετα-πληροφοριών δεν πρέπει να έχει περιθώριο. Στοιχεία όπως η γραμμή δημιουργού, ονόματα συγγραφέων και σχετικοί σύνδεσμοι πρέπει να στυλιάζονται αναλόγως.
Για συσκευές Android και iOS, το όνομα του συγγραφέα και η γραμμή δημιουργού σε ενότητες μετα-πληροφοριών άρθρων εμφανίζονται χρησιμοποιώντας το νέο χρώμα πυλώνα.
Και στα δύο Android και iOS, η περιοχή διάφορων μετα-πληροφοριών σε άρθρα δυνατοτήτων, τυπικά και σχολίων δεν έχει πληρωμή και οποιαδήποτε εικονίδια SVG μέσα της χρησιμοποιούν το νέο χρώμα πυλώνα για τη γραμμή τους.
Το κουμπί λεζάντας σε στοιχεία βιτρίνας στυλιάζεται ως εύκαμπτο εμπορευματοκιβώτιο, κεντραρισμένο με 5px πληρωμή, 28px και στις δύο διαστάσεις και τοποθετημένο 14px από τη δεξιά άκρη.
Το κύριο σώμα άρθρων δυνατοτήτων, τυπικών και σχολίων έχει 12px πληρωμή στις αριστερές και δεξιές πλευρές.
Μη μικρογραφίες, μη εμβαπτιστικές εικόνες στο σώμα του άρθρου εκτείνονται σε πλήρες πλάτος θύρας προβολής μείον 24px και το πλάτος μπάρας κύλισης, με αυτόματο ύψος και χωρίς περιθώριο, ενώ οι λεζάντες τους...
Για συσκευές iOS και Android, οι εμβαπτιστικές εικόνες σε άρθρα δυνατοτήτων, τυπικά και σχολίων θα εκτείνονται σε πλήρες πλάτος θύρας προβολής, λαμβάνοντας υπόψη τη μπάρα κύλισης.
Το παρατιθέμενο κείμενο σε αυτά τα άρθρα θα χρησιμοποιεί το καθορισμένο χρώμα πυλώνα για το διακοσμητικό του στοιχείο.
Οι σύνδεσμοι μέσα στο κείμενο του άρθρου θα εμφανίζονται στο πρωτεύον χρώμα πυλώνα, θα εμφανίζουν μια υπογράμμιση τοποθετημένη 6px κάτω από το κείμενο και θα χρησιμοποιούν το χρώμα περιγράμματος κεφαλίδας για την υπογράμμιση. Σε αιώρηση, η υπογράμμιση θα αλλάζει στο νέο χρώμα πυλώνα.
Σε σκοτεινή λειτουργία, η περιοχή κεφαλίδας άρθρου θα έχει σκούρο γκρι φόντο. Οι ετικέτες θα υιοθετήσουν το νέο χρώμα πυλώνα, ενώ οι επικεφαλίδες και το κείμενο standfirst θα χρησιμοποιούν το χρώμα περιγράμματος κεφαλίδας. Το φόντο της επικεφαλίδας θα είναι διαφανές και οποιοιδήποτε σύνδεσμοι στο standfirst θα στυλιάζονται συνεπώς με το υπόλοιπο κείμενο.
Για συσκευές iOS και Android, οι ακόλουθοι κανόνες στυλισμού ισχύουν για διάφορα εμπορευματοκιβώτια άρθρων:
- Οι σύνδεσμοι στην ενότητα standfirst και οι γραμμές δημιουργού χρωματίζονται χρησιμοποιώντας τη μεταβλητή νέου χρώματος πυλώνα.
- Τα εικον
