Ten kod CSS definiuje rodzinę czcionek "Guardian Headline Full" z różnymi wagami i stylami. Zawiera wersje lekką (300), regularną (400), średnią (500) i półgrubą (600), każdą w stylach normalnym i italic. Pliki czcionek są dostarczane w formatach WOFF2, WOFF i TrueType z zasobów internetowych Guardiana.
Ten kod CSS definiuje kilka rodzin czcionek dla nagłówków i tytułów strony internetowej Guardiana. Określa różne wagi i style czcionek (normalny i italic) dla rodziny "Guardian Headline Full", w tym wagi lekką (300), regularną (400), pogrubioną (700) i czarną (900). Każda czcionka jest dostarczana w wielu formatach (WOFF2, WOFF i TrueType) dla kompatybilności z przeglądarkami. Dodatkowo definiuje rodzinę czcionek "Guardian Titlepiece" w wadze pogrubionej (700) z tymi samymi formatami plików.
Ten kod CSS definiuje wiele odmian kroju dla rodziny czcionek "Guardian Headline Full", każdą z różnymi wagami i stylami (normalny i italic). Czcionki pochodzą z różnych formatów plików (WOFF2, WOFF i TrueType) hostowanych na serwerze zasobów Guardiana. Wagi wahają się od regularnej (400) do czarnej (900), zapewniając, że czcionka może być używana w różnych kontekstach typograficznych, zachowując spójność na platformach internetowych.
Ten tekst wydaje się być kodem CSS definiującym style czcionek i responsywne układy siatki dla strony internetowej, prawdopodobnie The Guardian. Określa pliki czcionek dla różnych wag i stylów, a następnie konfiguruje szablony siatki, które zmieniają się przy różnych szerokościach ekranu, aby przearanżować obszary treści, takie jak tytuł, multimedia i tekst główny. Kod dostosowuje wypełnienie, odstępy między kolumnami i pozycjonowanie elementów na różnych rozmiarach urządzeń dla optymalnego wyświetlania.
Dla interaktywnych wykresów siatki z imersyjnymi podpisami w określonych obszarach treści, wypełnienie podpisów jest ustawione na 4 piksele u góry i 0 w innych miejscach.
W różnych sekcjach treści, elementy o nazwach "lines" i "meta" w interaktywnych siatkach są pozycjonowane w obszarze siatki od wiersza 2 do 5 i kolumny 1 do 2. Elementy "lines" mają wysokość dopasowaną do ich zawartości i górny margines 5 pikseli, podczas gdy elementy "meta" mają górny margines 18 pikseli.
Na większych ekranach (min-width: 81.25em), interaktywne siatki w tych sekcjach używają układu pięciokolumnowego o określonych szerokościach.
Dla urządzeń iOS i Android, nagłówki artykułów mają dostosowane style: tekst wstępu (standfirst) używa określonej rodziny czcionek ze średnią wagą, sekcyjne kickery wyświetlane są jako bloki z kapitalizowaną pierwszą literą, keylines mają zwiększone górne wypełnienie, autorzy byline używają pogrubionej czcionki szeryfowej, obrazy dostosowują swoją wysokość automatycznie, a akapity następujące po elementach atomicznych nie mają górnego marginesu.
Dodatkowo, zdefiniowane są odmiany kroju dla Guardian Headline Full w wadze lekkiej i lekkiej italic z ich odpowiednimi plikami źródłowymi i formatami.
Ten tekst definiuje niestandardową rodzinę czcionek o nazwie "Guardian Headline Full" z różnymi stylami i wagami. Zawiera wersje regularną, średnią, półgrubą i pogrubioną, każda dostępna w stylach normalnym i italic. Pliki czcionek są dostarczane w formatach WOFF2, WOFF i TrueType ze strony internetowej Guardiana.
@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 {
/ Dodatkowe style można dodać tutaj, jeśli potrzeba /
}
Pierwszy akapit w różnych sekcjach treści, takich jak ciała artykułów, treści interaktywne, komentarze i feature'y, będzie miał górne wypełnienie 14 pikseli. Dodatkowo, pierwsza litera tych akapitów będzie stylizowana z określoną czcionką, rozmiarem i kolorem, pojawiając się jako duża, wielka litera inicjału.
Dla akapitów następujących po poziomej linii, górne wypełnienie jest usuwane.
Podpisy dla elementów showcase są ustawione na pozycję statyczną z maksymalną szerokością 620 pikseli.
Elementy imersyjne rozciągają się na pełną szerokość viewportu, dostosowując się do maksimum 978 pikseli na ekranach mniejszych niż 71.24em. Ich podpisy mają wypełnienie, które zmienia się wraz z rozmiarem ekranu, od 10 pikseli na mniejszych urządzeniach do 20 pikseli na ekranach średniej wielkości.
@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
