Black Highlighter port of the Penumbra Theme by EstrellaYoshte
Theme Colors
Tuna--gray-monochrome(47, 51, 60)
Summer Sky--bright-accent(30, 181, 232)
{$color3-name}{$color3-variable}{$color3-info}
{$color4-name}{$color4-variable}{$color4-info}
{$color5-name}{$color5-variable}{$color5-info}
{$color6-name}{$color6-variable}{$color6-info}
White Smoke--white-monochrome(248, 248, 248)
Alto--very-light-gray-monochrome(215, 215, 215)
Black Rock--dark-gray-monochrome(47, 51, 60)
Cinder--black-monochrome(33, 37, 46)
{$subcolor5-name}{$subcolor5-variable}{$subcolor5-info}
{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}
{$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}
Usage
Note: This is a Black Highlighter based theme. You will need to import the Black Highlighter theme as well in order to use this theme. To learn more go here.
On any wiki:
[[include theme:black-highlighter-theme]]
[[include theme:penumbra-bhl]]
CSS Variables are identical to the original theme for easy(ish) replacement, if desired. [See Below]
EXCEPT the --accentColor will need to be converted to rgb. For instance #1EB5E8 will have to be converted to 30, 181, 232. Useful tool for this here.
DO NOT include rgb( ) when converting the hex color. Just the three numbers.
:root {
--header-title: "BIG HEADER TITLE";
--header-subtitle: "small header subtitle";
--lgurl: url("your url here");
--accentColor: COLOR HERE;
}
Examples
A horizontal rule can be created with 5 hyphens "
-----" 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.
Titles can be created by putting between one and six plus "+" at the start of the line
First Title
Second Title
Third Title
Fourth Title
Fifth Title
Sixth Title
Hey look, more text here.
How quaint.
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.
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 |
The
sidebox div is set up as follow:
[[div class="limit"]] <— Set the start limit of the anchor
[[div class="anchor"]] <— Set sidebox's sticky position
[[div class="sidebox"]]
Some sidebox text here.
[[/div]]
[[/div]]
Text where sidebox scroll past.
[[/div]] <— Set the end limit of the anchor
With some finesse, it is possible
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non molestie nulla. Morbi vitae massa auctor, porta arcu eget, dictum tellus. Etiam scelerisque aliquam ipsum, ac convallis lorem scelerisque eget.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In finibus purus non commodo porttitor. Integer sed felis dui. Nulla nec tincidunt velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
to have multiple sideboxes
Vivamus sapien sem, gravida non vulputate eu, vestibulum vel lacus. Nulla massa erat, sodales dignissim vehicula non, fringilla id ante. Morbi eleifend lacus non nisl finibus aliquam. Proin tristique, lacus eu varius porttitor, lorem justo ullamcorper massa, sed ultricies elit dolor vitae nisi. Fusce varius nec sapien malesuada luctus. Pellentesque efficitur porttitor turpis sit amet rhoncus.
Sed non sollicitudin nisl. Suspendisse finibus, est et venenatis placerat, diam lorem porttitor elit, ac sollicitudin arcu erat et orci. Curabitur erat mi, congue quis imperdiet ut, fringilla vitae sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis nec ante pretium est commodo convallis id a sapien. Morbi sit amet ultricies urna.
Ut semper, tellus vel tristique convallis, nulla mi laoreet nisi, eu malesuada ipsum magna sed dolor. Pellentesque nec lorem eu ante tristique efficitur. Sed auctor tortor ipsum. Morbi laoreet interdum scelerisque. Vivamus id enim nisl. Donec vitae leo suscipit, venenatis tortor eget, laoreet diam.
Sed sollicitudin, arcu ut condimentum vulputate, dui diam convallis velit, vitae ultricies leo libero non metus. Vestibulum at aliquam nisi. Aenean molestie tortor orci, ac volutpat magna eleifend vitae. Morbi tristique risus tortor, feugiat efficitur augue imperdiet ut. Aliquam nec urna lacinia, pretium ligula ut, gravida ex.
Without the
limit div, the
anchor will be stickied across the entire page content once past its sticky position.
Note that the sidebox div minimizes on mobile, or screenwidth of 1290px and below.
The header font is Jost.
The body font is Roboto.
The monospace font is Fira Code.
On any page:
[[include theme:basalt]]
Info
Basalt is an aesthetic theme for the SCP Wiki by
Пользователь 'Liryn' не существует and
Пользователь 'Placeholder McD' не существует functioning as an extension of
Bedrock, a base theme created specifically for this project. Visit
Bedrock's wiki page or its
home on GitHub for more info, including all of the CSS variables it offers.
Theme settings
Add
theme settings to your
[[include]] module to modify aspects of Basalt.
[[include :scp-wiki:theme:basalt themesetting]][[include :scp-wiki:theme:basalt themesetting|another-themesetting]] All theme settings as of the current version:
darkmode=a Applies dark modewide=a Widens pagehidetitle=a Removes page titlecentertitle=a Centers page titleacs-itemnum=a Restores ACS "ITEM#:" textdisable-acs-anim=a Disables ACS Animation component
Included with Basalt
Fonts
Header and UI font is Sofia Sans.
Body font is Inter.
Monospace font is JetBrains Mono.
