The Deep End Theme Sandbox

This component is currently ACTIVE

Usage

On any wiki:

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-sandbox-3:collab:jaonhax-canofsoup-drdromeus-theme]]

Optional Addons

---

Dark Sidebar

[[include :scp-wiki:component:bhl-dark-sidebar]]

Collapsible Sidebar

[[include :scp-wiki:component:collapsible-sidebar]]

What this is

A component that applies the Deep End theme to your article, as long as you have the Black Highlighter theme applied.

Reporting problems with BHL

If you've got a Github account, create an Issue here detailing your problem (whether it's technical, or aesthetic, or whatever).

If you don't have a Github account, or if you'd prefer to discuss your issues with someone directly, either join the #black-highlighter channel on SynIRC, or send a PM to Woedenaz or Croquembouche.

Other Problems

If there are other problems with the Deep End theme, please let either CanOfSoup, DrDromeus, or JaonHax know what it is and we'll do our best to fix it!

---

Theme Colors

Xiketic--black-monochrome(17, 17, 24)

Mantis--bright-accent(120, 191, 123)

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

Dark Liver--gray-monochrome(74, 74, 83)

Roman Silver--very-light-gray-monochrome(132, 132, 142)

Lavender Web--white-monochrome(218, 218, 231)

Amazon--medium-accent(81, 115, 84)

Forest Green Traditional--dark-accent(12, 53, 15)

Bdazzled Blue--newpage-color(56, 89, 128)

Celadon--h1-h2-title-accent(167, 213, 169)

{$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}

Examples

SCP Foundation Logo

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

+ Titles

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Tabulator

This is a tab view.

Tabulation

Hey look, more text here.

How quaint.

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.

This empty tab has a really long name for some odd reason. I wonder why? It is very strange.

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

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 body font is Freight Sans.
The header and title font is Poppins.
The monospace font is Space Mono.

---

This is a field report

Field reports are a special class the Deep End theme adds to the page when you apply it, allowing you to easily make your MTFs' field reports or important documents stand out and still maintain consistent styling with the theme.

The easiest way to make a field report is to create a div (although any element actually technically works, divs are generally best) with the class field-report, like so.

[[div class="field-report"]]
This is a field report!
[[/div]]

It's that simple. Everything within a field report (headers, code blocks, etc.) should be automatically formatted to fit with the theme, so if you notice anything not working properly, please contact CanOfSoup, DrDromeus, or JaonHax, and they'll start working on a fix.

Obviously, you don't have to use these, but if you aren't using them, we'd like to know why it is you choose not to! That way, we can improve these so others (and maybe even you) will like them more.

+ Formatting field reports

Field reports have a few customizable BHL-like variables to allow them to be easily reformatted by those of you who know how to format using BHL. These variables are shown and explained below.

swatch-field-report-bg-color

RGB code for the field reports' backgrounds; formatted like BHL colors; default is 189, 189, 201

swatch-field-report-border-color

RGB code for the field reports' borders and header underlines; formatted like BHL colors; default is 74, 74, 83

swatch-field-report-text-color

RGB code for the field reports' text color; formatted like BHL colors; default is 17, 17, 24

swatch-field-report-link-color

RGB code for the field reports' URL/hyperlink color; formatted like BHL colors; default is 12, 53, 15

swatch-field-report-link-active-color

RGB code for the field reports' hovered-over/active URL/hyperlink color; formatted like BHL colors; default is 66, 122, 69

field-report-border-width

Border width of field reports in px, pt, em, rem, etc.; the width of lines automatically placed below some headers in the reports is half of this; default is 4px

As with BHL, these are defined in the :root element of your style.

Sample paragraph formatting

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In nisl nisi scelerisque eu ultrices vitae auctor eu. Vitae suscipit tellus mauris a. Eu feugiat pretium nibh ipsum. Et netus et malesuada fames ac turpis egestas maecenas pharetra. At tellus at urna condimentum mattis pellentesque id nibh. Non odio euismod lacinia at quis risus. Augue eget arcu dictum varius duis at consectetur. Sit amet tellus cras adipiscing enim eu. Porttitor rhoncus dolor purus non enim praesent elementum facilisis leo. Iaculis nunc sed augue lacus viverra vitae congue eu. Eget est lorem ipsum dolor sit. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Lacus sed turpis tincidunt id. Vitae turpis massa sed elementum tempus egestas sed. Senectus et netus et malesuada. Lobortis elementum nibh tellus molestie nunc non. Congue nisi vitae suscipit tellus mauris a. Quis commodo odio aenean sed adipiscing diam.

Neque convallis a cras semper auctor neque vitae. Nunc id cursus metus aliquam. Tortor dignissim convallis aenean et tortor at risus viverra. Lorem dolor sed viverra ipsum. Luctus accumsan tortor posuere ac ut. Et netus et malesuada fames ac turpis. Maecenas volutpat blandit aliquam etiam erat velit scelerisque. At augue eget arcu dictum varius duis. Lobortis mattis aliquam faucibus purus in massa. Faucibus interdum posuere lorem ipsum. Lectus vestibulum mattis ullamcorper velit. Justo nec ultrices dui sapien. Duis ut diam quam nulla porttitor massa id. Nec ullamcorper sit amet risus nullam.

Sample field report formatting

Massa Id Neque Aliquam Vestibulum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id faucibus nisl tincidunt eget nullam non nisi est sit. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Ornare aenean euismod elementum nisi quis. Nullam vehicula ipsum a arcu cursus vitae. Imperdiet nulla malesuada pellentesque elit. Mauris commodo quis imperdiet massa. Et odio pellentesque diam volutpat. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Ultrices sagittis orci a scelerisque purus semper eget. Non consectetur a erat nam. Vitae tempus quam pellentesque nec nam aliquam sem. Lorem ipsum dolor sit amet. Cras ornare arcu dui vivamus arcu felis bibendum ut. In metus vulputate eu scelerisque. Morbi enim nunc faucibus a pellentesque sit. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci.

Libero Justo Laoreet Sit Amet Cursus

Turpis massa tincidunt dui ut ornare lectus sit. Sed euismod nisi porta lorem mollis aliquam ut porttitor. Eget mauris pharetra et ultrices neque. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Blandit volutpat maecenas volutpat blandit. Faucibus in ornare quam viverra orci sagittis eu. Urna nec tincidunt praesent semper feugiat nibh. Ut etiam sit amet nisl. Magna fermentum iaculis eu non. Sagittis nisl rhoncus mattis rhoncus urna neque. Erat pellentesque adipiscing commodo elit at. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Enim ut tellus elementum sagittis vitae et leo. Sit amet massa vitae tortor condimentum lacinia quis vel. Aenean pharetra magna ac placerat vestibulum. Dignissim sodales ut eu sem integer vitae. Vel quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Id faucibus nisl tincidunt eget nullam non nisi est. Euismod elementum nisi quis eleifend quam adipiscing vitae. In mollis nunc sed id.

Mauris cursus mattis molestie a iaculis at erat. Augue lacus viverra vitae congue eu consequat. Amet massa vitae tortor condimentum lacinia quis vel. Id ornare arcu odio ut sem nulla pharetra diam sit. Fermentum odio eu feugiat pretium nibh ipsum. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Nibh sed pulvinar proin gravida hendrerit. Nibh tellus molestie nunc non. Vitae nunc sed velit dignissim sodales ut eu. Pulvinar elementum integer enim neque volutpat. Est ante in nibh mauris cursus mattis molestie a iaculis. Vel eros donec ac odio tempor orci dapibus ultrices in.

Ut Faucibus Pulvinar Elementum Integer Enim

Ultrices tincidunt arcu non sodales neque sodales ut etiam. Cursus turpis massa tincidunt dui ut ornare lectus. Tellus orci ac auctor augue. Ultricies mi quis hendrerit dolor magna eget. Nisi est sit amet facilisis magna etiam. Eu sem integer vitae justo eget. A erat nam at lectus. Scelerisque felis imperdiet proin fermentum leo vel orci porta. Integer quis auctor elit sed vulputate mi sit. Odio euismod lacinia at quis. Faucibus vitae aliquet nec ullamcorper sit amet. Amet est placerat in egestas erat imperdiet sed. Et tortor at risus viverra. Viverra justo nec ultrices dui sapien.

Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Elit scelerisque mauris pellentesque pulvinar pellentesque. Leo integer malesuada nunc vel risus commodo viverra. Nulla aliquet porttitor lacus luctus. Eget mi proin sed libero enim sed faucibus turpis. Libero id faucibus nisl tincidunt. Felis eget velit aliquet sagittis id consectetur purus ut faucibus. Vel eros donec ac odio tempor orci dapibus ultrices. Ut tristique et egestas quis ipsum suspendisse ultrices. Id porta nibh venenatis cras sed felis eget velit aliquet. Feugiat scelerisque varius morbi enim. Urna et pharetra pharetra massa massa ultricies. Mattis nunc sed blandit libero. Sed odio morbi quis commodo. Venenatis urna cursus eget nunc. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim.

Volutpat Consequat Mauris Nunc Congue Nisi

Varius sit amet mattis vulputate. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Ultrices mi tempus imperdiet nulla. Faucibus vitae aliquet nec ullamcorper sit amet risus. Vitae proin sagittis nisl rhoncus mattis rhoncus urna neque. Porta lorem mollis aliquam ut. Pulvinar neque laoreet suspendisse interdum. Mi quis hendrerit dolor magna eget est. Convallis aenean et tortor at risus viverra adipiscing. Dignissim enim sit amet venenatis urna cursus eget nunc. Morbi tristique senectus et netus et. Leo a diam sollicitudin tempor id eu nisl nunc. Enim tortor at auctor urna. Nunc id cursus metus aliquam eleifend. Et ligula ullamcorper malesuada proin libero nunc consequat. Eget egestas purus viverra accumsan.