Este código CSS define a família de fontes "Guardian Headline Full" com vários pesos e estilos. Inclui versões light (300), regular (400), medium (500) e semibold (600), cada uma em estilos normal e itálico. Os arquivos de fonte são fornecidos nos formatos WOFF2, WOFF e TrueType a partir dos recursos web do Guardian.
Este código CSS define várias famílias de fontes para os títulos e titlepiece do site do Guardian. Especifica diferentes pesos e estilos de fonte (normal e itálico) para a família "Guardian Headline Full", incluindo pesos light (300), regular (400), bold (700) e black (900). Cada fonte é fornecida em múltiplos formatos (WOFF2, WOFF e TrueType) para compatibilidade com navegadores. Adicionalmente, define a família de fontes "Guardian Titlepiece" em peso bold (700) com os mesmos formatos de arquivo.
Este código CSS define múltiplas faces de fonte para a família de fontes "Guardian Headline Full", cada uma com diferentes pesos e estilos (normal e itálico). As fontes são obtidas de vários formatos de arquivo (WOFF2, WOFF e TrueType) hospedados no servidor de assets do Guardian. Os pesos variam de regular (400) a black (900), garantindo que a fonte possa ser usada em diferentes contextos tipográficos enquanto mantém consistência entre plataformas web.
Este texto parece ser código CSS definindo estilos de fonte e layouts de grid responsivos para um site, provavelmente do The Guardian. Especifica arquivos de fonte para diferentes pesos e estilos, depois configura templates de grid que mudam em várias larguras de tela para reorganizar áreas de conteúdo como título, mídia e texto corporal. O código ajusta padding, gaps de coluna e posicionamento de elementos em diferentes tamanhos de dispositivo para display ideal.
Para figuras de grid interativas com legendas imersivas em áreas de conteúdo específicas, o padding da legenda é definido como 4 pixels no topo e 0 em outros lugares.
Em várias seções de conteúdo, elementos nomeados "lines" e "meta" dentro de grids interativos são posicionados na área de grid da linha 2 a 5 e coluna 1 a 2. Os elementos "lines" têm uma altura que se ajusta ao seu conteúdo e uma margem superior de 5 pixels, enquanto elementos "meta" têm uma margem superior de 18 pixels.
Em telas maiores (min-width: 81.25em), os grids interativos nestas seções usam um layout de cinco colunas com larguras específicas.
Para dispositivos iOS e Android, cabeçalhos de artigos têm estilos personalizados: texto standfirst usa uma família de fonte específica com peso medium, section kickers aparecem como blocos com primeiras letras capitalizadas, keylines têm padding superior aumentado, autores de byline usam uma fonte serifada bold, figuras de imagem ajustam sua altura automaticamente, e parágrafos seguindo elementos atômicos não têm margem superior.
Adicionalmente, faces de fonte para Guardian Headline Full em pesos light e light itálico são definidas com seus respectivos arquivos fonte e formatos.
Este texto define uma família de fonte personalizada chamada "Guardian Headline Full" com vários estilos e pesos. Inclui versões regular, medium, semibold e bold, cada uma disponível em estilos normal e itálico. Os arquivos de fonte são fornecidos nos formatos WOFF2, WOFF e TrueType do site do Guardian.
```css
@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-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;
left: -11px;
}
}
.content__main-column--interactive .element-atom {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 12px;
padding-top: 12px;
}
.content__main-column--interactive p + .element-atom {
padding-top: 0;
padding-bottom: 0;
margin-top: 12px;
margin-bottom: 12px;
}
.content__main-column--interactive .element-inline {
max-width: 620px;
}
@media (min-width: 61.25em) {
figure[data-spacefinder-role="inline"].element {
max-width: 620px;
}
}
:root {
--dateline: #606060;
--headerBorder: #dcdcdc;
--captionText: #999;
--captionBackground: hsla(0, 0%, 7%, 0.72);
--feature: #c70000;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}
.content__main-column--interactive .element.element-atom,
.element.element-atom {
padding: 0;
}
#article-body > div .element-atom:first-of-type + p:first-of-type,
#article-body > div .element-atom:first-of-type + .sign-in-ga {
/ Estilos adicionais podem ser adicionados aqui se necessário /
}
```
O primeiro parágrafo em várias seções de conteúdo, como corpos de artigo, conteúdo interativo, comentários e features, terá um padding superior de 14 pixels. Adicionalmente, a primeira letra destes parágrafos será estilizada com uma fonte, tamanho e cor específicos, aparecendo como uma grande letra capitular maiúscula.
Para parágrafos seguindo uma regra horizontal, o padding superior é removido.
Legendass para elementos showcase são definidas para posição estática com uma largura máxima de 620 pixels.
Elementos imersivos abrangem a largura total da viewport, ajustando para um máximo de 978 pixels em telas menores que 71.24em. Suas legendas têm padding que varia com o tamanho da tela, de 10 pixels em dispositivos menores a 20 pixels em telas de tamanho médio.
```css
@media (max-width: 46.24em) {
.element.element--immersive.element-immersive {
margin-left: -10px !important;
margin-right: 0 !important;
left: 0;
}
}
@media (max-width: 46.24em) and (min-width: 30em) {
.element.element--immersive.element-immersive {
margin-left: -20px !important;
}
.element.element--immersive.element-immersive figcaption {
padding-inline: 20px;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 0px;
grid-template-columns: [title-start headline-start meta-start standfirst-start] repeat(5, 1fr) [title-end headline-end meta-end standfirst-end portrait-start] repeat(5, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] .25fr [title-end headline-start] 1fr [headline-end standfirst-start] .75fr [standfirst-end meta-start] auto [meta-end portrait-end];
}
.furniture-wrapper #headline > div:first-child,
.furniture-wrapper [data-gu-name=headline] > div:first-child,
.furniture-wrapper .headline > div:first-child {
border-top: 1px solid var(--headerBorder);
}
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name=meta] {
position: relative;
padding-top: 2px;
margin-right: 0;
}
.furniture-wrapper .standfirst .content__standfirst,
.furniture-wrapper #standfirst .content__standfirst,
.furniture-wrapper [data-gu-name=standfirst] .content__standfirst {
margin-bottom: 4px;
}
.furniture-wrapper .standfirst ul li,
.furniture-wrapper #standfirst ul li,
.furniture-wrapper [data-gu-name=standfirst] ul li {
font-size: 20px;
}
.furniture-wrapper .standfirst li a,
.furniture-wrapper .standfirst a,
.furniture-wrapper #standfirst li a,
.furniture-wrapper #standfirst a,
.furniture-wrapper [data-gu-name=standfirst] li a,
.furniture-wrapper [data-gu-name=standfirst] a {
border-bottom: none;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
}
.furniture-wrapper .standfirst li a:hover,
.furniture-wrapper .standfirst a:hover,
.furniture-wrapper #standfirst li a:hover,
.furniture-wrapper #standfirst a:hover,
.furniture-wrapper [data-gu-name=standfirst] li a:hover,
.furniture-wrapper [data-gu-name=standfirst] a:hover {
text-decoration-color: var(--new-pillar-colour);
}
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name=standfirst] p:first-of-type {
border-top: 1px solid var(--headerBorder);
padding-bottom: 0;
}
}
@media (min-width: 61.25em) and (min-width: 71.25em) {
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name=standfirst] p:first-of-type {
border-top: unset;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper figure {
margin: 0 0 0 -10px;
}
.furniture-wrapper figure[data-spacefinder-role=inline].element {
max-width: 630px;
}
}
@media (min-width: 71.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(2, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(7, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 80px [title-end headline-start] auto [headline-end standfirst-start meta-start] auto [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name=meta]:before {
content: "";
width: 540px;
position: absolute;
top: 0;
background-color: var(--headerBorder);
height: 1px;
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name=standfirst] p {
border-top: unset;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name=standfirst]:before {
content: "";
width: 1px;
background-color: var(--headerBorder);
height: 100%;
position: absolute;
top: 0;
left: .5px;
}
}
@media (min-width: 81.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(3, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(8, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] .25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] .75fr [standfirst-end meta-end portrait-end];
}
}
```
O código CSS define estilos para um layout de página web, ajustando elementos como manchetes, informações meta e mídia baseado no tamanho da tela. Manchetes têm uma largura máxima e tamanho de fonte que mudam em telas maiores, enquanto algumas linhas e elementos sociais são escondidos ou ajustados para diferentes dispositivos. Legendas são estilizadas com uma cor de fundo e posicionadas absolutamente, com um botão para alternar visibilidade. Suporte a modo escuro é incluído com variáveis de cor específicas para diferentes temas. Media queries garantem que o layout se adapte a várias larguras de viewport.
Para dispositivos Android, a nova cor de pilar é definida como
