Αυτός ο κώδικας CSS ορίζει μια προσαρμοσμένη οικογένεια γραμματοσειρών με το όνομα "Guardian Headline Full" με πολλαπλά βάρη και στυλ γραμματοσειράς. Περιλαμβάνει βάρη light, regular, medium και semibold, καθένα με κανονικές και πλάγιες παραλλαγές. Οι γραμματοσειρές φορτώνονται από τους διακομιστές του 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://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, 0px));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width, 0px)) !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 {
border-left: 1px solid #dcdcdc;
left: -11px;
}
}
.content__main-column--interactive .element-atom {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 12px;
padding-top: 12px;
}
.content__main-column--interactive p + .element-atom {
padding-top: 0;
padding-bottom: 0;
margin-top: 12px;
margin-bottom: 12px;
}
.content__main-column--interactive .element-inline {
max-width: 620px;
}
@media (min-width: 61.25em) {
figure[data-spacefinder-role="inline"].element {
max-width: 620px;
}
}
:root {
--dateline: #606060;
--headerBorder: #dcdcdc;
--captionText: #999;
--captionBackground: hsla(0, 0%, 7%, 0.72);
--feature: #c70000;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}
:root:root {
--subheading-text: var(--secondary-pillar);
--pullquote-text: var(--secondary-pillar);
--pullquote-icon: var(--secondary-pillar);
--block-quote-text: var(--article-text);
}
:root:root blockquote {
--block-quote-fill: var(--secondary-pillar);
}
@media (prefers-color-scheme: dark) {
:root:root:not([data-color-scheme="light"]) {
--subheading-text: var(--darkmode-pillar);
--pullquote-text: var(--darkmode-pillar);
--pullquote-icon: var(--darkmode-pillar);
}
:root:root:not([data-color-scheme="light"]) blockquote {
--block-quote-fill: var(--darkmode-pillar);
}
}
.content__main-column--interactive .element.element-atom,
.element.element-atom {
padding: 0;
}
#article-body > div .element-atom:first-of-type + p:first-of-type,
#article-body > div .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
#article-body > div .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
#article-body > div hr:not(.last-horizontal-rule) + p,
.content--interactive > div .element-atom:first-of-type + p:first-of-type,
.content--interactive > div .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
.content--interactive > div .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
.content--interactive > div hr:not(.last-horizontal-rule) + p,
#comment-body .element-atom:first-of-type + p:first-of-type,
#comment-body .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
#comment-body .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
#comment-body hr:not(.last-horizontal-rule) + p,
[data-gu-name="body"] .element-atom:first-of-type + p:first-of-type,
[data-gu-name="body"] .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
[data-gu-name="body"] .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
[data-gu-name="body"] hr:not(.last-horizontal-rule) + p,
#feature-body .element-atom:first-of-type + p:first-of-type,
#feature-body .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
#feature-body .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
#feature-body hr:not(.last-horizontal-rule) + p {
padding-top: 14px;
}
#article-body > div .element-atom:first-of-type + p:first-of-type:first-letter,
#article-body > div .element-atom:first-of-type + .sign-in-gate + p:first-of-type:first-letter,
#article-body > div .element-atom:first-of-type + #sign-in-gate + p:first-of-type:first-letter,
#article-body > div hr:not(.last-horizontal-rule) + p:first-letter,
.content--interactive > div .element-atom:first-of-type + p:first-of-type:first-letter,
.content--interactive > div .element-atom:first-of-type + .sign-in-gate + p:first-of-type:first-letter,
.content--interactive > div .element-atom:first-of-type + #sign-in-gate + p:first-of-type:first-letter,
.content--interactive > div hr:not(.last-horizontal-rule) + p:first-letter,
#comment-body .element-atom:first-of-type + p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type + .sign-in-gate + p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type + #sign-in-gate + p:first-of-type:first-letter,
#comment-body hr:not(.last-horizontal-rule) + p:first-letter,
[data-gu-name="body"] .element-atom:first-of-type + p:first-of-type:first-letter,
[data-gu-name="body"] .element-atom:first-of-type + .sign-in-gate + p:first-of-type:first-letter,
[data-gu-name="body"] .element-atom:first-of-type + #sign-in-gate + p:first-of-type:first-letter,
[data-gu-name="body"] hr:not(.last-horizontal-rule) + p:first-letter,
#feature-body .element-atom:first-of-type + p:first-of-type:first-letter,Το πρώτο γράμμα της πρώτης παραγράφου στο σώμα του άρθρου χρησιμοποιεί μια συγκεκριμένη γραμματοσειρά επικεφαλίδας, είναι έντονο, μεγάλο, επιπλέει στα αριστερά, κεφαλαία και χρωματισμένο. Οι παράγραφοι που ακολουθούν έναν οριζόντιο κανόνα δεν έχουν επάνω padding. Τα pullquotes περιορίζονται σε 620 pixel πλάτος.
Οι λεζάντες για στοιχεία showcase τοποθετούνται κανονικά, με πλήρες πλάτος έως 620 pixel. Τα ενσωματωμένα (immersive) στοιχεία εκτείνονται σε όλο το πλάτος της οθόνης, προσαρμόζοντας το μέγιστο πλάτος τους και το padding των λεζάντων σε διαφορετικά μεγέθη οθόνης. Σε πολύ μικρές οθόνες, ευθυγραμμίζονται στην αριστερή άκρη.
Για μεγαλύτερες οθόνες, η επικεφαλίδα του άρθρου χρησιμοποιεί διάταξη πλέγματος. Ο τίτλος έχει επάνω περίγραμμα, οι μετα-πληροφορίες τοποθετούνται με μικρό επάνω padding και οι σύνδεσμοι του standfirst υπογραμμίζονται με ένα προσαρμοσμένο χρώμα αντί να έχουν κάτω περίγραμμα.Για οθόνες με ελάχιστο πλάτος 61.25em, η πρώτη παράγραφος μέσα στο στοιχείο standfirst θα έχει επάνω περίγραμμα και κανένα κάτω padding. Εάν η οθόνη είναι επίσης τουλάχιστον 71.25em πλάτος, αυτό το επάνω περίγραμμα αφαιρείται.
Σε οθόνες πλάτους τουλάχιστον 61.25em, οι εικόνες μέσα στον wrapper furniture δεν έχουν αριστερό περιθώριο και οι ενσωματωμένες εικόνες με συγκεκριμένο ρόλο έχουν μέγιστο πλάτος 630px.
Για οθόνες πλάτους τουλάχιστον 71.25em, ο wrapper furniture χρησιμοποιεί διάταξη πλέγματος με καθορισμένες στήλες και σειρές. Μια διακοσμητική γραμμή εμφανίζεται πριν από το στοιχείο meta και οι παράγραφοι του standfirst χάνουν το επάνω περίγραμμά τους. Μια κάθετη γραμμή προστίθεται πριν από το περιεχόμενο του standfirst.
Σε οθόνες πλάτους τουλάχιστον 81.25em, η διάταξη πλέγματος προσαρμόζει τις στήλες και τις σειρές της. Η διακοσμητική γραμμή πριν από το στοιχείο meta γίνεται πιο φαρδιά και η κάθετη γραμμή πριν από το standfirst μετατοπίζεται ελαφρώς.
Οι τίτλοι έχουν μέγιστο πλάτος και μέγεθος γραμματοσειράς, τα οποία αλλάζουν σε μεγαλύτερα μεγέθη οθονών. Ορισμένα keylines κρύβονται σε μεγαλύτερες οθόνες και τα κοινωνικά και σχολιαστικά στοιχεία χρησιμοποιούν τη μεταβλητή χρώματος περιγράμματος. Ορισμένα στοιχεία μετα-περιέκτη δεν εμφανίζονται.
Η ενότητα standfirst έχει αρνητικό αριστερό περιθώριο και σχετική τοποθέτηση, με προσαρμοσμένο padding σε μεσαίου μεγέθους οθόνες. Οι παράγραφοί της έχουν συγκεκριμένες ιδιότητες γραμματοσειράς.
Η κύρια περιοχή πολυμέσων τοποθετείται σχετικά
