Този CSS код дефинира персонализирано шрифтово семейство, наречено "Guardian Headline Full" с множество шрифтови тежести и стилове. Той уточнява шрифтовите файлове в различни формати (WOFF2, WOFF и TrueType) и техните онлайн местоположения, за да бъдат изтеглени и използвани от браузъра. Шрифтът включва лека (300), обикновена (400), средна (500) и полу-удебелена (600) тежест, всяка с нормален и курсивен стил.
@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://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://interactive.guim.co.uk/fonts/garnett/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 {
left: -10px;
}
}
За интерактивната основна колона се добавя лява граница преди съдържанието, позиционирана 11 пиксела вляво. Елементите в тази колона нямат горно или долно поле, но включват подложка от 12 пиксела отгоре и отдолу. Когато параграф е последван от елемент, подложката се премахва и се прилагат полета от 12 пиксела. Вградените елементи са ограничени до максимална ширина от 620 пиксела, което важи и за вградените фигури на екрани по-широки от 61.25em.
Персонализирани свойства дефинират цветове за различни елементи, като дата, граница на заглавие, текст на надпис и фон, като цвят на функцията е зададен в червено и нов цвят на стълб по подразбиране е основният или цветът на функцията. Елементите с клас atom нямат подложка.
За първия параграф след определени елементи или хоризонтална линия в различни области на съдържанието се добавя горна подложка от 14 пиксела. Първата буква на тези параграфи е стилизирана с голям, удебелен шрифт в главни букви в определен цвят, плаващ вляво с поле и вертикално подравняване.
Освен това, параграфите веднага след хоризонтална линия в тези области нямат горна подложка. Цитатите в определени области на съдържанието имат максимална ширина от 620 пиксела.
Надписите на елементи showcase в основното съдържание и контейнерите на статии са позиционирани статично с пълна ширина, също ограничени до 620 пиксела.
Имерсивните елементи обхващат пълната ширина на изгледа минус ширината на плъзгача. На екрани с ширина до 71.24em, тези елементи са ограничени до 978 пиксела, с подложка на надписа от 10px на по-малки екрани и 20px на средни. Между 46.25em и 61.24em максималната ширина е 738 пиксела. Под 46.24em иммерсивните елементи се подравняват към левия ръб с коригирани полета и подложка на надписа от 20px на средни екрани.
За обвивките на мебелите на по-големи екрани (61.25em и нагоре) се използва оформление на мрежа с определени колони и редове. Заглавията имат горна граница, мета секциите имат горна подложка, а елементите standfirst включват стилизирани връзки с подчертавания, които променят цвета при задържане. Първоначално първият параграф в standfirst има горна граница, която се премахва на по-широки екрани (71.25em и нагоре). Фигурите в обвивката нямат долно поле и имат отместване вляво, като вградените елементи са ограничени до 630 пиксела. На най-големите екрани мрежата коригира структурата на колоните за по-добро оформление.
Оформлението използва мрежа с конкретни колони и редове за различни размери на екрана. На по-големи екрани мрежата се коригира да има три равни колони за заглавието, заглавието и мета секциите, последвани от пет за standfirst и осем за портрета, с височини на редовете, зададени като дроби. Тънка линия се появява над мета секцията, а standfirst има вертикална линия от лявата си страна.
Заглавията са удебелени и се променят в размер и ширина в зависимост от екрана: до 620px ширина и 32px шрифт на по-малки екрани и 540px ширина с 50px шрифт на по-големи. Някои декоративни линии са скрити на по-големи екрани, а елементите за споделяне в социалните мрежи и коментари имат граници, съответстващи на цвета на заглавието.
Текстът на standfirst е с нормална тежест, 20px размер, с подложка отдолу и е леко изместен наляво с лява подложка. Основните медийни изображения запълват ширината и коригират полетата за различни размери на екрана, като надписите са позиционирани в долната част с фон и персонализиран цвят на текста. На много малки екрани медията обхваща пълната ширина на изгледа минус ширината на плъзгача.
Обвивката на мебелите задава тъмен фон и коригира полетата и подложките за различни размери на екрана. На по-големи екрани добавя декоративни странични ленти. Заглавията са стилизирани с удебелен, светлосив текст, а мета информацията използва подобни цветове. Бутоните в социалните мрежи имат отчетлив цвят, който се променя при задържане, превключвайки цветовете на текста и фона за контраст. Надписите са скрити по подразбиране, но могат да бъдат включвани с бутон, а различни елементи адаптират видимостта и оформлението си въз основа на ширината на екрана и други условия.
Елементите с клас "furniture-wrapper" и техните наследници имат специфични правила за стилизиране:
- Връзките в мета секцията са оцветени с помощта на персонализирано свойство за цвета на стълба или функция за тъмен режим, като същият цвят се прилага при задържане както за текста, така и за подчертаването.
- Връзките в standfirst нямат граница, използват цвета на стълба или функцията за тъмен режим за текста, премахват фоновете изображения и имат подчертавания с отместване от 6px и цвят на границата на заглавието. При задържане цветът на подчертаването се променя на цвета на стълба или функцията за тъмен режим.
- Параграфите и елементите от списъка в standfirst са оцветени в светлосиво (#dcdcdc).
- За по-големи екрани (min-width: 61.25em) първият параграф в standfirst има горна граница, която се премахва при още по-големи точки на прекъсване (min-width: 71.25em).
- Псевдо-елементите (:before и :after) се използват за създаване на странични ленти с тъмни фонове и граници, коригирайки тяхната ширина и позиция въз основа на размера на изгледа и ширината на плъзгача за различни размери на екрана.
- Ключови линии и социални/коментарни елементи в мета секцията използват цвета на границата на заглавието за щрихи и стилизиране.
Секцията за коментари има цвят на границата, който съответства на цвета на границата на заглавието.
В статиите заглавията от второ ниво имат лека тежест на шрифта от 200. Въпреки това, ако заглавие от второ ниво съдържа удебелен елемент, то използва по-тежка тежест на шрифта от 700.
Освен това, шрифтовото семейство Guardian Headline Full е дефинирано с различни стилове и тежести, включително лек, обикновен, среден и полу-удебелен, всеки наличен в нормална и курсивна версия. Тези шрифтове се доставят от конкретни URL адреси във формати WOFF2, WOFF и TrueType.
Този CSS код дефинира няколко шрифтови семейства и техните вариации за уебсайта на Guardian. Той уточнява различни шрифтови тежести и стилове (като удебелен, курсив, полу-удебелен, черен) за шрифта "Guardian Headline Full", всеки с множество файлови формати (WOFF2, WOFF, TTF) за съвместимост между браузъри. Освен това, той включва шрифта "Guardian Titlepiece" в удебелен вариант.
Кодът също така настройва CSS персонализирани свойства (променливи) за цветове, коригирайки ги за тъмен режим на iOS и Android устройства. Той включва медийни заявки за обработка на предпочитания за тъмен режим и прилага специфично стилизиране на първата буква на параграфи в
