Αυτός ο κώδικας CSS ορίζει μια προσαρμοσμένη γραμματοσειρά με το όνομα "Guardian Headline Full" με πολλαπλά στυλ και βάρη. Περιλαμβάνει εκδόσεις light, regular, medium και semibold, καθεμία διαθέσιμη τόσο σε κανονικό όσο και σε πλάγιο στυλ. Τα αρχεία γραμματοσειράς παρέχονται σε τρεις μορφές—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://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 στο κύριο περιεχόμενο και σε containers άρθρων θα πρέπει να είναι στατικά τοποθετημένες, με πλήρες πλάτος και μέγιστο πλάτος 620 pixel.
Τα immersive στοιχεία θα πρέπει να εκτείνονται σε όλο το πλάτος της θύρας προβολής, μείον τη γραμμή κύλισης. Σε μεγαλύτερες οθόνες έως 71.24em, το μέγιστο πλάτος τους είναι 978px, με το padding των λεζάντων να προσαρμόζεται σε διαφορετικά breakpoints. Σε μεσαίου μεγέθους οθόνες μεταξύ 46.25em και 61.24em, το μέγιστο πλάτος είναι 738px. Σε μικρότερες οθόνες έως 46.24em, τα immersive στοιχεία θα πρέπει να ευθυγραμμίζονται στην αριστερή άκρη με προσαρμοσμένα περιθώρια και padding λεζάντων.
Για furniture wrappers σε οθόνες μεγαλύτερες από 61.25em, χρησιμοποιείται διάταξη πλέγματος με καθορισμένες στήλες και σειρές. Οι τίτλοι έχουν πάνω περίγραμμα, οι meta ενότητες είναι σχετικά τοποθετημένες και οι standfirst ενότητες έχουν συγκεκριμένο στυλ για συνδέσμους και παραγράφους, συμπεριλαμβανομένων περιγραμμάτων και υπογραμμίσεων. Οι εικόνες εντός του wrapper δεν έχουν αριστερό περιθώριο και μέγιστο πλάτος 630px όταν είναι ενσωματωμένες. Σε οθόνες μεγαλύτερες από 71.25em, οι στήλες του πλέγματος αναδιαμορφώνονται και το πάνω περίγραμμα στην πρώτη παράγραφο των standfirst ενότητων αφαιρείται.
Το CSS ορίζει μια διάταξη πλέγματος για μια κεφαλίδα άρθρου με συγκεκριμένες περιοχές για τον τίτλο, τον τίτλο (headline), το standfirst, τις μετα-πληροφορίες και το πορτρέτο (main media). Ορίζει στυλ για αυτά τα στοιχεία, συμπεριλαμβανομένων γραμματοσειρών, περιγραμμάτων και τοποθέτησης. Η διάταξη προσαρμόζεται σε διαφορετικά πλάτη οθόνης: για ευρύτερες οθόνες (πάνω από 81.25em), χρησιμοποιεί ένα πιο λεπτομερές πλέγμα και προσαρμόζει τα πλάτη των στοιχείων· για μεσαίου μεγέθους οθόνες (πάνω από 71.25em), το μέγεθος γραμματοσειράς του τίτλου (headline) αυξάνεται· και για μικρότερες οθόνες (κάτω από 46.24em), το main media προσαρμόζεται σε πλήρες πλάτος θύρας προβολής. Τα περιγράμματα και οι γραμμές χρησιμοποιούν μια προσαρμοσμένη μεταβλητή χρώματος, και κάποια στοιχεία κρύβονται ή επανατοποθετούνται σε συγκεκριμένα breakpoints.
Το furniture wrapper ορίζει ένα σκούρο φόντο και προσαρμόζει περιθώρια και padding για διαφορετικά μεγέθη οθόνης. Σε μεγαλύτερες οθόνες, προσθέτει πλαϊνές στήλες για να επεκτείνει το φόντο. Οι τίτλοι (headlines) και οι τίτλοι (titles) χρησιμοποιούν ένα συγκεκριμένο χρώμα accent, ενώ το κείμενο είναι ανοιχτό γκρι. Τα κουμπιά κοινωνικών μέσων έχουν ένα χρωματισμένο περίγραμμα και εικονίδιο, που γίνονται συμπαγή όταν ο χρήστης περάσει το ποντίκι πάνω τους. Οι λεζάντες έχουν στυλ με κουμπί εναλλαγής, και συγκεκριμένα στοιχεία διάταξης κρύβονται.
Αυτός ο κώδικας CSS ορίζει στυλ για ένα στοιχείο ιστοσελίδας, πιθανώς μια πλαϊνή στήλη ή ένα wrapper περιεχομένου. Ορίζει χρώματα κειμένου, εμφάνιση συνδέσμων και προσαρμογές διάταξης για διαφορετικά μεγέθη οθόνης. Οι σύνδεσμοι έχουν στυλ με συγκεκριμένα χρώματα και υπογραμμίσεις, και η διάταξη περιλαμβάνει στοιχεία φόντου που προσαρμόζονται με βάση το πλάτος της θύρας προβολής. Ο κώδικας χειρίζεται επίσης το στυλ των κοινωνικών μέσων και της ενότητας σχολίων εντός του στοιχείου.
Ο κώδικας CSS ορίζει στυλ για στοιχεία άρθρων και φορτώνει προσαρμοσμένες γραμματοσειρές. Ορίζει ένα ανοιχτό χρώμα περιγράμματος για τα σχόλια και προσαρμόζει στυλ επικεφαλίδων: οι επικεφαλίδες h2 σε άρθρα έχουν ελαφρύ βάρος γραμματοσειράς από προεπιλογή, αλλά γίνονται έντονες αν περιέχουν strong tag. Επιπλέον, εισάγει την οικογένεια γραμματοσειρών Guardian Headline Full σε διάφορα βάρη και στυλ (light, regular, medium, semibold, καθένα με κανονικές και πλάγιες εκδόσεις) από συγκεκριμένες διευθύνσεις ιστού.
Το κείμενο ορίζει αρκετές προσαρμοσμένες γραμματοσειρές για τον ιστότοπο του Guardian. Καθορίζει τη γραμματοσειρά "Guardian Headline Full" σε διάφορα βάρη και στυλ (όπως bold, italic και black), καθεμία με συνδέσμους σε διαφορετικές μορφές αρχείων (woff2, woff, ttf). Ορίζει επίσης μια γραμματοσειρά "Guardian Titlepiece".
Επιπλέον, ορίζει κάποιες μεταβλητές χρωμάτων για τη σκοτεινή λειτουργία σε συσκευές iOS και Android, και περιλαμβάνει συγκεκριμένους κανόνες CSS για να στυλιστεί το πρώτο γράμμα των παραγράφων σε άρθρα σε αυτές τις κινητές πλατφόρμες.
Για συσκευές Android, το πρώτο γράμμα της πρώτης παραγράφου σε τυπικά ή σχολιασμένα άρθρα έχει στυλ με το δευτερεύον χρώμα πυλώνα. Τόσο σε iOS όσο και σε Android, οι κεφαλίδες άρθρων κρύβονται, και το furniture wrapper έχει συγκεκριμένο padding. Οι ετικέτες εντός αυτού του wrapper χρησιμοποιούν μια έντονη, κεφαλαιοποιημένη γραμματοσειρά με ένα νέο χρώμα πυλώνα. Οι τίτλοι (headlines) ορίζονται σε 32px, έντονοι, με κάτω padding και ένα σκούρο χρώμα. Οι εικόνες τοποθετούνται σχετικά, με περιθώρια πλήρους πλάτους και αυτόματο ύψος.
Για συσκευές Android, οι εικόνες εντός containers άρθρων έχουν διαφανές φόντο και ένα πλάτος που προσαρμόζεται στην θύρα προβολής, ενώ το ύψος τους ορίζεται σε αυτόματο. Τόσο σε iOS όσο και σε Android, η standfirst ενότητα σε άρθρα έχει συγκεκριμένο padding και περιθώρια, με το κείμενό της να χρησιμοποιεί την οικογένεια γραμματοσειρών τίτλου του Guardian. Οι σύνδεσμοι εντός του standfirst έχουν στυλ με υπογράμμιση σε ένα καθορισμένο χρώμα, που αλλάζει όταν ο χρήστης περάσει το ποντίκι πάνω τους. Επιπλέον, η
