Бутонът за надписи е стилизиран като кръгъл елемент с височина и ширина 40 пиксела, позициониран в долния десен ъгъл на екрана с маргин от 10 пиксела. Има полупрозрачен тъмен фон и високо z-стойност, за да стои над другото съдържание. При различни размери на екрана дясната му позиция се коригира, за да се центрира спрямо променливите ширини на съдържанието, като се взема предвид лентата за превъртане, ако има такава.
Освен това, шрифтовото семейство Guardian Headline Full е дефинирано с множество тежести и стилове (лек, обикновен, среден, полуудебелен, всеки в нормален и итализиран вариант), заредено от активите на Guardian във формати WOFF2, WOFF и TTF за широка съвместимост с браузъри.@font-face {
font-family: 'Guardian Headline Full';
src: url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.ttf') format('truetype');
font-weight: 600;
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-SemiboldItalic.woff2') format('woff2'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.woff') format('woff'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.ttf') format('truetype');
font-weight: 600;
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-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;
}
.Scrolly-header.svelte-ok2wri {
grid-area: header;
height: 100vh;
width: 100vw;
overflow: clip;
position: relative;
background-color: #121212;
margin-bottom: 20px;
margin-left: -10px;
padding: 0;
}
@media (min-width: 30em) {
.Scrolly-header.svelte-ok2wri {
margin-left: -20px;
}
}
@media (min-width: 46.25em) {
.Scrolly-header.svelte-ok2wri {
margin-left: calc((100vw - 740px - var(--scrollbar-width, 0px)) / 2 * -1 - 21px);
padding: 0 calc((100vw - 740px - var(--scrollbar-width, 0px)) / 2);
}
}
@media (min-width: 61.25em) {
.Scrolly-header.svelte-ok2wri {
margin-left: calc((100vw - 980px - var(--scrollbar-width, 0px)) / 2 * -1 - 21px);
}
}
@media (min-width: 71.25em) {
.Scrolly-header.svelte-ok2wri {
margin-left: calc((100vw - 1140px - var(--scrollbar-width, 0px)) / 2 * -1 - 21px);
}
}
@media (min-width: 81.25em) {
.Scrolly-header.svelte-ok2wri {
margin-left: calc((100vw - 1300px - var(--scrollbar-width, 0px)) / 2 * -1 - 21px);
}
}Елементът Scrolly-header има подложка, която се коригира спрямо ширината на изгледа, започвайки от 0 и увеличавайки се, за да центрира съдържанието в максимална ширина от 980px, 1140px или 1300px за по-големи екрани, като се взема предвид ширината на лентата за превъртане.
На средни екрани и по-големи височината на заглавната част е зададена на 90% от височината на изгледа, а отляво и отдясно са добавени вертикални линии, позиционирани да се подравнят с краищата на областта на съдържанието, които варират с размера на екрана.
Опаковката на изображението е лепкава, покрива пълния изглед първоначално и се мащабира до фиксирани ширини (740px, 980px, 1140px или 1300px) на по-големи екрани, с намалена непрозрачност за потребители, които предпочитат по-малко движение.
Изображението в опаковката се мащабира леко нагоре по подразбиране и центрира фона, връщайки се към липса на мащабиране за предпочитания за намалено движение, и адаптира ширината си отзивчиво.
Текстовият контейнер е абсолютно позициониран, обхваща цялата височина на изгледа и центрира съдържанието си с отзивчива подложка, която съответства на оформлението на заглавната част, също така се адаптира до 90% от височината на изгледа на средни екрани и по-големи.За екрани по-широки от 71.25em, текстовият контейнер в Scrolly-header коригира подложката си, за да центрира съдържанието с максимална ширина от 800px, като взема предвид лентата за превъртане.
Текстовата опаковка в заглавната част започва прозрачна, обхваща цялата ширина на изгледа и центрира съдържанието си с долна подложка от 80px. Първоначално е скрита и изместена надолу с 30%, но се появява и придвижва нагоре за половин секунда. Ако се предпочита намаляване на движението, тя се появява веднага без анимация.
На средни екрани (46.25em и повече) ширината на опаковката става 740px, а на по-големи екрани (61.25em и повече) се стеснява до 640px.
Както заглавието, така и подзаглавието използват конкретно шрифтово семейство, са бели със сянка за четливост и имат балансирано пренасяне на текста. Включват ефект на размазан тъмен фон за контраст. Заглавието е по-голямо и по-удебелено, докато подзаглавието е по-светло и се появява под него с горна маргина.
При средни размери на екрана размерите на текста се увеличават, а маргините се коригират за по-добро оформление. На по-големи екрани маргините са леко намалени.
При анимиране опаковката на изображението става по-непрозрачна, а текстовата опаковка става напълно видима и центрирана. На iOS и Android заглавната част се подравнява отляво без маргина.
Шрифтови лица за Guardian Headline Full са дефинирани в тежести лек, лек италик и обикновен, заредени от конкретни URL адреси във формати woff2, woff и ttf.Уебсайтът на Guardian използва персонализиран шрифт, наречен "Guardian Headline Full" за заглавията си. Този шрифт се предлага в различни стилове и тежести, включително обикновен, итализиран, среден, полуудебелен, удебелен и черен, всеки наличен в множество файлови формати като 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-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 {
border-left: 1px solid #dcdcdc;
left: -11px;
}
}
.content__main-column--interactive .element-atom {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 12px;
padding-top: 12px;
}
.content__main-column--interactive p + .element-atom {
padding-top: 0;
padding-bottom: 0;
margin-top: 12px;
margin-bottom: 12px;
}
.content__main-column--interactive .element-inline {
max-width: 620px;
}
@media (scripting: enabled) {
:root .content--interactive,
:root #article-header > div,
:root #feature-header > div,
:root #article-header > h1,
