Αυτός ο κώδικας CSS ορίζει μια προσαρμοσμένη οικογένεια γραμματοσειρών με το όνομα "Guardian Headline Full" με πολλαπλά στυλ και βάρη. Περιλαμβάνει εκδόσεις ελαφριά, κανονική, μέτρια και ημιέντονη, καθεμία διαθέσιμη τόσο σε κανονικό όσο και σε πλάγιο στυλ. Τα αρχεία γραμματοσειρών φιλοξενούνται διαδικτυακά και παρέχονται σε τρεις μορφές: WOFF2, WOFF και TrueType (TTF).
@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, 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) {
}
Για διαδραστικές στήλες περιεχομένου, προστίθεται ένα αριστερό περίγραμμα με συγκεκριμένη τοποθέτηση και z-index. Σε μεγαλύτερες οθόνες, η αριστερή θέση του περιγράμματος προσαρμόζεται ελαφρώς. Μέσα σε αυτές τις στήλες, τα ατομικά στοιχεία δεν έχουν περιθώρια πάνω ή κάτω αλλά περιλαμβάνουν padding. Όταν οι παράγραφοι προηγούνται ατομικών στοιχείων, το padding αφαιρείται και προστίθενται περιθώρια αντ' αυτού. Τα ενσωματωμένα στοιχεία περιορίζονται σε μέγιστο πλάτος 620px.
Για εικόνες με ρόλο loop, οι λεζάντες ορίζονται σε υψηλότερο z-index και τα κουμπιά loop στυλιζάρονται με συγκεκριμένες διαστάσεις και στοίχιση. Τα στοιχεία βίντεο που φιλοξενούνται από τον ίδιο τον ιστότοπο ορίζονται σε πλήρες πλάτος, με όριο τα 620px και περιλαμβάνουν περιθώρια πάνω και κάτω. Για διατάξεις βίντεο εμβαπτισμού, οι περιορισμοί πλάτους αφαιρούνται και τα περιθώρια προσαρμόζονται. Σε ευρύτερες οθόνες, τα βίντεο εμβαπτισμού επεκτείνονται σε πλάτος και μετατοπίζονται προς τα αριστερά.
Οι μεταβλητές χρώματος ορίζουν στυλ για ημερομηνίες, περιγράμματα, λεζάντες και στοιχεία feature. Στη σκοτεινή λειτουργία, τα χρώματα κειμένου και εικονιδίων προσαρμόζονται σε ένα σκοτεινό θέμα. Τα ατομικά στοιχεία μέσα σε στήλες περιεχομένου δεν έχουν padding. Συγκεκριμένοι κανόνες διασφαλίζουν ότι η πρώτη παράγραφος μετά από ορισμένα στοιχεία ή οριζόντιες γραμμές στυλιζάρεται κατάλληλα σε διάφορα τμήματα περιεχομένου όπως άρθρα, σχόλια και features.
Η πρώτη παράγραφος μετά από μια πύλη σύνδεσης ή μια οριζόντια γραμμή (εκτός από την τελευταία) έχει top padding 14 pixel.
Για το πρώτο γράμμα της πρώτης παραγράφου που ακολουθεί ένα αρχικό στοιχείο, μια πύλη σύνδεσης ή μια οριζόντια γραμμή (εξαιρουμένης της τελευταίας) μέσα σε διάφορα σώματα περιεχομένου, εφαρμόστε ένα συγκεκριμένο στυλ drop cap. Αυτό χρησιμοποιεί τη γραμματοσειρά Guardian headline, είναι έντονη, 111 pixel σε μέγεθος με ύψος γραμμής 92 pixel. Επιπλέει αριστερά, είναι κεφαλαία, χρησιμοποιεί border-box sizing, έχει δεξί περιθώριο 8 pixel, ευθυγραμμίζεται στην κορυφή και χρησιμοποιεί μια προσαρμοσμένη μεταβλητή χρώματος.
Οι παράγραφοι που ακολουθούν αμέσως μια οριζόντια γραμμή μέσα σε αυτά τα σώματα περιεχομένου δεν έχουν top padding.
Τα pullquotes μέσα σε αυτά τα σώματα περιεχομένου έχουν μέγιστο πλάτος 620 pixel.
Οι λεζάντες για στοιχεία showcase στο κύριο περιεχόμενο και σε containers άρθρων είναι στατικά τοποθετημένες, παίρνοντας πλήρες πλάτος έως 620 pixel.
Τα στοιχεία εμβαπτισμού εκτείνονται σε πλήρες πλάτος viewport, λαμβάνοντας υπόψη τη γραμμή κύλισης. Σε μεγαλύτερες οθόνες (έως 71.24em), περιορίζονται σε 978 pixel, με το padding των λεζάντων να προσαρμόζεται σε διαφορετικά breakpoints. Σε μεσαίες οθόνες (46.25em έως 61.24em), το μέγιστο πλάτος είναι 738 pixel. Σε μικρότερες οθόνες (κάτω από 46.24em), ευθυγραμμίζονται στην αριστερή άκρη με προσαρμοσμένα περιθώρια και padding λεζάντων.
Για furniture wrappers σε μεγάλες οθόνες (61.25em και άνω), χρησιμοποιείται διάταξη πλέγματος με καθορισμένες στήλες και σειρές για την τοποθέτηση στοιχείων επικεφαλίδας.
Τα στυλ CSS ορίζουν τη διάταξη και την εμφάνιση για την ενότητα επικεφαλίδας μιας ιστοσελίδας, που αναφέρεται ως "furniture-wrapper". Ορίζει περιγράμματα, διάστιχα, τυπογραφία και δομές πλέγματος που προσαρμόζονται σε διαφορετικά μεγέθη οθόνης.
Για μεγαλύτερες οθόνες (πάνω από 71.25em), καθιερώνεται μια σύνθετη διάταξη πλέγματος με συγκεκριμένες στήλες και σειρές για στοιχεία όπως ο τίτλος, η επικεφαλίδα, οι μετα-πληροφορίες, το standfirst (υπότιτλος) και το πορτρέτο. Οπτικά στοιχεία όπως περιγράμματα και γραμμές προσαρμόζονται ή αφαιρούνται σε ορισμένα breakpoints. Το μέγεθος γραμματοσειράς της επικεφαλίδας αυξάνεται και το μέγιστο πλάτος της αλλάζει σε μεγαλύτερες οθόνες. Οι σύνδεσμοι μέσα στο standfirst στυλιζάρονται με υπογραμμίσεις που αλλάζουν χρώμα στο hover.
Για οθόνες πλατύτερες από 740 pixel, αποκρύψτε στοιχεία με την κλάση `.keyline-4` ή το χαρακτηριστικό `[data-gu-name="lines"]`. Μέσα στο `.furniture-wrapper`, στυλιάρετε τις γραμμές SVG μέσα σε αυτά τα στοιχεία για να χρησιμοποιούν τη μεταβλητή χρώματος `--headerBorder`.
Σε οθόνες πλατύτερες από 740 pixel, αφαιρέστε το δεξί περιθώριο από στοιχεία με το ID `#meta` ή το χαρακτηριστικό `[data-gu-name="meta"]` μέσα στο `.furniture-wrapper`. Για αυτά τα μετα-στοιχεία, ορίστε το χρώμα περιγράμματος για κοινωνικούς συνδέσμους, ενότητες σχολίων και τα παιδιά τους span σε `--headerBorder`. Επίσης, αποκρύψτε οποιαδήποτε στοιχεία `gu-island` μέσα στο `.content__meta-container_dcr`.
Για την ενότητα standfirst (επιλεγμένη με κλάση, ID ή `data-gu-name`), εφαρμόστε ένα αρνητικό αριστερό περιθώριο και αντίστοιχο padding, και ορίστε τη θέση της σε relative. Σε πλατύτερες οθόνες (πάνω από 740px), προσθέστε ένα μικρό top padding. Στυλιάρετε παραγράφους μέσα στο standfirst με βάρος γραμματοσειράς 400, μέγεθος 20 pixel και bottom padding 14 pixel.
Η κύρια περιοχή media (επιλεγμένη με ID ή `data-gu-name`) είναι σχετικά τοποθετημένη, δεν έχει top margin, έχει ένα μικρό bottom margin και τοποθετείται στην περιοχή πλέγματος "portrait". Βεβαιωθείτε ότι τα εσωτερικά της div παίρνουν πλήρες πλάτος και δεν έχουν οριζόντιο περιθώριο. Σε πολύ πλατιές οθόνες (πάνω από 980px), αφαιρέστε το bottom margin. Σε μικρότερες οθόνες (κάτω από 740px), ορίστε το πλάτος της στο πλήρες πλάτος viewport μείον οποιαδήποτε γραμμή κύλισης και εφαρμόστε ένα αρνητικό αριστερό περιθώριο. Για οθόνες μεταξύ 480px και 740px, αυξήστε αυτό το αρνητικό αριστερό περιθώριο σε -20px.
Στυλιάρετε λεζάντες εικόνων για να είναι απόλυτα τοποθετημένες στο κάτω μέρος, με συγκεκριμένο padding και χρώματα φόντου/κειμένου από μεταβλητές CSS. Ορίστε το πλάτος τους στο 100% χωρίς μέγιστο πλάτος, αφαιρέστε το bottom margin και ορίστε ένα ελάχιστο ύψος. Χρωματίστε spans μέσα στη λεζάντα χρησιμοποιώντας `--headerBorder` και γεμίστε τα SVG τους με το ίδιο χρώμα. Απο
