Η οικογένεια γραμματοσειρών Guardian Headline Full περιλαμβάνει διάφορα στυλ, καθένα διαθέσιμο σε πολλαπλές μορφές. Παρέχονται τα βάρη light, regular, medium και semibold, με τόσο κανονικές όσο και πλάγιες παραλλαγές. Αυτές οι γραμματοσειρές φιλοξενούνται στις καθορισμένες διευθύνσεις URL και υποστηρίζουν τις μορφές woff2, woff και truetype.
@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;
}
}Αυτό φαίνεται να είναι ένα μπλοκ κώδικα CSS που ορίζει στυλ για μια διαδραστική στήλη περιεχομένου. Περιλαμβάνει κανόνες για περιθώρια, πλήρωση, περιγράμματα, χρώματα και τυπογραφία, ιδιαίτερα για στοιχεία όπως πτώματα κεφαλαίων και ενσωματωμένες εικόνες. Τα στυλ εφαρμόζονται σε διάφορες ενότητες περιεχομένου όπως σώματα άρθρων, σχόλια και χαρακτηριστικά, με συγκεκριμένες προσαρμογές για διαφορετικά μεγέθη οθόνης και τύπους στοιχείων.Για στοιχεία βιτρίνας σε κοντέινερ άρθρων, το figcaption ορίζεται σε στατική θέση, με πλήρες πλάτος έως 620px.
Τα καθηλωτικά στοιχεία εκτείνονται σε πλήρες πλάτος θύρας προβολής, μείον τη γραμμή κύλισης. Σε οθόνες έως 71.24em, το μέγιστο πλάτος τους είναι 978px και η πλήρωση του figcaption προσαρμόζεται με βάση το μέγεθος της οθόνης. Για οθόνες μεταξύ 30em και 71.24em, η πλήρωση είναι 20px. κάτω από 30em, είναι 10px.
Μεταξύ 46.25em και 61.24em, τα καθηλωτικά στοιχεία έχουν μέγιστο πλάτος 738px. Κάτω από 46.24em, ευθυγραμμίζονται προς τα αριστερά με προσαρμοσμένα περιθώρια: -10px στα αριστερά από προεπιλογή, ή -20px μεταξύ 30em και 46.24em, με πλήρωση figcaption 20px.
Το furniture-wrapper χρησιμοποιεί διάταξη πλέγματος σε οθόνες 61.25em και άνω. Ορίζει στήλες και σειρές πλέγματος για την τοποθέτηση στοιχείων όπως τίτλος, επικεφαλίδα, μεταδεδομένα και standfirst. Οι επικεφαλίδες έχουν πάνω περίγραμμα, οι ενότητες μεταδεδομένων περιλαμβάνουν πάνω πλήρωση και το κείμενο standfirst έχει συγκεκριμένο στυλ για συνδέσμους και περιγράμματα. Σε μεγαλύτερες οθόνες (71.25em+), η δομή του πλέγματος αλλάζει και οι ενότητες μεταδεδομένων περιλαμβάνουν ένα ψευδο-στοιχείο before. Οι εικόνες εντός του wrapper έχουν προσαρμοσμένα περιθώρια και μέγιστο πλάτος 630px όταν είναι ενσωματωμένες.Ο παρεχόμενος κείμενο είναι κώδικας CSS, όχι φυσικό αγγλικό κείμενο. Ορίζει στυλ για τη διάταξη μιας ιστοσελίδας, συμπεριλαμβανομένων δομών πλέγματος, διαστήματος, χρωμάτων και ανταποκριτικής συμπεριφοράς για διαφορετικά μεγέθη οθόνης. Για να το ξαναγράψω αυτό σε ευχάριστο αγγλικά διατηρώντας το νόημα, θα χρειαζόταν να ερμηνεύσω τον κώδικα σε μια περιγραφή της προβλεπόμενης οπτικής σχεδίασης και των κανόνων διάταξης.
Για παράδειγμα:
Αυτό το CSS δημιουργεί στυλ για μια διάταξη ιστοσελίδας με σύστημα πλέγματος. Τοποθετεί στοιχεία όπως η επικεφαλίδα, τα μεταδεδομένα και το standfirst (εισαγωγικό κείμενο) σε συγκεκριμένες στήλες και σειρές. Η επικεφαλίδα χρησιμοποιεί μια έντονη γραμματοσειρά που αλλάζει μέγεθος σε μεγαλύτερες οθόνες. Μια λεπτή γραμμή περιγράμματος εμφανίζεται πάνω από την ενότητα μεταδεδομένων. Το standfirst έχει αριστερό περιθώριο και πλήρωση, με μια κάθετη γραμμή δίπλα του σε ευρύτερες οθόνες. Η κύρια περιοχή πολυμέσων προσαρμόζει το πλάτος και τα περιθώρια της ανταποκριτικά και οι λεζάντες εικόνων στυλιζάρονται με χρώμα φόντου και τοποθετούνται στο κάτω μέρος. Διάφορα στοιχεία κρύβονται ή αλλάζουν εμφάνιση σε διαφορετικά σημεία διακοπής για να προσαρμοστούν σε προβολές κινητών, ταμπλετών και επιτραπέζιων υπολογιστών.Ο κώδικας CSS ορίζει στυλ για μια διάταξη άρθρων με σκοτεινή θεματολογία. Περιλαμβάνει:
- Στυλισμό για λεζάντες, κουμπιά και τις καταστάσεις τους όταν ο δρομέας περνά από πάνω
- Ανταποκριτικές ρυθμίσεις για διαφορετικά μεγέθη οθόνης
- Μεταβλητές χρωμάτων για τη σκοτεινή λειτουργία (χρησιμοποιώντας --darkModeFeature και --darkBackground)
- Κανόνες διάταξης για επικεφαλίδες, πληροφορίες μεταδεδομένων και στοιχεία κοινωνικής διαμοίρασης
- Ερωτήματα πολυμέσων που προσαρμόζουν περιθώρια, πλήρωση και θέση σε μεγαλύτερες οθόνες
- Ειδική χειρισμό για διαδραστικές στήλες περιεχομένου
Τα στυλ διασφαλίζουν σωστή αντίθεση στη σκοτεινή λειτουργία ενώ διατηρούν τα χρώματα της μάρκας της δημοσίευσης για διαδραστικά στοιχεία.Αυτός ο κώδικας CSS δημιουργεί στυλ για στοιχεία εντός ενός κοντέινερ με την κλάση "furniture-wrapper". Αφαιρεί περιγράμματα και εικόνες φόντου από συνδέσμους στην ενότητα "standfirst", τους υπογραμμίζει με ένα συγκεκριμένο χρώμα και αλλάζει το χρώμα υπογράμμισης όταν ο δρομέας περνά από πάνω. Το κείμενο σε παραγράφους και στοιχεία λίστας ορίζεται σε ανοιχτό γκρι χρώμα.
Για μεγαλύτερες οθόνες, η πρώτη παράγραφος στην ενότητα "standfirst" παίρνει ένα πάνω περίγραμμα, το οποίο αφαιρείται σε ακόμα μεγαλύτερες οθόνες. Τα στοιχεία λίστας και τα διακοσμητικά στοιχεία προσαρμόζονται επίσης με βάση το μέγεθος της οθόνης.
Το κοντέινερ αυτό καθαυτό παίρνει πλαϊνές μπάρες σε μεσαίες και μεγαλύτερες οθόνες, με το πλάτος και τη θέση τους να υπολογίζονται με βάση την προβολή και το πλάτος της γραμμής κύλισης. Αυτές οι πλαϊνές μπάρες έχουν χρώματα φόντου και περιγράμματα που ταιριάζουν με το θέμα.
Πρόσθετοι κανόνες δημιουργούν στυλ για κοινωνικά και σχολιασμένα στοιχεία με χρώματα περιγραμμάτων, ορίζουν βάρη γραμματοσειράς για επικεφαλίδες και φορτώνουν μια προσαρμοσμένη γραμματοσειρά με το όνομα "Guardian Headline Full" από μια καθορισμένη διεύθυνση URL.@font-face {
font-family: 'Guardian Headline Full';
src: url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff2') format('woff2'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff') format('woff'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.ttf') format('truetype');
font-weight: 300;
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-LightItalic.woff2') format('woff2'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.woff') format('woff'),
url('https://assets.g
