Αυτός ο κώδικας CSS ορίζει μια προσαρμοσμένη οικογένεια γραμματοσειρών με το όνομα "Guardian Headline Full" με πολλαπλά βάρη και στυλ γραμματοσειράς. Περιλαμβάνει βάρη light, regular, medium και semibold, το καθένα τόσο σε κανονικές όσο και σε πλάγιες εκδόσεις. Για κάθε στυλ, ο κώδικας καθορίζει τρεις διαφορετικές μορφές αρχείων γραμματοσειράς (woff2, woff και ttf) που φιλοξενούνται στους διακομιστές του Guardian, διασφαλίζοντας ευρεία συμβατότητα με προγράμματα περιήγησης.
@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://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;
}
@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-cΓια διαδραστικές στήλες περιεχομένου, προστίθεται αριστερό περίγραμμα με συγκεκριμένη τοποθέτηση και z-index. Σε μεγαλύτερες οθόνες, η θέση του περιγράμματος προσαρμόζεται ελαφρώς. Μέσα σε αυτές τις στήλες, τα στοιχεία atom δεν έχουν περιθώρια πάνω ή κάτω αλλά περιλαμβάνουν padding. Όταν μια παράγραφος ακολουθεί ένα στοιχείο atom, το padding αφαιρείται και προστίθενται περιθώρια αντ' αυτού. Τα inline στοιχεία περιορίζονται σε μέγιστο πλάτος.
Για εικόνες με ρόλο inline, έχουν επίσης μέγιστο πλάτος σε μεσαίου μεγέθους οθόνες και άνω.
Προσαρμοσμένες ιδιότητες ορίζουν διάφορα χρώματα για στοιχεία όπως datelines, κεφαλίδες, λεζάντες και features. Το βασικό pillar χρώμα προεπιλέγεται στο χρώμα του feature εάν δεν έχει οριστεί.
Τα στοιχεία atom μέσα σε διαδραστικές στήλες ή γενικά δεν έχουν padding. Η πρώτη παράγραφος μετά από συγκεκριμένα στοιχεία ή οριζόντιες γραμμές σε διάφορα σώματα περιεχομένου λαμβάνει επιπλέον padding στην κορυφή.
Επιπλέον, το πρώτο γράμμα αυτών των παραγράφων στυλιζάρεται ως drop cap με συγκεκριμένη γραμματοσειρά, μέγεθος, βάρος και χρώμα, χρησιμοποιώντας προσαρμοσμένες ιδιότητες για το χρωματισμό.Για παραγράφους που ακολουθούν οριζόντιες γραμμές σε συγκεκριμένες περιοχές περιεχομένου, αφαιρέστε το επάνω padding.
Περιορίστε το πλάτος των pullquote στα 620px σε σώματα άρθρων, διαδραστικών, σχολίων και features.
Για λεζάντες στοιχείων showcase σε κύριο περιεχόμενο και κοντέινερ άρθρων, ορίστε τη θέση σε static, το πλάτος στο 100% και το μέγιστο πλάτος στα 620px.
Τα στοιχεία immersive θα πρέπει να εκτείνονται σε πλήρες πλάτος viewport μείον τη γραμμή κύλισης. Σε οθόνες έως 71.24em, περιορίστε το πλάτος τους στα 978px. Για λεζάντες σε αυτές τις οθόνες, προσθέστε 10px οριζόντιου padding, αυξάνοντας σε 20px σε οθόνες μεταξύ 30em και 71.24em.
Σε οθόνες μεσαίου εύρους (46.25em έως 61.24em), περιορίστε τα immersive στοιχεία στα 738px. Σε μικρότερες οθόνες (έως 46.24em), αφαιρέστε το αριστερό περιθώριο, ευθυγραμμίστε στην αριστερή άκρη και προσθέστε αρνητικό αριστερό περιθώριο 10px (20px σε οθόνες 30em και ευρύτερες). Οι λεζάντες σε αυτές τις μικρότερες οθόνες λαμβάνουν 20px οριζόντιου padding.
Για το furniture wrapper σε μεγάλες οθόνες (61.25em και άνω), χρησιμοποιήστε ένα CSS grid με καθορισμένες στήλες και σειρές. Στυλιάστε το πρώτο παιδί των κεφαλίδων με ένα πάνω περίγραμμα. Τοποθετήστε το τμήμα meta σχετικά με επάνω padding και χωρίς δεξί περιθώριο. Σε τμήματα standfirst, προσαρμόστε τα κάτω περιθώρια, ορίστε το μέγεθος γραμματοσειράς των στοιχείων λίστας σε 20px και στυλιάστε τους συνδέσμους με υπογραμμίσεις (χρησιμοποιώντας ένα προσαρμοσμένο χρώμα για την υπογράμμιση που αλλάζει στο hover). Η πρώτη παράγραφος στο standfirst λαμβάνει ένα πάνω περίγραμμα και κανένα κάτω padding, αν και αυτό το περίγραμμα αφαιρείται σε πολύ μεγάλες οθόνες (71.25em και άνω).
Επίσης, για εικόνες μέσα στο wrapper, αφαιρέστε το αριστερό περιθώριο και ορίστε ένα μέγιστο πλάτος 630px για inline στοιχεία. Στις μεγαλύτερες οθόνες (71.25em και άνω), οι στήλες του πλέγματος ορίζονται ξεκινώντας από τίτλο, κεφαλίδα και meta.Η διάταξη χρησιμοποιεί ένα πλέγμα με στήλες και σειρές που ορίζονται για διαφορετικά μεγέθη οθονών. Σε μεγαλύτερες οθόνες, το πλέγμα έχει τρεις στήλες για τους τίτλους, τις κεφαλίδες και τα τμήματα meta, πέντε στήλες για το standfirst και οκτώ στήλες για το πορτρέτο, με σειρές αναλογικού μεγέθους. Σε μεσαίου μεγέθους οθόνες, το πλέγμα προσαρμόζεται σε δύο, πέντε και επτά στήλες αντίστοιχα, με συγκεκριμένα ύψη σειρών.
Το στυλ περιλαμβάνει ένα πάνω περίγραμμα για το τμήμα meta και ένα αριστερό περίγραμμα για το standfirst, και τα δύο χρησιμοποιώντας μια προσαρμοσμένη μεταβλητή χρώματος. Οι κεφαλίδες έχουν μέγιστο πλάτος και μέγεθος γραμματοσειράς που αλλάζει με το μέγεθος της οθόνης, γίνοντας μεγαλύτερες σε ευρύτερες οθόνες. Μερικά στοιχεία, όπως κοινή χρήση στα μέσα κοινωνικής δικτύωσης και τμήματα σχολίων, έχουν περιγράμματα που ταιριάζουν με το χρώμα της κεφαλίδας, ενώ άλλα είναι κρυμμένα σε συγκεκριμένες συσκευές.
Το κείμενο του standfirst έχει συγκεκριμένες ιδιότητες padding και γραμματοσειράς, και η κύρια περιοχή πολυμέσων τοποθετείται μέσα στο πλέγμα, με το πλάτος της να προσαρμόζεται σε μικρότερες οθόνες για να λάβει υπόψη τις γραμμές κύλισης και τα περιθώρια. Οι λεζάντες τοποθετούνται απόλυτα.Η λεζάντα της εικόνας του furniture wrapper τοποθετείται απόλυτα στο κάτω μέρος χωρίς κάτω περιθώριο, με padding, χρώμα φόντου και χρώμα κειμένου. Το πλάτος της ορίζεται στο 100% με ελάχιστο ύψος 46 pixel. Μέσα στη λεζάντα, το πρώτο span είναι κρυμμένο, ενώ το δεύτερο εμφανίζεται και περιορίζεται στο 90% του μέγιστου πλάτους. Το κείμενο της λεζάντας και τα εικονίδια SVG χρησιμοποιούν μια συγκεκριμένη μεταβλητή χρώματος.
Σε οθόνες ευρύτερες από 30em, το οριζόντιο padding της λεζάντας αυξάνεται. Ένας αφοσιωμένος κουμπί λεζάντας τοποθετείται απόλυτα κάτω δεξιά, με κυκλικό φόντο και κλιμακούμενο εικονίδιο SVG, προσαρμόζοντας τη δεξιά του θέση σε μεγαλύτερες οθόνες.
Για διαδραστικές κύριες στήλες σε πολύ ευρείες οθόνες, ένα ψευδοστοιχείο προσαρμόζει την κορυφή και το ύψος του. Οι επικεφαλίδες μέσα σε αυτές τις στήλες έχουν μέγιστο πλάτος.
Σε iOS και Android, ορίζονται μεταβλητές χρώματος dark mode, συμπεριλαμβανομένου ενός χρώματος feature που αλλάζει σε dark mode. Συγκεκριμένα κοντέινερ άρθρων σε αυτές τις πλατφόρμες στυλιάζουν το πρώτο γράμμα της πρώτης παραγράφου μετά από συγκεκριμένα στοιχεία με δευτερεύον χρώμα, ορίζουν το ύψος της κεφαλίδας του άρθρου στο μηδέν, προσαρμόζουν το padding για το furniture wrapper και κρύβουν τις ετικέτες περιεχομένου μέσα σε αυτό.Για συσκευές iOS και Android, τα ακόλουθα στυλ ισ
