Αυτός ο κώδικας CSS ορίζει μια προσαρμοσμένη οικογένεια γραμματοσειρών με την ονομασία "Guardian Headline Full" με πολλαπλά βάρη και στυλ γραμματοσειράς. Περιλαμβάνει ελαφρύ, κανονικό, μεσαίο και ημιέντονο βάρος, το καθένα τόσο σε κανονικό όσο και σε πλάγιο στυλ. Τα αρχεία γραμματοσειρών παρέχονται σε μορφές WOFF2, WOFF και TrueType, φιλοξενούμενα στον διακομιστή πόρων του Guardian.
Η οικογένεια γραμματοσειρών Guardian Headline Full περιλαμβάνει πολλά στυλ, καθένα διαθέσιμο σε πολλαπλές μορφές (WOFF2, WOFF και TTF). Τα στυλ είναι:
- Έντονο (βάρος 700, κανονικό στυλ)
- Έντονο Πλάγιο (βάρος 700, πλάγιο στυλ)
- Μαύρο (βάρος 900, κανονικό στυλ)
- Μαύρο Πλάγιο (βάρος 900, πλάγιο στυλ)
- Ελαφρύ (βάρος 300, κανονικό στυλ)
- Ελαφρύ Πλάγιο (βάρος 300, πλάγιο στυλ)
- Κανονικό (βάρος 400, κανονικό στυλ)
- Κανονικό Πλάγιο (βάρος 400, πλάγιο στυλ)
Επιπλέον, η γραμματοσειρά Guardian Titlepiece είναι διαθέσιμη σε Έντονο (βάρος 700, κανονικό στυλ).
Η οικογένεια γραμματοσειρών "Guardian Headline Full" περιλαμβάνει πολλαπλά αρχεία γραμματοσειρών σε διάφορα βάρη και στυλ. Κάθε γραμματοσειρά είναι διαθέσιμη σε μορφές WOFF2, WOFF και TrueType, φιλοξενούμενες στις καθορισμένες URLs. Τα βάρη κυμαίνονται από 400 (κανονικό) έως 900 (μαύρο), με παρουσία και κανονικού και πλάγιου στυλ για κάθε βάρος.
@font-face {
font-family: Guardian Headline;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Guardian Titlepiece;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-column-gap: 0px;
grid-template-columns: 100%;
grid-template-areas:
"media"
"title"
"headline"
"standfirst"
"lines"
"meta"
"body";
}
@media (min-width: 30em) {
#article-body>div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive>div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
padding: 0 20px;
max-width: 620px;
}
}
@media (min-width: 46.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 100%;
grid-column-gap: 10px;
grid-template-areas:
"title"
"headline"
"standfirst"
"media"
"lines"
"meta"
"body";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: 80px;
}
}
@media (min-width: 61.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 620px 300px;
grid-template-areas:
"title right-column"
"headline right-column"
"standfirst right-column"
"media right-column"
"lines right-column"
"meta right-column"
"body right-column"
". right-column";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: unset;
}
}
@media (min-width: 71.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 140px 1px 620px 300px;
grid-template-areas:
"title border headline right-column"
". border standfirst right-column"
". border media right-column"
". border body right-column"
". border . right-column";
}
#article-body>div .content--interactive-grid .content__standfirst,
.content--interactive>div .content--interactive-grid .content__standfirst,
#comment-body .content--interactive-grid .content__standfirst,
[data-gu-name=body] .content--interactive-grid .content__standfirst,
#feature-body .content--interactive-grid .content__standfirst {
padding-bottom: 0;
}
#article-body>div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive>div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
/ Η στυλιστική των λεζάντων συνεχίζεται εδώ /
}
}
Για εμβαπτισμένες λεζάντες και περιεχόμενο διαδραστικού πλέγματος, το padding ορίζεται σε 4 pixels στην κορυφή και 0 αλλού. Τα στοιχεία με τα ονόματα "lines" και "meta" εντός διαδραστικών πλεγμάτων τοποθετούνται σε μια συγκεκριμένη περιοχή πλέγματος. Τα στοιχεία "lines" έχουν ύψος που προσαρμόζεται στο περιεχόμενό τους και ένα πάνω περιθώριο 5 pixels, ενώ τα στοιχεία "meta" έχουν ένα πάνω περιθώριο 18 pixels.
Σε οθόνες πλατύτερες από 81.25 em, τα διαδραστικά πλέγματα χρησιμοποιούν μια διάταξη πέντε στηλών με σταθερά και ευέλικτα πλάτη.
Σε συσκευές iOS και Android, οι κεφαλίδες άρθρων χρησιμοποιούν συγκεκριμένες γραμματοσειρές και βάρη για κείμενο standfirst, ετικέτες τμημάτων και πληροφορίες συγγραφέων. Οι ετικέτες τμημάτων εμφανίζονται με κεφαλαία γράμματα, και οι γραμμές διαχωρισμού έχουν προσαρμοσμένο padding. Οι εικόνες σχημάτων έχουν διαφανή φόντα, και οι εικόνες μετατοπίζονται ελαφρώς προς τα δεξιά. Οι τίτλοι έχουν διαφανή φόντα, προσαρμοσμένο padding και χρησιμοποιούν μέγεθος γραμματοσειράς 24 pixels με ύψος γραμμής 115%.
Για Android, οι κύριοι και δευτερεύοντες τίτλοι ορίζονται να εμφανίζονται ως μπλοκ. Τόσο σε iOS όσο και σε Android, οι δευτερεύοντες τίτλοι στυλιζάρονται με ελαφρύ βάρος γραμματοσειράς, αριστερή στοίχιση και ισορροπημένη αναδίπλωση κειμένου.
Τα article kickers δεν έχουν padding, και το αντίγραφό τους είναι κρυφό.
Τα στοιχεία πληροφοριών συγγραφέων και ημερομηνίας δημοσίευσης χρησιμοποιούν γραμματοσειρά 17px, κανονικό βάρος και ύψος γραμμής 130%. Το κείμενο του συγγραφέα και οι σύνδεσμοι προς τον συγγραφέα έχουν χρώμα #707070.
Οι παράγραφοι standfirst ορίζονται σε 20px, κανονικό στυλ, ελαφρύ βάρος και ύψος γραμμής 115%. Οι σύνδεσμοι εντός παραγράφων standfirst είναι έντονοι, με χρώμα #707070, με κάτω περίγραμμα και χωρίς εικόνα φόντου.
Το κείμενο των τίτλων έχει χρώμα #dcdcdc.
Οι εικόνες και οι εναποκείμενες τους έχουν πλάτος 100vw μείον 20px, με αυτόματο ύψος και μέγιστο πλάτος 620px. Τα εσωτερικά στοιχεία σχημάτων έχουν το ύψος τους απροσδιόριστο. Οι εικόνες προβολής έχουν μέγιστο πλάτος 280px.
Ορισμένα τμήματα και πλαϊνά που ακολουθούν την πλοήγηση είναι κρυφά. Τα στοιχεία atom δεν έχουν περιθώριο ή padding.
Τα στοιχεία προβολής και τα περιεχόμενά τους έχουν μέγιστο πλάτος 210px, που αυξάνεται σε 260px για viewports πλατύτερα από 61.25em. Τα spans λεζάντων εντός εσωτερικών και στοιχείων προβολής στυλιζάρονται ανάλογα.
Για λεζάντες εντός του σώματος, το κείμενο span ορίζεται σε 14px, ανοιχτό γκρι χρώμα (#707070) και εμφανίζεται inline. Το πρώτο span σε λεζάντες για εσωτερικά και στοιχεία προβολής ορίζεται σε inline-block.
Σε οθόνες πλατύτερες από 71.25em, οι λεζάντες για εσωτερικά και στοιχεία προβολής τοποθετούνται σχετικά και το πλάτος τους επαναφέρεται.
Για άρθρα με διαδραστικό περιεχόμενο, η διάταξη χρησιμοποιεί περιοχές πλέγματος με ονόματα "header", "headline", "standfirst", "lines", "meta" και "body". Σε μεγαλύτερες οθόνες (71.25em και άνω), η διάταξη πλέγματος αλλάζει σε τρεις στήλες με περιοχές για "header", "meta", "border", "standfirst" και "body". Το περιθώριο της κύριας στήλης αφαιρείται, το αριστερό περίγραμμα κρύβεται και το πλάτος παραγράφου ορίζεται σε 620px.
Τα στοιχεία τίτλων έχουν συγκεκριμένες ρυθμίσεις γραμματοσειράς: Guardian Headline ή παρόμοιες γραμματοσειρές, μέγεθος 24px, ελαφρύ βάρος (300) και ανοιχτό γκρι χρώμα (#dcdcdc). Το padding είναι 0–10px σε μικρές οθόνες, 0–20px σε μεσαίες οθόνες (30em και άνω) και αφαιρείται σε μεγάλες οθόνες (71.25em και άνω).
Οι γραμμές διαχωρισμού και οι γραμμές κρύβονται. Σε μεγάλες οθόνες, η κεφαλίδα του άρθρου τοποθετείται απόλυτα 20px από τα αριστερά.
Οι σύνδεσμοι της κεφαλίδας του άρθρου χρησιμοποιούν μέγεθος γραμματοσειράς 17px και κανονικό στυλ. Το πάνω padding της κεφαλίδας είναι 2px, και οι ετικέτες έχουν πάνω περίγραμμα και padding (0–10px σε μικρές οθόνες, 0–20px σε μεσαίες οθόνες). Σε μεγαλύτερες οθόνες (46.25em και άνω), το πάνω περίγραμμα αφαιρείται, και το padding ορίζεται σε 0 στις μεγαλύτερες οθόνες (71.25em και άνω).
Αυτός ο κώδικας CSS στυλιζάρει στοιχεία εντός ενός διαδραστικού άρθρου.
Για τίτλους άρθρων και συνδέσμους, ορίζει το ύψος γραμμής στο 115% και το χρώμα κειμένου στο #ff5943. Όταν ο δρομέας περνάει πάνω από τους συνδέσμους τίτλων, το χρώμα της υπογράμμισης αλλάζει σε #dcdcdc.
Το standfirst (περίληψη άρθρου) χρησιμοποιεί συγκεκριμένες γραμματοσειρές, γκρι χρώμα (#606060), μέγεθος γραμματοσειράς 24px, κανονικό στυλ, βάρος 400 και ύψος γραμμής 115%. Έχει padding που προσαρμόζεται ανάλογα με το πλάτος οθόνης: 2px 10px για μικρότερες οθόνες, 2px 20px για οθόνες 30em και πλατύτερες, και κανένα padding για οθόνες 71.25em και άνω. Οι σύνδεσμοι στο standfirst είναι #707070 και λαμβάνουν ένα κάτω περίγραμμα 2px όταν ο δρομέας περνάει από πάνω.
Τα κουμπιά κοινωνικών δικτύων στο τμήμα meta δεν έχουν εφέ μετάβασης. Όταν ο δρομέας περνάει από πάν
