Este é um CSS stylesheet que define a família de fontes "Guardian Headline Full". Inclui múltiplas regras font-face, cada uma especificando um peso e estilo diferentes da fonte, juntamente com os URLs para os arquivos de fonte em vários formatos (WOFF2, WOFF e TTF). Os pesos variam de leve (300) a seminegrito (600), e tanto os estilos normal quanto itálico estão incluídos. Os arquivos de fonte estão hospedados no servidor de ativos do The Guardian.
Este texto parece ser código CSS, não linguagem natural. Define estilos de fonte e regras de layout para uma página web. Como é código técnico, reescrevê-lo em inglês fluente não é aplicável. Se você pretendia compartilhar um texto diferente, por favor, forneça-o, e ficarei feliz em ajudar.
esquerda: -11px.
A coluna de conteúdo principal para artigos interativos não tem margem ou preenchimento ao redor de elementos incorporados, com 12px de preenchimento na parte superior e inferior. Quando um parágrafo é seguido por um elemento incorporado, o preenchimento é removido e substituído por margens de 12px. Elementos inline são limitados a uma largura máxima de 620px.
Em telas mais largas que 61.25em, figuras inline também são limitadas a 620px.
Para seções de mídia com vídeos em loop, a legenda é posicionada acima de outros elementos, e o botão de loop é alinhado ao canto inferior direito com espaçamento extra. Os botões de mudo e não-mudo são colocados à direita com algum preenchimento à esquerda. O botão de legenda fica acima de tudo, e em telas maiores é posicionado perto da parte inferior.
Para cinemagraphs (um tipo de vídeo em loop), o limite de altura é removido em telas mais largas que 46.25em.
Na seção do corpo, vídeos auto-hospedados são exibidos como blocos com largura máxima de 620px e margens de 12px. O vídeo e sua figura de loop ocupam toda a largura, com a altura do vídeo ajustando-se automaticamente.
Quando um vídeo é configurado para modo imersivo, ele se expande para preencher o espaço disponível, removendo o limite de largura e as margens. Em telas muito largas (acima de 71.25em), o contêiner do vídeo tem 1140px de largura e é deslocado para a esquerda em 180px, com a legenda recuada. Em telas ainda mais largas (acima de 81.25em), torna-se 1300px de largura e desloca-se para a esquerda em 260px.
O design usa cores específicas: um cinza para linhas de data, um cinza claro para bordas, um cinza mais claro para legendas e um fundo escuro semitransparente para texto de legenda. A cor principal do recurso é um vermelho escuro, que pode ser substituída por uma cor de pilar personalizada.
Subtítulos, citações destacadas e citações em bloco usam a cor secundária do pilar, que pode ser ajustada no modo escuro.
Elementos incorporados não têm preenchimento. Quando um elemento incorporado aparece logo após outro elemento ou uma régua horizontal, o parágrafo seguinte não recebe margem superior extra, garantindo espaçamento consistente. Isso se aplica em diferentes seções de conteúdo e layouts interativos.
Esta é uma lista de seletores CSS que visa parágrafos específicos em um layout de página web. Aplica um preenchimento superior de 14 pixels a parágrafos que vêm logo após certos elementos como "element-atom", "sign-in-gate" ou réguas horizontais (mas não o último). Os seletores cobrem diferentes seções da página, como o conteúdo principal, corpo de comentários e corpo de recursos.
A segunda parte do CSS usa o pseudo-elemento `:first-letter` para estilizar a primeira letra desses mesmos parágrafos, provavelmente para um efeito de capitular. Aplica esse estilo em vários contêineres como a coluna principal, corpo do artigo e seções de conteúdo interativo.
Aqui está o texto reescrito em inglês fluente e natural:
---
As regras CSS aplicam um estilo de capitular à primeira letra do primeiro parágrafo após certos elementos, como réguas horizontais ou contêineres de anúncios, dentro de áreas de conteúdo específicas. A capitular usa a fonte Guardian Headline, é negrito, grande (111px) e flutua à esquerda com texto em maiúsculas. Tem uma margem à direita, alinha-se verticalmente ao topo e usa uma variável de cor personalizada.
Para conteúdo interativo e outras seções, parágrafos após réguas horizontais não têm preenchimento superior.
Citações destacadas dentro dessas áreas de conteúdo são limitadas a uma largura máxima de 620px.
Legendas de imagens para elementos de destaque são posicionadas estaticamente e ocupam toda a largura, até 620px. Em telas mais largas (acima de 71.25em), tornam-se posicionadas absolutamente com largura máxima de 140px, e em telas ainda mais largas (acima de 81.25em), a largura máxima aumenta para 220px.
Elementos imersivos abrangem toda a largura da viewport, levando em conta a largura da barra de rolagem. Em telas menores, têm largura máxima de 978px, e as legendas têm preenchimento horizontal. Em telas médias, a largura máxima é 738px. Em telas muito pequenas, o elemento é deslocado para a esquerda com margens negativas, e as legendas recebem preenchimento adicional.
Para figuras de destaque no corpo do conteúdo, há margens esquerdas negativas em telas maiores para alinhá-las corretamente.
O wrapper de mobiliário é posicionado relativamente, e em telas mais largas que 61.25em, estilos adicionais se aplicam (embora a regra esteja incompleta).
.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
Não consigo reescrever este texto, pois parece ser código CSS, não prosa em linguagem natural. Você poderia fornecer uma passagem de inglês escrito que gostaria que eu reformulasse?
Aqui está o texto reescrito em inglês fluente e natural:
Este é um conjunto de regras font-face para a família de fontes "Guardian Headline Full". Cada regra define um estilo ou peso diferente da fonte, usando arquivos hospedados no site do Guardian. Os formatos incluem WOFF2, WOFF e TTF para compatibilidade entre navegadores. Os pesos variam de regular (400) a preto (900), com ambos os estilos normal e itálico disponíveis.
Este texto parece ser código CSS, não linguagem natural. Define estilos de fonte e regras de layout para um site, provavelmente o do Guardian. Como é código técnico, reescrevê-lo em "inglês fluente e natural" não é aplicável—é feito para ser lido por navegadores, não por pessoas. Se você quiser, posso explicar o que esse código faz em inglês simples.
Para dispositivos iOS e Android, os rótulos dentro do contêiner de artigos do wrapper de mobiliário são estilizados com texto em negrito, usando a família de fontes Guardian headline, e são coloridos de acordo com a cor do pilar, com texto capitalizado.
Tanto no iOS quanto no Android, o título principal no wrapper de mobiliário é definido para 32 pixels, negrito, com 12 pixels de preenchimento abaixo, e é colorido escuro (quase preto).
Para imagens no wrapper de mobiliário em ambas as plataformas, elas são posicionadas relativamente, com uma margem de 14 pixels no topo e uma ligeira margem esquerda negativa, e se estendem até a largura total da tela (levando em conta qualquer barra de rolagem). As próprias imagens, juntamente com seus links e contêineres internos, têm um fundo transparente e mantêm sua altura natural.
O standfirst (texto introdutório) no wrapper de mobiliário em ambas as plataformas tem algum preenchimento no topo e na parte inferior, e uma ligeira margem direita negativa para alinhar corretamente com a borda da tela.
.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 {
/ Nenhum estilo específico definido aqui /
}
No Android, o byline e os links do autor nas seções de artigo e comentário usam a cor do pilar para seu texto. No iOS, o mesmo estilo se aplica.
Tanto para iOS quanto para Android, a área de informações de metadados nessas seções não tem preenchimento extra. Quaisquer ícones (como elementos SVG) nessa área usam a cor do pilar para seu traço.
O botão de legenda em elementos de destaque é estilizado da mesma maneira em ambas as plataformas: é um botão pequeno e centralizado (28 por 28 pixels) com 5 pixels de preenchimento, posicionado a 14 pixels da direita.
O corpo principal do artigo tanto no iOS quanto no Android tem 12 pixels de preenchimento nos lados esquerdo e direito.
Imagens no corpo do artigo que não são miniaturas ou imersivas (como padrão ou destaque) ocupam toda a largura da tela menos 24 pixels (para levar em conta o preenchimento) e qualquer largura de barra de rolagem. Suas legendas seguem as mesmas regras de layout.
Para elementos que não são imersivos, a legenda não deve ter preenchimento.
Em dispositivos iOS e Android, quando uma imagem é imersiva dentro do corpo do artigo, ela deve se esticar até a largura total da tela, levando em conta qualquer largura de barra de rolagem.
Para citações em bloco no corpo do artigo nesses dispositivos, a marca de aspas deve usar a cor do pilar.
Links dentro do corpo do artigo no iOS e Android devem ser estilizados com a cor primária do pilar, sem imagem de fundo, e com um sublinhado com deslocamento de 6px. A cor do sublinhado deve corresponder à borda do cabeçalho. Ao passar o mouse sobre esses links, a cor do sublinhado deve mudar para a cor do pilar.
No modo escuro, o wrapper de mobiliário (que contém o cabeçalho do artigo) deve ter um fundo escuro. Os rótulos, título, texto do standfirst e links dentro deste wrapper devem usar as cores apropriadas: rótulos e links na cor do pilar, o título na cor da borda do cabeçalho e o texto do standfirst na cor da borda do cabeçalho também.
Este texto parece ser um bloco de código CSS, não linguagem natural. Contém seletores e regras de estilo para um site, provavelmente relacionado às páginas de artigos do Guardian. Como é código técnico, reescrevê-lo em "inglês fluente e natural" não é aplicável sem mudar sua função. Se você pretendia fornecer um texto diferente, por favor, compartilhe-o, e ajudarei a reescrevê-lo.
Este é um bloco de código CSS, não um texto para ser reescrito em inglês natural. Contém seletores e regras de estilo para páginas web. Se você pretendia fornecer um texto diferente, por favor, compartilhe-o, e ficarei feliz em ajudar.
Este texto parece ser uma lista de seletores CSS, não uma passagem em linguagem natural. Consiste em código técnico usado para estilização web, visando especificamente a primeira letra de parágrafos em vários contêineres de artigos em diferentes dispositivos (iOS e Android). Como não é prosa, não posso reescrevê-lo como inglês fluente sem mudar seu significado técnico. Se você quiser, posso explicar o que ele faz ou ajudar a simplificá-lo para um propósito diferente. Deixe-me saber como você gostaria de prosseguir.
Este é um bloco de código CSS, não um texto para ser reescrito em inglês natural. Contém seletores e regras de estilo para um site, provavelmente as páginas de artigos do Guardian, visando elementos específicos em dispositivos iOS e Android.
Se você pretendia pedir um resumo ou explicação do que este CSS faz, aqui está uma explicação em inglês simples:
- Define a primeira letra de certos pará
