Toto je CSS stylopis, který definuje rodinu písem „Guardian Headline Full". Obsahuje několik pravidel @font-face, z nichž každé určuje jinou váhu a styl písma, spolu s URL adresami souborů písem v různých formátech (WOFF2, WOFF a TTF). Váhy se pohybují od světlé (300) po polotučnou (600) a jsou zahrnuty jak normální, tak kurzívní styly. Soubory písem jsou hostovány na serveru aktiv The Guardian.Tento text se zdá být CSS kódem, nikoli přirozeným jazykem. Definuje styly písem a pravidla rozvržení pro webovou stránku. Protože se jedná o technický kód, přepsání do plynulé angličtiny není použitelné. Pokud jste měli na mysli jiný text, poskytněte jej prosím a rád pomohu.vlevo: -11px.
Hlavní obsahový sloupec pro interaktivní články nemá žádný okraj ani odsazení kolem vložených prvků, s 12px odsazením nahoře a dole. Když za odstavcem následuje vložený prvek, odsazení se odstraní a nahradí se 12px okraji. Vložené prvky jsou omezeny na maximální šířku 620px.
Na obrazovkách širších než 61,25em jsou vložené obrázky také omezeny na 620px.
Pro mediální sekce se smyčkovými videi je popisek umístěn nad ostatními prvky a tlačítko smyčky je zarovnáno vpravo dole s extra mezerou. Tlačítka ztlumení a zapnutí zvuku jsou umístěna vpravo s určitým levým odsazením. Tlačítko popisku je nade vším a na větších obrazovkách je umístěno poblíž spodní části.
Pro cinemagrafy (typ smyčkového videa) je limit výšky odstraněn na obrazovkách širších než 46,25em.
V těle článku jsou vlastní videa zobrazena jako bloky s maximální šířkou 620px a 12px okraji. Video a jeho smyčkový obrázek zabírají plnou šířku, přičemž výška videa se automaticky přizpůsobuje.
Když je video nastaveno na imerzivní režim, roztáhne se tak, aby vyplnilo dostupný prostor, přičemž se odstraní limit šířky a okraje. Na velmi širokých obrazovkách (nad 71,25em) je kontejner videa široký 1140px a posunutý doleva o 180px, s odsazeným popiskem. Na ještě širších obrazovkách (nad 81,25em) se stane 1300px širokým a posune se doleva o 260px.
Design používá specifické barvy: šedou pro datové řádky, světle šedou pro okraje, světlejší šedou pro popisky a poloprůhledné tmavé pozadí pro text popisků. Hlavní barva prvku je tmavě červená, kterou lze přepsat vlastní barvou pilíře.
Podnadpisy, vytahovací citace a blokové citace používají sekundární barvu pilíře, kterou lze upravit v tmavém režimu.
Vložené prvky nemají žádné odsazení. Když se vložený prvek objeví hned po jiném prvku nebo vodorovné čáře, následující odstavec nedostane žádný extra horní okraj, což zajišťuje konzistentní mezery. To platí napříč různými obsahovými sekcemi a interaktivními rozvrženími.Toto je seznam CSS selektorů, který cílí na konkrétní odstavce v rozvržení webové stránky. Aplikuje horní odsazení 14 pixelů na odstavce, které následují hned po určitých prvcích, jako jsou „element-atom", „sign-in-gate" nebo vodorovné čáry (ale ne po poslední). Selektory pokrývají různé části stránky, jako je hlavní obsah, tělo komentáře a tělo prvku.
Druhá část CSS používá pseudo-prvek `:first-letter` pro stylování prvního písmene těch samých odstavců, pravděpodobně pro efekt iniciály. Aplikuje toto stylování napříč různými kontejnery, jako je hlavní sloupec, tělo článku a interaktivní obsahové sekce.Zde je přepsaný text v plynulé, přirozené angličtině:
---
Pravidla CSS aplikují styl iniciály na první písmeno prvního odstavce po určitých prvcích, jako jsou vodorovné čáry nebo reklamní kontejnery, v rámci specifických obsahových oblastí. Iniciála používá font Guardian Headline, je tučná, velká (111px) a plave vlevo s velkými písmeny. Má pravý okraj, vertikálně zarovnaná nahoru a používá vlastní barevnou proměnnou.
Pro interaktivní obsah a další sekce nemají odstavce následující po vodorovných čarách žádné horní odsazení.
Vytahovací citace v těchto obsahových oblastech jsou omezeny na maximální šířku 620px.
Popisky obrázků pro prvky showcase jsou umístěny staticky a zabírají plnou šířku, až do 620px. Na širších obrazovkách (nad 71,25em) se stávají absolutně umístěnými s maximální šířkou 140px, a na ještě širších obrazovkách (nad 81,25em) se maximální šířka zvyšuje na 220px.
Imerzivní prvky zabírají plnou šířku viewportu, s ohledem na šířku posuvníku. Na menších obrazovkách mají maximální šířku 978px a popisky mají horizontální odsazení. Na středních obrazovkách je maximální šířka 738px. Na velmi malých obrazovkách je prvek posunut doleva s negativními okraji a popisky dostávají další odsazení.
Pro prvky showcase v těle obsahu jsou na větších obrazovkách negativní levé okraje pro správné zarovnání.
Wrapper nábytku je umístěn relativně a na obrazovkách širších než 61,25em se aplikuje další stylování (i když je pravidlo neúplné)..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{boNejsem schopen přepsat tento text, protože se zdá být CSS kódem, nikoli prózou v přirozeném jazyce. Mohl byste poskytnout pasáž psané angličtiny, kterou byste chtěl přeformulovat?Zde je přepsaný text v plynulé, přirozené angličtině:
Toto je sada pravidel @font-face pro rodinu písem „Guardian Headline Full". Každé pravidlo definuje jiný styl nebo váhu písma, přičemž používá soubory hostované na webových stránkách The Guardian. Formáty zahrnují WOFF2, WOFF a TTF pro kompatibilitu napříč prohlížeči. Váhy se pohybují od pravidelné (400) po černou (900), s dostupnými normálními i kurzívními styly.Tento text se zdá být CSS kódem, nikoli přirozeným jazykem. Definuje styly písem a pravidla rozvržení pro webovou stránku, pravděpodobně The Guardian. Protože se jedná o technický kód, přepsání do „plynulé, přirozené angličtiny" není použitelné – je určen k tomu, aby ho četly prohlížeče, ne lidé. Pokud chcete, mohu vysvětlit, co tento kód dělá, v jednoduché angličtině.Pro zařízení iOS a Android jsou štítky uvnitř kontejneru článku ve wrapperu nábytku stylovány tučným textem, používají rodinu písem Guardian headline a jsou obarveny podle barvy pilíře, s velkými písmeny.
Na iOS i Androidu je hlavní nadpis ve wrapperu nábytku nastaven na 32 pixelů, tučně, s 12 pixely odsazení pod ním, a je obarven tmavě (téměř černě).
Pro obrázky ve wrapperu nábytku na obou platformách jsou umístěny relativně, s okrajem 14 pixelů nahoře a mírným negativním levým okrajem, a roztahují se na plnou šířku obrazovky (s ohledem na případný posuvník). Samotné obrázky, spolu s jejich odkazy a vnitřními kontejnery, mají průhledné pozadí a zachovávají si přirozenou výšku.
Standfirst (úvodní text) ve wrapperu nábytku na obou platformách má určité odsazení nahoře a dole a mírný negativní pravý okraj pro správné zarovnání s okrajem obrazovky..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 {
/ Zde nejsou definovány žádné specifické styly /
}Na Androidu používají autorské řádky a odkazy na autory v sekcích článků a komentářů barvu pilíře pro svůj text. Na iOS se aplikuje stejné stylování.
Pro iOS i Android nemá oblast meta informací v těchto sekcích žádné extra odsazení. Jakékoli ikony (například SVG prvky) v této oblasti používají barvu pilíře pro svůj tah.
Tlačítko popisku v prvcích showcase je stylováno stejně na obou platformách: je to malé, centrované tlačítko (28 x 28 pixelů) s 5 pixely odsazení, umístěné 14 pixelů od pravého okraje.
Hlavní tělo článku na iOS i Androidu má 12 pixelů odsazení na levé a pravé straně.
Obrázky v těle článku, které nejsou náhledy nebo imerzivní (jako standardní nebo showcase), zabírají plnou šířku obrazovky mínus 24 pixelů (kvůli odsazení) a jakoukoli šířku posuvníku. Jejich popisky se řídí stejnými pravidly rozvržení.Pro prvky, které nejsou imerzivní, by popisek neměl mít žádné odsazení.
Na zařízeních iOS a Android, když je obrázek imerzivní v těle článku, měl by se roztáhnout na plnou šířku obrazovky, s ohledem na šířku posuvníku.
Pro citované blokové citace v těle článku na těchto zařízeních by uvozovky měly používat barvu pilíře.
Odkazy v těle článku na iOS a Androidu by měly být stylovány s primární barvou pilíře, bez obrázku na pozadí a s podtržením s odsazením 6px. Barva podtržení by měla odpovídat barvě okraje hlavičky. Při najetí myší by se barva podtržení měla změnit na barvu pilíře.
V tmavém režimu by měl mít wrapper nábytku (který obsahuje hlav
