Bedrock Theme


Примечание:

Эта страница содержит визуальную тему, используемую на данной вики.

Подключение темы к другим страницам осуществляется с помощью следующего кода (указывается в начале страницы):

 [[include theme:bedrock]]

Страница, объединяющая все визуальные темы в единый список, расположена по ссылке: Хаб визуальных тем.


Bedrock

рейтинг: 4.0
1/100%

Bedrock is an aesthetic base theme created by Пользователь 'EstrellaYoshte' не существует, Пользователь 'Liryn' не существует and Пользователь 'Placeholder McD' не существует, with special thanks to Пользователь 'aismallard' не существует for assistance with GitHub, and Пользователь 'Woedenaz' не существует for the Edit Area button SVGs alongside general consulting.

This serves as the foundational structure for Basalt 2.0.

Quartz--basalt-primary-color254,254,254
Calcite--basalt-secondary-color247,248,250
Lapis Lazuli--basalt-bright-element-color16,76,184
Amethyst--basalt-undertone61,71,202
Slate--basalt-overtone56,60,64
{$color6-name}{$color6-variable}{$color6-info}

Granite--basalt-tertiary-color218,219,222
Andesite--basalt-sub-text-color155,154,162
Sunstone--basalt-alternate-color255,132,0
Emerald--basalt-positive-color26,180,28
Ruby--basalt-negative-color255,48,48
Sapphire--basalt-dark-element-color18,20,150
{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}
{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}
{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}
{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}
{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}
{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

To use on a page, add the following:

[[include theme:bedrock]]

Examples

A horizontal rule can be created with 4 hyphens "----" 1 and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.

basaltlogo.svg

Image block.

Titles can be created by putting between one and six plus "+" at the start of the line.

This is a tab view.

This is a blockquote, created by putting "> " at the start of each line.

More text


That's a horizontal rule

Nested blockquotes

This is atable
You should knowhow to make these
already

Header font is Lexend.

Body font is Inter.

UI font is Jost.

Monospace font is JetBrains Mono.


CSS Variables

Bedrock is built on a series of CSS variables, which can be changed to alter its appearance. Some top-level variables are:

: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);
}

Color variables are in RGB format.

:root {
    --header-font-primary: 'Lexend';
    --UI-font-primary: 'Jost';
    --body-font-primary: 'Inter';
    --mono-font-primary: 'JetBrains Mono';
}

The four font types used by Bedrock.

:root {
    --header-logo: url('https://cdn.scpwiki.com/theme/en/basalt/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;
}

Note that due to a mechanic in CSS calc() function, any variables with length unit such as rem or px should not be discarded even when the value is set to 0, e.g. --subtitle-size: 0rem; makes the subtitle disappear but doesn't invalidate the calc() function.

--main-content-width should not be set with % unit. To have the main area take up full screen width, use an arbitrarily high rem value instead.


Other

The source code of this theme can be found on our GitHub page.

Bedrock is currently not compatible with Common Theme.

Структурные: визуальная_тема
версия страницы: 11, Последняя правка: 04 Окт. 2024, 20:29 (2 дня назад)
Пока не указано иное, содержимое этой страницы распространяется по лицензии Creative Commons Attribution-ShareAlike 3.0 License.