Cleaning Services Theme

What's This?

This is the Cleaning Services theme by winkwonkboi, made for articles that pertain to the Cleanliness Guaranteed* (soon-to-be) canon.

To implement this theme, simply paste the following code at the top of your page:

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:theme:cleaning-services]]

+ You see the 'Cleaning Services Theme' title?

Only optional, but if you like to switch the font of the top of your page, you can use the code below:

[[module CSS]]
#page-title {
font-family: var(--header-font);
}
[[/module]]

This changes it to the font you see for the 'SAFE CLEANUP PROFESSIONALS' title up above.

Note: As this is a Black Highlighter based theme, the Black Highlighter theme should be used in conjunction for this theme to work. To learn more, go here.

---

Holy fucking bingle

Examples

A horizontal rule can be created using five hyphens "-----" which stretches across an entire page unless contained within, for instance, a blockquote. Lines separating sections of a page are horizontal rules.

A link you've probably visited.
An unvisited link.

+ This is a collapsible

Titles are made by putting between one and six pluses "+" at the beginning of the line.

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

---

Tab

This is a tab.

Tabulation

This is also a tab,

with a second line to boot.

Long Tabulation

The sculpture is the only canon anomaly.

The sculpture is the only canon anomaly.

The sculpture is the only canon anomaly.

The sculpture is the only canon anomaly.

The sculpture is the only canon anomaly.

The sculpture is the only canon anomaly.

The sculpture is the only canon anomaly.

The sculpture is the only canon anomaly.

The sculpture is the only canon anomaly.

The sculpture is the only canon anomaly.

The sculpture is the only canon anomaly.

The sculpture is the only canon anomaly.

The sculpture is the only canon anomaly.

The sculpture is the only canon anomaly.

The sculpture is the only canon anomaly.

Why Is This Tab's Title Is So Obnoxiously Long?

I don't know, why're you asking me?

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

I am the boogeyman.

This is a blockquote.

---

A blockquote can either be made using a div block-

-or by using ">" at the start of a line.

There are also nested blockquotes.¹

This is	a table.
I'm sure	you know
how to make this, yeah?

---

Extra Divs

This is a blockquote containing the Safe Cleanup Professionals logo.

[[div class="cleanblock"]]

This is a sticky note div.

[[div class="stickynote"]]

This is a	red table.
I hope you	don't mind
the roses.

This is some bloody code, yo.

And a blockquote to boot!

[[div class="tablered"]]

But maybe	you like it green.
Just a little	taste of
mother nature.

This is some Lorax code, yo.

Oh, look: Another blockquote.

[[div class="tablegreen"]]

Maybe you have	a taste for peanuts.
Look away	and your neck
will get snapped.

This is some nutty code, yo.

Voila, it's another blockquote.

[[div class="tablenut"]]

---

Header font is Oswald.
Title and Monospace font is Roboto Mono.
Body and UI font is Noto Sans JP.

---

Source Code

+ show block

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
 
:root {
    /* S-CSS-P INTEGRATION */
    --theme-base: "black-highlighter";
    --theme-id: "cleaning-services";
    --theme-name: "Cleaning Services Theme";
 
    /* Colors */
    --peanut-butter: 175, 143, 133;
    --dark-choco: 122, 68, 52;
    --bitter-dirt: 98, 42, 15;
    --lightheaded: 228, 218, 214;
    --wonka-stream: 149, 105, 93;
    --salt-free: 249, 244, 236;
 
    --bloody: 124, 10, 2;
    --grassy: 59, 122, 87;
    --pakistan-green: 0, 102, 0;
 
    --darker: 38, 38, 38;
    --brighter: 252, 252, 252;
 
    /* Fonts */
    --header-font: 'Oswald', sans-serif;
    --title-font: 'Roboto Mono', monospace;
    --body-font: 'Noto Sans JP', sans-serif;
    --mono-font: var(--title-font);
    --ui-font: var(--body-font);
 
    /* Header Elements */
    --logo-image: unset;
    --header-title: "SAFE CLEANUP PROFESSIONALS";
    --header-subtitle: "Sanitize, Cleanse, Polish";
    --header-h1-font-size: 3rem;
    --header-h2-font-size: 1.2rem;
 
    --header-height-on-desktop: 15rem;
    --header-height-on-mobile: 10rem;
 
    --header-gradient-color-bottom: 238, 221, 195;
    --header-gradient-color-middle: 238, 221, 195;
    --header-gradient-color-top: 238, 221, 195;
    --diagonal-stripes: unset;
 
    /* Theme Colors */
    --bright-accent: var(--peanut-butter);
    --medium-accent: var(--peanut-butter);
    --dark-accent: var(--peanut-butter);
 
    --gray-monochrome: var(--dark-choco);
    --dark-gray-monochrome: var(--bitter-dirt);
 
    --swatch-background: var(--salt-free);
    --background-gradient-color: var(--salt-free);
 
    --rating-module-button-cancel-color: var(--peanut-butter);
    --rating-module-bg-color: var(--lightheaded);
 
    --ui-button-bg: var(--darker);
    --ui-button-txt: var(--brighter);
 
    --link-color: var(--grassy);
    --visited-link-color: var(--bloody);
    --hover-link-color: var(--pakistan-green);
 
    --code-color: var(--lightheaded), 0.30;
}
 
#extra-div-1 {
    height: var(--header-height-on-desktop);
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Acleaning-services/headerbg.png");
    background-size: cover;
    background-repeat: no-repeat;
}
 
#header {
    --swatch-headerh1-color: var(--bloody);
    --swatch-headerh2-color: var(--grassy);
    --search-icon-color: var(--darker);
 
    --login-line-divider-color: var(--darker);
    --login-username-color: var(--darker);
    --login-myaccount-color: var(--darker);
    --login-myaccount-hover-color: var(--brighter);
 
    --login-dropdown-bg-color:  var(--dark-choco);
    --login-dropdown-bg-image:  var(--dark-choco);
    --login-dropdown-text-color: var(--brighter);
    --login-mobile-icon-color: var(--darker);
}
 
@media only screen and (max-width: 56.25rem) {
    :root{
        --header-h1-font-size: 1.6rem;
        --header-h2-font-size: 1rem;
    }
 
    #header h1 a {
        margin-left: 1rem;
    }
 
    #header h2 span {
        margin-left: 1rem;
    }
 
    #extra-div-1 {
         display: none;
    }
}
 
#page-title {
    color: rgb(var(--dark-choco));
    font-style: italic;
}
 
h1, h2, h3, h4, h5, h6 {
    color: rgb(var(--darker));
}
 
#side-bar,
#interwiki {
    --sidebar-bg-color: var(--wonka-stream);
    --sideblock-heading-bg-color:  var(--dark-choco);
    --sidebar-media-bg-color: var(--lightheaded);
 
    --sideblock-heading-text-color: var(--brighter);
    --sidebar-links-text: var(--brighter);
}
 
#main-content {
    --tabs-bg: var(--brighter);
    --tabs-hover-bg:  var(--bloody);
    --tabs-selected-bg: var(--bloody);
    --tabs-selected-outline: var(--bloody);
    --tabs-bottom-border-color: var(--grassy);
 
    --tables-header-bg: var(--darker);
    --toc-header-bg-color: var(--darker);
    --toc-body-bg-color: var(--brighter);
 
    --footnotes-footer-colorbar-color:  var(--darker);
    --footnotes-footer-title-bg-color:  var(--darker);
    --footnotes-footer-bg-color: var(--brighter);
 
    --ui-icon-bg: var(--darker);
 
    --pagetags-title-bg: var(--darker);
    --pagetags-text-color: var(--darker);
    --pagetags-text-hover-bg-color: var(--darker);
}
 
html,
body {
    scrollbar-color: rgb(var(--peanut-butter)) rgb(var(--lightheaded));
}
 
.scp-image-block .scp-image-caption {
    background-color: rgb(var(--darker)) !important;
    color: rgb(var(--brighter));
}
 
.code {
    background-color: rgba(var(--code-color));
}
 
.cleanblock {
    background: url("https://scp-wiki.wdfiles.com/local--files/theme%3Acleaning-services/transparentmark.png") rgb(254, 254, 254) center no-repeat;
    background-size: 500px;
    border: solid;
    padding: 1px 15px;
}
 
.stickynote {
    width: 50%;
    min-height: 15em;
    border: transparent;
    margin: auto;
    padding: 1rem;
    background-color: rgb(254, 255, 156);
}
 
.tablered {
    --tables-header-bg: var(--bloody);
    --blockquote-bg-color: var(--bloody), 0.10;
    --code-color: var(--bloody), 0.10;
}
 
.tablegreen {
    --tables-header-bg: var(--grassy);
    --blockquote-bg-color: var(--grassy), 0.10;
    --code-color: var(--grassy), 0.10;
}
 
.tablenut {
    --tables-header-bg:  var(--dark-choco);
    --blockquote-bg-color:  var(--dark-choco), 0.10;
    --code-color:  var(--dark-choco), 0.10;
}

Footnotes

1. And a footnote, as you can see.