Η οικογένεια γραμματοσειρών Guardian Headline Full περιλαμβάνει διάφορα στυλ, καθένα διαθέσιμο σε πολλαπλές μορφές αρχείων. Η ελαφριά έκδοση διατίθεται σε κανονικό και πλάγιο στυλ, με font-weight 300. Η κανονική έκδοση, με font-weight 400, διαθέτει επίσης κανονικό και πλάγιο στυλ. Η μέτρια έκδοση, με font-weight 500, περιλαμβάνει κανονικό και πλάγιο στυλ. Η ημιέντονη έκδοση, με font-weight 600, προσφέρει επίσης κανονικό και πλάγιο στυλ. Όλα τα αρχεία γραμματοσειρών φιλοξενούνται στον διακομιστή περιουσιακών στοιχείων του Guardian.
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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 (scripting: enabled) {
:root article.content--interactive > div,
:root .article {
opacity: 0;
}
:root.interactive-loaded article.content--interactive > div,
:root.interactive-loaded .article {
opacity: 1;
transition: opacity 0.25s ease 0.25s;
}
}
@media (scripting: enabled) and (prefers-reduced-motion) {
:root.interactive-loaded article.content--interactive > div,
:root.interactive-loaded .article {
transition: opacity 0.25s ease 0.1s;
}
}
@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;
}
}
Η στήλη διαδραστικού περιεχομένου και οι λίστες έχουν μέγιστο πλάτος 620 pixel. Στις μεγαλύτερες οθόνες, ξεκινώντας από πλάτος 1140 pixel, προστίθεται μια κάθετη γραμμή στα αριστερά της διαδραστικής στήλης, με τη θέση της να προσαρμόζεται ελαφρώς σε ακόμα μεγαλύτερες οθόνες. Οι αποστάσεις και το padding για ενσωματωμένα στοιχεία έχουν οριστεί για να διασφαλίζουν σωστή διάταξη, και η πρώτη παράγραφος μετά από συγκεκριμένα στοιχεία λαμβάνει επιπλέον επάνω padding και ένα στυλιζαρισμένο drop cap.
Το πρώτο γράμμα του σώματος του άρθρου στυλιζάρεται με μεγάλη, έντονη, κεφαλαία γραμματοσειρά Georgia, χρωματισμένη με μια συγκεκριμένη μεταβλητή, και τοποθετείται με float στα αριστερά. Οι οριζόντιες γραμμές που ακολουθούνται από παραγράφους δεν έχουν επάνω padding. Τα pullquotes περιορίζονται σε μέγιστο πλάτος 620 pixel.
Για στοιχεία showcase, οι λεζάντες τοποθετούνται στατικά και ορίζονται σε πλήρες πλάτος έως 620 pixel. Τα ενσωματωμένα στοιχεία (immersive) εκτείνονται σε πλήρες πλάτος προβολής, προσαρμόζοντας για scrollbars, με μέγιστο πλάτος 978 pixel σε μεγαλύτερες οθόνες. Οι λεζάντες τους έχουν οριζόντιο padding που ποικίλλει ανάλογα με το μέγεθος της οθόνης. Σε μεσαίου μεγέθους οθόνες, το μέγιστο πλάτος είναι 738 pixel, ενώ σε μικρότερες οθόνες, αυτά τα στοιχεία ευθυγραμμίζονται στην αριστερή άκρη με προσαρμοσμένα περιθώρια.
Για τους furniture wrappers σε μεγάλες οθόνες, χρησιμοποιείται διάταξη πλέγματος με καθορισμένες στήλες και σειρές. Το πρώτο παιδί της επικεφαλίδας έχει επάνω περίγραμμα. Η ενότητα meta έχει μικρό επάνω padding και δεξί περιθώριο μηδέν. Στο standfirst, τα στοιχεία λίστας είναι μεγαλύτερα, οι σύνδεσμοι υπογραμμίζονται χωρίς κάτω περίγραμμα και το χρώμα της υπογράμμισης αλλάζει όταν ο κέρσορας είναι πάνω τους. Η πρώτη παράγραφος στο standfirst έχει επάνω περίγραμμα και κανένα κάτω padding, αν και αυτό το περίγραμμα αφαιρείται σε ακόμα μεγαλύτερες οθόνες.
.furniture-wrapper figure {
margin: 0 0 0 -10px;
}
.furniture-wrapper figure[data-spacefinder-role="inline"].element {
max-width: 630px;
}
@media (min-width: 71.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(2, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(7, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 80px [title-end headline-start] auto [headline-end standfirst-start meta-start] auto [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
content: "";
width: 540px;
position: absolute;
top: 0;
background-color: var(--headerBorder);
height: 1px;
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name="standfirst"] p {
border-top: unset;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name="standfirst"]:before {
content: "";
width: 1px;
background-color: var(--headerBorder);
height: 100%;
position: absolute;
top: 0;
left: 0.5px;
}
}
@media (min-width: 81.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(3, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(8, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] 0.75fr [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
width: 620px;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name="standfirst"]:before {
left: -0.5px;
}
}
.furniture-wrapper .article-header .content__labels > div,
.furniture-wrapper [data-gu-name="title"] .content__labels > div {
padding-top: 2px;
}
.furniture-wrapper #headline h1,
.furniture-wrapper [data-gu-name="headline"] h1,
.furniture-wrapper .headline h1 {
font-weight: 600;
max-width: 620px;
font-size: 32px;
}
@media (min-width: 71.25em) {
.furniture-wrapper #headline h1,
.furniture-wrapper [data-gu-name="headline"] h1,
.furniture-wrapper .headline h1 {
max-width: 540px;
font-size: 50px;
}
}
@media (min-width: 46.25em) {
.furniture-wrapper .keyline-4,
.furniture-wrapper [data-gu-name="lines"] {
margin-right: 0;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper .keyline-4,
.furniture-wrapper [data-gu-name="lines"] {
display: none;
}
}
.furniture-wrapper .keyline-4 svg,
.furniture-wrapper [data-gu-name="lines"] svg {
stroke: var(--headerBorder);
}
@media (min-width: 46.25em) {
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name="meta"] {
margin-right: 0;
}
}
.furniture-wrapper #meta .meta__social,
.furniture-wrapper #meta .meta__social ul li a span,
.furniture-wrapper #meta .meta__comment,
.furniture-wrapper [data-gu-name="meta"] .meta__social,
.furniture-wrapper [data-gu-name="meta"] .meta__social ul li a span,
.furniture-wrapper [data-gu-name="meta"] .meta__comment {
border-color: var(--headerBorder);
}
.furniture-wrapper #meta .content__meta-container_dcr > div > gu-island,
.furniture-wrapper [data-gu-name="meta"] .content__meta-container_dcr > div > gu-island {
display: none;
}
.furniture-wrapper .standfirst,
.furniture-wrapper #standfirst,
.furniture-wrapper [data-gu-name="standfirst"] {
margin-left: -10px;
padding-left: 10px;
position: relative;
}
@media (min-width: 46.25em) {
.furniture-wrapper .standfirst,
.furniture-wrapper #standfirst,
.furniture-wrapper [data-gu-name="standfirst"] {
padding-top: 2px;
}
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name="standfirst"] p {
font-weight: 400;
font-size: 20px;
padding-bottom: 14px;
}
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
position: relative;
margin-top: 0;
margin-bottom: 2px;
grid-area: portrait;
}
.furniture-wrapper #main-media div div,
.furniture-wrapper [data-gu-name="media"] div div {
width: 100%;
margin-inline: 0;
}
@media (min-width: 61.25em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
margin-bottom: 0;
}
}
@media (max-width: 46.24em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
width: calc(100vw -
Ο κώδικας CSS ορίζει στυλ για ένα στοιχείο furniture wrapper. Ρυθμίζει περιθώρια και padding για διαφορετικά μεγέθη οθονών, τοποθετεί λεζάντες και κουμπιά, και ορίζει χρώματα φόντου. Τα media queries τροποποιούν αυτά τα στυλ βάσει του πλάτους της προβολής, διασφαλίζοντας σωστή διάταξη σε διάφορες συσκευές. Ο κώδικας χειρίζεται επίσης υπολογισμούς πλάτους scrollbar και προσ
