Този CSS код дефинира персонализирано шрифтово семейство, наречено "Guardian Headline Full", с множество шрифтови тегла и стилове. Включва леко, нормално, средно и полу-удебелено тегло, всяко с нормални и курсивни варианти. Шрифтовите файлове са предоставени във формати WOFF2, WOFF и TrueType, хоствани на сървъра за активи на 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Това изглежда като блок от CSS код, а не обикновен текст на английски. Той съдържа правила за стилизиране на уеб елементи, като граници, цветове, разстояния и типография, вероятно за оформление на новини или статии. Кодът включва медийни заявки за адаптивен дизайн и дефинира различни визуални свойства за различни секции и компоненти.
Предоставеният текст изглежда като CSS код, а не обикновен текст на английски. Той съдържа правила за стилизиране, селектори и медийни заявки за уеб оформление и дизайн. Тъй като това е код, преписването му на свободен английски език при запазване на значението не е приложимо. Ако сте имали предвид да предоставите английски текст за преписване, моля, споделете това вместо това.
Предоставеният текст изглежда като CSS код за стилизиране на оформлението на уеб страница. Той дефинира грид структури, медийни заявки за адаптивен дизайн и визуални свойства като цветове, граници и разстояния. Кодът включва правила за елементи като заглавия, мета информация, стендфърст текст и медийни контейнери, като регулира техния външен вид при различни размери на екрана.
Вторият обхват в фигкапшъна на furniture-wrapper е зададен да се показва като блок с максимална ширина 90%. На екрани по-широки от 30em, подложката на фигкапшъна се регулира до 4px отгоре, 20px отстрани и 12px отдолу. Ако фигкапшънът има класа "hidden", неговата непрозрачност се задава на 0.
Бутонът за надпис се показва като блок, позициониран абсолютно близо до долния десен ъгъл, с z-index 30. Той има кръгъл фон, без граница и специфична подложка. Неговият SVG иконка е мащабиран до 85%. На екрани по-широки от 30em, бутонът е позициониран на 10px от десния ръб.
За интерактивната основна колона на екрани по-широки от 71.25em, псевдо-елементът before се регулира да се простира 12px над и под съдържанието, правейки го общо 24px по-висок. Заглавията H2 в тази колона са ограничени до максимална ширина 620px.
На iOS и Android устройства са дефинирани цветове за тъмен режим: тъмен фон, цвят на функция в светъл режим и различен цвят на функция за тъмен режим. Новият цвят на стълб използва променливата за основен стълб, ако е налична, в противен случай - цветът на функцията. В тъмен режим той използва променливата за стълб в тъмен режим, ако е налична, в противен случай - цветът на функцията в тъмен режим.
За iOS и Android, първата буква на първия параграф след специфични елементи в контейнери за статии е стилизирана с вторичен цвят на стълб (или черен като резервна опция). Височината на заглавието на статията е зададена на 0, а furniture-wrapper има регулирана подложка. Етикетите на съдържанието в furniture-wrapper използват удебелен шрифт и шрифтовото семейство "Gu".
Заглавието на Guardian използва шрифтовите семейства Guardian Headline, Guardian Egyptian Web, Guardian Headline Full и Georgia, със серифен стил. Цветът на текста е зададен на специфична променлива, а текстът е с главни букви.
На iOS и Android устройства, заглавието в контейнери за статии е стилизирано с размер на шрифта 32px, удебелено тегло, долна подложка 12px и тъмно сив цвят.
Изображенията в тези контейнери са позиционирани относително, с горна стойност 14px и лява стойност -10px. Тяхната ширина се регулира спрямо ширината на изгледа минус ширината на лентата за превъртане, а височината е зададена на автоматична.
Вътрешните елементи на тези изображения, включително връзки и самите изображения, имат прозрачен фон, ширина, съответстваща на ширината на изгледа минус ширината на лентата за превъртане, и автоматична височина.
Секцията стендфърст има горна подложка 4px, долна подложка 24px и дясна стойност -10px. Текстът вътре използва същите шрифтови семейства като заглавието, а връзките в стендфърста също са стилизирани съответно.
За iOS и Android устройства, връзките в секцията стендфърст на feature, standard и comment статии са стилизирани със специфичен цвят, подчертаване и без фоново изображение. Цветът на подчертаването се променя при посочване. Освен това, мета секцията в тези статии няма стойност, а елементи като авторски ред и авторски връзки са стилизирани последователно.
За iOS и Android устройства, името на автора в авторските редове на статии е стилизирано с помощта на специфична цветова променлива. Секцията за разнообразни метаданни в контейнери за статии няма подложка, а всички SVG икони в нея използват същата цветова променлива за своя щрих.
Бутонът за надпис в showcase елементи се показва като flex контейнер, центриран с подложка 5px, и позициониран с размер 28px на 28px, на 14px отдясно.
Съдържанието на тялото на статията има хоризонтална подложка 12px. Стандартните елементи на изображения (с изключение на миниатюри и immersive типове) обхващат цялата налична ширина, регулирайки се за ленти за превъртане, с автоматична височина и без стойност. Техните надписи нямат подложка. Immersive елементи на изображения следват подобни правила за стилизиране.
За Android устройства, immersive изображения в контейнери за статии са зададени на пълна ширина на изгледа минус ширината на лентата за превъртане.
На iOS и Android, цитираният текст в телата на статиите използва новия цвят на стълб за своя декоративен елемент. Връзките в текста на статията са стилизирани с основния цвят на стълб, подчертани с отместване, и използват цвета на границата на заглавието за подчертаването. При посочване, цветът на подчертаването се променя на новия цвят на стълб.
В тъмен режим, фонът на furniture wrapper става тъмно сив. Етикетите в него използват новия цвят на стълб. Заглавията губят своя фон и приемат цвета на границата на заглавието за текст. Параграфите и връзките на стендфърста също използват цвета на границата на заглавието.
За iOS и Android устройства, важат следните CSS правила:
- Авторските редове във feature, standard и comment статии използват новия цвят на стълб.
- Иконите в мета секцията на тези статии използват новия цвят на стълб за щрихове.
- Надписите за showcase изображения в тези статии използват цвета на датата.
- Блоковите цитати в тялото на статията използват новия цвят на стълб.
- Различни контейнери за съдържание (като тяло на статия, feature тяло и comment тяло) във feature, standard и comment статии са стилизирани последователно.
За Android устройства, задайте цвета на фона на специфични comment и article контейнери на тъмен фон.
За iOS устройства, приложете специален стил към първата буква на параграфи, които следват определени елементи в контейнери за статии и коментари.
Този CSS код се насочва към първата буква на параграфи, които следват специфични елементи в различни контейнери за статии на Android и iOS устройства. Той се прилага към различни секции като тела на статии, feature тела, comment тела и интерактивно съдържание, особено когато тези параграфи идват след елементи с класове като .element-atom, .sign-in-gate или #sign-in-gate.
Този CSS код дефинира стилове за уебсайта на The Guardian, особено за секции с коментари и оформления на статии на iOS и Android устройства. Той включ
