Αυτός ο κώδικας 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-cΑυτό φαίνεται να είναι ένα μπλοκ κώδικα CSS, όχι φυσικό αγγλικό κείμενο. Περιέχει κανόνες στυλ για στοιχεία ιστού, όπως περιγράμματα, χρώματα, διάστιχα και τυπογραφία, πιθανώς για μια διάταξη ειδήσεων ή άρθρου. Ο κώδικας περιλαμβάνει media queries για responsive design και ορίζει διάφορες οπτικές ιδιότητες για διαφορετικές ενότητες και στοιχεία.
Το παρεχόμενο κείμενο φαίνεται να είναι κώδικας CSS, όχι φυσικό αγγλικό κείμενο. Περιέχει κανόνες στυλ, επιλογείς και media queries για διάταξη ιστού και σχεδιασμό. Δεδομένου ότι είναι κώδικας, η επανεγγραφή του σε ευανάγνωστα αγγλικά διατηρώντας το νόημα δεν είναι εφαρμόσιμη. Αν προορίζατε να παρέχετε αγγλικό κείμενο για επανεγγραφή, παρακαλώ μοιραστείτε αυτό αντ' αυτού.
Το παρεχόμενο κείμενο φαίνεται να είναι κώδικας CSS για στυλ διάταξης ιστοσελίδας. Ορίζει δομές πλέγματος, media queries για responsive design και οπτικές ιδιότητες όπως χρώματα, περιγράμματα και διάστιχα. Ο κώδικας περιλαμβάνει κανόνες για στοιχεία όπως οι τίτλοι, οι πληροφορίες μεταδεδομένων, το κείμενο standfirst και οι εμπορευματοκιβώτια πολυμέσων, ρυθμίζοντας την εμφάνισή τους σε διαφορετικά μεγέθη οθόνης.
Το δεύτερο span στο figcaption του furniture-wrapper ορίζεται να εμφανίζεται ως block με μέγιστο πλάτος 90%. Σε οθόνες πλατύτερες από 30em, το padding του figcaption ρυθμίζεται σε 4px στην κορυφή, 20px στις πλευρές και 12px στο κάτω μέρος. Αν το figcaption έχει την κλάση "hidden", η αδιαφάνειά του ορίζεται σε 0.
Το κουμπί λεζάντας εμφανίζεται ως block, τοποθετημένο απόλυτα κοντά στην κάτω δεξιά γωνία, με z-index 30. Έχει κυκλικό φόντο, κανένα περίγραμμα και συγκεκριμένο padding. Το εικονίδιο SVG του κλιμακώνεται στο 85%. Σε οθόνες πλατύτερες από 30em, το κουμπί τοποθετείται 10px από τη δεξιά άκρη.
Για την interactive κύρια στήλη σε οθόνες πλατύτερες από 71.25em, το ψευδο-στοιχείο before ρυθμίζεται να εκτείνεται 12px πάνω και κάτω από το περιεχόμενο, κάνοντάς το 24px ψηλότερο συνολικά. Οι επικεφαλίδες H2 σε αυτή τη στήλη περιορίζονται σε μέγιστο πλάτος 620px.
Σε συσκευές iOS και Android, ορίζονται χρώματα dark mode: ένα σκούρο φόντο, ένα χρώμα feature σε light mode και ένα διαφορετικό χρώμα feature για dark mode. Το νέο χρώμα pillar χρησιμοποιεί τη μεταβλητή primary pillar εάν είναι διαθέσιμη, διαφορετικά το χρώμα feature. Στο dark mode, χρησιμοποιεί τη μεταβλητή dark mode pillar εάν είναι διαθέσιμη, διαφορετικά το dark mode feature χρώμα.
Για iOS και Android, το πρώτο γράμμα της πρώτης παραγράφου μετά από συγκεκριμένα στοιχεία σε εμπορευματοκιβώτια άρθρων στυλιζάρεται με ένα δευτερεύον χρώμα pillar (ή μαύρο ως εφεδρικό). Το ύψος της κεφαλίδας του άρθρου ορίζεται σε 0, και το furniture-wrapper έχει ρυθμισμένο padding. Οι ετικέτες περιεχομένου μέσα στο furniture-wrapper χρησιμοποιούν έντονο βάρος γραμματοσειράς και την οικογένεια γραμματοσειρών "Gu".
Ο τίτλος του Guardian χρησιμοποιεί τις οικογένειες γραμματοσειρών Guardian Headline, Guardian Egyptian Web, Guardian Headline Full και Georgia, με στυλ serif. Το χρώμα του κειμένου ορίζεται σε μια συγκεκριμένη μεταβλητή και το κείμενο είναι κεφαλαιοποιημένο.
Σε συσκευές iOS και Android, ο τίτλος σε εμπορευματοκιβώτια άρθρων στυλιζάρεται με μέγεθος γραμματοσειράς 32px, έντονο βάρος, padding κάτω 12px και σκούρο γκρι χρώμα.
Οι εικόνες μέσα σε αυτά τα εμπορευματοκιβώτια τοποθετούνται σχετικά, με πάνω περιθώριο 14px και αριστερό περιθώριο -10px. Το πλάτος τους προσαρμόζεται στο πλάτος της οθόνης μείον το πλάτος της γραμμής κύλισης και το ύψος ορίζεται σε αυτόματο.
Τα εσωτερικά στοιχεία αυτών των εικόνων, συμπεριλαμβανομένων των συνδέσμων και των ίδιων των εικόνων, έχουν διαφανές φόντο, πλάτος που ταιριάζει με το πλάτος της οθόνης μείον το πλάτος της γραμμής κύλισης και αυτόματο ύψος.
Η ενότητα standfirst έχει πάνω padding 4px, κάτω padding 24px και δεξί περιθώριο -10px. Το κείμενο μέσα χρησιμοποιεί τις ίδιες οικογένειες γραμματοσειρών με τον τίτλο και οι σύνδεσμοι μέσα στο standfirst στυλιζάρονται ανάλογα.
Για συσκευές iOS και Android, οι σύνδεσμοι μέσα στην ενότητα standfirst των άρθρων feature, standard και comment στυλιζάρονται με ένα συγκεκριμένο χρώμα, μια υπογράμμιση και καμία εικόνα φόντου. Το χρώμα της υπογράμμισης αλλάζει όταν το ποντίκι περνά από πάνω. Επιπλέον, η ενότητα meta σε αυτά τα άρθρα δεν έχει περιθώριο και στοιχεία όπως η γραμμή συγγραφέα και οι σύνδεσμοι συγγραφέων στυλιζάρονται με συνεπή τρόπο.
Για συσκευές iOS και Android, το όνομα του συγγραφέα στις γραμμές συγγραφέων άρθρων στυλιζάρεται χρησιμοποιώντας μια συγκεκριμένη μεταβλητή χρώματος. Η ενότητα διαφόρων μεταδεδομένων σε εμπορευματοκιβώτια άρθρων δεν έχει padding και οποιαδήποτε εικονίδια SVG μέσα της χρησιμοποιούν την ίδια μεταβλητή χρώματος για τη γραμμή τους.
Το κουμπί λεζάντας σε στοιχεία showcase εμφανίζεται ως εύκαμπτο εμπορευματοκιβώτιο, κεντραρισμένο με padding 5px και τοποθετημένο 28px επί 28px σε μέγεθος, 14px από τα δεξιά.
Το περιεχόμενο του σώματος του άρθρου έχει οριζόντιο padding 12px. Τα τυπικά στοιχεία εικόνας (εξαιρουμένων των μικρογραφιών και των ενσωματωμένων τύπων) εκτείνονται σε όλο το διαθέσιμο πλάτος, προσαρμόζοντας για γραμμές κύλισης, με αυτόματο ύψος και κανένα περιθώριο. Οι λεζάντες τους δεν έχουν padding. Τα ενσωματωμένα στοιχεία εικόνας ακολουθούν παρόμοιους κανόνες στυλ.
Για συσκευές Android, οι ενσωματωμένες εικόνες σε εμπορευματοκιβώτια άρθρων ορίζονται στο πλήρες πλάτος της οθόνης μείον το πλάτος της γραμμής κύλισης.
Τόσο σε iOS όσο και σε Android, το παρατιθέμενο κείμενο στα σώματα άρθρων χρησιμοποιεί το νέο χρώμα pillar για το διακοσμητικό του στοιχείο. Οι σύνδεσμοι στο κείμενο του άρθρου στυλιζάρονται με το πρωτεύον χρώμα pillar, υπογραμμισμένοι με offset και χρησιμοποιούν το χρώμα του περιγράμματος της κεφαλίδας για την υπογράμμιση. Όταν το ποντίκι περνά από πάνω, το χρώμα της υπογράμμισης αλλάζει στο νέο χρώμα pillar.
Στο
