Примечание:
Эта страница - компонент, используемый на данной вики. Он предназначен для включения в другие страницы.
Это мета-компонент за авторством EstrellaYoshte, предназначенный для использования в качестве вспомогательного инструмента при создании визуальных тем.
Для подключения компонента, используйте следующий код:
[[include component:sigma-plus]]
Sigma+, сам по себе, сохраняет оригинальную эстетику Sigma-9, но используя современные стандарты и техники CSS, включая:
- Расширяемые CSS-переменные
- Разметка с использованием grid layout и flex layout
- Полная совместимость с прокруткой через Tab для элементов навигации
- Соответствие правилам RTL-стилизации
Примечание от разработчика
Основная идея этого компонента - облегчить мороку с устаревшим CSS основной темы сайта (Sigma-9), который часто устанавливает пределы для кастомизации макета страницы, увеличивает количество необходимого CSS для реализации желаемого результата и ухудшает и так плачевную ситуацию с неоптимизированным CSS-кодом.
Sigma+ в основном ограничивается реимплементацией семантической и визуальной структуры страницы. Это позволяет обеспечить максимальную доступность базового оформления через этот промежуточный слой. Но есть и ряд исключений:
- Украшения хедэра: Изначально было фоновым изображением
#container-wrap
, что семантически отделяло его от настоящих#header
и#top-bar
и делало его глухим к изменениям в размере и разметке (настройки на стороне клиента, значения браузера по умолчанию, размер экрана и прочее). Переделано вbackground-image
для обоих div'ов. - Выпадающие меню топбара: отредактированы для лучшей адаптации к размерам экрана и переопределения надоедливых базовых стилей Wikidot в общем. Добавлена поддержка прокрутки через Tab.
- Модуль оценки:
значительно переделан для семантической отделённости и конфигурируемости через переменные. Убраны "особенные" стили модуля.Оставлен нетронутым. - Вкладки: Таблицы стилей заменены на переменные CSS. Теперь менять оформление таблиц чуть менее мучительно.
Пример
:root {
--header-title: "We don't have a 55";
--sp_header-height: 21.75rem;
}