Примечание:
Эта страница содержит визуальную тему, используемую на данной вики.
Подключение темы к другим страницам осуществляется с помощью следующего кода (указывается в начале страницы) Нажмите на блок, чтобы скопировать код:
Страница, объединяющая все визуальные темы в единый список, расположена по ссылке: Хаб визуальных тем.
Bedrock - эстетическая тема, созданная EstrellaYoshte, Liryn и Placeholder McD, с особой благодарностью aismallard за помощь с GitHub, и Woedenaz за SVG для кнопок области редактирования и общие консультации.
Эта тема служит основой для Basalt 2.0.
Для подключения темы, добавьте в код страницы:
[[include theme:bedrock]]
Содержание |
Примеры
Горизонтальная линия может быть создана при помощи 4 дефисов "----"1 и проходит через всю страницу, если он не находится внутри чего-либо (например, цитат). Линии, разделяющие разделы этой страницы, представляют собой горизонтальные линии.
Заголовки можно создать, поставив от одного до шести плюс "+" в начале строки.
- Вкладка
- Вкладка
- Большая вкладка
- Это пустая вкладка с длинным названием. Интересно почему? Очень странно.
- Пустая вкладка
- Пустая вкладка
- Пустая вкладка
- Пустая вкладка
- Пустая вкладка
Это вкладки.
Это цитата, её можно создать поставив "> " в начале строки.
Больше текстаЭто горизонтальная линия.
Вложенные цитаты.
Это | Таблица |
---|---|
Ты уже должен знать | как это |
сделать |
Шрифт хедера - Lexend.
Шрифт тела статьи - Inter.
Шрифт интерфейса - Jost.
Моноширный шрифт - JetBrains Mono.
Переменные CSS
Bedrock построен на ряде переменных CSS, которые можно менять для управления внешним видом темы. Вот ряд высокоуровневых переменных:
:root { --basalt-primary-color: 254,254,254; --basalt-secondary-color: 247,248,250; --basalt-tertiary-color: 218,219,222; --basalt-main-text-color: 20,20,20; --basalt-overtone: 50,50,50; --basalt-undertone: 61,71,202; --basalt-bright-element-color: 16,76,184; --basalt-dark-element-color: 18,20,150; --basalt-alternate-color: 255,132,0; --basalt-positive-color: 24,163,20; --basalt-negative-color: 255,48,48; --basalt-cancel-color: var(--basalt-negative-color); --basalt-sub-text-color: 155,154,162; --basalt-light-text-color: var(--basalt-primary-color); --basalt-UI-dark-palette: var(--basalt-overtone); --basalt-focus-color: var(--basalt-undertone); --basalt-background-color: var(--basalt-primary-color); }
Переменные цветов используют формат RGB.
:root { --header-font-primary: 'Lexend'; --UI-font-primary: 'Jost'; --body-font-primary: 'Inter'; --mono-font-primary: 'JetBrains Mono'; }
Четыре типа шрифтов, используемые Bedrock.
:root { --header-logo: url('https://scpfoundation.net/local--files/theme:bedrock/basaltlogo.svg'); --header-title: 'SCP Foundation'; --header-subtitle: 'SECURE - CONTAIN - PROTECT'; --title-size: 1.5rem; --subtitle-size: 0.825rem; --base-font-size: 1rem; --main-content-width: 67.5rem; --side-bar-width: 19rem; }
Учтите, что из-за особенностей функции calc()
в CSS, в любых переменных, использующих единицы измерения, такие как rem или px, их не следует опускать, даже если значение равно 0. Например --subtitle-size: 0rem;
убирает подтекст, но не ломает функцию calc()
.
--main-content-width
не следует использовать с %. Вместо этого, для растягивания основной области на всю ширину экрана, используйте сильно завышенное значение в rem.
Прочее
Исходный код темы можно найти на нашем GitHub.
На данный момент Bedrock не совместим со стандартной темой.