Αυτός ο κώδικας CSS ορίζει μια προσαρμοσμένη οικογένεια γραμματοσειρών με το όνομα "Guardian Headline Full" με πολλαπλά βάρη και στυλ γραμματοσειράς. Περιλαμβάνει ελαφρά, κανονικά, μεσαία και ημι-έντονα βάρη, το καθένα τόσο σε κανονικά όσο και σε πλάγια στυλ. Τα αρχεία γραμματοσειρών παρέχονται σε μορφές WOFF2, WOFF και TrueType, που φιλοξενούνται στον διακομιστή πόρων του 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-column--interactive:before {
left: -10px;
}
}Αυτός φαίνεται να είναι ένας μπλοκ κώδικα CSS, πιθανότατα από ένα φύλλο στυλ ιστοτόπου. Ορίζει διάφορα στυλ για στοιχεία όπως στήλες, διαδραστικό περιεχόμενο και τυπογραφία, συμπεριλαμβανομένων χρωμάτων, αποστάσεων και κανόνων διάταξης για διαφορετικά μεγέθη οθόνης. Ο κώδικας περιλαμβάνει media queries για responsive design και χρησιμοποιεί προσαρμοσμένες ιδιότητες CSS (μεταβλητές) για συνεπή θεματοποίηση.Οι ακόλουθοι κανόνες CSS προσαρμόζουν τη διάταξη και το στυλ για διάφορα στοιχεία:
- Οι παράγραφοι που ακολουθούν οριζόντιες γραμμές σε συγκεκριμένα containers δεν έχουν επάνω padding.
- Οι λεζάντες για στοιχεία showcase τοποθετούνται στατικά, με πλήρες πλάτος και μέγιστο πλάτος 620px.
- Τα διαπεριβατικά στοιχεία εκτείνονται σε πλήρες πλάτος viewport, μείον το πλάτος της γραμμής κύλισης.
- Για οθόνες έως 71.24em πλάτος, τα διαπεριβατικά στοιχεία περιορίζονται σε 978px και οι λεζάντες τους έχουν 10px οριζόντιο padding.
- Μεταξύ 30em και 71.24em, οι λεζάντες για διαπεριβατικά στοιχεία έχουν 20px οριζόντιο padding.
- Για οθόνες μεταξύ 46.25em και 61.24em, τα διαπεριβατικά στοιχεία περιορίζονται σε 738px.
- Κάτω από 46.24em, τα διαπεριβατικά στοιχεία ευθυγραμμίζονται στα αριστερά με προσαρμοσμένα περιθώρια.
- Μεταξύ 30em και 46.24em, τα διαπεριβατικά στοιχεία έχουν αριστερό περιθώριο -20px και λεζάντες με 20px οριζόντιο padding.
- Για οθόνες 61.25em και ευρύτερες, εφαρμόζεται διάταξη grid με συγκεκριμένους ορισμούς στηλών και γραμμών.
- Οι τίτλοι σε αυτό το grid έχουν επάνω περίγραμμα.
- Οι πληροφορίες meta τοποθετούνται σχετικά με επάνω padding και χωρίς δεξιό περιθώριο.
- Τα στοιχεία standfirst έχουν προσαρμοσμένα περιθώρια, μεγέθη γραμματοσειράς και στυλ συνδέσμων, συμπεριλαμβανομένων υπογραμμισμένων συνδέσμων με συγκεκριμένα χρώματα και εφέ hover.
- Η πρώτη παράγραφος σε στοιχεία standfirst έχει επάνω περίγραμμα και χωρίς κάτω padding, το οποίο αφαιρείται σε 71.25em και άνω.
- Οι εικόνες στο grid έχουν αριστερά περιθώρια και μέγιστο πλάτος 630px για εσωτερικά στοιχεία.
- Σε 71.25em και άνω, το πρότυπο grid προσαρμόζεται με διαφορετικούς ορισμούς στηλών και γραμμών.Το παρεχόμενο κείμενο φαίνεται να είναι κώδικας CSS για στυλ διάταξης ιστοσελίδας, συγκεκριμένα για μια κλάση furniture-wrapper. Ορίζει δομές grid, media queries για responsive design και διάφορους κανόνες στυλ για στοιχεία όπως τίτλοι, πληροφορίες meta, κείμενο standfirst και λεζάντες μέσων. Ο κώδικας προσαρμόζει ιδιότητες όπως πλάτη, γραμματοσειρές, περιγράμματα και χρώματα με βάση σημεία αλλαγής μεγέθους οθόνης.Το δεύτερο στοιχείο του τύπου του θα πρέπει να εμφανίζεται ως block με μέγιστο πλάτος 90%.
Σε οθόνες τουλάχιστον 30em πλάτος, οι λεζάντες μέσα στον furniture wrapper θα πρέπει να έχουν padding 4px στην κορυφή, 20px στις πλευρές και 12px στο κάτω μέρος. Οι λεζάντες με την κλάση "hidden" θα πρέπει να είναι αόρατες.
Ένα κουμπί λεζάντας μέσα στον furniture wrapper εμφανίζεται ως block, τοποθετημένο απόλυτα 10px από το κάτω μέρος και 8px από τα δεξιά, με υψηλή σειρά στοίβαξης. Έχει χρώμα φόντου που ορίζεται από τη μεταβλητή --captionBackground, χωρίς περίγραμμα, κυκλικό σχήμα και padding 6px στην κορυφή, 5px στις πλευρές και 5px στο κάτω μέρος. Το SVG μέσα του κλιμακώνεται στο 85% του αρχικού του μεγέθους. Σε οθόνες τουλάχιστον 30em πλάτος, το κουμπί τοποθετείται 10px από τα δεξιά.
Για την κύρια διαδραστική στήλη σε οθόνες τουλάχιστον 71.25em πλάτος, η επάνω θέση προσαρμόζεται κατά -12px και το ύψος αυξάνεται κατά 24px. Οι τίτλοι (h2) σε αυτή τη στήλη έχουν μέγιστο πλάτος 620px.
Σε συσκευές iOS και Android, οι μεταβλητές χρωμάτων ορίζονται ως εξής: --darkBackground σε #1a1a1a, --feature σε #c70000, --darkmodeFeature σε #ff5943 και --new-pillar-colour στην τιμή του --primary-pillar ή --feature εάν δεν οριστεί. Σε σκοτεινή λειτουργία, το --new-pillar-colour χρησιμοποιεί το --darkmode-pillar ή --darkmodeFeature.
Για το πρώτο γράμμα της πρώτης παραγράφου που ακολουθεί συγκεκριμένα στοιχεία σε containers άρθρων σε iOS και Android, το χρώμα ορίζεται στην τιμή του --secondary-pillar ή μαύρο εάν δεν οριστεί.
Οι επικεφαλίδες σε containers άρθρων σε iOS και Android δεν έχουν ύψος. Ο furniture wrapper σε αυτά τα containers έχει padding 4px στην κορυφή, 10px στις πλευρές και 0 στο κάτω μέρος. Οι ετικέτες μέσα στον furniture wrapper χρησιμοποιούν μια έντονη, 700-βάρη γραμματοσειρά από τις οικογένειες γραμματοσειρών Guardian Headline ή Guardian Egyptian Web.Η γραμματοσειρά τίτλου ορίζεται σε Guardian Headline, Georgia ή serif, με συγκεκριμένο χρώμα και κεφαλαιοποιημένο κείμενο. Σε συσκευές iOS και Android, ο τίτλος σε containers άρθρων χρησιμοποιεί μια 32px έντονη γραμματοσειρά, έχει 12px κάτω padding και είναι χρωματισμένος σκούρο γκρι.
Οι εικόνες σε αυτά τα containers τοποθετούνται σχετικά, με επάνω περιθώριο 14px και αριστερό περιθώριο -10px. Το πλάτος τους προσαρμόζεται στο viewport μείον τη γραμμή κύλισης και το ύψος τους ορίζεται σε αυτόματο. Τα εσωτερικά στοιχεία, εικόνες και σύνδεσμοι μέσα σε αυτά τα σχήματα έχουν διαφανές φόντο, το ίδιο responsive πλάτος και αυτόματο ύψος.
Η ενότητα standfirst έχει 4px επάνω padding, 24px κάτω padding και -10px δεξιό περιθώριο. Οι παράγραφοι μέσα στο standfirst χρησιμοποιούν την οικογένεια γραμματοσειρών Guardian Headline ή Georgia. Οι σύνδεσμοι μέσα στο standfirst και τα στοιχεία λίστας του στυλίζονται αναλόγως.Για συσκευές iOS και Android, οι σύνδεσμοι μέσα στην ενότητα standfirst των άρθρων feature, standard και comment στυλίζονται με συγκεκριμένο χρώμα, μια υπογράμμιση 6px κάτω από το κείμενο και χωρίς εικόνα φόντου ή κάτω περίγραμμα. Όταν γίνεται hover, το χρώμα της υπογράμμισης αλλάζει να ταιριάζει με το χρώμα του κειμένου.
Η ενότητα meta σε αυτά τα containers δεν έχει περιθώριο και στοιχεία όπως bylines, συγγραφείς και σχετικοί σύνδεσμοι στυλίζονται συνεπώς.Για συσκευές iOS και Android, τα ακόλουθα στυλ εφαρμόζονται σε containers άρθρων:
- Οι σύνδεσμοι byline
