A família de fontes Guardian Headline Full inclui vários estilos, cada um com diferentes pesos e itálicos. Essas fontes estão disponíveis em múltiplos formatos como woff2, woff e ttf, hospedados nos servidores do Guardian. Os estilos variam de light a semibold, com versões regulares e itálicas.
@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. Elementos de vídeo com funcionalidade de loop têm estilização e posicionamento personalizados para botões. Vídeos auto-hospedados são exibidos como blocos, ocupando toda a largura até 620 pixels, com alinhamento centralizado. Elementos de vídeo imersivos expandem-se além deste limite, removendo restrições de largura e ajustando margens. Em telas mais largas, vídeos imersivos estendem-se ainda mais, com margens esquerdas ajustadas para alinhamento.
Variáveis de cor definem vários elementos do tema, como linha de data, bordas, legendas e cores de destaque. Estas adaptam-se para preferências de modo escuro. Dentro do corpo do artigo, o primeiro parágrafo após certos elementos recebe preenchimento superior adicional, e a primeira letra 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. 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, legendas são posicionadas estaticamente com uma largura definida. Elementos imersivos são configurados para largura total da viewport, com ajustes para diferentes tamanhos de tela, incluindo margens e preenchimento específicos para dispositivos menores. Um wrapper de mobiliário (furniture wrapper) usa CSS Grid para layout em telas maiores, criando uma estrutura de múltiplas colunas e definindo áreas de grid para elementos como o título e informações de meta. Também adiciona uma borda superior ao primeiro filho de elementos de título.
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, 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, não têm 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. Em telas com mais de 61.25em de largura, figuras não têm margem esquerda e elementos inline com uma função específica são limitados a uma largura máxima de 630 pixels.
Para telas com pelo menos 71.25em de largura, o wrapper de mobiliário usa um layout de grid com colunas e linhas definidas. Uma seção de meta inclui uma borda superior criada com um pseudo-elemento que tem 540 pixels de largura. Parágrafos no standfirst não têm borda superior, e uma linha vertical é adicionada antes do standfirst usando outro pseudo-elemento.
Em telas ainda maiores (81.25em e acima), o layout de grid ajusta-se com diferentes tamanhos de coluna e linha. A borda superior da meta expande-se para 620 pixels, e a linha vertical antes do standfirst desloca-se ligeiramente.
Rótulos dentro do cabeçalho do artigo ou seção de título têm um preenchimento superior de 2 pixels. O título usa um peso de fonte negrito, uma largura máxima de 620 pixels e um tamanho de fonte de 32 pixels. Para telas com pelo menos 71.25em de largura, o título ajusta-se para uma largura máxima de 540 pixels e um tamanho de fonte de 50 pixels.
Em telas médias (46.25em e acima), elementos com a classe keyline-4 ou um atributo de dados específico não têm margem direita. Para telas maiores (61.25em e acima), esses elementos são ocultados. Seu conteúdo SVG usa uma cor personalizada para traços.
Este código CSS define estilos para o layout de uma página web, particularmente para uma seção de wrapper de mobiliário. Define várias propriedades para elementos como informações de meta, texto de 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 código também define variáveis de cor personalizadas e garante que certos elementos sejam ocultados ou exibidos com base em condições. No geral, cria um design responsivo que se adapta a vários dispositivos mantendo um tema visual consistente.
O código CSS estiliza elementos dentro de uma classe furniture-wrapper. 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 com mais de 71.25em de largura, uma linha colorida aparece antes da seção de meta. Texto e resumos na seção de 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 de meta usam uma cor específica e mantêm-na 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 maiores, o primeiro parágrafo pode ter ou perder uma borda superior. Itens de lista no standfirst também são cinza claro.
Para telas com mais de 71.25em de largura, uma linha aparece antes do standfirst. Em telas com mais de 46.25em de largura, o wrapper recebe um fundo escuro e uma borda direita.
O CSS define estilos para um wrapper de layout com barras laterais decorativas que se ajustam com base na largura da viewport. Define bordas, fundos e posiciona pseudo-elementos (`:before` e `:after`) para criar essas barras laterais, calculando sua largura e colocação em relação à viewport e a uma barra de rolagem. Os cálculos de largura mudam em breakpoints específicos (61.25em, 71.25em, 81.25em) para acomodar diferentes larguras de conteúdo (738px, 978px, 1138px, 1298px). Regras adicionais estilizam traços SVG e bordas de elementos sociais/meta usando uma propriedade personalizada para cor. Estilos de título são definidos para elementos `h2`, tornando-os com peso de fonte 200 por padrão e 700 se contiverem uma tag `strong`. Finalmente, fontes personalizadas para "Guardian Headline Full" são declaradas, incluindo variantes light, light itálico, regular e regular itálico com respectivos arquivos de fonte e pesos.
@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-Semib
