A família de fontes 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 estilização específica para elementos. Os elementos dentro desta coluna não têm margem superior ou inferior, mas incluem preenchimento (padding). Quando um parágrafo segue um elemento, o espaçamento ajusta-se de acordo. Elementos inline são limitados a uma largura máxima de 620 pixels.
Para telas maiores, figuras inline também são restritas a 620 pixels. Estilização especial aplica-se a loops de vídeo, incluindo posicionamento de botões e legendas. Vídeos auto-hospedados têm uma largura máxima de 620 pixels com margens centralizadas, enquanto vídeos imersivos expandem para largura total com margens ajustadas em telas maiores.
Variáveis de cor definem o tema, como a cor da linha de data, bordas de cabeçalho e cores de legenda. No modo escuro, essas cores adaptam-se a uma paleta mais escura. O primeiro parágrafo após certos elementos recebe preenchimento superior adicional, e a primeira letra do primeiro parágrafo pode ser estilizada distintamente.O código CSS define estilos para capitulares, citações destacadas (pullquotes) e vários elementos de layout em diferentes seções de um site, como artigos, comentários e features. Ele define fontes, tamanhos e cores específicas para a primeira letra de parágrafos, ajusta a largura e posicionamento de elementos imersivos e de showcase, e cria um layout de grade responsivo para telas maiores. Os estilos também incluem media queries para adaptar o layout a diferentes tamanhos de tela.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 sem margem direita. Dentro do standfirst, os itens de lista têm um tamanho de fonte de 20 pixels, e os links não têm borda, não têm imagem de fundo, um sublinhado com um deslocamento de 6 pixels e uma cor da propriedade personalizada `--headerBorder` (padrão `#dcdcdc`). Ao passar o mouse, o sublinhado do link muda para a cor definida por `--new-pillar-colour`.
Para telas maiores (61.25em e acima), as figuras não têm margem esquerda, e elementos inline com um papel específico são limitados a uma largura máxima de 630 pixels. Em 71.25em e acima, o layout usa uma grade com colunas e linhas definidas. Uma linha decorativa aparece antes da seção meta, e uma linha vertical é adicionada antes do standfirst. As bordas dos parágrafos são removidas neste ponto de interrupção.
Em 81.25em, a grade ajusta-se para incluir mais colunas, e as linhas decorativas são reposicionadas.
Os títulos têm um peso de fonte de 600 e uma largura máxima de 620 pixels, com um tamanho de fonte de 32 pixels. Em telas maiores (71.25em e acima), o tamanho da fonte do título aumenta para 50 pixels, e a largura máxima reduz para 540 pixels.
Para telas médias (46.25em e acima), elementos com a classe `keyline-4` ou o atributo `data-gu-name=lines` não têm margem direita. Em telas maiores (61.25em e acima), esses elementos ficam ocultos. Seus traços SVG usam a cor `--headerBorder`.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 recursos de modo escuro e tons de fundo, e garante comportamento responsivo em diferentes dispositivos.O código CSS estiliza elementos dentro de uma classe furniture-wrapper. Os títulos (h1) são em negrito e cinza claro (#dcdcdc). Figuras em títulos não têm margem superior e uma pequena margem inferior.
Para telas maiores que 71.25em, uma linha colorida aparece antes da seção meta. Textos e resumos na seção meta são cinza claro. Botões de mídia social têm uma borda colorida e ícone, com o ícone e o texto mudando de cor ao passar o mouse.
Links na seção meta usam uma cor de tema e mantêm essa cor ao passar o mouse, com um sublinhado na mesma cor. Na seção standfirst, os links são sublinhados com uma linha cinza claro que muda para a cor do tema ao passar o mouse. Parágrafos e itens de lista no standfirst são cinza claro.
Em telas maiores que 61.25em, o primeiro parágrafo no standfirst tem uma borda superior, que é removida em telas maiores que 71.25em. Nessas telas maiores, uma linha colorida também aparece antes do standfirst.
Para telas maiores que 46.25em, o furniture-wrapper recebe um fundo escuro e uma borda direita.O CSS define um `.furniture-wrapper` com pseudo-elementos que criam barras laterais. Estas ajustam a largura e posição com base no tamanho da viewport para manter uma área de conteúdo centralizada de larguras fixas (738px, 978px, 1138px, 1298px) em diferentes pontos de interrupção, considerando a largura da barra de rolagem. Bordas e cores de fundo são aplicadas usando propriedades CSS personalizadas.
Para títulos dentro de artigos, elementos `h2` usam um peso de fonte leve (200), mas mudam para negrito (700) se contiverem um elemento `strong`.
As regras `@font-face` carregam a família de fontes "Guardian Headline Full" em vários pesos e estilos (Light, Light Italic, Regular, Regular Italic) dos 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-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/GHGuardianHeadline-Medium.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.ttf) format("truetype");
font-weight: 500;
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-MediumItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.ttf) format("truetype");
font-weight: 500;
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-Semibold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Semibold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Semibold.ttf) format("truetype");
font-weight: 600;
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-SemiboldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-SemiboldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-SemiboldItalic.ttf) format("truetype");
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline
