Η οικογένεια γραμματοσειρών Guardian Headline Full περιλαμβάνει διάφορα στυλ, καθένα με διαφορετικά βάρη και πλάγια γραφή. Αυτές οι γραμματοσειρές είναι διαθέσιμες σε πολλαπλές μορφές όπως woff2, woff και ttf, φιλοξενούμενες στους διακομιστές του 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. Τα στοιχεία βίντεο με λειτουργία επανάληψης έχουν προσαρμοσμένο στυλ κουμπιών και τοποθέτησης. Τα αυτοφιλοξενούμενα βίντεο εμφανίζονται ως μπλοκ, καταλαμβάνοντας το πλήρες πλάτος μέχρι 620 pixel, με κεντραρισμένη στοίχιση. Τα εμβαπτιστικά στοιχεία βίντεο επεκτείνονται πέρα από αυτό το όριο, αφαιρώντας τους περιορισμούς πλάτους και προσαρμόζοντας τα περιθώρια. Σε ευρύτερες οθόνες, τα εμβαπτιστικά βίντεο επεκτείνονται περαιτέρω, με προσαρμοσμένα αριστερά περιθώρια για στοίχιση.
Οι μεταβλητές χρώματος ορίζουν διάφορα στοιχεία θέματος, όπως η ημερομηνία, τα περιγράμματα, οι λεζάντες και τα χρώματα χαρακτηριστικών. Αυτά προσαρμόζονται για προτιμήσεις σκοτεινής λειτουργίας. Μέσα στο σώμα του άρθρου, η πρώτη παράγραφος μετά από ορισμένα στοιχεία λαμβάνει επιπλέον padding στην κορυφή, και το πρώτο γράμμα μπορεί να έχει διακριτικό στυλ.
Ο κώδικας CSS ορίζει στυλ για αρχικά κεφαλαία, εισαγωγικά και διάφορα στοιχεία διάταξης σε διαφορετικές ενότητες μιας ιστοσελίδας. Τα αρχικά κεφαλαία έχουν στυλ με συγκεκριμένη γραμματοσειρά, μέγεθος και χρώμα, και επιπλέουν στα αριστερά. Τα εισαγωγικά έχουν ορισμένο μέγιστο πλάτος. Για στοιχεία επίδειξης, οι λεζάντες τοποθετούνται στατικά με καθορισμένο πλάτος. Τα εμβαπτιστικά στοιχεία ορίζονται σε πλάτος πλήρους προβολής, με προσαρμογές για διαφορετικά μεγέθη οθονών, συμπεριλαμβανομένων συγκεκριμένων περιθωρίων και padding για μικρότερες συσκευές. Ένας περιβάλλων χώρος χρησιμοποιεί CSS Grid για διάταξη σε μεγαλύτερες οθόνες, δημιουργώντας μια δομή πολλαπλών στηλών και ορίζοντας περιοχές πλέγματος για στοιχεία όπως ο τίτλος και οι μετα-πληροφορίες. Προσθέτει επίσης ένα πάνω περίγραμμα στο πρώτο παιδί των στοιχείων τίτλου.
Ο περιβάλλων χώρος ορίζει το περιεχόμενο της εισαγωγής να έχει σχετική θέση με πάνω padding 2 pixel και δεξί περιθώριο μηδέν. Μέσα στην εισαγωγή, η κύρια περιοχή περιεχομένου έχει κάτω περιθώριο 4 pixel. Τα στοιχεία λίστας μέσα στην εισαγωγή χρησιμοποιούν μέγεθος γραμματοσειράς 20 pixel. Οι σύνδεσμοι μέσα στην εισαγωγή, συμπεριλαμβανομένων αυτών στα στοιχεία λίστας, δεν έχουν περίγραμμα, δεν έχουν εικόνα φόντου και είναι υπογραμμισμένοι με offset 6 pixel, χρησιμοποιώντας ένα προσαρμοσμένο χρώμα για την υπογράμμιση. Σε κατάσταση hover, το χρώμα της υπογράμμισης αλλάζει σε ένα νέο χρώμα πυλώνα.
Η πρώτη παράγραφος στην εισαγωγή έχει πάνω περίγραμμα και δεν έχει κάτω padding. Για μεγαλύτερες οθόνες (61.25em και πάνω), εάν η οθόνη είναι επίσης τουλάχιστον 71.25em πλάτους, το πάνω περίγραμμα αφαιρείται. Σε οθόνες πλατύτερες από 61.25em, οι εικόνες δεν έχουν αριστερό περιθώριο και ενσωματωμένα στοιχεία με συγκεκριμένο ρόλο περιορίζονται σε μέγιστο πλάτος 630 pixel.
Για οθόνες πλάτους τουλάχιστον 71.25em, ο περιβάλλων χώρος χρησιμοποιεί διάταξη πλέγματος με καθορισμένες στήλες και σειρές. Μια ενότητα μετα-πληροφοριών περιλαμβάνει ένα πάνω περίγραμμα που δημιουργείται με ψευδο-στοιχείο πλάτους 540 pixel. Οι παράγραφοι στην εισαγωγή δεν έχουν πάνω περίγραμμα, και μια κάθετη γραμμή προστίθεται πριν την εισαγωγή χρησιμοποιώντας ένα άλλο ψευδο-στοιχείο.
Σε ακόμα μεγαλύτερες οθόνες (81.25em και πάνω), η διάταξη πλέγματος προσαρμόζεται με διαφορετικά μεγέθη στηλών και σειρών. Το πάνω περίγραμμα των μετα-πληροφοριών επεκτείνεται στα 620 pixel, και η κάθετη γραμμή πριν την εισαγωγή μετατοπίζεται ελαφρώς.
Οι ετικέτες μέσα στην κεφαλίδα ή ενότητα τίτλου του άρθρου έχουν πάνω padding 2 pixel. Ο τίτλος χρησιμοποιεί έντονο βάρος γραμματοσειράς, μέγιστο πλάτος 620 pixel και μέγεθος γραμματοσειράς 32 pixel. Για οθόνες πλάτους τουλάχιστον 71.25em, ο τίτλος προσαρμόζεται σε μέγιστο πλάτος 540 pixel και μέγεθος γραμματοσειράς 50 pixel.
Σε μεσαίου μεγέθους οθόνες (46.25em και πάνω), στοιχεία με την κλάση keyline-4 ή ένα συγκεκριμένο χαρακτηριστικό δεδομένων δεν έχουν δεξί περιθώριο. Για μεγαλύτερες οθόνες (61.25em και πάνω), αυτά τα στοιχεία είναι κρυμμένα. Το περιεχόμενό τους SVG χρησιμοποιεί ένα προσαρμοσμένο χρώμα για τα περιγράμματα.
Αυτός ο κώδικας CSS ορίζει στυλ για τη διάταξη μιας ιστοσελίδας, ιδιαίτερα για μια ενότητα περιβάλλοντος χώρου. Ορίζει διάφορες ιδιότητες για στοιχεία όπως μετα-πληροφορίες, κείμενο εισαγωγής, κύρια πολυμέσα και λεζάντες. Τα στυλ περιλαμβάνουν προσαρμογές για περιθώρια, padding, χρώματα και θέση, με συγκεκριμένους κανόνες για διαφορετικά μεγέθη οθονών χρησιμοποιώντας media queries. Ο κώδικας ορίζει επίσης προσαρμοσμένες μεταβλητές χρώματος και διασφαλίζει ότι ορισμένα στοιχεία είναι κρυμμένα ή εμφανίζονται βάσει συνθηκών. Συνολικά, δημιουργεί ένα responsive σχέδιο που προσαρμόζεται σε διάφορες συσκευές διατηρώντας ένα συνεπές οπτικό θέμα.
Ο κώδικας CSS δίνει στυλ σε στοιχεία μέσα σε μια κλάση furniture-wrapper. Οι τίτλοι (h1) είναι έντονοι και γκρι ανοιχτό (#dcdcdc). Οι εικόνες σε τίτλους δεν έχουν πάνω περιθώριο και έχουν ένα μικρό κάτω περιθώριο.
Για οθόνες πλατύτερες από 71.25em, μια χρωματισμένη γραμμή εμφανίζεται πριν την ενότητα μετα-πληροφοριών. Το κείμενο και οι περιλήψεις στην ενότητα μετα-πληροφοριών είναι γκρι ανοιχτό. Οι σύνδεσμοι κοινωνικών μέσων και τα κουμπιά έχουν ένα χρωματισμένο περίγραμμα και χρησιμοποιούν ένα συγκεκριμένο χρώμα για κείμε
