A família tipográfica Guardian Headline Full inclui vários estilos, cada um com diferentes pesos e itálicos. A versão light (peso 300) está disponível nos estilos regular e itálico, assim como a versão regular (peso 400). Os estilos medium (peso 500) e semibold (peso 600) também têm opções regular e itálico. Cada arquivo de fonte está disponível nos formatos WOFF2, WOFF e TrueType nos servidores do Guardian.@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Guardian Titlepiece;
src: url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://interactive.guim.co.uk/fonts/garnett/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, 0px));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width, 0px)) !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-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
}
}A coluna principal de conteúdo interativo tem estilos específicos para elementos. Por exemplo, átomos não têm margem superior ou inferior, mas têm preenchimento de 12px. Quando um parágrafo segue um átomo, o preenchimento do átomo é removido e as margens são definidas como 12px. Elementos inline são limitados a 620px de largura.
Para figuras com um papel de loop, a legenda é posicionada com um z-index de 6. Um botão de loop é estilizado para ter 32px de largura, alinhado à direita inferior com margens específicas. O botão de legenda tem um z-index alto de 100.
Elementos de vídeo auto-hospedados são definidos com 100% de largura, limitados a 620px, e exibidos como um bloco com margens de 12px. O vídeo e seu contêiner também ocupam a largura total até 620px e são centralizados. Se o vídeo for imersivo, ele remove o limite de largura e as margens, estendendo-se completamente. Em telas maiores, os vídeos imersivos se expandem para 1140px de largura com uma margem esquerda negativa, e em tamanhos ainda maiores, tornam-se 1300px de largura com uma margem negativa maior.
Variáveis de cor definem várias cores de tema, como cinza de data, borda de cabeçalho, texto de legenda e vermelho de destaque. No modo escuro, algumas cores se ajustam para uma paleta de tema escuro.
Dentro do corpo do artigo, o primeiro parágrafo após um átomo ou uma linha horizontal tem preenchimento superior extra. Além disso, a primeira letra do primeiro parágrafo após um átomo é estilizada, embora a estilização específica não seja detalhada aqui.O código CSS define estilos para capitulares, citações destacadas e vários elementos de layout em diferentes seções de um site. Capitulares são estilizadas com uma fonte, tamanho e cor específicos, e são flutuadas para a esquerda. Citações destacadas recebem uma largura máxima. Para elementos de showcase, as legendas são definidas para uma posição estática com largura total e uma largura máxima de 620px.
Elementos imersivos são definidos para ocupar a largura total da viewport, menos a barra de rolagem. Em telas menores que 71.24em, sua largura máxima é ajustada para 978px, e o preenchimento da legenda varia com o tamanho da tela. Em telas médias (46.25em a 61.24em), a largura máxima é de 738px. Em telas pequenas (abaixo de 46.24em), os elementos imersivos recebem margens esquerdas negativas para se estenderem até a borda da viewport, com o preenchimento da legenda ajustado de acordo.
Para telas maiores (acima de 61.25em), um layout de grade é usado para o wrapper de mobiliário, criando uma estrutura de duas colunas com linhas definidas para título, manchete, standfirst, meta e seções de retrato. Uma borda superior é adicionada ao primeiro filho dos elementos de manchete, e o posicionamento da seção meta é definido como absoluto.O wrapper de mobiliário define o conteúdo do standfirst para ter uma posição relativa com um preenchimento superior de 2 pixels e nenhuma margem direita. Dentro do standfirst, a área de conteúdo principal tem uma margem inferior de 4 pixels. Itens de lista dentro do standfirst usam um tamanho de fonte de 20 pixels. Links dentro do standfirst, incluindo aqueles em itens de lista, não têm borda, nenhuma imagem de fundo e são sublinhados com um deslocamento de 6 pixels, usando uma cor personalizada para o sublinhado. Ao passar o mouse, a cor do sublinhado muda para uma nova cor de pilar.
O primeiro parágrafo no standfirst tem uma borda superior e nenhum preenchimento inferior. Para telas maiores (61.25em e acima), se a tela também tiver pelo menos 71.25em de largura, a borda superior é removida. Para telas com pelo menos 61.25em de largura, as figuras não têm margem esquerda e uma largura máxima de 630 pixels quando inline.
Em telas de 71.25em e mais largas, o wrapper de mobiliário usa um layout de grade com colunas e linhas específicas. Uma linha decorativa aparece antes da seção meta, com 540 pixels de largura. Parágrafos no standfirst não têm borda superior, e uma linha vertical é adicionada antes do conteúdo do standfirst. Para telas ainda maiores (81.25em e acima), a grade se ajusta com mais colunas e linhas, a linha decorativa antes da meta se estende para 620 pixels, e a linha vertical antes do standfirst se desloca ligeiramente.
Rótulos no cabeçalho do artigo ou seção de título têm um preenchimento superior de 2 pixels. A manchete usa um peso de fonte em negrito, uma largura máxima de 620 pixels e um tamanho de fonte de 32 pixels. Em telas maiores (71.25em e acima), a manchete se ajusta para uma largura máxima de 540 pixels e um tamanho de fonte de 50 pixels.
Para telas médias (46.25em e acima), keylines ou elementos de linha não têm margem direita. Em telas maiores (61.25em e acima), essas linhas são ocultadas. As linhas usam uma cor personalizada para o traçado.Este código CSS define estilos para o layout de uma página web, particularmente para um wrapper com tema de mobiliário. Ele define várias propriedades para elementos como informações meta, texto standfirst, mídia principal e legendas. Os estilos incluem ajustes para margens, preenchimento, cores e posicionamento, com regras específicas para diferentes tamanhos de tela usando media queries. O design usa variáveis CSS personalizadas para cores, como `--darkBackground` e `--headerBorderColor`, e garante que os elementos sejam ocultados ou exibidos com base na largura da viewport. O wrapper tem um fundo escuro e inclui comportamento responsivo para dispositivos que vão desde móveis até desktop.O código CSS estiliza elementos dentro de uma classe furniture-wrapper. Manchetes (h1) são em negrito e cinza claro (#dcdcdc). Figuras em manchetes não têm margem superior e uma pequena margem inferior.
Para telas mais largas que 71.25em, uma linha colorida aparece antes da seção meta. Texto e resumos na seção meta são cinza claro. Links de mídia social e botões têm uma borda colorida e usam uma cor específica para texto e ícones, que muda para um fundo escuro ao passar o mouse.
Links na seção meta usam uma cor específica e a mantêm ao passar o mouse com sublinhados correspondentes. Na seção standfirst, os links são sublinhados com uma cor cinza claro que muda ao passar o mouse, e o texto do parágrafo é cinza claro. Em telas mais largas, o primeiro parágrafo pode ter ou perder uma borda superior. Itens de lista no standfirst também são cinza claro.
Para telas mais largas que 71.25em, uma linha aparece antes do standfirst. Em telas mais largas que 46.25em, o wrapper recebe um fundo escuro e uma borda direita.O wrapper de mobiliário usa pseudo-elementos para criar bordas laterais. O elemento `:before` é posicionado à esquerda com um fundo escuro e uma borda esquerda, enquanto sua largura e posição esquerda são calculadas com base na largura da viewport, largura da barra de rolagem e uma largura base fixa de 738px. O elemento `:after` espelha isso no lado direito com uma borda direita.
Para telas maiores (largura mínima de 61.25em), os cálculos se ajustam para uma largura base de 978px. Esse padrão continua para breakpoints ainda maiores: 71.25em (base de 1138px) e 81.25em (base de 1298px).
Dentro do wrapper, traços SVG e bordas de certos elementos sociais/meta são definidos para usar uma variável CSS personalizada para cor, `--headerBorderColor`.
No corpo do artigo, cabeçalhos de nível dois (`h2`) têm um peso de fonte de 200, mas se contiverem um elemento `strong`, o peso aumenta para 700.
Finalmente, várias regras `@font-face` são definidas para carregar a família de fontes "Guardian Headline Full" em vários pesos e estilos (Light, Light Italic, Regular, Regular Italic) dos servidores de assets do Guardian.@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.ttf) format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format("truetype");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/G
