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

Это — тема для канона war-on-all-fronts-hub. Основанная на Black Highlighter альтернативная тема этой версии расположена ЗДЕСЬ. Для подключения темы к своей статье, вставьте в неё этот код:

[[include theme:war-on-all-fronts-sigma]]

Автор изображения: EstrellaYoshte.

Заголовок

Заголовок 2-ого уровня

Заголовок 3-его уровня

Ссылка, по которой вы не переходили (Ссылка, по которой вы переходили)

У этой темы есть особенное оформление для горизонтальных линий (см. ниже), которое можно включить с помощью следующего кода:

[[div_ class="woaf-hr"]]
[[/div]]

Это эстетическая тема за авторством EstrellaYoshte.

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

[[include theme:scpedia]]

Примеры

АПАИБ

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

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

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

---

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

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

span s-title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Опять span s-title

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?