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 estilos normal e itálico. Os arquivos de fonte são fornecidos nos formatos WOFF2, WOFF e TrueType, hospedados no servidor de assets do Guardian.
A família de fontes Guardian Headline Full inclui vários estilos, cada um disponível em múltiplos formatos (WOFF2, WOFF e TTF). Os estilos são:
- Bold (peso 700, estilo normal)
- Bold Italic (peso 700, estilo itálico)
- Black (peso 900, estilo normal)
- Black Italic (peso 900, estilo itálico)
- Light (peso 300, estilo normal)
- Light Italic (peso 300, estilo itálico)
- Regular (peso 400, estilo normal)
- Regular Italic (peso 400, estilo itálico)
Adicionalmente, a fonte Guardian Titlepiece está disponível em Bold (peso 700, estilo normal).
A família de fontes "Guardian Headline Full" inclui múltiplos arquivos de fonte em vários pesos e estilos. Cada fonte está disponível nos formatos WOFF2, WOFF e TrueType, hospedados nas URLs especificadas. Os pesos variam de 400 (regular) a 900 (black), com estilos normais e itálicos fornecidos para cada peso.
```css
@font-face {
font-family: Guardian Headline;
src: 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;
}
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-column-gap: 0px;
grid-template-columns: 100%;
grid-template-areas:
"media"
"title"
"headline"
"standfirst"
"lines"
"meta"
"body";
}
@media (min-width: 30em) {
#article-body>div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive>div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
padding: 0 20px;
max-width: 620px;
}
}
@media (min-width: 46.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 100%;
grid-column-gap: 10px;
grid-template-areas:
"title"
"headline"
"standfirst"
"media"
"lines"
"meta"
"body";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: 80px;
}
}
@media (min-width: 61.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 620px 300px;
grid-template-areas:
"title right-column"
"headline right-column"
"standfirst right-column"
"media right-column"
"lines right-column"
"meta right-column"
"body right-column"
". right-column";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: unset;
}
}
@media (min-width: 71.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 140px 1px 620px 300px;
grid-template-areas:
"title border headline right-column"
". border standfirst right-column"
". border media right-column"
". border body right-column"
". border . right-column";
}
#article-body>div .content--interactive-grid .content__standfirst,
.content--interactive>div .content--interactive-grid .content__standfirst,
#comment-body .content--interactive-grid .content__standfirst,
[data-gu-name=body] .content--interactive-grid .content__standfirst,
#feature-body .content--interactive-grid .content__standfirst {
padding-bottom: 0;
}
#article-body>div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive>div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
/ A estilização da legenda continua aqui /
}
}
```
Para legendas de figuras imersivas e conteúdo de grade interativa, o preenchimento é definido como 4 pixels na parte superior e 0 em outros lugares. Elementos com os nomes "lines" e "meta" dentro de grades interativas são posicionados em uma área específica da grade. Os elementos "lines" têm uma altura definida para ajustar seu conteúdo e uma margem superior de 5 pixels, enquanto os elementos "meta" têm uma margem superior de 18 pixels.
Em telas com mais de 81,25 em, as grades interativas usam um layout de cinco colunas com larguras fixas e flexíveis.
Em dispositivos iOS e Android, os cabeçalhos de artigos usam fontes e pesos específicos para texto de standfirst, rótulos de seção e créditos. Os rótulos de seção são capitalizados, e as linhas de destaque têm preenchimento ajustado. As imagens de figuras têm fundos transparentes, e as imagens são ligeiramente deslocadas para a direita. Os títulos têm fundos transparentes, preenchimento ajustado e usam um tamanho de fonte de 24 pixels com altura de linha de 115%.
Para Android, os títulos principais e secundários são definidos para exibição em bloco. Tanto no iOS quanto no Android, os títulos secundários são estilizados com peso de fonte light, alinhamento à esquerda e quebra de texto balanceada.
Os kickers de artigo não têm preenchimento, e sua cópia está oculta.
Elementos de crédito e data de publicação usam uma fonte de 17px com peso normal e altura de linha de 130%. O texto do crédito e os links do autor são coloridos em #707070.
Os parágrafos de standfirst são definidos para 20px, estilo normal, peso light e altura de linha de 115%. Links dentro de parágrafos de standfirst são em negrito, coloridos em #707070, com uma borda inferior e sem imagem de fundo.
O texto do título é colorido em #dcdcdc.
Imagens e seus contêineres são definidos para uma largura de 100vw menos 20px, com altura automática e uma largura máxima de 620px. Elementos internos de figura têm sua altura definida como não definida. Imagens de vitrine têm uma largura máxima de 280px.
Certas seções e aside seguindo a navegação estão ocultas. Elementos Atom não têm margem ou preenchimento.
Elementos de vitrine e seus conteúdos têm uma largura máxima de 210px, aumentando para 260px para viewports com mais de 61,25em. Spans de legenda dentro de elementos inline e de vitrine também são estilizados de acordo.
Para legendas dentro do corpo, o texto do span é definido para 14px, uma cor cinza claro (#707070) e exibição inline. O primeiro span em legendas para elementos inline e de vitrine é definido como inline-block.
Em telas com mais de 71,25em, legendas para elementos inline e de vitrine são posicionadas relativamente e têm sua largura redefinida.
Para artigos de conteúdo interativo, o layout usa áreas de grade nomeadas "header", "headline", "standfirst", "lines", "meta" e "body". Em telas maiores (71,25em e acima), o layout de grade muda para três colunas com áreas para "header", "meta", "border", "standfirst" e "body". A margem da coluna principal é removida, a borda esquerda é ocultada e a largura do parágrafo é definida para 620px.
Elementos de título têm configurações de fonte específicas: Guardian Headline ou fontes similares, tamanho 24px, peso light (300) e uma cor cinza claro (#dcdcdc). O preenchimento é de 0–10px em telas pequenas, 0–20px em telas médias (30em e acima) e removido em telas grandes (71,25em e acima).
Linhas de destaque e linhas estão ocultas. Em telas grandes, o cabeçalho do artigo é posicionado absolutamente a 20px da esquerda.
Links do cabeçalho do artigo usam um tamanho de fonte de 17px e estilo normal. O preenchimento superior do cabeçalho é de 2px, e os rótulos têm uma borda superior e preenchimento (0–10px em telas pequenas, 0–20px em telas médias). Em telas maiores (46,25em e acima), a borda superior é removida, e o preenchimento é definido como 0 nas maiores telas (71,25em e acima).
Este código CSS estiliza elementos dentro de um artigo interativo.
Para títulos e links de artigos, define a altura da linha para 115% e a cor do texto para #ff5943. Ao passar o mouse sobre os links do título, a cor do sublinhado muda para #dcdcdc.
O standfirst (resumo do artigo) usa fontes específicas, uma cor cinza (#606060), tamanho de fonte de 24px, estilo normal, peso 400 e altura de linha de 115%. Tem preenchimento que se ajusta com base na largura da tela: 2px 10px para telas menores, 2px 20px para telas de 30em e mais largas, e sem preenchimento para telas de 71,25em e acima. Links no standfirst são #707070 e recebem uma borda inferior de 2px ao passar o mouse.
Botões de mídia social na seção meta não têm efeito de transição. Ao passar o mouse, seu fundo se torna #121212, a borda se torna #121212, o texto se torna #dcdcdc e quaisquer ícones SVG também mudam para preenchimento #dcdcdc com fundo #121212.
Botões de compartilhamento estão ocultos. Um pequeno elemento de espaço inline de 4px é definido. Para o corpo do artigo, um contêiner de grade de nomes usa um layout de duas colunas com uma largura máxima de 620px.
Para telas com mais de 46,25em, o contêiner de grade de nomes usa duas colunas, cada uma com 310px de largura. Itens ímpares na grade têm preenchimento direito de 5px (10px em telas mais largas), enquanto itens pares têm preenchimento esquerdo de 5px (10px em telas mais largas).
Cabeçalhos (h2) dentro da grade têm um tamanho de fonte de 17px, uma borda superior, preenchimento superior de 2px e uma largura máxima de 620px. Os itens da lista seguindo esses cabeçalhos não têm preenchimento ou margem, com o primeiro item usando uma cor de texto diferente. Marcadores de itens da lista estão ocultos, e o texto do parágrafo usa uma família de fonte específica, tamanho 14px e altura de linha de 130%.
Figuras imersivas têm um fundo escuro, e imagens dentro delas começam totalmente transparentes. Quando a classe "fade-in" é aplicada, as imagens se tornam totalmente opacas com uma transição suave de 1 segundo.
O cabeçalho memorial abrange a largura total da viewport (menos a largura da barra de rolagem), tem um fundo escuro, texto branco e margens esquerdas negativas que se ajustam com base no tamanho da tela. Em telas médias e maiores, inclui preenchimento centralizado e uma borda. A seção de nomes tem uma altura mínima de 200px e sem bordas superior e inferior, enquanto a seção de mobiliário é fixa na parte inferior com preenchimento adicional e ajustes de alinhamento à esquerda em telas maiores. A seção interna de mobiliário inclui preenchimento esquerdo e uma borda em telas mais largas.
```css
/
* Pilha de fontes serifadas
*/
/
* Pilha de fontes para títulos
*/
/
* Pilha de fontes sans serif para texto
*/
/
* Pilha de fontes sans serif para títulos
*/
/
* Configurações padrão da escala de fontes
* Veja font-scale.html e font-scale.png para exemplos visuais
*/
/
* Obter todos os níveis de uma escala de fonte
*
* @param {String} $name - Nome da escala de fonte (ex: headline)
* @param {Map} $font-scale ($font-scale)
*
* @example
* font-size: get-scale(header);
*
* @return {Map}
*/
/
* Obter informações para um nível específico de uma escala de fonte
*
* @param {String} $name - Nome da escala de fonte (ex: headline)
* @param {Number} $level - Nível na escala
* @param {Map} $font-scale ($font-scale)
*
* @example
* font-size: get-scale-level(header, 1);
*
* @return {Map}
*/
/
* Obter um tamanho de fonte para um nível na escala de fonte
*
* @param {String} $name - Nome da escala de fonte (ex: headline)
* @param {Number} $level - Nível na escala
* @param {Map} $font-scale - Configuração
*
* @example
* font-size: get-font-size(header, 3);
*
* @return {Number}
*/
/
* Obter uma altura de linha para um nível na escala de fonte
*
* @param {String} $name - Nome da escala de fonte (ex: headline)
* @param {Number} $level - Nível na escala
* @param {Map} $font-scale - Configuração
*
* @example
* font-size: get-line-height(header, 3);
*
* @return {Number}
*/
/
* Converter qualquer valor para pixels
*
* @param {Number} $value
*
* @example
* font-size: convert-to-px(14); // 14px
*
* @return {Number}
*/
/
* Configurações padrão de tipografia, a serem incluídas no início do HTML
* 1. Melhorar a clareza da renderização de tipo
* 2. Definir espaçamento de linha relativo para 1
