Този CSS код дефинира персонализирано шрифтово семейство, наречено "Guardian Headline Full", с множество тегла и стилове на шрифта. Включва тегла light, regular, medium и semibold, всяко в нормална и курсивна версия. За всеки стил кодът указва три различни файлови формата за шрифт (woff2, woff и ttf), хоствани на сървърите на Guardian, което осигурява широка съвместимост с браузъри.
@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));
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-cЗа интерактивните колони със съдържание се добавя лява граница със специфично позициониране и z-index. На по-големи екрани позицията на границата леко се коригира. В тези колони елементите от тип atom нямат горни или долни маржове, но включват падинг. Когато параграф следва елемент от тип atom, падингът се премахва и се добавят маржове вместо това. Вградените елементи са ограничени до максимална ширина.
За фигури с вградена роля те също имат максимална ширина на екрани със среден размер и по-големи.
Персонализирани свойства дефинират различни цветове за елементи като дати, заглавия, надписи и характеристики. Основният цвят на стълба по подразбиране е цветът на характеристиката, ако не е зададен.
Елементите от тип atom в интерактивни колони или като цяло нямат падинг. Първият параграф след специфични елементи или хоризонтални разделители в различни тела на съдържанието получава допълнителен горен падинг.
Освен това, първата буква на тези параграфи се стилизира като инициали с конкретен шрифт, размер, тегло и цвят, като се използват персонализирани свойства за оцветяване.За параграфи, следващи хоризонтални разделители в специфични области на съдържанието, премахнете горния падинг.
Ограничете ширината на цитатите (pullquote) до 620px в телата на статии, интерактивни, коментарни и характеристични материали.
За надписи на елементи от тип showcase в основното съдържание и контейнери за статии, задайте позиция на static, ширина на 100% и максимална ширина на 620px.
Имерсивните елементи трябва да обхващат пълната ширина на изгледа минус лентата за превъртане. На екрани до 71.24em, ограничете тяхната ширина до 978px. За надписи на тези екрани, добавете 10px хоризонтален падинг, увеличавайки се до 20px на екрани между 30em и 71.24em.
На екрани със среден обхват (46.25em до 61.24em), ограничете иммерсивните елементи до 738px. На по-малки екрани (до 46.24em), премахнете левия марж, подравнете към левия край и добавете 10px отрицателен ляв марж (20px на екрани 30em и по-широки). Надписите на тези по-малки екрани получават 20px хоризонтален падинг.
За обвивката на мебелите (furniture wrapper) на големи екрани (61.25em и нагоре), използвайте CSS мрежа с дефинирани колони и редове. Стилизирайте първото дете на заглавията с горна граница. Позиционирайте мета секцията относително с горен падинг и без десен марж. В секциите за встъпителни текстове (standfirst), коригирайте долните маржове, задайте размера на шрифта на елементите от списък на 20px и стилизирайте връзките с подчертаване (използвайки персонализиран цвят за подчертаването, който се променя при посочване). Първият параграф във встъпителния текст получава горна граница и без долен падинг, въпреки че тази граница се премахва на много големи екрани (71.25em и нагоре).
Също така, за фигури в обвивката, премахнете левия марж и задайте максимална ширина на 630px за вградени елементи. На най-големите екрани (71.25em и нагоре), шаблонните колони на мрежата се дефинират, започвайки от заглавие, основно заглавие и мета.Оформлението използва мрежа с дефинирани колони и редове за различни размери на екрана. На по-големи екрани мрежата има три колони за секциите заглавие, основно заглавие и мета, пет колони за встъпителния текст и осем колони за портрета, с пропорционално размери на редовете. На средни екрани мрежата се адаптира съответно на две, пет и седем колони, с конкретни височини на редовете.
Стилизирането включва горна граница за мета секцията и лява граница за встъпителния текст, като и двете използват персонализирана цветова променлива. Заглавията имат максимална ширина и размер на шрифта, който се променя с размера на екрана, ставайки по-голям на по-широки екрани. Някои елементи, като споделяне в социалните мрежи и секции за коментари, имат граници, съответстващи на цвета на заглавието, докато други са скрити на определени устройства.
Текстът във встъпителния текст има специфични падинг и свойства на шрифта, а основната медийна област е позиционирана в мрежата, като нейната ширина се коригира на по-малки екрани, за да отчете лентите за превъртане и маржовете. Надписите са позиционирани абсолютно.Надписът на фигурата в обвивката на мебелите е позициониран абсолютно в долната част без долен марж, с падинг, цвят на фона и цвят на текста. Неговата ширина е зададена на 100% с минимална височина от 46 пиксела. В надписа първият обхват (span) е скрит, докато вторият се показва и е ограничен до 90% от максималната ширина. Текстът на надписа и SVG иконите използват конкретна цветова променлива.
На екрани по-широки от 30em, хоризонталният падинг на надписа се увеличава. Специален бутон за надпис е позициониран абсолютно долу вдясно, с кръгъл фон и мащабирана SVG икона, като коригира дясната си позиция на по-големи екрани.
За интерактивните основни колони на много широки екрани, псевдо-елемент коригира своята горна част и височина. Заглавията в тези колони имат максимална ширина.
За iOS и Android са дефинирани цветови променливи за тъмен режим, включително цвят за характеристика, който се променя в тъмния режим. Конкретни контейнери за статии на тези платформи стилизират първата буква на първия параграф след определени елементи с вторичен цвят, задават височината на заглавието на статията на нула, коригират падинга за обвивката на мебелите и скриват етикетите за съдържание в нея.За устройства с iOS и Android следните стилове се прилагат към контейнери за статии от тип feature, standard и comment:
- **Етикети**: Използвайте удебелен, с главни букви шрифт от типа Guardian headline или serif, оцветен с новата променлива за цвят на стълба.
- **Заглавия**: Зададени на 32px, удебелени, с 12px долен падинг и тъмносив цвят (#121212).
- **Изображения**: Позиционирани относително, с 14px горен марж и отрицателен 10px ляв марж. Ширината обхваща пълния изглед (като се отчете лентата за превъртане), а височината се коригира автоматично. Вътрешните елементи, изображенията и връзките във фигурата имат прозрачен фон, съответстващ на пълната ширина на изгледа с автоматична височина.
- **Встъпителен текст (резюме на статията)**: Включва 4px горен падинг, 24px долен падинг и отрицателен 10px десен марж. Параграфите вътре във встъпителния текст наследяват тези стилове на контейнера.CSS кодът задава конкретни стилове за встъпителни текстове и метаданни на статии за устройства с iOS и Android. Той дефинира шрифтови семейства за текста във встъпителния текст и персонализира външния вид на връзките, включително цвят, стил на подчертаване и ефекти при посочване. Кодът също коригира маржовете за секциите с метаданни и осигурява последователно стилизиране на имената на авторите и
