Този CSS код дефинира персонализирано шрифтово семейство, наречено "Guardian Headline Full", с множество тежести и стилове на шрифта. Включва лека, обикновена, средна и полу-удебелена тежест, всяка в нормална и курсивна версия. Шрифтовете се зареждат от сървърите на Guardian във формати WOFF2, WOFF и TrueType, за да се осигури съвместимост с различни браузъри.
@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-индекс. На по-големи екрани лявата позиция на границата се коригира леко. В тези колони атомните елементи нямат горни или долни маржове, но включват падинг. Когато параграфи предхождат атомни елементи, падингът се премахва и вместо това се добавят маржове. Вградените елементи са ограничени до максимална ширина.
За вградени фигури на средни екрани и по-големи се задава максимална ширина. В медийни секции, съдържащи фигури на цикъл, надписите са наслоени отгоре, а бутоните на цикъла са стилизирани с конкретни размери и подравняване. Бутоните за надписи се поставят отгоре.
В секцията на тялото, самостоятелно хостваните видео острови заемат пълна ширина до максимум, с центрирани маржове. Фигурите на цикъла и видеоклиповете в тези острови също заемат пълна ширина. За иммерсивни видео елементи ограниченията за ширина се премахват и маржовете се коригират. На по-големи екрани иммерсивните видеоклипове се разширяват по ширина и се изместват наляво, като надписите се отстъпват съответно.
Цветовите променливи дефинират различни UI елементи като дати, граници, надписи и цветове на функции, като основните цветове влияят на подзаглавията, цитатите и блоковите цитати. В тъмен режим тези цветове се адаптират към тъмната тема.
Атомните елементи в колоните със съдържание нямат падинг. Конкретни правила коригират първите параграфи след определени елементи или хоризонтални линии в различни области на съдържанието като статии, интерактивно съдържание, коментари и функции, осигурявайки правилно разстояние и оформление.
Първият параграф след врата за влизане или хоризонтална линия (освен последната) има горен падинг от 14 пиксела.
За първата буква на първия параграф след специфични елементи като атом, врата за влизане или хоризонтална линия (не последната) в различни области на съдържанието (тяло на статия, интерактивно съдържание, коментари, функции или елементи с `data-gu-name` "body"), приложете специален стил за главна буква. Този стил използва конкретни заглавийни шрифтове, задава размера на шрифта на 111px с височина на реда 92px, плаващо позициониране вляво, главни букви, добавя десен марж от 8px, подравнява се към върха на текста и оцветява с персонализирана променлива за главни букви.
Параграфите непосредствено след хоризонтална линия в тези области на съдържанието не трябва да имат горен падинг.
Цитатите в тези области на съдържанието са ограничени до максимална ширина от 620 пиксела.
Надписите за елементи за представяне в основното съдържание, статии с функции, стандартни статии и секции за коментари са позиционирани статично, заемайки пълната ширина до максимум 620 пиксела.
Иммерсивните елементи обхващат пълната ширина на изгледа, като се взема предвид лентата за превъртане. На по-големи екрани (до 71.24em) максималната им ширина е 978px, като падингът на надписа се коригира при различни точки на прекъсване. На средни екрани (между 46.25em и 61.24em) максималната ширина е 738px. На по-малки екрани (под 46.24em) иммерсивните елементи се подравняват към левия ръб с коригирани маржове и падинг на надписа.
За по-широки екрани (над 61.25em) обвивката за мебели използва CSS Grid оформление с дефинирани колони и редове за позициониране на елементи като заглавие, заглавие, метаданни, стенд и портретна област.
CSS стиловете дефинират оформление на обвивка за компоненти на статии. Заглавията имат горна граница и се коригират в размер от 32px до 50px на по-големи екрани, с максимална ширина, която също се променя. Мета информацията включва декоративна горна линия на широки екрани. Секцията за стенд включва подчертани връзки с персонализиран цвят, който се променя при задържане, а първият й параграф има горна граница на по-малки екрани, която се премахва на по-големи. Вертикална разделителна линия се появява в стенда на широки екрани.
Оформленията на решетки са дефинирани за екрани 71.25em и по-широки, и отново за 81.25em и по-широки, указвайки шаблони за колони и редове за позициониране на елементи като област на заглавие, заглавие, мета, стенд и портрет. Фигурите имат конкретни маржове и максимални ширини. Като цяло стиловете контролират отзивчивото представяне на заглавията на статиите и уводното съдържание.
За екрани по-широки от 740px, скрийте елементи с класа `.keyline-4` или атрибута `[data-gu-name="lines"]`. В рамките на `.furniture-wrapper`, стилизирайте SVG щриховете вътре в тези елементи с персонализирана цветова променлива.
На средни екрани и по-големи, премахнете десния марж от елементи с ID `#meta` или атрибута `[data-gu-name="meta"]`.
Вътре в мета секцията, задайте цвета на границата за социални връзки, елементи за коментари и техните дъщерни обхвати към персонализирана променлива. Също така, скрийте всички `gu-island` елементи в конкретен контейнер.
За секцията за стенд, коригирайте нейното позициониране и падинг, добавяйки ляв отстъп. На средни екрани, добавете малък горен падинг. Стилизирайте параграфа вътре с нормална тежест на шрифта, размер от 20px и долен падинг.
Основната медийна област е позиционирана относително, поставена в областта на решетката 'portrait' и получава конкретни маржове. Уверете се, че вътрешните й диви заемат пълна ширина. На по-големи екрани, премахнете долния марж. На по-малки екрани, коригирайте ширината и левия марж, с допълнителна корекция за средно-малки екрани.
Стилизирайте надписите на фигурите да се появяват отдолу с персонализиран фон и цвят на текста, отменяйки ширината и маржовете по подразбиране. Скрийте първия обхват вътре и покажете втория, ограничавайки неговата ширина. На средни екрани, коригирайте падинга на надписа. Състояние на скриване прави надписа прозрачен.
Бутон за надпис е позициониран долу вдясно, стилизиран с кръгъл фон и мащабирана икона, като позицията му се коригира на средни екрани.
За интерактивни колони със статии на много големи екрани, коригирайте позицията и височината на псевдо елемент. Също така, ограничете ширината на заглавията от ниво 2.
За iOS или Android, дефинирайте набор от цветови променливи за тъмна тема. В тъмен режим, коригирайте променливата за основен цвят.
За iOS устройства, насочете първия параграф след специфични елементи в различни контейнери за статии и стилизирайте първата му буква.
Първата буква на първия параграф след врата за влизане, или първия параграф след атомен елемент в различни контейнери за статии на iOS и Android, трябва да бъде оцветена с помощта на вторичната основна променлива (по подразбиране черна).
На iOS и Android, височината на заглавието на статията в контейнери за статии с функции, стандартни и коментари трябва да бъде зададена на нула.
