Bedrock Theme

Link to article: Bedrock Theme.

@import url('https://cdn.scpwiki.com/theme/en/basalt/normalize-min.css');
@import url('https://cdn.scpwiki.com/theme/en/basalt/basalt-bedrock-min.css');

.nametag {
    --bs: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='517.88' height='444.8' version='1.0' viewBox='0 0 388.41 333.6'%3E%3Cpath d='M223 20.7c-4.6 4.9-23.9 24.6-42.9 43.8-19 19.3-36.5 37.1-38.9 39.6-4.2 4.5-4.5 5.4-17.8 47.9L110 195.3l8.7 18.5 8.8 18.5 8.5 3.9c4.7 2.2 9.5 4.4 10.7 4.8 2 .8 3.3-1 17.9-25.3 8.6-14.4 16.4-26.9 17.3-27.8.9-.9 3.7-2.3 6.3-3.2l4.7-1.6 31 13.5 30.9 13.5 9.9-6.3c5.4-3.4 10.1-6.6 10.4-7.1.3-.4 1.4-9.4 2.4-20 1.2-11.8 2.1-18.3 2.6-17.1.8 1.9 9.9 44.5 9.9 46.2 0 .5-2.3 3.9-5 7.5l-5.1 6.7 4.5 4.2c3.2 3.1 4.6 5.4 5.1 8.3 2.4 13.7 6.1 29.7 6.9 29.8.5.1 13.3-14.5 28.4-32.6l27.5-32.7h13.4l10.3 13.2c12.2 15.8 11.8 15.3 12.5 14.7.2-.3-1.8-12.6-4.5-27.5-4.5-24-6.6-32.4-19.8-77.4l-14.7-50.5L292 40.8c-31.6-15.7-58.2-28.7-59.1-28.7-.9-.1-5.3 3.8-9.9 8.6Zm88.4 73.6 23.3 32.7.8 28.1c.4 15.4.5 28.2.4 28.4-.2.2-5.6-12-11.9-27.1L312.5 129l-27.8-25.7c-15.3-14.2-29.9-27.7-32.5-30-2.6-2.4-4.5-4.3-4.2-4.3.3-.1 8.8-1.8 19-4 10.2-2.1 19.1-3.7 19.8-3.7.7.1 11.7 14.9 24.6 33zM63.2 183.8l-17.4 5.7-15.9 15.4c-8.8 8.5-15.8 15.9-15.5 16.6.2.7 5.2 7.8 11.1 15.8l10.6 14.5 9.2.6c5.1.3 18.2.8 29.2 1.1l20 .6 8.4-8.5 8.4-8.4-14-29.4c-7.7-16.1-14.7-29.4-15.4-29.5-.8-.1-9.2 2.3-18.7 5.5z' style='fill:%23000;stroke:none;stroke-width:.1' transform='translate(-14.4 -12.1)'/%3E%3Cpath d='m170.2 239.1-22.2 37 .2 28.7.3 28.6 49 6.2 48.9 6.1 22.1-9.8c20.4-9.1 22-10 21.7-12.2-.3-3.2-17.1-86.9-17.4-87.3-.6-.5-78.9-34.4-79.6-34.4-.4 0-10.7 16.7-23 37.1zm70.8 5.5c9.1 5.2 17 10.1 17.6 10.7 1.4 1.5 13.6 47.4 13.2 49.7-.2.9-5.9 6.7-12.8 12.9l-12.5 11.2-14.3-.7c-7.8-.3-17.7-.9-22-1.3l-7.7-.6 18.3-13.4c10-7.3 18.5-13.7 18.8-14.2.3-.5 1.1-9.7 1.7-20.3l1.1-19.4-9.7-12.1c-5.4-6.7-9.4-12.1-9-12.1.5 0 8.3 4.3 17.3 9.6zm94.5-1.4c-12.5 14.9-23 27.9-23.2 28.8-.3 1-.1 2 .4 2.3 1 .7 62.1 13.7 64.1 13.7 2.6 0 26.3-14.2 26-15.6-.3-1.4-40.9-53.4-43.1-55.3-1.1-.8-6 4.4-24.2 26.1z' style='fill:%23000;stroke:none;stroke-width:.1' transform='translate(-14.4 -12.1)'/%3E%3C/svg%3E");
    text-align: center;
    overflow: hidden;
    padding-top: 2rem;
}
.nametag h1 {
    font-size: 0;
    height: 16rem;
    width: min(16rem,90%);
    margin: 0.5rem auto 0;
    background-color: rgb(var(--basalt-overtone));
    -webkit-mask-image: var(--bs);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-image: var(--bs);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    transition: all 0.175s ease-out;
}
.nametag h1:hover {
    background-color: rgb(var(--basalt-undertone));
}

#page-content .colors-container {
    max-width: calc(var(--main-content-width)*0.75);
    margin: 1.25rem auto;
}
.colors-container, .colors-container .css-variable {
    font-family: var(--mono-font);
}
.colors-container .colors .color {
    text-align: center;
    flex-basis: calc((100% / 3) - 2rem);
}
.colors-container .color { margin: 0; }
.colors-container, .colors-container .colors, .colors-container .subcolors { grid-gap: 0.375rem; }
.colors-container .color span[style*="pre-wrap"] {
    font-size: 85%;
    opacity: 0.625;
}

```
font-family: var(--UI-font);
```

```
nametag
```

[[module css]]
@import url('https://cdn.scpwiki.com/theme/en/basalt/normalize-min.css');
@import url('https://cdn.scpwiki.com/theme/en/basalt/basalt-bedrock-min.css');
[[/module]]
[[div_]]
[[include :scp-wiki:component:interwiki-style
| priority=1
| theme=https://cdn.scpwiki.com/theme/en/basalt/normalize-min.css
]]
[[include :scp-wiki:component:interwiki-style
| priority=2
| theme=https://cdn.scpwiki.com/theme/en/basalt/basalt-bedrock-min.css
]]
[[/div]]

[[iftags +theme]]
[[div class="nametag"]]
+ Bedrock
[[module Rate]]
[[/div]]

**Bedrock** is an aesthetic base theme created by [[*user EstrellaYoshte]], [[*user Liryn]] and [[*user Placeholder McD]], with special thanks to [[*user aismallard]] for assistance with GitHub, and [[*user Woedenaz]] for the Edit Area button SVGs alongside general consulting.

This serves as the foundational structure for [[[theme:basalt|Basalt 2.0]]].

[[include :scp-wiki:component:theme-squares -=-
| color1-name=Quartz
| color1-variable=--basalt-primary-color
| color1-info=254,254,254
| color2-name=Calcite
| color2-variable=--basalt-secondary-color
| color2-info=247,248,250
| color3-name=Lapis Lazuli
| color3-variable=--basalt-bright-element-color
| color3-info=16,76,184
| color3-has-light-text=1
| color4-name=Amethyst
| color4-variable=--basalt-undertone
| color4-info=61,71,202
| color4-has-light-text=1
| color5-name=Slate
| color5-variable=--basalt-overtone
| color5-info=56,60,64
| color5-has-light-text=1
| subcolor1-name=Granite
| subcolor1-variable=--basalt-tertiary-color
| subcolor1-info=218,219,222
| subcolor2-name=Andesite
| subcolor2-variable=--basalt-sub-text-color
| subcolor2-info=155,154,162
| subcolor2-has-light-text=1
| subcolor3-name=Sunstone
| subcolor3-variable=--basalt-alternate-color
| subcolor3-info=255,132,0
| subcolor4-name=Emerald
| subcolor4-variable=--basalt-positive-color
| subcolor4-info=26,180,28
| subcolor4-has-light-text=1
| subcolor5-name=Ruby
| subcolor5-variable=--basalt-negative-color
| subcolor5-info=255,48,48
| subcolor5-has-light-text=1
| subcolor6-name=Sapphire
| subcolor6-variable=--basalt-dark-element-color
| subcolor6-info=18,20,150
| subcolor6-has-light-text=1
]]

To use on a page, add the following:
> {{@@[[include :scp-wiki:theme:bedrock]]@@}}

[[toc]]

+ Examples

A horizontal rule can be created with 4 hyphens @@"----"@@ [[footnote]] This still is to appease [[*user Placeholder McD]].[[/footnote]] 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.

[[include :scp-wiki:component:image-block name=https://cdn.scpwiki.com/theme/en/basalt/basaltlogo.svg|caption=Image block.|width=280px]]

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

[[collapsible show="Collapsible - Click me" hide="Collapsible - Click me"]]
+* First Title

++* Second Title

+++* Third Title

++++* Fourth Title

+++++* Fifth Title

++++++* Sixth Title
[[/collapsible]]

~~~~

[[tabview]]
[[tab Tabulator]]
This is a tab view.
[[/tab]]
[[tab Tabulation]]
Hey look, more text here.

How quaint.
[[/tab]]
[[tab Long Tab]]
This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.
[[/tab]]
[[tab This tab has a really long name for some odd reason. I wonder why? It is very strange.]]
This is a tab with footnote[[footnote]] This is another footnote. [[/footnote]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[/tabview]]

> This is a blockquote, created by putting "> " at the start of each line.
>
> More text
> -----
> That's a horizontal rule
>
>> Nested blockquotes

||~ This is a ||~ table ||
||You should know || how to make these ||
||||already ||

[[footnoteblock]]

[[=]]
+++* Header font is Lexend.

Body font is Inter.

[[span style="font-family: var(--UI-font);"]]UI font is Jost.[[/span]]

{{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:

[[code type="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);
}
[[/code]]

Color variables are in RGB format.

[[code type="css"]]
:root {
    --header-font-primary: 'Lexend';
    --UI-font-primary: 'Jost';
    --body-font-primary: 'Inter';
    --mono-font-primary: 'JetBrains Mono';
}
[[/code]]

The four font types used by Bedrock.

[[code type="css"]]
: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;
}
[[/code]]

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 [https://basalt-team.github.io/Basalt/ GitHub] page.

Bedrock is currently not compatible with Common Theme.


[[module css]]
.nametag {
    --bs: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='517.88' height='444.8' version='1.0' viewBox='0 0 388.41 333.6'%3E%3Cpath d='M223 20.7c-4.6 4.9-23.9 24.6-42.9 43.8-19 19.3-36.5 37.1-38.9 39.6-4.2 4.5-4.5 5.4-17.8 47.9L110 195.3l8.7 18.5 8.8 18.5 8.5 3.9c4.7 2.2 9.5 4.4 10.7 4.8 2 .8 3.3-1 17.9-25.3 8.6-14.4 16.4-26.9 17.3-27.8.9-.9 3.7-2.3 6.3-3.2l4.7-1.6 31 13.5 30.9 13.5 9.9-6.3c5.4-3.4 10.1-6.6 10.4-7.1.3-.4 1.4-9.4 2.4-20 1.2-11.8 2.1-18.3 2.6-17.1.8 1.9 9.9 44.5 9.9 46.2 0 .5-2.3 3.9-5 7.5l-5.1 6.7 4.5 4.2c3.2 3.1 4.6 5.4 5.1 8.3 2.4 13.7 6.1 29.7 6.9 29.8.5.1 13.3-14.5 28.4-32.6l27.5-32.7h13.4l10.3 13.2c12.2 15.8 11.8 15.3 12.5 14.7.2-.3-1.8-12.6-4.5-27.5-4.5-24-6.6-32.4-19.8-77.4l-14.7-50.5L292 40.8c-31.6-15.7-58.2-28.7-59.1-28.7-.9-.1-5.3 3.8-9.9 8.6Zm88.4 73.6 23.3 32.7.8 28.1c.4 15.4.5 28.2.4 28.4-.2.2-5.6-12-11.9-27.1L312.5 129l-27.8-25.7c-15.3-14.2-29.9-27.7-32.5-30-2.6-2.4-4.5-4.3-4.2-4.3.3-.1 8.8-1.8 19-4 10.2-2.1 19.1-3.7 19.8-3.7.7.1 11.7 14.9 24.6 33zM63.2 183.8l-17.4 5.7-15.9 15.4c-8.8 8.5-15.8 15.9-15.5 16.6.2.7 5.2 7.8 11.1 15.8l10.6 14.5 9.2.6c5.1.3 18.2.8 29.2 1.1l20 .6 8.4-8.5 8.4-8.4-14-29.4c-7.7-16.1-14.7-29.4-15.4-29.5-.8-.1-9.2 2.3-18.7 5.5z' style='fill:%23000;stroke:none;stroke-width:.1' transform='translate(-14.4 -12.1)'/%3E%3Cpath d='m170.2 239.1-22.2 37 .2 28.7.3 28.6 49 6.2 48.9 6.1 22.1-9.8c20.4-9.1 22-10 21.7-12.2-.3-3.2-17.1-86.9-17.4-87.3-.6-.5-78.9-34.4-79.6-34.4-.4 0-10.7 16.7-23 37.1zm70.8 5.5c9.1 5.2 17 10.1 17.6 10.7 1.4 1.5 13.6 47.4 13.2 49.7-.2.9-5.9 6.7-12.8 12.9l-12.5 11.2-14.3-.7c-7.8-.3-17.7-.9-22-1.3l-7.7-.6 18.3-13.4c10-7.3 18.5-13.7 18.8-14.2.3-.5 1.1-9.7 1.7-20.3l1.1-19.4-9.7-12.1c-5.4-6.7-9.4-12.1-9-12.1.5 0 8.3 4.3 17.3 9.6zm94.5-1.4c-12.5 14.9-23 27.9-23.2 28.8-.3 1-.1 2 .4 2.3 1 .7 62.1 13.7 64.1 13.7 2.6 0 26.3-14.2 26-15.6-.3-1.4-40.9-53.4-43.1-55.3-1.1-.8-6 4.4-24.2 26.1z' style='fill:%23000;stroke:none;stroke-width:.1' transform='translate(-14.4 -12.1)'/%3E%3C/svg%3E");
    text-align: center;
    overflow: hidden;
    padding-top: 2rem;
}
.nametag h1 {
    font-size: 0;
    height: 16rem;
    width: min(16rem,90%);
    margin: 0.5rem auto 0;
    background-color: rgb(var(--basalt-overtone));
    -webkit-mask-image: var(--bs);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-image: var(--bs);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    transition: all 0.175s ease-out;
}
.nametag h1:hover {
    background-color: rgb(var(--basalt-undertone));
}

#page-content .colors-container {
    max-width: calc(var(--main-content-width)*0.75);
    margin: 1.25rem auto;
}
.colors-container, .colors-container .css-variable {
    font-family: var(--mono-font);
}
.colors-container .colors .color {
    text-align: center;
    flex-basis: calc((100% / 3) - 2rem);
}
.colors-container .color { margin: 0; }
.colors-container, .colors-container .colors, .colors-container .subcolors { grid-gap: 0.375rem; }
.colors-container .color span[style*="pre-wrap"] {
    font-size: 85%;
    opacity: 0.625;
}
[[/module]]
[[/iftags]]

Bedrock Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source