Този CSS код дефинира персонализирано шрифтово семейство, наречено "Guardian Headline Full", с множество шрифтови наситености и стилове. То включва light (лек), regular (нормален), medium (среден) и semibold (полуудебелен) удебеленина, всяка от тях както в нормален, така и в италик стил. Шрифтовите файлове са предоставени във формати WOFF2, WOFF и TrueType, хоствани на сървъра за активи на The Guardian.
Семейството шрифтове Guardian Headline Full включва няколко стила, всеки наличен в множество формати (WOFF2, WOFF и TTF). Стиловете са:
- Bold (наситеност 700, нормален стил)
- Bold Italic (наситеност 700, италик стил)
- Black (наситеност 900, нормален стил)
- Black Italic (наситеност 900, италик стил)
- Light (наситеност 300, нормален стил)
- Light Italic (наситеност 300, италик стил)
- Regular (наситеност 400, нормален стил)
- Regular Italic (наситеност 400, италик стил)
Допълнително, шрифтът Guardian Titlepiece е наличен в Bold (наситеност 700, нормален стил).
Семейството шрифтове "Guardian Headline Full" включва множество шрифтови файлове с различни наситености и стилове. Всеки шрифт е наличен във формати WOFF2, WOFF и TrueType, хоствани на посочените URL адреси. Наситеностите варират от 400 (regular) до 900 (black), като за всяка наситеност са предоставени както нормален, така и италик стил.
```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 {
/ Стилизирането на надписи продължава тук /
}
}
```
За надписи към immersive фигури и интерактивно съдържание в мрежа, отстъпът (padding) е зададен на 4 пиксела отгоре и 0 на другите места. Елементите с имена "lines" и "meta" в интерактивни мрежи са позиционирани в определена мрежова област. Елементите "lines" имат зададена височина, която да съответства на съдържанието им, и горен маргин от 5 пиксела, докато елементите "meta" имат горен маргин от 18 пиксела.
На екрани по-широки от 81.25 em, интерактивните мрежи използват оформление с пет колони с фиксирани и гъвкави ширини.
На устройства iOS и Android, заглавията на статиите използват специфични шрифтове и наситености за текста в standfirst (въвеждащо резюме), етикети на раздели и имена на автори (bylines). Етикетите на раздели са с главни букви, а разделителните линии (keylines) имат коригиран отстъп. Изображенията във фигури имат прозрачен фон, а самите изображения са леко изместени надясно. Заглавията имат прозрачен фон, коригиран отстъп и използват размер на шрифта 24 пиксела с височина на реда 115%.
За Android, главните и подзаглавията са зададени да се показват като блокови елементи. Както на iOS, така и на Android, подзаглавията са стилизирани с лек шрифт (light font weight), подравнени вляво и с балансирано пренасяне на текста.
Елементите "kickers" (кратки въвеждащи текстове) в статиите нямат отстъп, а техният текст е скрит.
Елементите за име на автор (byline) и дата на публикация използват шрифт с размер 17px, нормална наситеност и височина на реда 130%. Текстът на автора и връзките към автори са с цвят #707070.
Параграфите в standfirst са зададени на 20px, нормален стил, лек шрифт (light weight) и височина на реда 115%. Връзките в параграфите на standfirst са удебелени, с цвят #707070, с долна граница и без фоново изображение.
Текстът на заглавията е с цвят #dcdcdc.
Изображенията и техните контейнери са зададени на ширина 100vw минус 20px, с автоматична височина и максимална ширина 620px. Вътрешните елементи на фигури имат височина, зададена като неопределена (unset). Showcase изображенията имат максимална ширина 280px.
Определени раздели и странични полета (asides), следващи навигацията, са скрити. Atom елементите нямат маргин или отстъп.
Showcase елементите и тяхното съдържание имат максимална ширина 210px, която се увеличава до 260px за изгледи по-широки от 61.25em. Обхватите (spans) с надписи в рамките на inline и showcase елементи също са стилизирани съответно.
За надписи в рамките на тялото на текста, текстът в обхватите (span) е зададен на 14px, в светлосив цвят (#707070) и се показва в ред (inline). Първият обхват в надписите за inline и showcase елементи е зададен като inline-block.
На екрани по-широки от 71.25em, надписите за inline и showcase елементи са позиционирани относително и тяхната ширина е нулирана.
За статии с интерактивно съдържание, оформлението използва мрежови области, наименувани "header", "headline", "standfirst", "lines", "meta" и "body". На по-големи екрани (71.25em и нагоре), мрежовото оформление се променя на три колони с области за "header", "meta", "border", "standfirst" и "body". Маргинът на главната колона е премахнат, лявата граница е скрита, а ширината на параграфите е зададена на 620px.
Елементите на заглавията имат специфични настройки за шрифт: Guardian Headline или подобни шрифтове, размер 24px, лек шрифт (наситеност 300) и светлосив цвят (#dcdcdc). Отстъпът е 0–10px на малки екрани, 0–20px на средни екрани (30em и нагоре) и е премахнат на големи екрани (71.25em и нагоре).
Разделителните линии (keylines) и линии (lines) са скрити. На големи екрани, заглавието на статията е позиционирано абсолютно на 20px отляво.
Връзките в заглавието на статията използват размер на шрифта 17px и нормален стил. Горният отстъп на заглавието е 2px, а етикетите имат горна граница и отстъп (0–10px на малки екрани, 0–20px на средни екрани). На по-големи екрани (46.25em и нагоре) горната граница е премахната, а отстъпът е зададен на 0 на най-големите екрани (71.25em и нагоре).
Този CSS код стилизира елементи в интерактивна статия.
За заглавия на статии и връзки, той задава височина на реда 115% и цвят на текста #ff5943. При задържане на курсора върху връзките в заглавията, цветът на подчертаването се променя на #dcdcdc.
Standfirst (резюмето на статията) използва специфични шрифтове, сив цвят (#606060), размер на шрифта 24px, нормален стил, наситеност 400 и височина на реда 115%. Има отстъп, който се регулира според ширината на екрана: 2px 10px за по-малки екрани, 2px 20px за екрани с ширина 30em и повече, и без отстъп за екрани с ширина 71.25em и нагоре. Връзките в standfirst са с цвят #707070 и получават долна граница от 2px при задържане на курсора.
Бутоните за социални медии в секцията meta нямат ефект на преход (transition). При задържане на курсора, техният фон става #121212, границата става #121212, текстът става #dcdcdc, а всички SVG икони също се променят на запълване #dcdcdc с фон #121212.
Бутоните за споделяне са скрити. Дефиниран е малък вграден (inline) елемент с интервал от 4px. За тялото на статията, именован мрежов контейнер използва оформление с две колони с максимална ширина 620px.
За екрани по-широки от 46.25em, именованият мрежов контейнер използва две колони, всяка с ширина 310px. Елементите с нечетни номера в мрежата имат десен отстъп 5px (10px на по-широки екрани), докато елементите с четни номера имат ляв отстъп 5px (10px на по-широки екрани).
Заглавията (h2) в мрежата имат размер на шрифта 17px, горна граница, горен отстъп 2px и максимална ширина 620px. Елементите от списъка, следващи тези заглавия, нямат отстъп или маргин, като първият елемент използва различен цвят на текста. Маркерите на елементите от списъка са скрити, а текстът в параграфите използва конкретно шрифтово семейство, размер 14px и височина на реда 130%.
Immersive фигу
