Αυτό είναι ένα μπλοκ κώδικα CSS που ορίζει προσαρμοσμένες γραμματοσειρές για έναν ιστότοπο. Ρυθμίζει την οικογένεια γραμματοσειρών "Guardian Headline Full" με διαφορετικά στυλ και βάρη, όπως light, regular, medium και semibold, το καθένα με κανονικές και πλάγιες εκδόσεις. Ο κώδικας καθορίζει από πού θα γίνει λήψη των αρχείων γραμματοσειράς, χρησιμοποιώντας διαφορετικές μορφές όπως WOFF2, WOFF και TTF για να διασφαλιστεί η συμβατότητα σε όλους τους browser.
Αυτό είναι ένα μπλοκ κώδικα CSS, όχι ένα απόσπασμα κειμένου. Ορίζει στυλ γραμματοσειράς και κανόνες διάταξης για έναν ιστότοπο. Ακολουθεί μια εξήγηση στα απλά Αγγλικά για το τι κάνει:
Ο κώδικας ρυθμίζει προσαρμοσμένες γραμματοσειρές για τον ιστότοπο του Guardian, συμπεριλαμβανομένων των "Guardian Headline Full" σε διάφορα βάρη (bold, black και τις πλάγιες εκδόσεις τους) και "Guardian Titlepiece" σε bold. Αυτές οι γραμματοσειρές φορτώνονται από τον διακομιστή assets του Guardian σε πολλαπλές μορφές (WOFF2, WOFF και TTF) για να διασφαλιστεί η συμβατότητα σε όλους τους browser.
Περιέχει επίσης κανόνες responsive design για μια συγκεκριμένη διάταξη σελίδας που ονομάζεται "content__main-column--interactive." Σε ευρύτερες οθόνες (πάνω από 71.25em), αυτή η στήλη αποκτά αριστερό περιθώριο 160px, και σε ακόμη ευρύτερες οθόνες (πάνω από 81.25em), το περιθώριο αυξάνεται σε 240px. Μέσα σε αυτή τη στήλη, ορισμένα στοιχεία όπως το "element-atom" περιορίζονται σε μέγιστο πλάτος 620px, αλλά σε μικρότερες οθόνες (κάτω από 46.24em), μπορούν να καταλαμβάνουν όλο το πλάτος.
Για τα στοιχεία "element-showcase", δεν έχουν αριστερό περιθώριο στο κινητό, αλλά σε μεσαίες οθόνες (46.25em και άνω), περιορίζονται σε πλάτος 620px, και σε μεγάλες οθόνες (71.25em και άνω), μπορούν να επεκταθούν σε 860px. Τα στοιχεία "element-immersive" είναι σχεδιασμένα να είναι πλήρους πλάτους: στο κινητό, εκτείνονται σε όλο το viewport, σε μεσαίες οθόνες μετατοπίζονται ελαφρώς και εκτείνονται πέρα από τη στήλη, και σε μεγάλες οθόνες ευθυγραμμίζονται κανονικά με μέγιστο πλάτος 1260px.
Τέλος, οι παράγραφοι και οι λίστες μέσα σε αυτή τη στήλη περιορίζονται επίσης σε πλάτος 620px, και υπάρχει ένα διακοσμητικό ψευδο-στοιχείο (":before") που εκτείνεται σε όλο το ύψος της στήλης συν 15px, με ελάχιστο ύψος 100px, τοποθετημένο στην κορυφή..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;
}
}
[data-gu-name="media"]:has(figure.loop) figure.loop figcaption:not(.hidden) {
z-index: 6;
}
[data-gu-name="media"]:has(figure.loop) figure.loop button[data-link-name*="gu-video-loop"] {
align-self: flex-end;
margin-bottom: 40px;
margin-right: 3px;
}
[data-gu-name="media"]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid="unmute-icon"]),
[data-gu-name="media"]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid="mute-icon"]) {
right: 0;
padding-left: 10px;
}
[data-gu-name="media"]:has(figure.loop) #caption-button {
z-index: 100;
}
@media (min-width: 61.25em) {
[data-gu-name="media"]:has(figure.loop) #caption-button {
bottom: 20px;
}
}
@media (min-width: 46.25em) {
[data-gu-name="media"]:has(figure.cinemagraph) .cinemagraph > div {
max-height: unset;
}
}
[data-gu-name="body"] gu-island[name="SelfHostedVideo"] {
width: 100%;
max-width: 620px;
display: block;
margin-top: 12px;
margin-bottom: 12px;
}
[data-gu-name="body"] gu-island[name="SelfHostedVideo"] figure.loop,
[data-gu-name="body"] gu-island[name="SelfHostedVideo"] figure.loop video {
width: 100%;
height: auto;
max-width: 620px;
margin: 0 auto;
}
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) {
max-width: unset;
margin: 12px 0;
}
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) figure.loop,
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) figure.loop video {
max-width: unset;
margin: 0;
}
@media (min-width: 71.25em) {
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) {
width: 1140px;
margin-left: -180px;
}
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) figure figcaption {
margin-left: 20px;
}
}
@media (min-width: 81.25em) {
[data-gu-name="body"] gu-island[name="SelfHostedVideo"]:has(figure.loop.element-video-immersive) {
width: 1300px;
margin-left: -260px;
}
}
:root {
--dateline: #606060;
--headerBorder: #dcdcdc;
--captionText: #999;
--captionBackground: hsla(0, 0%, 7%, .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;
}
.content__main-column--interactive .element-atom:first-of-type + p:first-of-type,
.content__main-column--interactive .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
.content__main-column--interactive .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
.content__main-column--interactive .element-atom:first-of-type + .element-atom + p:first-of-type,
.content__main-column--interactive hr:not(.last-horizontal-rule) + p,
.content__main-column--interactive hr:not(.last-horizontal-rule) + .ad-slot-container + p,
#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 .element-atom:first-of-type + .element-atom + p:first-of-type,
#article-body > div hr {
/ Δεν ορίζονται συγκεκριμένα στυλ εδώ· η λίστα επιλογέων πιθανότατα στοχεύει αυτά τα στοιχεία για κάποιο σκοπό. /
}Η πρώτη παράγραφος μετά από μια οριζόντια γραμμή ή ένα element atom αποκτά επιπλέον πάνω padding, εκτός αν είναι η τελευταία οριζόντια γραμμή. Αυτό ισχύει σε διάφορες ενότητες όπως το σώμα του άρθρου, το διαδραστικό περιεχόμενο, τα σχόλια και τις ενότητες χαρακτηριστικών.
Ομοίως, το πρώτο γράμμα αυτής της πρώτης παραγράφου διαμορφώνεται με εφέ drop cap, αλλά μόνο σε συγκεκριμένα πλαίσια όπως η διαδραστική κύρια στήλη, το σώμα του άρθρου και οι ενότητες σχολίων.Ακολουθεί το ξαναγραμμένο κείμενο σε άπταιστα, φυσικά Αγγλικά:
---
Οι ακόλουθοι κανόνες CSS εφαρμόζονται στο πρώτο γράμμα ορισμένων παραγράφων, δίνοντάς τους ένα μεγάλο, έντονο, κεφαλαίο στυλ drop cap. Αυτό επηρεάζει παραγράφους που έρχονται αμέσως μετά από συγκεκριμένα στοιχεία όπως οριζόντιες γραμμές ή μπλοκ περιεχομένου, αλλά μόνο όταν είναι η πρώτη παράγραφος στο σώμα ή στις ενότητες χαρακτηριστικών. Το στυλ χρησιμοποιεί τη γραμματοσειρά Guardian headline, ορίζει το μέγεθος γραμματοσειράς στα 111 pixel και ευθυγραμμίζει το γράμμα αριστερά με ένα ελαφρύ περιθώριο. Το χρώμα ελέγχεται από μια προσαρμοσμένη ιδιότητα, με εναλλακτική την τιμή του χρώματος pillar.
Για διαδραστικό περιεχόμενο και σώματα άρθρων, οι παράγραφοι που ακολουθούν μια οριζόντια γραμμή ή ένα δοχείο διαφημίσεων δεν έχουν επιπλέον πάνω padding.
Τα pull quotes στο σώμα, τα χαρακτηριστικά, τα σχόλια και τις διαδραστικές ενότητες περιορίζονται σε μέγιστο πλάτος 620 pixel.
Οι λεζάντες για εικόνες showcase τοποθετούνται κανονικά στατικά και καταλαμβάνουν όλο το πλάτος, έως 620 pixel. Ωστόσο, σε ευρύτερες οθόνες (πάνω από 71.25em), γίνονται απολύτως τοποθετημένες με μέγιστο πλάτος 140 pixel, και σε ακόμη ευρύτερες οθόνες (πάνω από 81.25em), το μέγιστο πλάτος αυξάνεται σε 220 pixel.
Τα στοιχεία immersive εκτείνονται σε όλο το πλάτος του viewport, λαμβάνοντας υπόψη το πλάτος της γραμμής κύλισης. Σε μικρότερες οθόνες (έως 71.24em), περιορίζονται στα 978 pixel, και οι λεζάντες τους έχουν οριζόντιο padding που προσαρμόζεται ανάλογα με το μέγεθος της οθόνης—10 pixel σε πολύ μικρές οθόνες και 20 pixel σε μεσαίες. Μεταξύ 46.25em και 61.24em, το μέγιστο πλάτος είναι 738 pixel. Σε πολύ μικρές οθόνες (έως 46.24em), το στοιχείο μετατοπίζεται αριστερά με αρνητικά περιθώρια και το padding της λεζάντας ορίζεται στα 20 pixel σε οθόνες τουλάχιστον 30em.
Για τα στοιχεία showcase στο σώμα ή στις διαδραστικές στήλες, εφαρμόζεται αρνητικό αριστερό περιθώριο 160 pixel σε οθόνες ευρύτερες από 71.25em.
---
Ενημερώστε με αν χρειάζεστε περαιτέρω προσαρμογές.[body] .content__main-column--interactive figure.element.element--showcase.element-showcase {
margin-left: -240px !important;
}
.furniture-wrapper {
position: relative;
}
@media (min-width: 61.25em) {
.furniture-wrapper {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 0px;
grid-template-columns: [title-start headline-start meta-start standfirst-start] repeat(5, 1fr) [title-end headline-end meta-end standfirst-end portrait-start] repeat(5, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] .25fr [title-end headline-start] 1fr [headline-end standfirst-start] .75fr [standfirst-end meta-start] auto [meta-end portrait-end];
}
.furniture-wrapper #headline > div:first-child,
.furniture-wrapper [data-gu-name="headline"] > div:first-child,
.furniture-wrapper .headline > div:first-child {
border-top: 1px solid var(--headerBorder);
}
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name="meta"] {
position: relative;
padding-top: 2px;
margin-right: 0;
}
.furniture-wrapper .standfirst .content__standfirst,
.furniture-wrapper #standfirst .content__standfirst,
.furniture-wrapper [data-gu-name="standfirst"] .content__standfirst {
margin-bottom: 4px;
}
.furniture-wrapper .standfirst ul li,
.furniture-wrapper #standfirst ul li,
.furniture-wrapper [data-gu-name="standfirst"] ul li {
font-size: 20px;
}
.furniture-wrapper .standfirst li a,
.furniture-wrapper .standfirst a,
.furniture-wrapper #standfirst li a,
.furniture-wrapper #standfirst a,
.furniture-wrapper [data-gu-name="standfirst"] li a,
.furniture-wrapper [data-gu-name="standfirst"] a {
border-bottom: none;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
text-decoration-thickness: 1px;
}
.furniture-wrapper .standfirst li a:hover,
.furniture-wrapper .standfirst a:hover,
.furniture-wrapper #standfirst li a:hover,
.furniture-wrapper #standfirst a:hover,
.furniture-wrapper [data-gu-name="standfirst"] li a:hover,
.furniture-wrapper [data-gu-name="standfirst"] a:hover {
text-decoration-color: var(--new-pillar-colour);
}
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name="standfirst"] p:first-of-type {
border-top: 1px solid var(--headerBorder);
padding-bottom: 0;
}
}
@media (min-width: 61.25em) and (min-width: 71.25em) {
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name="standfirst"] p:first-of-type {
border-top: unset;
}
}
@media (min-width: 61.25em) {
.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: .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] .25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] .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 {
/ Δεν προσδιορίζονται επιπλέον στυλ /
}
}.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 - var(--scrollbar-width, 0px));
margin-left: -10px;
}
}
@media (max-width: 46.24em) and (min-width: 30em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name="media"] {
margin-left: -20px;
}
}
.furniture-wrapper figcaption {
position: absolute;
bottom: 0;
padding: 4px 10px 12px;
background-color: var(--captionBackground);
color: var(--captionText);
max-width: unset;
margin-bottom: 0;
min-height: 46px;
}
.furniture-wrapper figcaption span {
color: var(--headerBorder);
}
.furniture-wrapper figcaption span svg {
fill: var(--headerBorder);
}
.furniture-wrapper figcaption span:nth-of-type(1) {
display: none;
}
.furniture-wrapper figcaption span:nth-of-type(2) {
display: inline;
max-width: 90%;
}
@media (min-width: 30em) {
.furniture-wrapper figcaption {
padding: 4px 20px 12px;
}
}
.furniture-wrapper figcaption.hidden {
opacity: 0;
}
.furniture-wrapper #caption-button {
display: block;
position: absolute;
bottom: 10px;
right: 8px;
z-index: 30;
background-color: var(--captionBackground);
border: none;
border-radius: 50%;
padding: 6px 5px 5px;
}
.furniture-wrapper #caption-button svg {
transform: scale(0.85);
}
@media (min-width: 30em) {
.furniture-wrapper #caption-button {
right: 10px;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive:before {
top: -12px !important;
height: calc(100% + 24px) !important;
}
}
.content__main-column--interactive h2 {
max-width: 620px;
}
:root:has(.ios, .android) {
--darkBackground: #1a1a1a;
--feature: #c70000;
--darkmodeFeature: #ff5943;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}
@media (prefers-color-scheme: dark) {
:root:has(.ios, .android) {
--new-pillar-colour: var(--darkmode-pillar, var(--darkmodeFeature));
}
}
body.ios #feature-article-container .element-atom:first-of-type + p:fiΓια την πρώτη παράγραφο μετά από ένα element atom σε ένα δοχείο άρθρου, το πρώτο γράμμα θα πρέπει να χρησιμοποιεί το δευτερεύον χρώμα pillar (ή μαύρο ως εναλλακτική). Αυτό ισχύει για δοχεία άρθρων χαρακτηριστικών, τυπικών και σχολίων σε συσκευές iOS και Android, συμπεριλαμβανομένων των περιπτώσεων όπου μια πύλη σύνδεσης εμφανίζεται πριν από την παράγραφο.
Σε iOS και Android, η κεφαλίδα άρθρου σε δοχεία χαρακτηριστικών, τυπικών και σχολίων δεν πρέπει να έχει ύψος.
Το furniture wrapper σε αυτά τα δοχεία θα πρέπει να έχει padding 4px στην κορυφή και 10px στα πλάγια. Οι ετικέτες περιεχομένου μέσα σε αυτό θα πρέπει να είναι έντονες, να χρησιμοποιούν την οικογένεια γραμματοσειρών Guardian Headline, να ταιριάζουν με το χρώμα pillar και να είναι κεφαλαιοποιημένες.
Η επικεφαλίδα (h1) στο furniture wrapper θα πρέπει να είναι 32px, έντονη, με 12px padding στο κάτω μέρος και σκούρο χρώμα (#121212).
Τα στοιχεία εικόνας μέσα στο furniture wrapper θα πρέπει να εμφανίζονται ως στοιχεία μπλοκ.wrapper figure.element-image {
position: relative;
margin: 14px 0 0 -10px;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto;
}
/* Σε iOS και Android, για όλους τους τύπους άρθρων (χαρακτηριστικά, τυπικά, σχόλια),
κάντε τις εικόνες και τα δοχεία τους πλήρους πλάτους και διαφανή */
body.ios #feature-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #feature-article-container .furniture-wrapper figure.element-image img,
body.ios #feature-article-container .furniture-wrapper figure.element-image a,
body.ios #standard-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #standard-article-container .furniture-wrapper figure.element-image img,
body.ios #standard-article-container .furniture-wrapper figure.element-image a,
body.ios #comment-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #comment-article-container .furniture-wrapper figure.element-image img,
body.ios #comment-article-container .furniture-wrapper figure.element-image a,
body.android #feature-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #feature-article-container .furniture-wrapper figure.element-image img,
body.android #feature-article-container .furniture-wrapper figure.element-image a,
body.android #standard-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #standard-article-container .furniture-wrapper figure.element-image img,
body.android #standard-article-container .furniture-wrapper figure.element-image a,
body.android #comment-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #comment-article-container .furniture-wrapper figure.element-image img,
body.android #comment-article-container .furniture-wrapper figure.element-image a {
background-color: transparent;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto !important;
}
/ Σε iOS και Android, για όλους τους τύπους άρθρων, προσαρμόστε το διάστημα του standfirst /
body.ios #feature-article-container .furniture-wrapper .standfirst,
body.ios #standard-article-container .furniture-wrapper .standfirst,
body.ios #comment-article-container .furniture-wrapper .standfirst,
body.android #feature-article-container .furniture-wrapper .standfirst,
body.android #standard-article-container .furniture-wrapper .standfirst,
body.android #comment-article-container .furniture-wrapper .standfirst {
padding-top: 4px;
padding-bottom: 24px;
margin-right: -10px;
}
/ Σε iOS και Android, για όλους τους τύπους άρθρων, ορίστε τη γραμματοσειρά για τις παραγράφους του standfirst /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner p,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner p,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner p,
body.android #feature-article-container .furniture-wrapper .standfirst__inner p,
body.android #standard-article-container .furniture-wrapper .standfirst__inner p,
body.android #comment-article-container .furniture-wrapper .standfirst__inner p {
font-family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif;
}
/ Σε iOS και Android, για όλους τους τύπους άρθρων, διαμορφώστε τους συνδέσμους στο standfirst /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #feature-article-container .furniture-wrapper .standfirst__inner a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner a {
color: var(--new-pillar-colour) !important;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
border-bottom: none;
}
/ Σε iOS και Android, για όλους τους τύπους άρθρων, διαμορφώστε τις καταστάσεις hover των συνδέσμων στο standfirst /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #feature-article-container .furniture-wrapper .standfirΚατά την αιώρηση, οι σύνδεσμοι μέσα στο standfirst (συμπεριλαμβανομένων των στοιχ
