La Rue Macabre Theme

PLEASE STOP

This is a template page used internally by the SCP Wiki.

PLEASE DO NOT TOUCH THIS PAGE WITHOUT PERMISSION

Theme Colors

Tombstone--gray-monochrome(156, 148, 132)

Parchment--bright-accent(255,238,204)

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

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

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

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

Wild Sand--pale-gray-monochrome(244,244,244)

Alto--light-gray-monochrome(215, 215, 215)

Shadow on Pine--dark-gray-monochrome(115,94,55)

Dull Gold--medium-accent(207,159,45)

Lisbon Brown--dark-accent(70,56,33)

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

La Rue Sigil - Black

La Rue Sigil - White

Usage

This theme was developed by MalyceGraves to be used in conjunction with tales and SCP articles written in and around the setting of La Rue Macabre.

This theme is licensed under CC BY-SA 3.0

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.

Additionally, this is a heavily modified variant of the incredible [[[component: Old Money theme] by djkaktus & Woedenaz

On any wiki:

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:theme:laruetheme]]

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.

Footnotes! These are created using the [[footnote]] tag.¹

---

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 an example of what Tabs will look like in this theme.

Tabulation

More tab examples.

Several.

Long Tab

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean egestas ipsum non erat pretium, nec auctor nunc ullamcorper. Donec rhoncus varius eleifend. Sed ut tortor magna. Suspendisse odio velit, mollis id tincidunt et, consectetur eu magna. Duis aliquet lacus metus, ut consectetur urna finibus ac. Morbi ultrices velit id turpis porta fermentum. Integer eget quam sit amet purus pellentesque finibus iaculis luctus sem. Duis sit amet neque mollis, vestibulum lectus sed, consectetur felis.

Nulla consectetur molestie imperdiet. Morbi congue, ex quis tempor placerat, est libero varius quam, ac vulputate risus lectus ac tellus. Maecenas finibus velit sit amet ultrices venenatis. Nulla dictum consequat sapien, at tristique dolor lacinia vel. Sed viverra dui ipsum, a semper tortor finibus at. Phasellus porttitor velit eu cursus suscipit. Pellentesque mattis malesuada est, eu sollicitudin sem aliquam quis. Fusce consectetur facilisis purus, quis posuere turpis pellentesque in. Donec feugiat vitae tortor sit amet aliquet. Etiam et neque id neque cursus aliquam. Donec vitae purus a libero facilisis aliquam. Mauris leo metus, maximus sed neque cursus, scelerisque dictum leo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus lectus dui, pharetra sed facilisis sed, pulvinar sed ex.

Pellentesque eu facilisis erat, at egestas est. Mauris vulputate libero at velit euismod, in blandit lorem facilisis. Integer et nisi eget nisl feugiat luctus id vitae quam. Cras ut enim id nisi bibendum placerat. Cras ut risus lacus. Aenean sed metus varius, faucibus neque sed, suscipit massa. Fusce faucibus, est a semper dignissim, erat nisl faucibus sapien, at lobortis arcu quam porttitor quam. Aliquam erat volutpat. Morbi faucibus sodales nisl, nec congue nulla finibus et. Etiam porta enim ipsum, nec varius dolor aliquam eu.

Empty Tab

1

Empty Tab

2

Empty Tab

3

Empty Tab

4

Empty Tab

5

Empty Tab

6

This is a blockquote, created by putting "> " at the start of each line.
More text

---

That's a horizontal rule

Nested blockquotes, created by putting "»" at the start of each line.

This is a	table
Cell 1	Cell 2
Cell 3	Cell 4

The body font is Rubik.
The Title font is Parisienne
The monospace font used is Courior Prime.

---

+ Show theme code

@import url('https://fonts.googleapis.com/css?family=Courier+Prime|Parisienne|Rubik&display=swap');
 
@supports(--css:variables) {
 
    :root {
 
        --theme-base: "black-highlighter";
        --theme-id: "laruetheme";
        --theme-name: "La Rue Macabre Theme";
        --header-title: "La Rue Macabre";
        --header-subtitle: "Sit a spell & share your story";
 
        --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme:laruetheme/sigil2.png");
 
        --body-font: 'Rubik', sans-serif;
        --header-font: 'Parisienne', cursive;
        --title-font: 'Rubik', sans-serif;
        --mono-font: pennsylvania, monospace;
 
        --white-monochrome: 255, 250, 240;
        --pale-gray-monochrome: 244, 244, 244;
        --light-pale-gray-monochrome: 244, 244, 244;
        --very-light-gray-monochrome: 215, 215, 215;
        --light-gray-monochrome: 215, 215, 215;
        --gray-monochrome: 156, 148, 132;
        --dark-gray-monochrome: 115, 94, 55;
        --black-monochrome: 13, 12, 10;
        --black-monochrome-alt: 54, 48, 43;
        --bright-accent: 255, 230, 179;
        --medium-accent: 207, 159, 45;
        --dark-accent: 70, 56, 33;
        --newpage-color: 224, 224, 209;
        --swatch-text-light: 115, 94, 55;
 
        --swatch-menubg-color: var(--black-monochrome);
        --swatch-border-color: var(--swatch-menubg-dark-color);
        --sidebar-links-text: var(--swatch-menutxt-light-color);
 
        --swatch-background: var(--black-monochrome, 26, 25, 24);
 
        --rating-module-button-color: var(--bright-accent);
        --rating-module-button-plus-color: 45, 65, 25;
        --rating-module-button-negative-color: 70, 35, 30;
        --rating-module-button-cancel-color: 50, 45, 50;
        --rating-module-button-credit-color: 50, 45, 50;
        --rating-module-text-color: var(--bright-accent);
        --rating-module-text-hover-color: var(--swatch-menutxt-light-color);
 
        --background-gradient-color: var(--dark-accent, 70, 56, 33);
        --header-gradient-color-bottom: var(--dark-accent);
        --header-gradient-color-middle: var(--black-monochrome);
        --header-gradient-color-top: var(--black-monochrome);
 
        --gradient-header: linear-gradient(30deg,
                rgb(var(--header-gradient-color-bottom)) 0%,
                rgb(var(--header-gradient-color-middle)) 90%,
                rgb(var(--header-gradient-color-top)) 100%);
 
        --scrollbar-width: 0.5rem;
 
        --header-height-on-desktop: 12rem;
        --header-height-on-mobile: 12rem;
        --topbar-height-on-desktop: 1.875rem;
        --topbar-height-on-mobile: 3rem;
 
        scrollbar-color: rgba(var(--dark-gray-monochrome), 1) rgba(var(--black-monochrome), 1);
    }
 
    html,
    body {
        color: rgb(var(--white-monochrome));
    }
 
    a {
        color: rgb(var(--swatch-primary-darker));
    }
 
    @supports (background-blend-mode: screen) {
 
        #extrac-div-1 {
            width: 100%;
            height: var(--header-height-on-desktop);
            position: absolute;
            top: 0;
            left: 0;
            background-image: var(--gradient-header), url('https://scp-wiki.wdfiles.com/local--files/theme:laruetheme/tilewood.jpg');
            background-size: var(--header-background-image-size) 80%, 80%, 80%;
            background-blend-mode: normal;
            pointer-events: none;
        }
 
        div#extra-div-1 {
            width: 100%;
            height: calc(100% - var(--final-header-height-on-desktop));
            position: absolute;
            top: calc(var(--final-header-height-on-desktop));
            left: 0;
            z-index: -1;
            background-color: rgba(252, 252, 252, 1);
            background-color: rgba(var(--swatch-background), 1);
            mask: var(--gradient-background);
            -webkit-mask: var(--gradient-background);
            background-image: url('https://scp-wiki.wdfiles.com/local--files/theme:laruetheme/tilewood.jpg'), var(--gradient-background);
            background-size: 10%, 100% var(--background-gradient-distance);
            background-blend-mode: difference;
            background-repeat: repeat, repeat-x;
            pointer-events: none;
        }
 
    }
 
    #header {
        background-repeat: no-repeat;
        background-position: left 0 top 0.25rem;
        background-clip: border-box;
        background-size: auto calc(var(--header-height-on-desktop) - 1rem);
        -webkit-filter: initial;
        filter: initial;
    }
 
    #header h1 a {
        font-size: 200%;
        overflow-wrap: normal;
        padding: 0;
        margin-top: calc((var(--header-height-on-desktop) - 0.5em)/2);
        margin-left: calc(var(--header-height-on-desktop) - .75rem);
    }
 
    #header h1 a::before {
        color: rgb(255, 219, 90);
        color: rgb(var(--bright-accent));
        text-shadow: inherit;
        background: url("https://scp-wiki.wdfiles.com/local--files/theme:laruetheme/wood.png");
        background-size: cover;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        overflow-wrap: normal;
    }
 
    #header h2 span {
        margin-left: calc(var(--header-height-on-desktop) + 0.75rem);
    }
 
    #header h2 {
        font-size: 150%;
    }
 
    #side-bar:hover {
        background-color: rgb(var(--black-monochrome-alt), 1);
        scrollbar-color: rgba(var(--dark-gray-monochrome), 1) rgba(var(--black-monochrome), 1);
    }
 
    #side-bar {
        background-color: rgb(var(--black-monochrome-alt));
        scrollbar-color: rgba(var(--dark-gray-monochrome), 0) rgba(var(--black-monochrome), 0);
    }
 
    #side-bar div.menu-item {
        border-bottom: 0.0625rem solid rgb(var(--swatch-menubg-dark-color));
        border-top: 0.0625rem solid rgb(var(--swatch-menubg-dark-color));
        margin-top: -0.0625rem;
    }
 
    #side-bar div.menu-item> :not(:nth-child(2)):not(.collapsible-block) {
        border-left: 0.0625rem solid rgb(var(--swatch-menubg-dark-color));
    }
 
    #side-bar .heading,
    #interwiki .heading,
    #side-bar .side-block>.collapsible-block:nth-child(1) .collapsible-block-folded {
        background: initial;
    }
 
    #side-bar .heading p,
    #interwiki .heading p,
    #side-bar .side-block>.collapsible-block .collapsible-block-link {
        color: rgb(var(--swatch-menutxt-dark-color));
        text-shadow: inherit;
        letter-spacing: 0.05rem;
        font-weight: 900;
        font-size: 1.25rem;
        position: relative;
        display: flex;
        justify-content: center;
        margin: 1rem 0 1rem 0.5rem;
        color: rgb(255, 219, 90);
        color: rgb(var(--bright-accent));
        text-shadow: inherit;
        background: url('https://scp-wiki.wdfiles.com/local--files/theme:laruetheme/wood.png');
        background-size: cover;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        overflow-wrap: normal;
        font-family: var(--header-font);
        text-transform: none;
    }
 
    #side-bar .heading p::after,
    #interwiki .heading p::after,
    #side-bar .side-block>.collapsible-block .collapsible-block-link::after,
    #side-bar .heading p::before,
    #interwiki .heading p::before,
    #side-bar .side-block>.collapsible-block .collapsible-block-link::before {
        content: " ";
        position: absolute;
        width: 100%;
        height: 0.35rem;
        background-image: url("https://scp-wiki.wdfiles.com/local--files/theme:laruetheme/elegantdivider.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
 
    #side-bar .side-block[style*="background-color:"] * {
        margin-left: 0 !important;
    }
 
    #side-bar>div[style="background-color: #e5e5ff;"]>div.menu-item>div {
        background-color: rgb(var(--black-monochrome));
    }
 
    #side-bar .side-block[style*="background-color:"] .heading {
        margin-top: .25rem;
    }
 
    #side-bar .heading p::after,
    #interwiki .heading p::after,
    #side-bar .side-block>.collapsible-block .collapsible-block-link::after {
        bottom: -0.6rem;
    }
 
    #side-bar .heading p::before,
    #interwiki .heading p::before,
    #side-bar .side-block>.collapsible-block .collapsible-block-link::before {
        top: -0.6rem;
    }
 
    #side-bar div.menu-item .sub-text {
        color: rgba(var(--swatch-primary-darker), 1);
    }
 
    #page-title {
        color: rgb(var(--swatch-menutxt-light-color));
    }
 
    blockquote,
    .blockquote {
        color: rgb(var(--light-pale-gray-monochrome));
        border-radius: 10px;
        border: dashed 1px rgb(var(--black-monochrome-alt));
        background: rgb(var(--dark-gray-monochrome));
    }
 
    .yui-navset .yui-content {
        background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
    }
 
    .yui-navset .yui-content,
    .yui-navset .yui-navset-top .yui-content {
        border-color: rgb(var(--swatch-menubg-dark-color));
    }
 
    .yui-navset .yui-nav a,
    .yui-navset .yui-navset-top .yui-nav a {
        background-color: rgb(var(--swatch-menubg-black-color));
        color: rgb(var(--swatch-text-light));
    }
 
    table.wiki-content-table th {
        background: rgb(var(--swatch-primary-darkest));
    }
 
    .code {
        background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
    }
 
    .hl-main {
        -webkit-filter: invert(1) hue-rotate(180deg);
        filter: invert(1) hue-rotate(180deg);
    }
 
    .scp-image-block .scp-image-caption {
        background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
    }
 
    .scp-image-block img {
        border: 0.5rem solid rgba(var(--black-monochrome));
    }
 
    a:visited {
        color: rgb(var(--swatch-primary-darker));
    }
 
    h1 {
        color: rgb(var(--swatch-primary)) !important;
    }
 
    hr {
        border-top: none;
        position: relative;
        height: 0.35rem;
        background: rgba(0, 0, 0, 0);
        display: flex;
    }
 
    hr::before {
        content: " ";
        position: absolute;
        top: 0.1125rem;
        left: 0;
        border-top: none;
        width: 100%;
        height: 0.125rem;
        background: linear-gradient(10deg, rgba(var(--bright-accent), 0.15) 0%, rgba(var(--bright-accent), 1) 50%, rgba(var(--bright-accent), 0.15) 100%);
        background-position: center center;
        -webkit-filter: blur(0.04rem);
        filter: blur(0.04rem);
    }
 
    hr::after {
        content: " ";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 10%;
        height: 0.25rem;
    }
 
    .page-rate-widget-box {
        background: linear-gradient(to top, rgba(var(--swatch-primary), 0.25) 0, rgba(var(--swatch-primary-darker), 0.15) 100%) !important;
        font-family: var(--mono-font);
    }
 
    form#edit-page-form {
        background-color: rgba(var(--dark-accent), 0.25);
    }
 
    textarea,
    input.text {
        background-color: rgb(var(--black-monochrome));
        color: rgb(var(--white-monochrome));
        padding: 0.5em;
    }
 
    #lock-info {
        background-color: rgb(var(--dark-accent));
    }
 
    div.buttons input,
    input.button,
    button,
    file,
    a.button {
        background-color: rgb(var(--medium-accent));
        color: rgb(var(-black-monochrome));
        border-color: rgb(var(--black-monochrome))
    }
 
    div.buttons input:hover,
    input.button:hover,
    button:hover,
    a.button:hover {
        background-color: rgb(var(--bright-accent));
    }
 
    div#page-info,
    div.page-watch-options {
        padding: 0.1em;
    }
 
    div#page-options-bottom {
        width: 90%;
        margin-bottom: 2.125rem;
        margin-left: auto;
        margin-right: auto;
    }
 
    div#page-options-bottom-2 {
        width: 90%;
        margin-top: -2.125rem;
        margin-left: auto;
        margin-right: auto;
    }
 
    div#page-options-bottom,
    div#page-options-bottom-2 {
        text-align: left;
        flex-wrap: wrap;
    }
 
    div#page-options-bottom,
    div#page-options-bottom-2,
    div#page-options-bottom>a {
        display: flex;
    }
 
    div#page-options-bottom>a,
    div#page-options-bottom-2>a {
        flex-grow: 2;
        padding: .25rem;
        border-radius: .25rem;
        background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
        border: 0.125rem solid rgba(var(--swatch-primary), 0.25) !important;
        font-weight: 700;
        justify-content: center;
        transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    }
 
    div#page-options-bottom-2>a {
        display: flex;
    }
 
    div#page-options-bottom>a:hover,
    div#page-options-bottom>a:active,
    div#page-options-bottom-2>a:hover,
    div#page-options-bottom-2>a:active {
        text-decoration: none;
        background-color: rgba(var(--swatch-menubg-dark-color), 1);
        color: rgba(var(--swatch-primary), 1);
    }
 
    .owindow .title {
        background-color: rgb(var(--swatch-menubg-dark-color));
    }
 
    #odialog-container,
    .title.modal-header,
    .owindow,
    .hovertip {
        background-color: rgb(var(--swatch-primary-darkest));
    }
 
    .hovertip {
        border: 1px solid #000 !important;
        box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.4);
        border-radius: 4px;
        max-width: 250px;
    }
 
    .hovertip .content {
        background-color: #1f1c17;
        color: #cec4ae;
        border-radius: 4px;
        padding: 4px;
    }
 
    .owindow .button-bar a {
        background-color: rgb(var(--swatch-menubg-dark-color));
        color: rgb(var(--white-monochrome));
    }
 
    @media only screen and (max-width: 768px) {
 
        #header {
            --size: calc(var(--final-header-height-on-mobile) - 0.875rem);
            --y-offset: 1.5rem;
            background-position:
                calc((var(--header-height-on-mobile) - 3.75rem) - var(--size)) calc(((var(--size) * -1) + var(--header-height-on-mobile) + var(--y-offset)) / 2);
            background-size: var(--size), 100% var(--header-height-on-mobile);
            background-repeat: no-repeat, repeat;
        }
 
        #header>h1>a>span {
            height: var(--header-height-on-mobile);
        }
 
        #header h1 a {
            line-height: 1;
        }
 
        #header h2 span {
            line-height: 1.1;
        }
 
    }
 
    @media only screen and (min-width: 600px) and (max-width: 768px) {
 
        #header {
            --size: calc(var(--final-header-height-on-mobile) - 0.875rem);
            --y-offset: 1.5rem;
            background-position:
                calc((var(--header-height-on-mobile) - 3.75rem) - var(--size)) calc(((var(--size) * -1) + var(--header-height-on-mobile) + var(--y-offset)) / 2);
            background-size: var(--size), 100% var(--header-height-on-mobile);
            background-repeat: no-repeat, repeat;
        }
 
        #header h1 a {
            margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
            margin-top: calc(((var(--header-height-on-mobile) / 2)) - 0.75em);
            line-height: 1;
            font-size: 300%;
        }
 
        #header h2 span {
            margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
            margin-top: calc(((var(--header-height-on-mobile) / 2) + 0.5em));
            line-height: 1.1;
            font-size: 120%;
        }
 
    }
 
    @media only screen and (min-width: 400px) and (max-width: 600px) {
 
        #header h1 a {
            margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
            margin-top: calc(((var(--header-height-on-mobile) / 2)) - 1em);
            font-size: 140%;
        }
 
        #header h2 span {
            margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
            margin-top: calc(((var(--header-height-on-mobile) / 2) + 0.5em));
            font-size: 60%;
        }
 
    }
 
    @media only screen and (max-width: 400px) {
 
        #header h1 a {
            margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
            margin-top: calc(((var(--header-height-on-mobile) / 2)) - 1em);
            font-size: 125%;
        }
 
        #header h2 span {
            margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
            margin-top: calc(((var(--header-height-on-mobile) / 2) + 3.5em));
            font-size: 35%;
        }
 
    }
 
}

Footnotes

1. Here is a footnote just for for an example.