Αυτός ο κώδικας CSS ορίζει μια προσαρμοσμένη οικογένεια γραμματοσειράς με την ονομασία "Guardian Headline Full" με πολλαπλά βάρη και στυλ γραμματοσειράς. Καθορίζει τα αρχεία γραμματοσειράς σε διαφορετικές μορφές (WOFF2, WOFF και TrueType) και τις διαδικτυακές τους τοποθεσίες για να τις κατεβάσει και να τις χρησιμοποιήσει το πρόγραμμα περιήγησης. Η γραμματοσειρά περιλαμβάνει βάρη light (300), regular (400), medium (500) και semibold (600), καθένα με κανονικά και πλάγια στυλ.
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.ttf) format("truetype");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf) format("truetype");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
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://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@media (min-width: 71.25em) {
.content__main-column--interactive {
margin-left: 160px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive {
margin-left: 240px;
}
}
.content__main-column--interactive .element-atom {
max-width: 620px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-atom {
max-width: 100%;
}
}
.content__main-column--interactive .element-showcase {
margin-left: 0;
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-showcase {
max-width: 620px;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-showcase {
max-width: 860px;
}
}
.content__main-column--interactive .element-immersive {
max-width: 1100px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-immersive {
width: calc(100vw - var(--scrollbar-width));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width)) !important;
}
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(-20px);
width: calc(100% + 60px);
}
}
@media (max-width: 71.24em) {
.content__main-column--interactive .element-immersive {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(0);
width: auto;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive .element-immersive {
max-width: 1260px;
}
}
.content__main-column--interactive p,
.content__main-column--interactive ul {
max-width: 620px;
}
.content__main-column--interactive:before {
position: absolute;
top: 0;
height: calc(100% + 15px);
min-height: 100px;
content: "";
}
@media (min-width: 71.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
left: -10px;
}
}
Για την διαδραστική κύρια στήλη, προστίθεται μια αριστερή περίγραμμα πριν από το περιεχόμενο, τοποθετημένη 11 pixels αριστερά. Τα στοιχεία μέσα σε αυτή τη στήλη δεν έχουν πάνω ή κάτω περιθώριο αλλά περιλαμβάνουν 12 pixels padding τόσο πάνω όσο και κάτω. Όταν μια παράγραφος ακολουθείται από ένα στοιχείο, το padding αφαιρείται και εφαρμόζονται περιθώρια 12 pixels. Τα εν σειρά στοιχεία περιορίζονται σε μέγιστο πλάτος 620 pixels, το οποίο ισχύει και για εν σειρά σχήματα σε οθόνες πλατύτερες από 61.25em.
Προσαρμοσμένες ιδιότητες ορίζουν χρώματα για διάφορα στοιχεία, όπως η ημερομηνία, η περίγραμμα κεφαλίδας, το κείμενο λεζάντας και το φόντο, με ένα χρώμα χαρακτηριστικού ρυθμισμένο σε κόκκινο και ένα νέο χρώμα πυλώνα που προεπιλέγει στο κύριο ή χαρακτηριστικό χρώμα. Τα στοιχεία με την κλάση atom δεν έχουν padding.
Για την πρώτη παράγραφο που ακολουθεί συγκεκριμένα στοιχεία ή μια οριζόντια γραμμή σε διαφορετικές περιοχές περιεχομένου, προστίθεται πάνω padding 14 pixels. Το πρώτο γράμμα αυτών των παραγράφων στυλιστικά με μεγάλη, έντονη, κεφαλαία γραμματοσειρά σε συγκεκριμένο χρώμα, επιπλέοντας αριστερά με περιθώριο και κάθετη στοίχιση.
Επιπλέον, οι παράγραφοι αμέσως μετά από μια οριζόντια γραμμή σε αυτές τις περιοχές δεν έχουν πάνω padding.
Τα pullquotes εντός συγκεκριμένων περιοχών περιεχομένου έχουν μέγιστο πλάτος 620 pixels.
Οι λεζάντες στοιχείων επίδειξης σε κύριο περιεχόμενο και κοντέινερ άρθρων τοποθετούνται στατικά με πλήρες πλάτος, επίσης περιορισμένες σε 620 pixels.
Τα εμβαπτισμένα στοιχεία εκτείνονται σε πλήρες πλάτος προβολής μείον την μπάρα κύλισης. Σε οθόνες έως 71.24em πλάτους, αυτά τα στοιχεία περιορίζονται σε 978 pixels, με padding λεζάντας 10px σε μικρότερες οθόνες και 20px σε μεσαίες. Μεταξύ 46.25em και 61.24em, το μέγιστο πλάτος είναι 738 pixels. Κάτω από 46.24em, τα εμβαπτισμένα στοιχεία ευθυγραμμίζονται στην αριστερή άκρη με προσαρμοσμένα περιθώρια και 20px padding λεζάντας σε μεσαίες οθόνες.
Για τους περιβάλλοντες επίπλων σε μεγαλύτερες οθόνες (61.25em και πάνω), χρησιμοποιείται διάταξη πλέγματος με καθορισμένες στήλες και σειρές. Οι τίτλοι διαθέτουν πάνω περίγραμμα, οι ενότητες meta έχουν πάνω padding, και τα στοιχεία standfirst περιλαμβάνουν στυλισμένους συνδέσμους με υπογραμμίσεις που αλλάζουν χρώμα upon hover. Αρχικά, η πρώτη παράγραφος στο standfirst έχει πάνω περίγραμμα, η οποία αφαιρείται σε πλατύτερες οθόνες (71.25em και πάνω). Τα σχήματα εντός του περιβάλλοντος δεν έχουν κάτω περιθώριο και έχουν αριστερή απόσταση, με εν σειρά στοιχεία περιορισμένα σε 630 pixels. Στις μεγαλύτερες οθόνες, το πλέγμα προσαρμόζει τη δομή της στήλης για καλύτερη διάταξη.
Η διάταξη χρησιμοποιεί ένα πλέγμα με συγκεκριμένες στήλες και σειρές για διαφορετικά μεγέθη οθόνης. Σε μεγαλύτερες οθόνες, το πλέγμα προσαρμόζεται για να έχει τρεις ίσες στήλες για τον τίτλο, την επικεφαλίδα και τις ενότητες meta, ακολουθούμενες από πέντε για το standfirst, και οκτώ για το πορτρέτο, με ύψη σειρών ρυθμισμένα ως κλάσματα. Μια λεπτή γραμμή εμφανίζεται πάνω από την ενότητα meta, και το standfirst έχει μια κάθετη γραμμή στην αριστερή του πλευρά.
Οι επικεφαλίδες είναι έντονες και αλλάζουν σε μέγεθος και πλάτος ανάλογα με την οθόνη: έως 620px πλάτος και 32px γραμματοσειρά σε μικρότερες οθόνες, και 540px πλάτος με 50px γραμματοσειρά σε μεγαλύτερες. Μερικές διακοσμητικές γραμμές κρύβονται σε μεγαλύτερες οθόνες, και τα στοιχεία κοινωνικής διαμοίρασης και σχολίων έχουν περιγράμματα που ταιριάζουν με το χρώμα της κεφαλίδας.
Το κείμενο standfirst είναι κανονικού βάρους, 20px σε μέγεθος, με padding στο κάτω μέρος, και μετατοπίζεται ελαφρώς προς τα αριστερά με αριστερό padding. Οι κύριες εικόνες media γεμίζουν το πλάτος και προσαρμόζουν τα περιθώρια για διαφορετικά μεγέθη οθόνης, με λεζάντες τοποθετημένες στο κάτω μέρος με χρώμα φόντου και προσαρμοσμένο χρώμα κειμένου. Σε πολύ μικρές οθόνες, τα media εκτείνονται σε πλήρες πλάτος προβολής μείον την μπάρα κύλισης.
Ο περιβάλλοντας επίπλων ορίζει ένα σκούρο φόντο και προσαρμόζει περιθώρια και padding για διαφορετικά μεγέθη οθόνης. Σε μεγαλύτερες οθόνες, προσθέτει διακοσμητικές πλαϊνές μπάρες. Οι επικεφαλίδες στυλιστικά με έντονο, ανοιχτό γκρι χρώμα κειμένου, και οι πληροφορίες meta χρησιμοποιούν παρόμοια χρώματα. Τα κουμπιά κοινωνικών μέσων διαθέτουν ένα διακριτικό χρώμα που αλλάζει upon hover, αλλάζοντας τα χρώματα κειμένου και φόντου για αντίθεση. Οι λεζάντες είναι κρυφμένες από προεπιλογή αλλά μπορούν να εναλλαχθούν με ένα κουμπί, και διάφορα στοιχεία προσαρμόζουν την ορατότητα και τη διάταξή τους με βάση το πλάτος οθόνης και άλλες συνθήκες.
Στοιχεία με την κλάση "furniture-wrapper" και τα παιδιά τους έχουν συγκεκριμένους κανόνες στυλ:
- Οι σύνδεσμοι ενότητας meta χρωματίζονται χρησιμοποιώντας μια προσαρμοσμένη ιδιότητα για το χρώμα του πυλώνα ή ένα χαρακτηριστικό σκοτεινής λειτουργίας, με το ίδιο χρώμα να εφαρμόζεται upon hover τόσο για το κείμενο όσο και για την υπογράμμιση.
- Οι σύνδεσμοι standfirst δεν έχουν περίγραμμα, χρησιμοποιούν το χρώμα του πυλώνα ή το χαρακτηριστικό σκοτεινής λειτουργίας για το κείμενο, αφαιρούν εικόνες φόντου, και διαθέτουν υπογραμμίσεις με offset 6px και χρώμα περιγράμματος κεφαλίδας. Upon hover, το χρώμα της υπογράμμισης αλλάζει στο χρώμα του πυλώνα ή το χαρακτηριστικό σκοτεινής λειτουργίας.
- Οι παράγραφοι και τα στοιχεία λίστας standfirst χρωματίζονται σε ανοιχτό γκρι (#dcdcdc).
- Για μεγαλύτερες οθόνες (min-width: 61.25em), η πρώτη παράγραφος στο standfirst έχει πάνω περίγραμμα, η οποία αφαιρείται σε ακόμα μεγαλύτερα σημεία διακοπής (min-width: 71.25em).
- Ψευδο-στοιχεία (:before και :after) χρησιμο
