Αυτό είναι ένα φύλλο στυλ CSS που ορίζει την οικογένεια γραμματοσειρών "Guardian Headline Full". Περιλαμβάνει πολλούς κανόνες @font-face, καθένας από τους οποίους καθορίζει ένα διαφορετικό βάρος και στυλ της γραμματοσειράς, μαζί με τις διευθύνσεις URL για τα αρχεία γραμματοσειράς σε διάφορες μορφές (WOFF2, WOFF και TTF). Τα βάρη κυμαίνονται από ελαφρύ (300) έως ημι-έντονο (600), και περιλαμβάνονται τόσο κανονικά όσο και πλάγια στυλ. Τα αρχεία γραμματοσειράς φιλοξενούνται στον διακομιστή πόρων του Guardian.
Αυτό το κείμενο φαίνεται να είναι κώδικας CSS, όχι φυσική γλώσσα. Ορίζει στυλ γραμματοσειράς και κανόνες διάταξης για μια ιστοσελίδα. Εφόσον είναι τεχνικός κώδικας, η μεταγραφή του σε άπταιστα αγγλικά δεν είναι εφαρμόσιμη. Αν εννοούσατε να μοιραστείτε ένα διαφορετικό κείμενο, παρακαλώ παρέχετέ το και θα χαρώ να βοηθήσω.
αριστερά: -11px.
Η κύρια στήλη περιεχομένου για διαδραστικά άρθρα δεν έχει περιθώριο ή εσωτερικό διάκενο γύρω από ενσωματωμένα στοιχεία, με 12px εσωτερικό διάκενο στο πάνω και κάτω μέρος. Όταν μια παράγραφος ακολουθείται από ένα ενσωματωμένο στοιχείο, το εσωτερικό διάκενο αφαιρείται και αντικαθίσταται με περιθώρια 12px. Τα ενσωματωμένα στοιχεία περιορίζονται σε μέγιστο πλάτος 620px.
Σε οθόνες μεγαλύτερες από 61.25em, τα ενσωματωμένα σχήματα περιορίζονται επίσης στα 620px.
Για ενότητες μέσων με βίντεο σε βρόχο, η λεζάντα τοποθετείται πάνω από άλλα στοιχεία και το κουμπί βρόχου ευθυγραμμίζεται κάτω δεξιά με επιπλέον διάκενο. Τα κουμπιά σίγασης και κατάργησης σίγασης τοποθετούνται στα δεξιά με λίγο αριστερό εσωτερικό διάκενο. Το κουμπί λεζάντας βρίσκεται πάνω από όλα και σε μεγαλύτερες οθόνες τοποθετείται κοντά στο κάτω μέρος.
Για κινηματογραφικές εικόνες (ένας τύπος βίντεο σε βρόχο), το όριο ύψους αφαιρείται σε οθόνες μεγαλύτερες από 46.25em.
Στο σώμα, τα αυτο-φιλοξενούμενα βίντεο εμφανίζονται ως μπλοκ με μέγιστο πλάτος 620px και περιθώρια 12px. Το βίντεο και το σχήμα βρόχου του καταλαμβάνουν όλο το πλάτος, με το ύψος του βίντεο να προσαρμόζεται αυτόματα.
Όταν ένα βίντεο έχει ρυθμιστεί σε λειτουργία εμβύθισης, επεκτείνεται για να γεμίσει τον διαθέσιμο χώρο, αφαιρώντας το όριο πλάτους και τα περιθώρια. Σε πολύ μεγάλες οθόνες (πάνω από 71.25em), το δοχείο βίντεο έχει πλάτος 1140px και μετατοπίζεται αριστερά κατά 180px, με τη λεζάντα να έχει εσοχή. Σε ακόμη μεγαλύτερες οθόνες (πάνω από 81.25em), γίνεται 1300px πλάτος και μετατοπίζεται αριστερά κατά 260px.
Ο σχεδιασμός χρησιμοποιεί συγκεκριμένα χρώματα: ένα γκρι για τις ημερομηνίες, ένα ανοιχτό γκρι για τα περιγράμματα, ένα πιο ανοιχτό γκρι για τις λεζάντες και ένα ημιδιαφανές σκούρο φόντο για το κείμενο λεζάντας. Το κύριο χρώμα χαρακτηριστικού είναι ένα σκούρο κόκκινο, το οποίο μπορεί να αντικατασταθεί από ένα προσαρμοσμένο χρώμα πυλώνα.
Οι υπότιτλοι, τα αποσπάσματα έλξης και τα αποσπάσματα μπλοκ χρησιμοποιούν το δευτερεύον χρώμα πυλώνα, το οποίο μπορεί να προσαρμοστεί σε σκοτεινή λειτουργία.
Τα ενσωματωμένα στοιχεία δεν έχουν εσωτερικό διάκενο. Όταν ένα ενσωματωμένο στοιχείο εμφανίζεται αμέσως μετά από άλλο στοιχείο ή μια οριζόντια γραμμή, η επόμενη παράγραφος δεν λαμβάνει επιπλέον πάνω περιθώριο, εξασφαλίζοντας σταθερό διάκενο. Αυτό ισχύει σε διαφορετικές ενότητες περιεχομένου και διαδραστικές διατάξεις.
Αυτή είναι μια λίστα επιλογέων CSS που στοχεύει συγκεκριμένες παραγράφους σε μια διάταξη ιστοσελίδας. Εφαρμόζει πάνω εσωτερικό διάκενο 14 pixel σε παραγράφους που έρχονται αμέσως μετά από ορισμένα στοιχεία όπως "element-atom", "sign-in-gate" ή οριζόντιες γραμμές (αλλά όχι την τελευταία). Οι επιλογείς καλύπτουν διαφορετικά τμήματα της σελίδας, όπως το κύριο περιεχόμενο, το σώμα σχολίων και το σώμα χαρακτηριστικών.
Το δεύτερο μέρος του CSS χρησιμοποιεί το ψευδο-στοιχείο `:first-letter` για να διαμορφώσει το πρώτο γράμμα αυτών των ίδιων παραγράφων, πιθανώς για εφέ αρχικού κεφαλαίου. Εφαρμόζει αυτό το στυλ σε διάφορα δοχεία όπως η κύρια στήλη, το σώμα άρθρου και οι ενότητες διαδραστικού περιεχομένου.
Εδώ είναι το μεταγραμμένο κείμενο σε άπταιστα, φυσικά αγγλικά:
---
Οι κανόνες CSS εφαρμόζουν ένα στυλ αρχικού κεφαλαίου στο πρώτο γράμμα της πρώτης παραγράφου μετά από ορισμένα στοιχεία, όπως οριζόντιες γραμμές ή δοχεία διαφημίσεων, εντός συγκεκριμένων περιοχών περιεχομένου. Το αρχικό κεφαλαίο χρησιμοποιεί τη γραμματοσειρά Guardian Headline, είναι έντονο, μεγάλο (111px) και αιωρείται αριστερά με κεφαλαία γράμματα. Έχει περιθώριο στα δεξιά, ευθυγραμμίζεται κάθετα στην κορυφή και χρησιμοποιεί μια προσαρμοσμένη μεταβλητή χρώματος.
Για διαδραστικό περιεχόμενο και άλλες ενότητες, οι παράγραφοι που ακολουθούν οριζόντιες γραμμές δεν έχουν πάνω εσωτερικό διάκενο.
Τα αποσπάσματα έλξης εντός αυτών των περιοχών περιεχομένου περιορίζονται σε μέγιστο πλάτος 620px.
Οι λεζάντες εικόνων για στοιχεία προβολής τοποθετούνται στατικά και καταλαμβάνουν όλο το πλάτος, έως 620px. Σε μεγαλύτερες οθόνες (πάνω από 71.25em), γίνονται απόλυτα τοποθετημένες με μέγιστο πλάτος 140px, και σε ακόμη μεγαλύτερες οθόνες (πάνω από 81.25em), το μέγιστο πλάτος αυξάνεται σε 220px.
Τα στοιχεία εμβύθισης εκτείνονται σε όλο το πλάτος της θύρας προβολής, λαμβάνοντας υπόψη το πλάτος της γραμμής κύλισης. Σε μικρότερες οθόνες, έχουν μέγιστο πλάτος 978px και οι λεζάντες έχουν οριζόντιο εσωτερικό διάκενο. Σε μεσαίες οθόνες, το μέγιστο πλάτος είναι 738px. Σε πολύ μικρές οθόνες, το στοιχείο μετατοπίζεται αριστερά με αρνητικά περιθώρια και οι λεζάντες λαμβάνουν επιπλέον εσωτερικό διάκενο.
Για σχήματα προβολής στο σώμα περιεχομένου, υπάρχουν αρνητικά αριστερά περιθώρια σε μεγαλύτερες οθόνες για σωστή ευθυγράμμιση.
Το περιτύλιγμα επίπλων τοποθετείται σχετικά, και σε οθόνες μεγαλύτερες από 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] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start] 0.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: 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 - 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 {
--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%;
}
}
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{color:var(--darkBackground);background-color:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper #meta .meta__social a:hover svg,.furniture-wrapper #meta .meta__social button:hover svg,.furniture-wrapper [data-gu-name=meta] .meta__social a:hover svg,.furniture-wrapper [data-gu-name=meta] .meta__social button:hover svg{fill:var(--darkBackground)}.furniture-wrapper #meta div,.furniture-wrapper [data-gu-name=meta] div{color:#dcdcdc}.furniture-wrapper #meta a,.furniture-wrapper [data-gu-name=meta] a{color:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper #meta a:hover,.furniture-wrapper [data-gu-name=meta] a:hover{color:var(--new-pillar-colour, --darkModeFeature);text-decoration-color:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper .standfirst a,.furniture-wrapper .standfirst li a,.furniture-wrapper #standfirst a,.furniture-wrapper #standfirst li a,.furniture-wrapper [data-gu-name=standfirst] a,.furniture-wrapper [data-gu-name=standfirst] li a{border-bottom:none;color:var(--new-pillar-colour, --darkModeFeature);background-image:none!important;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--headerBorder, #dcdcdc);text-decoration-thickness:1px}.furniture-wrapper .standfirst a:hover,.furniture-wrapper .standfirst li a:hover,.furniture-wrapper #standfirst a:hover,.furniture-wrapper #standfirst li a:hover,.furniture-wrapper [data-gu-name=standfirst] a:hover,.furniture-wrapper [data-gu-name=standfirst] li a:hover{border-bottom:none;text-decoration-color:var(--new-pillar-colour, --darkModeFeature)}.furniture-wrapper .standfirst p,.furniture-wrapper #standfirst p,.furniture-wrapper [data-gu-name=standfirst] p{color:#dcdcdc}@media (min-width: 61.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{bo
Δεν μπορώ να μεταγράψω αυτό το κείμενο καθώς φαίνεται να είναι κώδικας CSS, όχι πεζός λόγος σε φυσική γλώσσα. Θα μπορούσατε να παρέχετε ένα απόσπασμα γραπτών αγγλικών που θα θέλατε να αναδιατυπώσω;
Εδώ είναι το μεταγραμμένο κείμενο σε άπταιστα, φυσικά αγγλικά:
Αυτό είναι ένα σύνολο κανόνων @font-face για την οικογένεια γραμματοσειρών "Guardian Headline Full". Κάθε κανόνας ορίζει ένα διαφορετικό στυλ ή βάρος της γραμματοσειράς, χρησιμοποιώντας αρχεία που φιλοξενούνται στον ιστότοπο του Guardian. Οι μορφές περιλαμβάνουν WOFF2, WOFF και TTF για συμβατότητα σε όλους τους περιηγητές. Τα βάρη κυμαίνονται από κανονικό (400) έως μαύρο (900), με διαθέσιμα τόσο κανονικά όσο και πλάγια στυλ.
Αυτό το κείμενο φαίνεται να είναι κώδικας CSS, όχι φυσική γλώσσα. Ορίζει στυλ γραμματοσειράς και κανόνες διάταξης για έναν ιστότοπο, πιθανώς του Guardian. Εφόσον είναι τεχνικός κώδικας, η μεταγραφή του σε "άπταιστα, φυσικά αγγλικά" δεν είναι εφαρμόσιμη—προορίζεται να διαβαστεί από περιηγητές, όχι από ανθρώπους. Αν θέλετε, μπορώ να εξηγήσω τι κάνει αυτός ο κώδικας σε απλά αγγλικά.
Για συσκευές iOS και Android, οι ετικέτες μέσα στο περιτύλιγμα επίπλων του δοχείου άρθρου έχουν στυλ με έντονο κείμενο, χρησιμοποιώντας την οικογένεια γραμματοσειρών Guardian headline, και είναι χρωματισμένες σύμφωνα με το χρώμα πυλώνα, με κεφαλαία γράμματα.
Σε iOS και Android, ο κύριος τίτλος στο περιτύλιγμα επίπλων έχει μέγεθος 32 pixel, έντονο, με 12 pixel εσωτερικό διάκενο από κάτω, και είναι χρωματισμένος σκούρος (σχεδόν μαύρος).
Για εικόνες στο περιτύλιγμα επίπλων και στις δύο πλατφόρμες, τοποθετούνται σχετικά, με περιθώριο 14 pixel στην κορυφή και ελαφρώς αρνητικό αριστερό περιθώριο, και εκτείνονται σε όλο το πλάτος της οθόνης (λαμβάνοντας υπόψη τυχόν γραμμή κύλισης). Οι ίδιες οι εικόνες, μαζί με τους συνδέσμους και τα εσωτερικά δοχεία τους, έχουν διαφανές φόντο και διατηρούν το φυσικό τους ύψος.
Το εισαγωγικό κείμενο (standfirst) στο περιτύλιγμα επίπλων και στις δύο πλατφόρμες έχει κάποιο εσωτερικό διάκενο στην κορυφή και το κάτω μέρος, και ένα ελαφρώς αρνητικό δεξί περιθώριο για σωστή ευθυγράμμιση με την άκρη της οθόνης.
.ment-article-container .furniture-wrapper .standfirst__inner p {
font-family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif;
}
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;
}
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #feature-article-container .furniture-wrapper .standfirst__inner a:hover,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner a:hover,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #feature-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #standard-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #standard-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #comment-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #comment-article-container .furniture-wrapper .standfirst__inner a:hover {
text-decoration-color: var(--new-pillar-colour);
}
body.ios #feature-article-container .furniture-wrapper .meta,
body.ios #standard-article-container .furniture-wrapper .meta,
body.ios #comment-article-container .furniture-wrapper .meta,
body.android #feature-article-container .furniture-wrapper .meta,
body.android #standard-article-container .furniture-wrapper .meta,
body.android #comment-article
