Este código CSS define uma família de fontes personalizada chamada "Guardian Headline Full" com múltiplos pesos e estilos de fonte. Inclui pesos light, regular, medium e semibold, cada um em versões normal e itálico. Para cada estilo, o código especifica três formatos diferentes de arquivo de fonte (woff2, woff e ttf) hospedados nos servidores do Guardian, garantindo ampla compatibilidade com navegadores.
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.ttf) format("truetype");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf) format("truetype");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Guardian Titlepiece;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@media (min-width: 71.25em) {
.content__main-column--interactive {
margin-left: 160px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive {
margin-left: 240px;
}
}
.content__main-column--interactive .element-atom {
max-width: 620px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-atom {
max-width: 100%;
}
}
.content__main-column--interactive .element-showcase {
margin-left: 0;
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-showcase {
max-width: 620px;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-showcase {
max-width: 860px;
}
}
.content__main-column--interactive .element-immersive {
max-width: 1100px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-immersive {
width: calc(100vw - var(--scrollbar-width));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width)) !important;
}
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(-20px);
width: calc(100% + 60px);
}
}
@media (max-width: 71.24em) {
.content__main-column--interactive .element-immersive {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(0);
width: auto;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive .element-immersive {
max-width: 1260px;
}
}
.content__main-column--interactive p,
.content__main-column--interactive ul {
max-width: 620px;
}
.content__main-column--interactive:before {
position: absolute;
top: 0;
height: calc(100% + 15px);
min-height: 100px;
content: "";
}
@media (min-width: 71.25em) {
.content__main-cPara colunas de conteúdo interativo, uma borda esquerda é adicionada com posicionamento e z-index específicos. Em telas maiores, a posição da borda ajusta-se ligeiramente. Dentro dessas colunas, elementos atom não têm margens superior ou inferior, mas incluem preenchimento (padding). Quando um parágrafo segue um elemento atom, o preenchimento é removido e as margens são adicionadas em seu lugar. Elementos inline são limitados a uma largura máxima.
Para figuras com um papel inline, elas também têm uma largura máxima em telas de tamanho médio e acima.
Propriedades personalizadas definem várias cores para elementos como datelines, cabeçalhos, legendas e features. A cor do pilar principal (primary pillar color) padrão é a cor da feature se não estiver definida.
Elementos atom dentro de colunas interativas ou em geral não têm preenchimento (padding). O primeiro parágrafo após elementos específicos ou regras horizontais em vários corpos de conteúdo recebe preenchimento superior extra.
Além disso, a primeira letra desses parágrafos é estilizada como uma letra capitular (drop cap) com uma fonte, tamanho, peso e cor específicos, usando propriedades personalizadas para coloração.Para parágrafos que seguem regras horizontais em áreas de conteúdo específicas, remova o preenchimento superior.
Limite a largura das pullquotes para 620px em corpos de artigo, interativo, comentário e feature.
Para legendas de elementos showcase em conteúdo principal e contêineres de artigo, defina a posição como estática, a largura como 100% e a largura máxima como 620px.
Elementos imersivos devem abranger a largura total da viewport menos a barra de rolagem. Em telas de até 71.24em, limite sua largura a 978px. Para legendas nessas telas, adicione 10px de preenchimento horizontal, aumentando para 20px em telas entre 30em e 71.24em.
Em telas de médio alcance (46.25em a 61.24em), limite elementos imersivos a 738px. Em telas menores (até 46.24em), remova a margem esquerda, alinhe à borda esquerda e adicione uma margem esquerda negativa de 10px (20px em telas de 30em e mais largas). Legendas nessas telas menores recebem 20px de preenchimento horizontal.
Para o wrapper de furniture em telas grandes (61.25em e acima), use uma grade CSS com colunas e linhas definidas. Estilize o primeiro filho de headlines com uma borda superior. Posicione a seção meta relativamente com preenchimento superior e sem margem direita. Nas seções standfirst, ajuste as margens inferiores, defina o tamanho da fonte dos itens da lista como 20px e estilize os links com sublinhados (usando uma cor personalizada para o sublinhado que muda ao passar o mouse). O primeiro parágrafo no standfirst recebe uma borda superior e nenhum preenchimento inferior, embora essa borda seja removida em telas muito grandes (71.25em e acima).
Além disso, para figuras dentro do wrapper, remova a margem esquerda e defina uma largura máxima de 630px para elementos inline. Nas telas maiores (71.25em e acima), as colunas do modelo de grade são definidas começando por título, headline e meta.O layout usa uma grade com colunas e linhas definidas para diferentes tamanhos de tela. Em telas maiores, a grade tem três colunas para as seções de título, headline e meta, cinco colunas para o standfirst e oito colunas para o retrato, com linhas dimensionadas proporcionalmente. Em telas médias, a grade ajusta-se para duas, cinco e sete colunas respectivamente, com alturas de linha específicas.
A estilização inclui uma borda superior para a seção meta e uma borda esquerda para o standfirst, ambas usando uma variável de cor personalizada. Headlines têm uma largura máxima e tamanho de fonte que muda com o tamanho da tela, tornando-se maior em telas mais largas. Alguns elementos, como compartilhamento social e seções de comentários, têm bordas correspondentes à cor do cabeçalho, enquanto outros são ocultados em certos dispositivos.
O texto do standfirst tem propriedades de fonte e preenchimento específicas, e a área de mídia principal é posicionada dentro da grade, com sua largura ajustando-se em telas menores para contabilizar barras de rolagem e margens. As legendas são posicionadas absolutamente.A legenda da figura do wrapper de furniture é posicionada absolutamente na parte inferior sem margem inferior, apresentando preenchimento, uma cor de fundo e uma cor de texto. Sua largura é definida como 100% com uma altura mínima de 46 pixels. Dentro da legenda, o primeiro span está oculto, enquanto o segundo é exibido e limitado a 90% da largura máxima. O texto da legenda e os ícones SVG usam uma variável de cor específica.
Em telas com mais de 30em de largura, o preenchimento horizontal da legenda aumenta. Um botão de legenda dedicado é posicionado absolutamente na parte inferior direita, com um fundo circular e um ícone SVG dimensionado, ajustando sua posição direita em telas maiores.
Para colunas principais interativas em telas muito largas, um pseudo-elemento ajusta seu topo e altura. Cabeçalhos dentro dessas colunas têm uma largura máxima.
No iOS e Android, variáveis de cor para o modo escuro são definidas, incluindo uma cor de feature que muda no modo escuro. Contêineres de artigo específicos nessas plataformas estilizam a primeira letra do primeiro parágrafo após certos elementos com uma cor secundária, definem a altura do cabeçalho do artigo como zero, ajustam o preenchimento para o wrapper de furniture e ocultam os rótulos de conteúdo dentro dele.Para dispositivos iOS e Android, os seguintes estilos se aplicam a contêineres de artigo de feature, standard e comment:
- **Rótulos**: Use uma fonte em maiúsculas e negrito no tipo de letra Guardian headline ou serif, colorida com a variável da nova cor do pilar.
- **Headlines**: Definido como 32px, negrito, com 12px de preenchimento inferior e uma cor cinza escuro (#121212).
- **Imagens**: Posicionadas relativamente, com uma margem superior de 14px e margem esquerda negativa de 10px. A largura abrange a viewport completa (considerando as barras de rolagem) e a altura ajusta-se automaticamente. Elementos internos, imagens e links dentro da figura têm um fundo transparente, correspondendo à largura total da viewport com altura automática.
- **Standfirst (resumo do artigo)**: Inclui 4px de preenchimento superior, 24px de preenchimento inferior e uma margem direita negativa de 10px. Parágrafos dentro do standfirst herdam esses estilos do contêiner.O código CSS define estilos específicos para standfirsts e metadados de artigos em dispositivos iOS e Android. Ele define famílias de fontes para o texto do standfirst e personaliza a aparência dos links, incluindo cor, estilo de sublinhado e efeitos de hover. O código também ajusta as margens para seções de metadados e garante uma estilização consistente para bylines e links de autor em diferentes tipos de artigo.O nome do autor na seção meta do wrapper de furniture, juntamente com links relacionados e spans em dispositivos Android para artigos standard e comment, deve usar a nova cor do pilar. No iOS e Android, a seção meta miscellaneous em artigos de feature, standard e comment não deve ter preenchimento, e quaisquer ícones SVG dentro devem ser estilizados com a nova cor do pilar como o traço (stroke).
Para elementos showcase em artigos de feature, standard e comment no iOS e Android, o botão de legenda deve ser exibido como um contêiner flex. Deve ser centralizado com 5px de preenchimento, alinhado tanto horizontal quanto verticalmente, dimensionado para 28x28 pixels e posicionado a 14px da direita.
O corpo do artigo em artigos de feature, standard e comment no iOS e Android deve ter 12px de preenchimento à esquerda e à direita. Dentro do corpo do artigo, figuras de imagem que não são miniaturas ou imersivas não devem ter margem. Sua largura deve ser a largura total da viewport menos 24px e qualquer largura da barra de rolagem, com uma altura automática. As legendas para essas imagens também devem seguir essas regras.Para dispositivos iOS e Android, imagens imersivas em artigos de feature, standard e comment devem abranger a largura total da viewport, considerando a barra de rolagem.
Blockquotes dentro do corpo do artigo devem usar a cor do pilar do site para seu elemento decorativo.
Links no texto do artigo devem ser estilizados com a cor do pilar principal, um sublinhado e nenhuma imagem de fundo. A cor do sublinhado deve mudar ao passar o mouse.
No modo escuro, a área do cabeçalho do artigo deve ter um fundo escuro. Rótulos e o headline devem usar cores específicas para contraste, e o texto introdutório deve ser legível contra o tema escuro.O texto parece ser um fragmento de código CSS, não uma passagem em prosa para reescrever. Ele contém seletores e regras de estilo direcionando elementos específicos em páginas da web para diferentes plataformas (iOS e Android) e tipos de artigo (feature, standard, comment). As regras definem cores e estilos para links, bylines de autor, ícones, legendas de imagem e blockquotes usando propriedades personalizadas CSS (como `--new-pillar-colour` e `--dateline`).
Como se trata de código, ele não pode ser reescrito em "inglês fluente e natural" sem alterar seu propósito fundamental. Se você pretendia fornecer um texto diferente para reescrever, por favor, compartilhe-o.Este código CSS define um fundo escuro para elementos específicos em dispositivos Android e estiliza a primeira letra de parágrafos em dispositivos iOS. Para Android, aplica um fundo escuro a vários contêineres de artigo e seções do corpo. Para iOS, direciona a primeira letra de parágrafos que vêm após certos elementos dentro de diferentes contêineres de artigo, provavelmente para estilização de letra capitular (drop cap).Este parece ser um longo seletor CSS dire
