The Way Out Theme

Link to article: The Way Out Theme.

@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css");
#page-title {
    text-align: center !important;
    font-family: var(--header-font);
    font-size: 270%;
}

@media only screen and (max-width: 765px) {
  #page-title {
  font-size: 170%;
  white-space: nowrap;
  }
 }

@import url("https://scp-wiki.wdfiles.com/local--code/theme%3Athe-way-out/1")

```
filter: display:flex;
```
```
width:300px;
```
```
width:width:300px;;
```
```
font-family: var(--header-font);
```
```
font-family: var(--body-font);
```
```
font-family: var(--mono-font);
```

```
scp-image-block
```
```
block-right
```
```
scp-image-caption
```
```
code
```

[[iftags +theme]]
[[module css]]
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css");
#page-title {
    text-align: center !important;
    font-family: var(--header-font);
    font-size: 270%;
}

@media only screen and (max-width: 765px) {
  #page-title {
  font-size: 170%;
  white-space: nowrap;
  }
 }
[[/module]]
[[include :scp-wiki:component:interwiki-style
| priority=1
| theme=https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css
]]

[[include :scp-wiki:component:interwiki-style
| priority=2
| theme=https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css
]]
[[>]]
[[module Rate]]
[[/>]]

[[div_ style="filter: display:flex;"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Ablack-highlighter-theme/black-highlighter-logo.svg]]
[[/div]]

----

[[=]]
+ Theme Colors
[[/=]]

[[include :scp-wiki:component:theme-squares -=-
| color1-name=Malibu
| color1-variable=--newpage-color
| color1-info=#63BEFF
| color1-has-light-text=1
| color2-name=Madison
| color2-variable=--bright-accent
| color2-info=#0E4166
| color2-has-light-text=1
| subcolor1-name=William
| subcolor1-variable=--medium-accent
| subcolor1-info=#3C6478
| subcolor1-has-light-text=1
| subcolor2-name=Elephant
| subcolor2-variable=--dark-accent
| subcolor2-info=#0C2436
| subcolor2-has-light-text=1
]]

----

[[div class="scp-image-block block-right" style="width:300px;"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Athe-way-out/logo.png]]
[[div class="scp-image-caption" style="width:width:300px;;"]]
Overwatch Logo
[[/div]]
[[/div]]

++ 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. [[[theme:black-highlighter-theme|To learn more go here]]].
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@

On any wiki:

[[div class="code"]]
@@[[include :scp-wiki:theme:black-highlighter-theme]]@@
@@[[include :scp-wiki:theme:the-way-out]]@@
[[/div]]

+ 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

[[collapsible show="+ Titles" hide="- Titles"]]
+ First Title

++ Second Title

+++ Third Title

++++ Fourth Title

+++++ Fifth Title

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

@@ @@

[[tabview]]
[[tab Tabulator]]
Just use your imagination and pretend there's `Lorem Ipsum` here.
[[/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 Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
weed lmao
[[/tab]]
[[/tabview]]

> This is a blockquote, created by putting "> " at the start of each line.
>
> More text
> -----
> That's a horizontal rule
>
>> Nested blockquotes
>>> And another[[footnote]] And here's a footnote! [[/footnote]]

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

----

[[=]]
[[span style="font-family: var(--header-font);"]]The Header & Title font is Poppins.[[/span]]
[[span style="font-family: var(--body-font);"]]The Body font is Lato.[[/span]]
[[span style="font-family: var(--mono-font);"]]The Monospace font used is PT Mono.[[/span]]
[[/=]]

-----
[[collapsible show="+ Show theme code" hide="- Hide theme code"]]
[[code type="css"]]

/*
    The Way Out Theme
    [2019 Wikidot Theme]
    Created by Rounderhouse, with massive help from Woedenaz.
    Based on Black Highlighter Theme created by Woedenaz and Croquembouche.
    The O5 Command logo was created by djkaktus. Licensed under CC BY SA 3.0.
*/
/* Fonts */

@import url('https://fonts.googleapis.com/css?family=Lato:400,900|PT+Mono|Poppins:600,800');

/* All Vars Used */

:root {
    /* S-CSS-P Integration */
    /* If you're making a new CSS theme, please include the following three variables at minimum. */
    --theme-base: "nuscp";
    /* must be either "nuscp" or "sigma9" */
    --theme-id: "nuscp";
    /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
    --theme-name: "nu-SCP Theme";
    /* set this to your theme's full name */

    /* Header */
    --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Athe-way-out/wtf.svg");
    --header-title: "OVERWATCH COMMAND";
    --header-subtitle: "SITE-01 INTERNAL DATABASE";

    /* Typefaces */
    --body-font: 'Lato', sans-serif;
    --header-font: 'Poppins', sans-serif;
    --title-font: 'Poppins', sans-serif;
    --mono-font: "PT Mono", "Andale Mono", "Courier New", Courier, monospace;

    /* ========================== Stylistic Sets        |    Any:     0 OR 1     */
    --ss01: 0;
    --ss02: 0;
    --ss03: 0;

    /* Standard Colors */
    --white-monochrome: 252, 252, 252;
    /* white */
    --pale-gray-monochrome: 244, 244, 244;
    /* v light gray for blockquotes and stuff */
    --light-gray-monochrome: 170, 170, 170;
    /* light accent gray for login status */
    --gray-monochrome: 66, 66, 72;
    /* gray */
    --dark-gray-monochrome: 48, 48, 52;
    /* dark accent gray for sidebar background */
    --black-monochrome: 12, 12, 12;
    /* black */
    --bright-accent: 14, 65, 102;
    /* blue */
    --medium-accent: 60, 100, 120;
    /* medium blue */
    --dark-accent: 12, 36, 54;
    /* dark blue */
    --newpage-color: 99, 190, 255;
    /* bright blue */

    /* Primary Theme Colors */
    --swatch-background: var(--white-monochrome);
    --swatch-primary: var(--medium-accent);
    --swatch-primary-darker: var(--bright-accent);
    --swatch-primary-darkest: var(--bright-accent);
    /* Primary Text Colors */
    --swatch-text-dark: var(--black-monochrome);
    --swatch-text-light: var(--white-monochrome);
    --swatch-important-text: var(--bright-accent);

    /* Primary Menu Colors */
    --swatch-menubg-color: var(--gray-monochrome);
    /* Primary Header Colors */
    --swatch-topmenu-border-color: var(--dark-gray-monochrome);
    --swatch-topmenu-bg-color: var(--dark-gray-monochrome);

    --rating-module-button-color: var(--black-monochrome);
    --rating-module-text-color: var(--black-monochrome);

    /* Link Colors */
    --link-color: 27, 65, 94;
    --visited-link-color: 133, 193, 233;
    --hover-link-color: 133, 193, 233;

    /* Header Gradients */

    --gradient-header: linear-gradient(to bottom,
    		rgba(var(--black-monochrome), 0.97) 10%,
    		rgb(var(--black-monochrome)) 65%,
    		rgb(var(--dark-gray-monochrome)) 100%);
    --gradient-topmenu: linear-gradient(to bottom,
    		white 0%,
    		white 7.5rem,
    		rgba(var(--swatch-topmenu-border-color), 1) 7.5rem,
    		rgba(var(--swatch-topmenu-bg-color), 1) 7.625rem,
    		rgba(var(--swatch-topmenu-bg-color), 0.95) calc(100% - 0.125rem),
    		rgba(var(--swatch-topmenu-bg-color), 1) calc(100% - 0.125rem),
    		rgba(var(--swatch-topmenu-border-color), 1) 100%);
    --gradient-topmenu-mobile: linear-gradient(to bottom,
    		rgba(var(--swatch-topmenu-border-color), 1) 0,
    		rgba(var(--swatch-topmenu-bg-color), 1) 0.125rem,
    		rgba(var(--swatch-topmenu-bg-color), 1) calc(3rem - 0.125rem),
    		rgba(var(--swatch-topmenu-bg-color), 1) calc(3rem - 0.125rem),
    		rgba(var(--swatch-topmenu-border-color), 1) 3rem);
    --diagonal-stripes: repeating-linear-gradient(25deg,
    		hsla(0, 0%, 100%, 0),
    		hsla(0, 0%, 100%, 0) 0.25vh,
    		rgba(88, 88, 88, 0.1) 0.35vh,
    		rgba(88, 88, 88, 0.2) 0.5vh);
    --gradient-sidemenu-header: linear-gradient(10deg,
    		rgba(var(--medium-accent), 0.45) 0%,
    		rgba(var(--medium-accent), 0.55) 100%);
    --gradient-background: linear-gradient(to bottom,
    		rgba(var(--background-gradient-color), 1) calc(calc(0 / 100) * var(--background-gradient-distance)),
    		rgba(var(--background-gradient-color), 0.987) calc(calc(0.8 / 100) * var(--background-gradient-distance)),
    		rgba(var(--background-gradient-color), 0.951) calc(calc(2.9 / 100) * var(--background-gradient-distance)),
    		rgba(var(--background-gradient-color), 0.896) calc(calc(6.4 / 100) * var(--background-gradient-distance)),
    		rgba(var(--background-gradient-color), 0.825) calc(calc(11 / 100) * var(--background-gradient-distance)),
    		rgba(var(--background-gradient-color), 0.741) calc(calc(16.6 / 100) * var(--background-gradient-distance)),
    		rgba(var(--background-gradient-color), 0.648) calc(calc(23.1 / 100) * var(--background-gradient-distance)),
    		rgba(var(--background-gradient-color), 0.55) calc(calc(30.4 / 100) * var(--background-gradient-distance)),
    		rgba(var(--background-gradient-color), 0.45) calc(calc(38.3 / 100) * var(--background-gradient-distance)),
    		rgba(var(--background-gradient-color), 0.352) calc(calc(46.7 / 100) * var(--background-gradient-distance)),
    		rgba(var(--background-gradient-color), 0.259) calc(calc(55.4 / 100) * var(--background-gradient-distance)),
    		rgba(var(--background-gradient-color), 0.175) calc(calc(64.4 / 100) * var(--background-gradient-distance)),
    		rgba(var(--background-gradient-color), 0.104) calc(calc(73.5 / 100) * var(--background-gradient-distance)),
    		rgba(var(--background-gradient-color), 0.049) calc(calc(82.5 / 100) * var(--background-gradient-distance)),
    		rgba(var(--background-gradient-color), 0.013) calc(calc(91.4 / 100) * var(--background-gradient-distance)),
    		rgba(var(--background-gradient-color), 0) calc(calc(100 / 100) * var(--background-gradient-distance)));
    --header-background-image-size: 100% 7.5rem;

    /* Spacing Measurements */
    --offset-from-page-top: 1.2rem;
    /* space between the top of the page and the start of the header */
    --body-width-on-desktop: 44.25rem;
    --sidebar-width-on-desktop: calc(var(--base-font-size)*19);
    --sidebar-width-on-mobile: 14rem;
    --scrollbar-width: 0.5625rem;
    --border-styling: solid 0.0625rem rgb(var(--swatch-border-color));
    --border-radius-width: 0.0625rem;

    /* Sidebar */
    --sidebar-transition-timing: 0.5s ease-in-out 0.1s;
    --sidebar-internal-border-thickness: 0.125rem;

    --background-gradient-color: 12, 36, 54;
    --background-gradient-distance: 40rem;
}

#header {
    -webkit-filter: drop-shadow(.042rem .042rem .042rem rgb(150, 150, 150));
            filter: drop-shadow(.042rem .042rem .042rem rgb(150, 150, 150));
}

@media only screen and (max-width: 768px) {
    #header {
    	background-position: calc(7.4rem - var(--size)) calc(((var(--size) * -1) + 7.5rem + var(--y-offset)) / 2);
    }
}
[[/code]]
[[/collapsible]]
[[/iftags]]
[[include :scp-wiki:component:bhl-dark-sidebar]]
[[module css]]
@import url("https://scp-wiki.wdfiles.com/local--code/theme%3Athe-way-out/1")
[[/module]]
[[include :scp-wiki:component:interwiki-style
| priority=3
| theme=https://scp-wiki.wdfiles.com/local--code/theme%3Athe-way-out/1
]]

The Way Out Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source