Този текст дефинира персонализирано семейство шрифтове, наречено "Guardian Headline Full", с множество тежести и стилове на шрифта. Той уточнява файловете на шрифтовете в различни формати (WOFF2, WOFF и TrueType) и техните онлайн местоположения, за да може браузърът да ги зарежда, когато е необходимо. Дефинициите включват лека, обикновена, средна и полу-удебелена тежест, всяка с нормален и курсивен стил.
Този CSS код дефинира няколко семейства шрифтове за шрифтовете Guardian Headline и Guardian Titlepiece, като уточнява техните източници в различни формати (WOFF2, WOFF и TrueType) заедно с техните тежести и стилове на шрифта. Той също така включва правила за адаптивен дизайн за основната колона със съдържание в интерактивни оформления, като регулира полетата, ширините и позиционирането въз основа на размера на изгледа. Например, при по-широки екрани се добавя ляво поле и граница, докато при по-малки екрани се регулират ширините и позициите на елементите, за да се поберат в дисплея. Стиловете гарантират, че елементи като параграфи, списъци и завладяващо съдържание се адаптират подходящо на всички устройства.
За основната интерактивна колона със съдържание се добавя лява граница преди елемента, позиционирана 11 пиксела вляво. В тази колона атомите нямат горно или долно поле, но имат подложка от 12 пиксела от двата края. Когато параграф следва атом, подложката се премахва и се прилагат полета от 12 пиксела. Вградените елементи са ограничени до максимална ширина от 620 пиксела, а за екрани по-широки от 61.25em, вградените фигури със специфична роля също се придържат към това ограничение на ширината.
Дефинирани са цветови променливи за различни елементи, като дата, граница на заглавие, текст на надпис и фон, като акцентен цвят е зададен в червено и нов цвят на стълб по подразбиране е акцентният цвят. Атомите в основната колона или другаде нямат подложка.
За първия параграф, следващ специфични елементи като атоми, врати за влизане или хоризонтални разделители в различни области на съдържанието (тяло на статия, интерактивно съдържание, коментари, функции), се добавя горна подложка от 14 пиксела. Освен това, първата буква на тези параграфи е стилизирана с конкретно семейство шрифтове, удебелена тежест, голям размер на шрифта, главни букви, плаваща вляво и оцветена с променлива за инициали или новия цвят на стълб.
Ако параграф следва хоризонтален разделител в тези области на съдържанието, горната подложка се задава на нула. Цитатите в специфични области на съдържанието не трябва да надвишават 620 пиксела в ширина.
За елементи в главни статии, функции, стандартни статии и коментари, надписите трябва да останат в нормалната си позиция, да обхващат пълната ширина и да са ограничени до 620 пиксела.
Завладяващите елементи трябва да обхващат пълната ширина на изгледа, като се вземат предвид лентите за превъртане. На екрани по-малки от 71.24em, тези елементи са ограничени до 978 пиксела ширина с 10px странична подложка за надписи. Между 30em и 71.24em, подложката за надписи се увеличава до 20px.
Между 46.25em и 61.24em, завладяващите елементи имат максимум 738 пиксела. Под 46.24em, те се подравняват към левия ръб без дясно поле и с 10px ляво отстъпление, което се увеличава до 20px между 30em и 46.24em, където надписите също получават подложка от 20px.
За по-големи екрани (61.25em и нагоре), обвивката за обзавеждане използва оформление на решетка с дефинирани колони и редове. Заглавията получават горна граница, мета информацията е позиционирана относително с горна подложка, а встъпителният текст има специфично стилизиране: елементи от списък с размер на шрифта 20px, връзки подчертани без граници или фонове, променящи цвят при задържане, и първи параграфи с горни граници, с изключение на много големи екрани (71.25em+).
Фигурите в обвивката нямат долно поле и имат 10px ляво отстъпление, като вградените елементи са ограничени до 630 пиксела. На най-големите екрани решетката регулира структурата на колоните.
Оформлението използва решетка с конкретни колони и редове за различни размери на екрана. За по-малки екрани решетката има три колони и редове с фиксирани и автоматични височини, докато по-големите екрани регулират височините на редовете пропорционално.
Елементи като мета секцията имат горна гранична линия, а встъпителната секция има вертикална линия отляво. Заглавията са стилизирани с максимална ширина и размер на шрифта, който се увеличава на по-големи екрани, а някои елементи са скрити или регулирани в полета и подложки въз основа на изгледа.
Основната медийна област е позиционирана в решетката и обхваща пълната ширина на мобилни устройства, като надписите са стилизирани да се появяват отдолу с фонови цвят. Социалните и коментарните елементи в мета секцията имат граници, съответстващи на цвета на заглавието, и определени компоненти не се показват.
Обвивката за обзавеждане задава тъмен фон и регулира полетата и подложките за различни размери на екрана. На по-големи екрани добавя странични ленти със съответстващи фонове и граници.
Заглавията използват удебелен, светлосив текст, докато заглавията на статии и социални бутони приемат персонализиран цвят (като цвят за функция в тъмен режим). Социалните бутони имат граница и променят цвят при задържане, като фонът и цветовете на иконите се разменят.
Надписите са стилизирани с конкретни цветове и контроли за видимост, включително бутон за превключване, който се появява като малък кръг в долния десен ъгъл. Медийните заявки регулират подложката и позиционирането на елементи за таблети и настолни компютри, гарантирайки правилно разстояние и подравняване на всички устройства.
Този CSS код стилизира елементи в клас за обвивка на обзавеждане, задавайки цветове, граници и оформление за различни размери на екрана. Той дефинира цветове на връзки и ефекти при задържане, използвайки CSS променливи за мета и встъпителни секции, с декорации на текста и отстъпи. Медийните заявки регулират оформлението за различни ширини на изгледа, създавайки странични ленти с граници и фонове, които се мащабират съответно. Социалните и коментарните елементи в мета секцията също са стилизирани, с щрихи на SVG, съответстващи на цвета на границата на заглавието.
Секцията за коментари има цвят на границата, който съответства на цвета на границата на заглавието.
За заглавия на статии (h2) в основното тяло или интерактивно съдържание, тежестта на шрифта е зададена на light (200). Въпреки това, ако h2 заглавие съдържа силен елемент, то използва удебелена тежест на шрифта (700).
Освен това, семейството шрифтове Guardian Headline Full е дефинирано с различни тежести и стилове, включително light, regular, medium и semibold, както в нормална, така и в курсивна форма. Всеки шрифтов файл е достъпен от конкретни URL адреси във формати WOFF2, WOFF и TrueType.
Този CSS код дефинира няколко семейства шрифтове и техните варианти за уебсайта на Guardian. Той уточнява различни тежести и стилове на шрифта (като удебелен, курсив) за шрифта "Guardian Headline Full", предоставяйки множество файлови формати (WOFF2, WOFF, TTF) за съвместимост между браузъри. Освен това, той включва шрифта "Guardian Titlepiece" в удебелена тежест.
Кодът също така задава персонализирани CSS свойства (променливи) за цветове, като ги регулира за предпочитания за тъмен режим на iOS и Android устройства. Той включва специфично стилизиране на първата буква на параграфи в контейнери за статии на тези мобилни платформи, гарантирайки последователно типографско обработване в различни контексти.
За Android устройства, първата буква на първия параграф в стандартни статии и статии с коментари е стилизирана с вторичен цвят на стълб. На iOS и Android, заглавията на статии са скрити, а обвивките за обзавеждане имат специфична подложка. Етикетите в тези обвивки използват удебелен, с главни букви шрифт в стил на заглавие с нов цвят на стълб. Заглавията са зададени на 32px, удебелени, с долна подложка и тъмен цвят. Изображенията в обвивки за обзавеждане са позиционирани относително, разширяват се до ширината на изгледа минус ширината на лентата за превъртане и имат автоматична височина, като вътрешните елементи и връзки са стилизирани съответно.
За Android устройства, изображенията в контейнери за статии са зададени да имат прозрачен фон, да обхващат пълната ширина на изгледа минус лентата за превъртане и да регулират височината си автоматично.
На iOS и Android, встъпителната секция в статии има горна и долна подложка съответно 4px и 24px, с дясно поле от -10px. Текстът вътре използва семейството шрифтове Guardian Headline или резервни серифни шрифтове.
Връзките във встъпителния текст на двете платформи са стилизирани с конкретен цвят, подчертани с отстъп 6px, и използват светлосиво подчертаване, което се променя на цвета на стълба при задържане. Те нямат фонови изображения или граници.
Освен това, мета секцията в контейнери за статии се прилага за iOS и Android устройства.
За Android устройства, премахнете полетата от мета елементи в стандартни контейнери за статии и статии с коментари.
За iOS устройства, задайте цвета на елементите за автор и автор във функционални, стандартни и коментарни контейнери за статии на новия цвят на стълб. Също така, премахнете подложката от мета разнородни елементи и задайте щриха на техните SVG икони на новия цвят на стълб. Освен това, стилизирайте бутона за надпис в елементи за представяне с конкретно показване, подложка, подравняване и размери.
За iOS и Android, задайте подложката на тялото на статията на 0 отстрани и 12px отгоре и отдолу във функционални, стандартни и коментарни контейнери за статии.
За iOS и Android устройства, във функционални, стандартни и коментарни контейнери за статии, изображения, които не са миниатюри или завладяващи, нямат поле, ширина на пълния изглед минус 24 пиксела и ширината на лентата за превъртане, и автоматична височина. Техните надписи нямат подложка.
Завладяващите изображения в тези контейнери обхващат пълната ширина на изгледа минус ширината на лентата за превъртане.
Цитираните блокчета в тялото на статията показват маркер с цвят, използвайки новия цвят на стълб.
Връзките в тялото на статията са стилизирани с първичния цвят на стълб, подчертани с отстъп, и използват цвета на границата на заглавието за подчертаването. При задържане, цветът на подчертаването се променя на новия цвят на стълб.
В тъмен режим, фонът на обвивката за обзавеждане ще бъде зададен на тъмно сив (#1a1a1a).
За iOS и Android устройства, приложете следните стилове към функционални, стандартни и коментарни контейнери за статии:
- Задайте цвета на текста на етикетите за съдържание на новия цвят на стълб.
- Премахнете фоновия цвят от заглавията и задайте цвета на техния текст на цвета на границата на заглавието, като гарантирате, че това има приоритет.
- Направете текста във встъпителни параграфи да съответства на цвета на границата на заглавието.
- Използвайте новия цвят на стълб за връзки във встъпителни секции и за авторски подписи (включително свързани авторски имена).
- Приложете новия цвят на стълб към щриха на иконите за разнородни мета данни.
- Задайте цвета на надпи
