Bedrock - эстетическая тема, созданная EstrellaYoshte, Liryn и Placeholder McD, с особой благодарностью aismallard за помощь с GitHub, и Woedenaz за SVG для кнопок области редактирования и общие консультации.

Эта тема служит основой для Basalt 2.0.

Для подключения темы, добавьте в код страницы:

[[include theme:bedrock]]

Примеры

Горизонтальная линия может быть создана при помощи 4 дефисов "----"¹ и проходит через всю страницу, если он не находится внутри чего-либо (например, цитат). Линии, разделяющие разделы этой страницы, представляют собой горизонтальные линии.

Блок с изображением.

Заголовки можно создать, поставив от одного до шести плюс "+" в начале строки.

Это цитата, её можно создать поставив "> " в начале строки.

Больше текста

---

Это горизонтальная линия.

Вложенные цитаты.

Сноски

1. Это сделано по просьбе Placeholder McD.

2. Это ещё одна сноска.

Переменные 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 не совместим со стандартной темой.

Что это?

Предупреждение: Эта тема основана на Black Highlighter. Однако вам не надо дополнительно подключать Black Highlighter в коде статьи. Узнать больше о BHL можно здесь.

На этой вики:

Я рекомендую использовать эту тему с компонентом Скрываемый сайдбар для Black Highlighter за авторством Woedenaz. Если вы не хотите его использовать, просто уберите соответствующий инклюд из строчек выше.

Примеры

Горизонтальная линия может быть создана при помощи 5 дефисов "-----" и проходит через всю страницу, если он не находится внутри чего-либо  (например, цитат). Линии, разделяющие разделы этой страницы, представляют собой горизонтальные линии.

Заголовки можно создать, поставив от одного до шести плюс "+" в начале строки.

Это цитата, её можно создать поставив "> " в начале строки.

Больше текста

---

Это горизонтальная линия.

Вложенная цитата.

И ещё одна¹

Что это?

Предупреждение: Эта тема основана на Black Highlighter. Однако вам не надо дополнительно подключать Black Highlighter в коде статьи. Узнать больше о BHL можно здесь.

На этой вики:

В данную тему также встроен код для компонента Скрываемый сайдбар для Black Highlighter за авторством Woedenaz. Если вы не хотите его использовать, просто уберите соответствующий инклюд из строчек выше.

Данная тема поддерживает компонент Центрированный хедер для Black Highlighter за авторством Woedenaz. Если вы хотите добавить его в свою статью, вставьте следующий код:

после всех [[include]], указанных выше.

Примеры

Горизонтальная линия может быть создана при помощи 5 дефисов "-----" и проходит через всю страницу, если он не находится внутри чего-либо  (например, цитат). Линии, разделяющие разделы этой страницы, представляют собой горизонтальные линии.

Заголовки можно создать, поставив от одного до шести плюс "+" в начале строки.

Это цитата, её можно создать поставив "> " в начале строки.

Больше текста

---

Это горизонтальная линия.

Вложенная цитата.

И ещё одна¹