Penumbra BHL

rating: +67+x

Black Highlighter port of the Penumbra Theme by EstrellaYoshteEstrellaYoshte


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}
black-highlighter-logo.svg

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.1

On any wiki:

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki: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

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 a table
You should know how to make these
already

[[div class="darkbox"]]


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


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 Josefin Sans.

The body font is Roboto.

The monospace font is Fira Code.



Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License