Αυτός ο κώδικας CSS ορίζει μια προσαρμοσμένη οικογένεια γραμματοσειρών με το όνομα "Guardian Headline Full" με πολλαπλά βάρη και στυλ γραμματοσειράς. Περιλαμβάνει ελαφριά, κανονικά, μεσαία και ημιέντονα βάρη, το καθένα τόσο σε κανονικές όσο και σε πλάγιες εκδόσεις. Οι γραμματοσειρές φορτώνονται από τους διακομιστές του Guardian σε τρεις διαφορετικές μορφές αρχείων: 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;
}
}
Η διαδραστική στήλη περιεχομένου έχει αριστερό περίγραμμα και συγκεκριμένο διάστημα για τα στοιχεία. Οι παράγραφοι που ακολουθούν συγκεκριμένα στοιχεία λαμβάνουν επιπλέον πάνω padding, και το πρώτο γράμμα αυτών των παραγράφων έχει στυλ ως μεγάλο, έγχρωμο drop cap. Τα ενσωματωμένα στοιχεία και οι εικόνες περιορίζονται σε ένα μέγιστο πλάτος. Ορίζονται διάφορες μεταβλητές χρωμάτων για συνεπή θεματοποίηση.
Τα pullquotes εντός συγκεκριμένων containers θα πρέπει να έχουν μέγιστο πλάτος 620 pixel.
Οι λεζάντες για στοιχεία showcase σε κύρια άρθρα, features, τυπικά άρθρα και σχόλια θα πρέπει να τοποθετούνται στατικά, να εκτείνονται σε πλήρες πλάτος και επίσης να έχουν μέγιστο πλάτος 620 pixel.
Τα immersive στοιχεία θα πρέπει να εκτείνονται σε πλήρες πλάτος viewport, μείον το scrollbar. Σε μεγαλύτερες οθόνες (πάνω από 71.24em), το μέγιστο πλάτος τους είναι 978px, με το padding των λεζάντων να προσαρμόζεται σε διαφορετικά breakpoints. Σε μεσαίου μεγέθους οθόνες (μεταξύ 46.25em και 61.24em), το μέγιστο πλάτος είναι 738px. Σε μικρότερες οθόνες (κάτω από 46.24em), αυτά τα στοιχεία δεν θα πρέπει να έχουν αριστερό περιθώριο και να ευθυγραμμίζονται με την αριστερή άκρη, με προσαρμοσμένα περιθώρια και padding λεζάντων για πολύ μικρές οθόνες.
Για το furniture wrapper σε μεγάλες οθόνες (πάνω από 61.25em), χρησιμοποιείται διάταξη πλέγματος με καθορισμένες στήλες και σειρές. Οι τίτλοι λαμβάνουν πάνω περίγραμμα, οι πληροφορίες meta τοποθετούνται σχετικά και το standfirst κείμενο έχει συγκεκριμένο στυλ για συνδέσμους και διάστημα. Οι εικόνες εντός αυτού του wrapper έχουν προσαρμοσμένα περιθώρια και μέγιστο πλάτος 630px για ενσωματωμένα στοιχεία. Σε εξαιρετικά μεγάλες οθόνες (πάνω από 71.25em), το πλέγμα προσαρμόζεται για να περιλαμβάνει περισσότερες στήλες.
Το CSS ορίζει μια διάταξη πλέγματος για μια κεφαλίδα σελίδας με περιοχές για τίτλο, τίτλο, standfirst, πληροφορίες meta και ένα πορτρέτο. Ορίζει συγκεκριμένες διαστάσεις και θέσεις για αυτά τα στοιχεία σε διαφορετικά μεγέθη οθονών. Το στυλ περιλαμβάνει περιγράμματα, γραμματοσειρές και χρώματα, με προσαρμογές για εικονίδια κοινωνικών δικτύων, λεζάντες και ανταποκριτική συμπεριφορά σε κινητές και επιτραπέζιες προβολές.
Ο κώδικας CSS ορίζει στυλ για τη διάταξη μιας ιστοσελίδας, εστιάζοντας σε ένα στοιχείο που ονομάζεται "furniture-wrapper". Αυτό το στοιχείο έχει σκούρο φόντο και προσαρμόζει τα περιθώρια και το padding του με βάση το μέγεθος της οθόνης. Για μεγαλύτερες οθόνες, προσθέτει διακοσμητικές πλαϊνές μπάρες.
Μέσα σε αυτό το wrapper, στοιχεία όπως οι κεφαλίδες άρθρων, οι τίτλοι και οι πληροφορίες meta (όπως κουμπιά κοινωνικής διαμοίρασης) έχουν στυλ. Οι τίτλοι χρησιμοποιούν ανοιχτό γκρι χρώμα και έντονη γραμματοσειρά. Τα κουμπιά κοινωνικών δικτύων έχουν έγχρωμα περιγράμματα που ταιριάζουν με ένα χρώμα θέματος και αλλάζουν σε συμπαγές χρώμα όταν ο κέρσορας περνάει από πάνω τους.
Ο κώδικας διαχειρίζεται επίσης την ορατότητα των λεζάντων και ενός κουμπιού εναλλαγής λεζάντων για στοιχεία πολυμέσων. Συνολικά, τα στυλ διασφαλίζουν ότι η διάταξη είναι ανταποκριτική και οπτικά συνεπής σε διαφορετικές συσκευές.
Αυτός ο κώδικας CSS ορίζει στυλ για ένα στοιχείο ιστοσελίδας, πιθανώς μια πλαϊνή μπάρα ή ένα wrapper περιεχομένου. Ορίζει χρώματα κειμένου, εμφάνιση συνδέσμων και προσαρμογές διάταξης για διαφορετικά μεγέθη οθονών. Οι σύνδεσμοι έχουν στυλ με συγκεκριμένα χρώματα και υπογραμμίσεις και η διάταξη περιλαμβάνει στοιχεία φόντου που προσαρμόζονται με βάση το πλάτος του viewport. Ο κώδικας διαχειρίζεται επίσης περιγράμματα και διάστημα για διάφορα στοιχεία εντός του στοιχείου.
Ο κώδικας CSS ορίζει στυλ για στοιχεία άρθρων και φορτώνει προσαρμοσμένες γραμματοσειρές. Ορίζει το χρώμα περιγράμματος για τα σχόλια να ταιριάζει με το χρώμα περιγράμματος της κεφαλίδας. Για τους τίτλους άρθρων, χρησιμοποιεί ένα ελαφρύ βάρος γραμματοσειράς από προεπιλογή, αλλά αλλάζει σε έντονο όταν ο τίτλος περιέχει ένα strong tag.
Επιπλέον, εισάγει την οικογένεια γραμματοσειρών Guardian Headline Full σε διάφορα βάρη και στυλ (ελαφριά, κανονικά, μεσαία, ημιέντονα, το καθένα με κανονικές και πλάγιες εκδόσεις) από τους διακομιστές του Guardian, καθορίζοντας πολλαπλές μορφές αρχείων για συμβατότητα προγραμμάτων περιήγησης.
Η γραμματοσειρά "Guardian Headline Full" ορίζεται με πολλά στυλ: ημιέντονη πλάγια (βάρος 600), έντονη (βάρος 700), έντονη πλάγια (βάρος 700), μαύρη (βάρος 900) και μαύρη πλάγια (βάρος 900). Κάθε στυλ περιλαμβάνει αρχεία γραμματοσειρών σε μορφές WOFF2, WOFF και TrueType, που φιλοξενούνται στους διακομιστές του Guardian.
Επιπλέον, η γραμματοσειρά "Guardian Titlepiece" ορίζεται στο έντονο στυλ της (βάρος 700), επίσης με αρχεία WOFF2, WOFF και TrueType.
Για συσκευές iOS και Android, ορίζεται ένα σκούρο χρώμα φόντου και συγκεκριμένα χρώματα features. Στη σκοτεινή λειτουργία, το χρώμα feature προσαρμόζεται ανάλογα.
Σε iOS και Android, εφαρμόζονται συγκεκριμένοι κανόνες CSS για να δώσουν στυλ στο πρώτο γράμμα της πρώτης παραγράφου σε συγκεκριμένα containers άρθρων, που ακολουθούν συγκεκριμένα στοιχεία όπως το `.element-atom` ή πύλες σύνδεσης.
Για συσκευές Android, το πρώτο γράμμα της πρώτης παραγράφου σε τυπικά άρθρα και σχόλια έχει στυλ με ένα δευτερεύον χρώμα πυλώνα. Σε iOS και Android, οι κεφαλίδες άρθρων είναι κρυφές και το furniture wrapper έχει συγκεκριμένο padding. Οι ετικέτες εντός του furniture wrapper χρησιμοποιούν μια έντονη, κεφαλαιοποιημένη γραμματοσειρά με ένα νέο χρώμα πυλώνα. Οι τίτλοι ορίζονται σε 32px, έντονοι, με κάτω padding και ένα σκούρο χρώμα. Οι εικόνες τοποθετούνται σχετικά, με πλήρες πλάτος περιθωρίων και αυτόματο ύψος.
Για συσκευές Android, οι εικόνες εντός containers άρθρων θα πρέπει να έχουν διαφανές φόντο, να εκτείνονται σε πλήρες π
