Този CSS код дефинира семейството шрифтове "Guardian Headline Full" с множество стилове и тежести. Включва варианти light (300), regular (400), medium (500) и semibold (600), всеки в нормални и курсивни стилове. За всеки стил предоставя шрифтови файлове във формати WOFF2, WOFF и TrueType от сървъра за активи на Guardian.
Този CSS код дефинира няколко семейства шрифтове за Guardian Headline и Guardian Titlepiece, като уточнява техните източници в различни формати (WOFF2, WOFF и TrueType) заедно с техните тежести и стилове. Също така включва правила за отзивчив дизайн за основната колона съдържание в интерактивни оформления, като регулира полетата, ширините и позиционирането въз основа на размера на изгледа. Например, при по-широки екрани добавя ляво поле и граница, докато при по-малки екрани коригира ширините и позициите на елементите, за да се поберат в дисплея. Кодът гарантира, че елементи като параграфи и списъци поддържат максимална ширина за четливост и обработва иммерсивни елементи, като ги разширява до пълна ширина на мобилни устройства и наглася оформлението им на по-големи екрани.
За интерактивни колони съдържание се добавя лява граница със светлосив цвят, позиционирана леко вляво. Елементите в тези колони нямат горни или долни полета, но включват подложка от 12px. Когато параграф следва елемент, подложката се премахва и полетата се задават на 12px. Вградените елементи са ограничени до максимална ширина от 620px, а за по-широки екрани фигури със специфична роля също се придържат към това ограничение за ширина.
Дефинирани са цветни променливи за различни текстови и фонови елементи, включително за дата, заглавни граници, надписи и акцентьорни цветове, като цветът по подразбиране за акцентьор е зададен в червено.
Елементи, стилизирани като атоми, нямат подложка. Специфични правила се прилагат за първия параграф след определени елементи или хоризонтални разделители в различни зони на съдържанието, добавяйки горна подложка от 14px. Освен това, първата буква на тези параграфи е стилизирана с голям, удебелен шрифт с главни букви в стил на заглавие, оцветена според дефинирания акцентьорен цвят и плаваща вляво с отстъп.
Хоризонталните разделители, последвани от параграфи в различни секции на съдържанието, нямат горна подложка. Цитатите-извадки в специфични зони на съдържанието имат максимална ширина от 620 пиксела.
За елементи от тип "showcase" в различни контейнери за статии, надписите са позиционирани статично с пълна ширина и максимална ширина от 620 пиксела.
Иммерсивните елементи обхващат пълната ширина на изгледа минус ширината на плъзгача. На екрани с ширина до 71.24em, тези елементи са ограничени до 978 пиксела, с подложка за надписи от 10 пиксела. Между 30em и 71.24em, подложката за надписи се увеличава до 20 пиксела. За екрани между 46.25em и 61.24em, максималната ширина е 738 пиксела. Под 46.24em, иммерсивните елементи се подравняват вляво с коригирани полета и подложка за надписи от 20 пиксела между 30em и 46.24em.
Опаковката "furniture wrapper" използва мрежово оформление на екрани с ширина 61.25em и повече, с дефинирани колони и редове за организиране на съдържанието. Заглавията имат горна граница, мета секциите имат горна подложка, а елементите "standfirst" включват стилизирани връзки с подчертавания, които сменят цвета при посочване. Първоначално, първият параграф в "standfirst" има горна граница и без долна подложка, което се премахва на екрани с ширина 71.25em и повече.
Фигури в рамките на "furniture wrapper" имат леви полета и максимална ширина от 630 пиксела за вградени елементи. На по-големи екрани (71.25em и нагоре), мрежовите колони се преконфигурират за различно разположение на съдържанието.
Оформлението използва мрежа с конкретни колони и редове за различни размери на екрана. За по-малки екрани, мрежата дефинира зони за заглавие, основно заглавие, "standfirst", мета информация и портрет, с редове, зададени на фиксирани и автоматични височини. Тънка линия се появява над мета секцията, а "standfirst" има вертикална линия от лявата му страна.
На по-големи екрани, мрежата се нагласява да използва дробни единици за редовете и разширява обхвата на колоните. Размерът на шрифта на основното заглавие се увеличава и максималната му ширина се променя, докато някои елементи като линии се скриват. Текстът в "standfirst" е стилизиран с конкретна тежест и размер на шрифта, а основната медийна зона е позиционирана в мрежата, с нагласявания за ширина и полета на по-малки устройства. Надписите са абсолютно позиционирани в долната част с фонови цвят и подложка.
CSS кодът дефинира стилове за компонент "furniture wrapper", включително неговото оформление, цветове и отзивчиво поведение при различни размери на екрана. Задава фонови цветове, цветове на текста и стилове на граници, използвайки CSS персонализирани свойства за теми като тъмен режим. Опаковката наглася полетата, подложката и позиционирането на по-големи екрани и включва скрити елементи и интерактивни бутони с ефекти при посочване за споделяне в социални мрежи. Заглавията и мета информацията са стилизирани с конкретни шрифтове и цветове, гарантирайки последователност в дизайна.
Този CSS код дефинира стилове за елементи в рамките на клас "furniture-wrapper", фокусирайки се върху мета информация и секции "standfirst". Задава цветове на текста на светлосив (#dcdcdc) и цветове на връзките на нюанс, базиран на променливи, с ефекти при посочване, които променят цвета на декорацията на текста. Връзките в "standfirst" са подчертани с конкретно отместване и цвят, а състоянията при посочване нагласят цвета на подчертаването съответно.
За по-големи екрани (min-width: 61.25em), първият параграф в "standfirst" получава горна граница, която се премахва на още по-големи екрани (min-width: 71.25em). Елементите от списък в "standfirst" също приемат светлосивия цвят на текста.
Кодът включва елементи на отзивчив дизайн, използвайки медийни заявки за различни ширини на екрана (46.25em, 61.25em, 71.25em и 81.25em). Те нагласяват ширината и позиционирането на псевдо-елементи (:before и :after), за да създадат фонови зони с граници, изчислявайки размерите въз основа на ширината на изгледа и нагласяванията на плъзгача.
Освен това, той стилизира SVG елементи в рамките на "keylines" и елементи за социални медии или коментари в мета секцията, задавайки техния щрих и цвят на текста да съвпадат с темата, използвайки CSS променливи.
Секцията за коментари има цвят на границата, който съвпада с цвета на границата на заглавието. В статиите, заглавията от второ ниво имат лека тежест на шрифта от 200, но ако съдържат елемент "strong", използват удебелена тежест от 700.
Освен това, семейството шрифтове "Guardian Headline Full" е дефинирано с различни стилове и тежести, включително light, regular, medium и semibold, всеки в нормални и курсивни версии. Тези шрифтове се доставят от конкретни URL адреси във формати WOFF2, WOFF и TrueType.
Този CSS код дефинира няколко @font-face за семейството шрифтове "Guardian Headline Full", всяко с различни тежести и стилове (нормален и курсив), обхващащи от semibold (600) до black (900). Също така включва @font-face за "Guardian Titlepiece" в удебелен стил. Шрифтовете се доставят от конкретни URL адреси във формати WOFF2, WOFF и TrueType.
Допълнително, кодът задава CSS персонализирани свойства (променливи) за фонове в тъмен режим и акцентьорни цветове, нагласяйки ги въз основа на предпочитанието на потребителя за цветова схема или когато сайтът се преглежда на iOS или Android устройства. Също така включва стилизиране на първата буква на параграфи в контейнери за статии на тези мобилни платформи, с конкретни селектори за обработка на портали за влизане.
За Android устройства, първата буква на първия параграф в стандартни статии и статии с коментари е стилизирана с вторичен "pillar" цвят. На iOS и Android, заглавията на статиите са скрити, а "furniture wrappers" имат специфична подложка. Етикетите в тези опаковки използват удебелен, с главни букви шрифт в стил на заглавие с нов "pillar" цвят. Заглавията са зададени на 32px, удебелени, с долна подложка и тъмен цвят. Изображенията в "furniture wrappers" са позиционирани относително, обхващат ширината на изгледа минус ширината на плъзгача и нагласят височината си автоматично.
За Android устройства, изображенията в рамките на контейнери за статии са зададени да имат прозрачен фон, обхващат пълната ширина на изгледа минус ширината на плъзгача и нагласят височината си автоматично.
На iOS и Android, секциите за резюмета на статиите имат горна и долна подложка съответно от 4px и 24px, с дясно поле от -10px.
Текстът в тези резюмета използва семейството шрифтове Guardian Headline или подобни серифни шрифтове.
Връзките в рамките на резюметата са стилизирани с конкретен цвят, подчертани с отместване от 6px и използват определен цвят за подчертаването, който се променя при посочване да съвпада с цвета на връзката.
Освен това, метаданни секциите в статии на двете операционни системи имат последователно стилизиране.
За Android устройства, полето за мета елементи в стандартни контейнери за статии и коментари е зададено на нула.
На iOS устройства, информацията за автора в контейнери за статии от тип "feature", "standard" и "comment" ще се показва в определения "pillar" цвят. По същия начин, на Android устройства, същите елементи в контейнери за статии от тип "feature", "standard" и "comment" също използват "pillar" цвят.
За iOS и Android, допълнителната мета информация в контейнери за статии от тип "feature", "standard" и "comment" няма подложка, а всички SVG икони в тях са стилизирани с "pillar" цвят за техния щрих.
Бутонът за надпис в елементи "showcase" за статии от тип "feature", "standard" и "comment" на iOS и Android се показва като гъвкав контейнер. Той е центриран, с размери 28 на 28 пиксела и позициониран на 14 пиксела отдясно с подложка от 5 пиксела.
Тялото на статията в контейнери за "feature", "standard" и "comment" за iOS и Android има хоризонтална подложка от 12 пиксела и без вертикална подложка.
За iOS и Android устройства, в контейнери за статии от тип "feature", "standard" и "comment", изображенията в тялото на статията, които не са миниатюри или иммерсивни, нямат поле, ширина, изчислена като пълна ширина на изгледа минус 24 пиксела и ширината на плъзгача, и автоматична височина. Техните надписи нямат подложка.
Иммерсивните изображения в тези контейнери обхващат пълната ширина на изгледа минус ширината на плъзгача.
В текста на тялото на статията, цитираните блокове цитати показват маркер с цвят, използвайки новия "pillar" цвят. Връзките са стилизирани с първичния "pillar" цвят, подчертани с отместване и използват цвета на границата на заглавието за подчертаването. При посочване, цветът на подчертаването се променя на новия "pillar" цвят.
В тъмен режим, фонът на "furniture wrapper" се задава на тъмно сив (#1a1a1a).
За iOS и Android устройства, приложете следните стилове към контейнери за статии от тип "feature", "standard" и "comment":
- Задайте етикетите на съдържанието да използват новия "pillar" цвят.
- Премах
