Η οικογένεια γραμματοσειρών Guardian Headline Full περιλαμβάνει διάφορα στυλ, καθένα με διαφορετικά βάρη και πλάγιες γραφές. Η ελαφριά έκδοση (βάρος 300) διατίθεται τόσο σε κανονικό όσο και σε πλάγιο στυλ, όπως και η κανονική έκδοση (βάρος 400). Τα στυλ medium (βάρος 500) και semibold (βάρος 600) έχουν επίσης επιλογές κανονικού και πλάγιου στυλ. Κάθε αρχείο γραμματοσειράς είναι διαθέσιμο σε μορφές WOFF2, WOFF και TrueType από τους διακομιστές του Guardian.
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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, 0px));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width, 0px)) !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 {
border-left: 1px solid #dcdcdc;
}
}
Η κύρια στήλη διαδραστικού περιεχομένου έχει συγκεκριμένο στυλ για τα στοιχεία. Τα στοιχεία μέσα σε αυτή τη στήλη δεν έχουν περιθώριο πάνω ή κάτω αλλά περιλαμβάνουν padding. Όταν μια παράγραφος ακολουθεί ένα στοιχείο, ο χώρος προσαρμόζεται ανάλογα. Τα ενσωματωμένα στοιχεία περιορίζονται σε μέγιστο πλάτος 620 pixel.
Για μεγαλύτερες οθόνες, οι ενσωματωμένες εικόνες περιορίζονται επίσης σε 620 pixel. Ειδικό στυλ εφαρμόζεται σε βίντεο loops, συμπεριλαμβανομένης της τοποθέτησης κουμπιών και της θέσης των λεζάντων. Τα self-hosted βίντεο ορίζονται σε μέγιστο πλάτος 620 pixel με κεντρικά περιθώρια, ενώ τα εμβαπτισμένα βίντεο επεκτείνονται σε πλήρες πλάτος με προσαρμοσμένα περιθώρια σε μεγαλύτερες οθόνες.
Οι μεταβλητές χρώματος ορίζουν το θέμα, όπως το χρώμα της ημερομηνίας, των συνόρων της κεφαλίδας και των λεζάντων. Στη σκοτεινή λειτουργία, αυτά τα χρώματα προσαρμόζονται σε μια πιο σκοτεινή παλέτα. Η πρώτη παράγραφος μετά από συγκεκριμένα στοιχεία λαμβάνει επιπλέον padding στην κορυφή, και το πρώτο γράμμα της πρώτης παραγράφου μπορεί να στυλιστεί διακριτικά.
Ο κώδικας CSS ορίζει στυλ για drop caps, pullquotes και διάφορα στοιχεία διάταξης σε διαφορετικές ενότητες μιας ιστοσελίδας, όπως άρθρα, σχόλια και features. Ορίζει συγκεκριμένες γραμματοσειρές, μεγέθη και χρώματα για το πρώτο γράμμα των παραγράφων, προσαρμόζει το πλάτος και τη θέση των εμβαπτισμένων και showcase στοιχείων, και δημιουργεί μια responsive διάταξη πλέγματος για μεγαλύτερες οθόνες. Τα στυλ περιλαμβάνουν επίσης media queries για να προσαρμόζουν τη διάταξη για διαφορετικά μεγέθη οθονών.
Το furniture wrapper ορίζει το περιεχόμενο standfirst να έχει σχετική θέση με padding 2 pixel στην κορυφή και χωρίς δεξί περιθώριο. Μέσα στο standfirst, τα στοιχεία λίστας έχουν μέγεθος γραμματοσειράς 20 pixel, και οι σύνδεσμοι δεν έχουν περίγραμμα, δεν έχουν εικόνα φόντου, έχουν υπογράμμιση με offset 6 pixel και χρώμα από την custom ιδιότητα `--headerBorder` (προεπιλογή `#dcdcdc`). Σε hover, η υπογράμμιση του συνδέσμου αλλάζει στο χρώμα που ορίζεται από το `--new-pillar-colour`.
Για μεγαλύτερες οθόνες (61.25em και πάνω), οι εικόνες δεν έχουν αριστερό περιθώριο, και τα ενσωματωμένα στοιχεία με συγκεκριμένο ρόλο περιορίζονται σε μέγιστο πλάτος 630 pixel. Σε 71.25em και πάνω, η διάταξη χρησιμοποιεί ένα πλέγμα με καθορισμένες στήλες και σειρές. Μια διακοσμητική γραμμή εμφανίζεται πριν από την ενότητα meta, και μια κάθετη γραμμή προστίθεται πριν από το standfirst. Τα περίγραμμα των παραγράφων αφαιρούνται σε αυτό το breakpoint.
Σε 81.25em, το πλέγμα προσαρμόζεται για να περιλαμβάνει περισσότερες στήλες, και οι διακοσμητικές γραμμές επανατοποθετούνται.
Οι τίτλοι έχουν βάρος γραμματοσειράς 600 και μέγιστο πλάτος 620 pixel, με μέγεθος γραμματοσειράς 32 pixel. Σε μεγαλύτερες οθόνες (71.25em και πάνω), το μέγεθος γραμματοσειράς του τίτλου αυξάνεται σε 50 pixel, και το μέγιστο πλάτος μειώνεται σε 540 pixel.
Για μεσαίες οθόνες (46.25em και πάνω), στοιχεία με την κλάση `keyline-4` ή το χαρακτηριστικό `data-gu-name=lines` δεν έχουν δεξί περιθώριο. Σε μεγαλύτερες οθόνες (61.25em και πάνω), αυτά τα στοιχεία κρύβονται. Τα SVG strokes τους χρησιμοποιούν το χρώμα `--headerBorder`.
Αυτός ο κώδικας CSS ορίζει στυλ για τη διάταξη μιας ιστοσελίδας, ιδιαίτερα για ένα furniture-themed wrapper. Ορίζει διάφορες ιδιότητες για στοιχεία όπως μετα-πληροφορίες, κείμενο standfirst, κύρια πολυμέσα και λεζάντες. Τα στυλ περιλαμβάνουν προσαρμογές για περιθώρια, padding, χρώματα και θέση, με συγκεκριμένους κανόνες για διαφορετικά μεγέθη οθονών χρησιμοποιώντας media queries. Ο σχεδιασμός χρησιμοποιεί custom μεταβλητές CSS για χρώματα, όπως χαρακτηριστικά σκοτεινής λειτουργίας και αποχρώσεις φόντου, και διασφαλίζει responsive συμπεριφορά σε διάφορες συσκευές.
Ο κώδικας CSS στυλιζεί στοιχεία μέσα σε μια κλάση furniture-wrapper. Οι τίτλοι (h1) είναι έντονοι και ανοιχτό γκρι (#dcdcdc). Οι εικόνες σε τίτλους δεν έχουν περιθώριο στην κορυφή και έχουν ένα μικρό περιθώριο στο κάτω μέρος.
Για οθόνες πλατύτερες από 71.25em, μια έγχρωμη γραμμή εμφανίζεται πριν από την ενότητα meta. Το κείμενο και οι περιλήψεις στην ενότητα meta είναι ανοιχτό γκρι. Τα κουμπιά κοινωνικών δικτύων έχουν ένα έγχρωμο περίγραμμα και εικονίδιο, με το εικονίδιο και το κείμενο να αλλάζουν χρώμα σε hover.
Οι σύνδεσμοι στην ενότητα meta χρησιμοποιούν ένα χρώμα θέματος και διατηρούν αυτό το χρώμα σε hover, με υπογράμμιση στο ίδιο χρώμα. Στην ενότητα standfirst, οι σύνδεσμοι υπογραμμίζονται με μια ανοιχτή γκρι γραμμή που αλλάζει στο χρώμα του θέματος σε hover. Οι παράγραφοι και τα στοιχεία λίστας στο standfirst είναι ανοιχτό γκρι.
Σε οθόνες πλατύτερες από 61.25em, η πρώτη παράγραφος στο standfirst έχει ένα πάνω περίγραμμα, το οποίο αφαιρείται σε οθόνες πλατύτερες από 71.25em. Σε αυτές τις μεγαλύτερες οθόνες, μια έγχρωμη γραμμή εμφανίζεται επίσης πριν από το standfirst.
Για οθόνες πλατύτερες από 46.25em, το furniture-wrapper παίρνει ένα σκούρο φόντο και ένα δεξί περίγραμμα.
Το CSS ορίζει ένα `.furniture-wrapper` με ψευδο-στοιχεία που δημιουργούν sidebars. Αυτά προσαρμόζουν το πλάτος και τη θέση με βάση το μέγεθος της προβολής για να διατηρήσουν ένα κεντραρισμένο περιεχόμενο σταθερού πλάτους (738px, 978px, 1138px, 1298px) σε διαφορετικά breakpoints, λαμβάνοντας υπόψη το πλάτος της μπάρας κύλισης. Περίγραμμα και χρώματα φόντου εφαρμόζονται χρησιμοποιώντας custom μεταβλητές CSS.
Για τίτλους μέσα σε άρθρα, τα στοιχεία `h2` χρησιμοποιούν ελαφρύ βάρος γραμματοσειράς (200), αλλά αλλάζουν σε έντονο (700) εάν περιέχουν ένα στοιχείο `strong`.
Οι κανόνες `@font-face` φορτώνουν την οικογένεια γραμματοσειρών "Guardian Headline Full" σε διάφορα βάρη και στυλ (Light, Light Italic, Regular, Regular Italic) από τους διακομιστές του Guardian.
@font-face {
