Този CSS код дефинира персонализирано шрифтово семейство, наречено "Guardian Headline Full", с множество стилове и тежести. Включва версии light, regular, medium и semibold, всяка от които е налична както в нормален, така и в курсивен стил. Шрифтовите файлове се хостват онлайн и се предоставят в три формата: WOFF2, WOFF и TrueType (TTF).
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-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/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-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/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, 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) {
}
За интерактивните колони със съдържание се добавя лява граница със специфично позициониране и z-index. На по-големи екрани лявата позиция на границата се коригира леко. В тези колони атомните елементи нямат горни или долни маржове, но включват падинг. Когато параграфи предхождат атомни елементи, падингът се премахва и вместо това се добавят маржове. Вградените елементи са ограничени до максимална ширина от 620px.
За фигури с роля loop, надписите се задават с по-висок z-index, а бутоните за цикъл се стилизират с конкретни размери и подравняване. Елементите със самостоятелно хоствано видео се задават на пълна ширина, ограничена до 620px, и включват горни и долни маржове. За иммерсивни видео оформления ограниченията за ширина се премахват и маржовете се коригират. На по-широки екрани иммерсивните видеа се разширяват в ширина и се изместват наляво.
Цветовите променливи дефинират стилове за дати, граници, надписи и елементи от тип feature. В тъмен режим цветовете на текста и иконите се адаптират към тъмна тема. Атомните елементи в колоните със съдържание нямат падинг. Конкретни правила гарантират, че първият параграф след определени елементи или хоризонтални разделители се стилизира подходящо в различни секции на съдържанието като статии, коментари и feature материали. Първият параграф след врата за вписване или хоризонтален разделител (с изключение на последния) има горен падинг от 14 пиксела.
За първата буква на първия параграф след начален елемент, врата за вписване или хоризонтален разделител (с изключение на последния) в различни тела на съдържанието се прилага специфичен стил за инициали (drop cap). Той използва шрифта Guardian headline, е удебелен, с размер 111 пиксела и височина на реда 92 пиксела. Плаващ е вляво, с главни букви, използва border-box моделиране, има десен марж от 8 пиксела, подравнен е към върха и използва персонализирана цветова променлива.
Параграфите, които следват непосредствено хоризонтален разделител в тези тела на съдържанието, нямат горен падинг.
Цитатите (pullquotes) в тези тела на съдържанието имат максимална ширина от 620 пиксела.
Надписите за елементи от тип showcase в основното съдържание и контейнерите за статии са позиционирани статично, заемайки пълна ширина до 620 пиксела.
Иммерсивните елементи обхващат пълната ширина на изгледа, като се взема предвид лентата за превъртане. На по-големи екрани (до 71.24em) те са ограничени до 978 пиксела, като падингът на надписите се коригира при различни точки на прекъсване. На средни екрани (46.25em до 61.24em) максималната ширина е 738 пиксела. На по-малки екрани (под 46.24em) те се подравняват към левия ръб с коригирани маржове и падинг на надписите.
За обвивките на мебели (furniture wrappers) на големи екрани (61.25em и повече) се използва оформление на мрежа (grid) с дефинирани колони и редове за позициониране на компонентите на заглавието. CSS стиловете дефинират оформлението и външния вид на секцията заглавие на уеб страница, наричана "furniture-wrapper". Те задават граници, разстояния, типография и мрежови структури, които се адаптират към различни размери на екрана.
За по-големи екрани (над 71.25em) се установява сложно мрежово оформление с конкретни колони и редове за елементи като заглавие, хедлайн, мета информация, стендфърст (подзаглавие) и портрет. Визуалните елементи като граници и линии се коригират или премахват при определени точки на прекъсване. Размерът на шрифта на хедлайна се увеличава и максималната му ширина се променя на по-големи екрани. Връзките в стендфърста се стилизират с подчертавания, които променят цвета при посочване. За екрани по-широки от 740 пиксела, скрийте елементите с класа `.keyline-4` или атрибута `[data-gu-name="lines"]`. В рамките на `.furniture-wrapper` стилизирайте щриховете на SVG в тези елементи да използват цветовата променлива `--headerBorder`.
На екрани по-широки от 740 пиксела, премахнете десния марж от елементите с ID `#meta` или атрибута `[data-gu-name="meta"]` вътре в `.furniture-wrapper`. За тези мета елементи задайте цвета на границата на социалните връзки, секциите за коментари и техните дъщерни елементи span на `--headerBorder`. Също така, скрийте всички `gu-island` компоненти в рамките на `.content__meta-container_dcr`.
За секцията стендфърст (избрана чрез клас, ID или `data-gu-name`) приложете отрицателен ляв марж и съответстващ падинг, и задайте позицията й на relative. На по-широки екрани (над 740px) добавете малък горен падинг. Стилизирайте параграфите в рамките на стендфърста с тегло на шрифта 400, размер 20 пиксела и долен падинг от 14 пиксела.
Основната медийна зона (избрана чрез ID или `data-gu-name`) е позиционирана relative, няма горен марж, има малък долен марж и е поставена в мрежовата област "portrait". Уверете се, че вътрешните й div елементи заемат пълна ширина и нямат хоризонтален марж. На много широки екрани (над 980px) премахнете долния марж. На по-малки екрани (под 740px) задайте ширината й на пълната ширина на изгледа минус ширината на лентата за превъртане и приложете отрицателен ляв марж. За екрани между 480px и 740px увеличете този отрицателен ляв марж до -20px.
Стилизирайте надписите на фигури да бъдат позиционирани абсолютно в долната част, с конкретен падинг и цветове за фон и текст от CSS променливи. Задайте тяхната ширина на 100% без максимална ширина, премахнете долния марж и задайте минимална височина. Оцветете елементите span в надписа с `--headerBorder` и запълнете техните SVG елементи със същия цвят. Скрийте първия span и покажете втория span като блоков елемент, като ограничите ширината му до 90%. На екрани по-широки от 480px увеличете хоризонталния падинг на надписа. Класът `.hidden` върху надписа задава неговата непрозрачност на 0.
Бутонът за надпис се показва като блок, позициониран абсолютно близо до долния десен ъгъл, с висок z-index. Има кръгъл фон, без граница и конкретен падинг. Мащабирайте неговата SVG икона леко надолу. На екрани по-широки от 480px коригирайте дясната му позиция. За много широки екрани (над 1140px) коригирайте горната част и височината на псевдоелемента `.content__main-column--interactive`. Също така, ограничете максималната ширина на h2 заглавията в тази колона до 620 пиксела.
За коренния елемент, когато тялото има клас `.ios` или `.android`, дефинирайте набор от цветови променливи за тъмен режим. При предпочитание за тъмна цветова схема актуализирайте променливата `--new-pillar-colour` съответно.
На iOS устройства, насочете се към първата буква на първия параграф след конкретни начални елементи в различни контейнери за статии и стилизирайте първата им буква. Това също се прилага, ако елемент за врата за вписване се появи между този първи елемент и параграфа. Първата буква на първия параграф след врата за вписване, или след елемент атом, последван от врата за вписване,
