Αυτός ο κώδικας 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/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 (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;
}
}Το παρεχόμενο κείμενο φαίνεται να είναι ένα απόσπασμα κώδικα CSS, που είναι μια γλώσσα στυλ για ιστοσελίδες. Ορίζει διάφορους οπτικούς κανόνες για στοιχεία όπως τα κενά, τα χρώματα και τη διάταξη, ειδικά για μια διαδραστική στήλη περιεχομένου. Ο κώδικας ορίζει συγκεκριμένα στυλ για διαφορετικές ενότητες και συνθήκες, όπως οι προτιμήσεις σκοτεινής λειτουργίας.Ο κώδικας CSS ορίζει στυλ για διάφορα στοιχεία σε μια ιστοσελίδα. Ορίζει συγκεκριμένες γραμματοσειρές, μεγέθη και διατάξεις για αρχικά κεφαλαία γράμματα, αποσπάσματα και εμβαπτιστικά στοιχεία. Ο κώδικας περιλαμβάνει κανόνες ανταποκρινόμενου σχεδιασμού που προσαρμόζουν τα περιθώρια, το padding και τις διατάξεις πλέγματος για διαφορετικά μεγέθη οθόνης, διασφαλίζοντας τη σωστή εμφάνιση σε συσκευές από κινητά έως επιτραπέζιους υπολογιστές.Ο κώδικας CSS ορίζει στυλ για έναν περιέκτη διάταξης, προσαρμόζοντας δομές πλέγματος, τυπογραφία και ορατότητα στοιχείων σε διαφορετικά μεγέθη οθόνης. Για μεγαλύτερες οθόνες, ορίζει συγκεκριμένα πρότυπα πλέγματος, τροποποιεί τα μεγέθη και τα πλάτη γραμματοσειράς των τίτλων και αποκρύπτει ορισμένα στοιχεία όπως γραμμές και κοινωνικά στοιχεία. Τα σύνορα και τα κενά προσαρμόζονται χρησιμοποιώντας μεταβλητές CSS και τα media queries διασφαλίζουν ανταποκρινόμενη συμπεριφορά από μεσαίες έως εξαιρετικά μεγάλες οθόνες.@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;
width: 100%;
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: block;
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 {
--new-pillar-colour: var(--darkmode-pillar, var(--darkModeFeature)) !important;
--headerBorderColor: #606060;
--darkModeFeature: #ff5943;
}
nav + section {
display: none;
}
nav + aside {
display: none;
}
aside + section {
display: none;
}
.furniture-wrapper {
background-color: var(--darkBackground);
margin: 0 -10px;
padding: 0 10px 4px;
}
@media (min-width: 30em) {
.furniture-wrapper {
margin: 0 -20px;
padding: 0 20px 8px;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper {
padding: 0 20px;
}
}
@media (min-width: 81.25em) {
.furniture-wrapper:before {
content: "";
width: calc((100vw - 1298px) / 2);
height: 100%;
position: absolute;
left: calc((100vw - 1298px) / -2);
background-color: var(--darkBackground);
border-right: 1px solid var(--headerBorderColor);
}
.furniture-wrapper:after {
content: "";
width: calc((100vw - 1298px) / 2);
height: 100%;
position: absolute;
right: calc((100vw - 1298px) / -2);
background-color: var(--darkBackground);
}
}
.furniture-wrapper .article-header,
.furniture-wrapper [data-gu-name="title"] a,
.furniture-wrapper [data-gu-name="title"] span {
color: var(--new-pillar-colour, --darkModeFeature);
}
@media (min-width: 61.25em) {
.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(--headerBorderColor);
}
}
.furniture-wrapper #headline h1,
.furniture-wrapper [data-gu-name="headline"] h1,
.furniture-wrapper .headline h1 {
font-weight: 700;
color: #dcdcdc;
}
.furniture-wrapper #headline figure,
.furniture-wrapper [data-gu-name="headline"] figure,
.furniture-wrapper .headline figure {
margin-top: 0;
margin-bottom: 2px;
}
@media (min-width: 71.25em) {
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
background-color: var(--headerBorderColor);
}
}
.furniture-wrapper #meta details,
.furniture-wrapper #meta summary,
.furniture-wrapper #meta summary span,
.furniture-wrapper [data-gu-name="meta"] details,
.furniture-wrapper [data-gu-name="meta"] summary,
.furniture-wrapper [data-gu-name="meta"] summary span {
color: #dcdcdc;
}
.furniture-wrapper #meta .meta__social a,
.furniture-wrapper #meta .meta__social button,
.furniture-wrapper [data-gu-name="meta"] .meta__social a,
.furniture-wrapper [data-gu-name="meta"] .meta__social button {
border-color: var(--headerBorderColor);
color: var(--new-pillar-colour, --darkModeFeature);
}
.furniture-wrapper #meta .meta__social a svg,
.furniture-wrapper #meta .meta__social button svg,
.furniture-wrapper [data-gu-name="meta"] .meta__social a svg,
.furniture-wrapper [data-gu-name="meta"] .meta__social button svg {
fill: var(--new-pillar-colour, --darkModeFeature);
}
.furniture-wrapper #meta .meta__social a:hover,
.furniture-wrapper #meta .meta__social button:hover,
.furniture-wrapper [data-gu-name="meta"] .meta__social a:hover,
.furniture-wrapper [data-gu-name="meta"] .meta__social button:hover {
/ Τα στυλ hover συνεχίζονται εδώ /
}Όταν ο δείκτης του ποντικιού περνά πάνω από συνδέσμους ή κουμπιά κοινωνικών μέσων εντός του περιέκτη furniture, το χρώμα του κειμένου αλλάζει σε σκούρο φόντο και το χρώμα του φόντου αλλάζει σε ένα νέο χρώμα πυλώνα ή χαρακτηριστικό σκοτεινής λειτουργίας. Τα εικονίδια μέσα σε αυτά τα κουμπιά επίσης γεμίζουν με το χρώμα του σκούρου φόντου.
Το κείμενο εντός των τμημάτων meta εμφανίζεται σε ανοιχτό γκρι (#dcdcdc), ενώ οι σύνδεσμοι χρωματίζονται με το νέο χρώμα πυλώνα ή χαρακτηριστικό σκοτεινής λειτουργίας. Όταν ο δείκτης του ποντικιού περνά πάνω τους, αυτοί οι σύνδεσμοι διατηρούν το ίδιο χρώμα και η υπογράμμισή τους ταιριάζει με αυτό.
Στα τμήματα standfirst, οι σύνδεσμοι δεν έχουν κάτω περίγραμμα, χρησι