To jest arkusz stylów CSS, który definiuje rodzinę czcionek „Guardian Headline Full”. Zawiera wiele reguł @font-face, z których każda określa inną wagę i styl czcionki, wraz z adresami URL plików czcionek w różnych formatach (WOFF2, WOFF i TTF). Wagi wahają się od jasnej (300) do półgrubej (600), a uwzględniono zarówno style normalne, jak i kursywę. Pliki czcionek są hostowane na serwerze zasobów The Guardian.Ten tekst wydaje się być kodem CSS, a nie językiem naturalnym. Definiuje style czcionek i reguły układu dla strony internetowej. Ponieważ jest to kod techniczny, przepisanie go na płynny angielski nie ma zastosowania. Jeśli chodziło Ci o udostępnienie innego tekstu, podaj go, a chętnie pomogę.left: -11px.
Główna kolumna treści dla artykułów interaktywnych nie ma marginesów ani dopełnienia wokół osadzonych elementów, z 12px dopełnienia u góry i na dole. Gdy po akapicie następuje osadzony element, dopełnienie jest usuwane i zastępowane marginesami 12px. Elementy liniowe są ograniczone do maksymalnej szerokości 620px.
Na ekranach szerszych niż 61.25em, figury liniowe są również ograniczone do 620px.
W sekcjach medialnych z zapętlonymi wideo, podpis jest umieszczony nad innymi elementami, a przycisk pętli jest wyrównany do prawego dolnego rogu z dodatkowym odstępem. Przyciski wyciszania i włączania dźwięku są umieszczone po prawej stronie z pewnym lewym dopełnieniem. Przycisk podpisu znajduje się nad wszystkim, a na większych ekranach jest umieszczony blisko dołu.
W przypadku cinemagraphs (rodzaj zapętlonego wideo), limit wysokości jest usuwany na ekranach szerszych niż 46.25em.
W sekcji body, samodzielnie hostowane wideo są wyświetlane jako bloki o maksymalnej szerokości 620px i marginesach 12px. Wideo i jego figura pętli zajmują pełną szerokość, a wysokość wideo dostosowuje się automatycznie.
Gdy wideo jest ustawione w trybie immersyjnym, rozszerza się, aby wypełnić dostępną przestrzeń, usuwając limit szerokości i marginesy. Na bardzo szerokich ekranach (powyżej 71.25em), kontener wideo ma 1140px szerokości i jest przesunięty w lewo o 180px, z wciętym podpisem. Na jeszcze szerszych ekranach (powyżej 81.25em), staje się 1300px szerokości i przesuwa się w lewo o 260px.
Projekt używa określonych kolorów: szarego dla dat, jasnoszarego dla obramowań, jaśniejszego szarego dla podpisów i półprzezroczystego ciemnego tła dla tekstu podpisów. Głównym kolorem funkcji jest ciemna czerwień, która może być nadpisana przez niestandardowy kolor filaru.
Podtytuły, cytaty blokowe i cytaty użyją drugorzędnego koloru filaru, który można dostosować w trybie ciemnym.
Osadzone elementy nie mają dopełnienia. Gdy osadzony element pojawia się bezpośrednio po innym elemencie lub linii poziomej, następujący po nim akapit nie otrzymuje dodatkowego górnego marginesu, co zapewnia spójne odstępy. Dotyczy to różnych sekcji treści i układów interaktywnych.To jest lista selektorów CSS, która celuje w określone akapity w układzie strony internetowej. Stosuje górne dopełnienie 14 pikseli do akapitów, które pojawiają się bezpośrednio po pewnych elementach, takich jak „element-atom”, „sign-in-gate” lub linie poziome (ale nie ostatnia). Selektory obejmują różne sekcje strony, takie jak główna treść, treść komentarzy i treść funkcji.
Druga część CSS używa pseudo-elementu `:first-letter` do stylizowania pierwszej litery tych samych akapitów, prawdopodobnie dla efektu inicjału. Stosuje to stylowanie w różnych kontenerach, takich jak główna kolumna, treść artykułu i sekcje treści interaktywnej.Oto przepisany tekst w płynnym, naturalnym angielskim:
---
Reguły CSS stosują styl inicjału do pierwszej litery pierwszego akapitu po określonych elementach, takich jak linie poziome lub kontenery reklam, w określonych obszarach treści. Inicjał używa czcionki Guardian Headline, jest pogrubiony, duży (111px) i pływa w lewo z tekstem wielkimi literami. Ma margines po prawej stronie, wyrównanie do góry i używa niestandardowej zmiennej koloru.
Dla treści interaktywnych i innych sekcji, akapity następujące po liniach poziomych nie mają górnego dopełnienia.
Cytaty blokowe w tych obszarach treści są ograniczone do maksymalnej szerokości 620px.
Podpisy obrazów dla elementów showcase są pozycjonowane statycznie i zajmują pełną szerokość, do 620px. Na szerszych ekranach (powyżej 71.25em) stają się pozycjonowane absolutnie z maksymalną szerokością 140px, a na jeszcze szerszych ekranach (powyżej 81.25em) maksymalna szerokość wzrasta do 220px.
Elementy immersyjne rozciągają się na pełną szerokość viewportu, uwzględniając szerokość paska przewijania. Na mniejszych ekranach mają maksymalną szerokość 978px, a podpisy mają poziome dopełnienie. Na średnich ekranach maksymalna szerokość wynosi 738px. Na bardzo małych ekranach element jest przesunięty w lewo z ujemnymi marginesami, a podpisy otrzymują dodatkowe dopełnienie.
Dla figur showcase w treści body, na większych ekranach stosowane są ujemne lewe marginesy, aby je odpowiednio wyrównać.
Kontener furniture jest pozycjonowany względnie, a na ekranach szerszych niż 61.25em stosowane są dodatkowe style (chociaż reguła jest niekompletna)..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%;
}
}eight: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{boNie mogę przepisać tego tekstu, ponieważ wydaje się być kodem CSS, a nie prozą w języku naturalnym. Czy możesz podać fragment pisemnego angielskiego, który chciałbyś, abym przeformułował?Oto przepisany tekst w płynnym, naturalnym angielskim:
To jest zestaw reguł @font-face dla rodziny czcionek „Guardian Headline Full”. Każda reguła definiuje inny styl lub wagę czcionki, używając plików hostowanych na stronie The Guardian. Formaty obejmują WOFF2, WOFF i TTF dla kompatybilności w różnych przeglądarkach. Wagi wahają się od regularnej (400) do czarnej (900), z uwzględnieniem zarówno stylów normalnych, jak i kursywy.Ten tekst wydaje się być kodem CSS, a nie językiem naturalnym. Definiuje style czcionek i reguły układu dla strony internetowej, prawdopodobnie The Guardian. Ponieważ jest to kod techniczny, przepisanie go na „płynny, naturalny angielski” nie ma zastosowania — jest przeznaczony do czytania przez przeglądarki, a nie ludzi. Jeśli chcesz, mogę wyjaśnić, co ten kod robi, w prostym angielskim.Dla urządzeń iOS i Android, etykiety wewnątrz kontenera furniture w artykule są stylizowane pogrubionym tekstem, używając rodziny czcionek Guardian headline, i są kolorowane zgodnie z kolorem filaru, z tekstem wielkimi literami.
Na iOS i Androidzie, główny nagłówek w kontenerze furniture jest ustawiony na 32 piksele, pogrubiony, z 12 pikselami dopełnienia poniżej, i jest kolorowany na ciemno (prawie czarny).
Dla obrazów w kontenerze furniture na obu platformach, są one pozycjonowane względnie, z marginesem 14 pikseli na górze i lekko ujemnym lewym marginesem, i rozciągają się do pełnej szerokości ekranu (uwzględniając pasek przewijania). Obrazy, wraz z ich linkami i wewnętrznymi kontenerami, mają przezroczyste tło i zachowują naturalną wysokość.
Standfirst (tekst wprowadzający) w kontenerze furniture na obu platformach ma pewne dopełnienie u góry i na dole oraz lekko ujemny prawy margines, aby wyrównać się z krawędzią ekranu..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-container .furniture-wrapper .meta {
margin: 0;
}
body.ios #feature-article-container .furniture-wrapper .meta .byline,
body.ios #feature-article-container .furniture-wrapper .meta .byline__author,
body.ios #feature-article-container .furniture-wrapper .meta span.byline__author a,
body.ios #feature-article-container .furniture-wrapper .meta .meta__byline span,
body.ios #standard-article-container .furniture-wrapper .meta .byline,
body.ios #standard-article-container .furniture-wrapper .meta .byline__author,
body.ios #standard-article-container .furniture-wrapper .meta span.byline__author a,
body.ios #standard-article-container .furniture-wrapper .meta .meta__byline span,
body.ios #comment-article-container .furniture-wrapper .meta .byline,
body.ios #comment-article-container .furniture-wrapper .meta .byline__author,
body.ios #comment-article-container .furniture-wrapper .meta span.byline__author a,
body.ios #comment-article-container .furniture-wrapper .meta .meta__byline span,
body.android #feature-article-container .furniture-wrapper .meta .byline,
body.android #feature-article-container .furniture-wrapper .meta .byline__author,
body.android #feature-article-container .furniture-wrapper .meta span.byline__author a,
body.android #feature-article-container .furniture-wrapper .meta .meta__byline span,
body.android #standard-article-container .furniture-wrapper .meta .byline,
body.android #standard-article-container .furniture-wrapper .meta .byline__author,
body.android #standard-article-container .furniture-wrapper .meta span.byline__author a,
body.android #standard-article-container .furniture-wrapper .meta .meta__byline span,
body.android #comment-article-container .furniture-wrapper .meta .byline,
body.android #comment-article-container .furniture-wrapper .meta .byline__author,
body.android #comment-article-container .furniture-wrapper .meta span.byline__author a,
body.android #comment-article-container .furniture-wrapper .meta .meta__byline span {
/ Nie zdefiniowano żadnych konkretnych stylów tutaj /
}Na Androidzie, podpisy autora i linki do autorów w sekcjach artykułów i komentarzy używają koloru filaru dla swojego tekstu. Na iOS, to samo stylowanie ma zastosowanie.
Dla iOS i Androida, obszar informacji meta w tych sekcjach nie ma dodatkowego dopełnienia. Wszelkie ikony (takie jak elementy SVG) w tym obszarze używają koloru filaru dla swojego obrysu.
Przycisk podpisu w elementach showcase jest stylizowany tak samo na obu platformach: to mały, wyśrodkowany przycisk (28 na 28 pikseli) z 5 pikselami dopełnienia, umieszczony 14 pikseli od prawej krawędzi.
Główna treść artykułu na iOS i Androidzie ma 12 pikseli dopełnienia po lewej i prawej stronie.
Obrazy w treści artykułu, które nie są miniaturami ani immersyjnymi (takie jak standardowe lub showcase), zajmują pełną szerokość ekranu minus 24 piksele (aby uwzględnić dopełnienie) i szerokość paska przewijania. Ich podpisy podlegają tym samym regułom układu.Dla elementów, które nie są immersyjne, podpis nie powinien mieć dopełnienia.
Na urządzeniach iOS i Android, gdy obraz jest immersyjny w treści artykułu, powinien rozciągać się do pełnej szerokości ekranu, uwzględniając szerokość paska przewijania.
Dla cytatów blokowych w treści artykułu na tych urządzeniach, znak cudzysłowu powinien używać koloru filaru.
Linki w treści artykułu na iOS i Androidzie powinny być stylizowane z głównym kolorem filaru, bez obrazu tła, z podkreśleniem z przesunięciem 6px. Kolor podkreślenia powinien odpowiadać kolorowi obramowania nagłówka. Po najechaniu na te linki, kolor podkreślenia powinien zmienić się na kolor filaru.
W trybie ciemnym, kontener furniture (który zawiera nagłówek artykułu) powinien mieć ciemne tło. Etykiety, nagłówek, tekst standfirst i linki w tym kontenerze powinny używać odpowiednich kolorów: etykiety i linki w kolorze filaru, nagłówek w kolorze obramowania nagłówka, a tekst standfirst w kolorze obramowania nagłówka.Ten tekst wydaje się
