Cleaning Services Theme

Link to article: Cleaning Services Theme.

@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/normalize.min.css");
@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/black-highlighter.min.css");

@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Acleaning-services/1);

```
font-size: 1.5em;
```
```
font-family: var(--header-font);
```
```
font-family: var(--title-font);
```
```
font-family: var(--body-font);
```

```
code
```
```
code
```
```
blockquote
```
```
cleanblock
```
```
cleanblock
```
```
stickynote
```
```
stickynote
```
```
tablered
```
```
code
```
```
blockquote
```
```
tablered
```
```
tablegreen
```
```
code
```
```
blockquote
```
```
tablegreen
```
```
tablenut
```
```
code
```
```
blockquote
```
```
tablenut
```

[[iftags +theme]]

[[module CSS]]
@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/normalize.min.css");
@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/black-highlighter.min.css");
[[/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]]
[[/>]]

+ What's This?

This is the Cleaning Services theme by [[*user 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:

[[div class="code"]]
@@[[include :scp-wiki:theme:black-highlighter-theme]]@@
@@[[include :scp-wiki:theme:cleaning-services]]@@
[[/div]]

@@ @@

[[collapsible show="+ You see the 'Cleaning Services Theme' title?" hide="- Want to change it?"]]
Only optional, but if you like to switch the font of the top of your page, you can use the code below:

[[div class="code"]]
@@[[module CSS]]@@
@@#page-title {@@
@@    font-family: var(--header-font);@@
@@}@@
@@[[/module]]@@
[[/div]]

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

//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 [[[theme:black-highlighter-theme|here.]]]//

----

[[include component:image-block name=https://scp-wiki.wdfiles.com/local--files/theme%3Acleaning-services/173canon.jpg|caption=Holy fucking bingle|width=300px]]

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

[[[theme:cleaning-services|A link you've probably visited.]]]
[# An unvisited link.]

[[collapsible show="+ This is a collapsible" hide="- Hide 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
[[/collapsible]]

----

@@ @@

[[tabview]]
[[tab Tab]]
This is a tab.
[[/tab]]
[[tab Tabulation]]
This is also a tab,

with a second line to boot.
[[/tab]]
[[tab 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.
[[/tab]]
[[tab Why Is This Tab's Title Is So Obnoxiously Long?]]
I don't know, why're you asking me?
[[/tab]]
[[tab Empty Tab]]

[[/tab]]
[[tab Empty Tab]]

[[/tab]]
[[tab Empty Tab]]

[[/tab]]
[[tab Empty Tab]]

[[/tab]]
[[tab Empty Tab]]

[[/tab]]
[[tab Empty Tab]]

[[/tab]]
[[tab Empty Tab]]
I am the boogeyman.
[[/tab]]
[[/tabview]]

@@ @@

[[div class="blockquote"]]
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.[[footnote]]And a footnote, as you can see.[[/footnote]]
[[/div]]

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

----

+ Extra Divs

@@ @@
[[div class="cleanblock"]]
= This is a blockquote containing the Safe Cleanup Professionals logo.

= **{{@@[[div class="cleanblock"]]@@}}**
[[/div]]
@@ @@

[[div class="stickynote"]]
@@ @@

@@ @@
= This is a sticky note div.

= **{{@@[[div class="stickynote"]]@@}}**
[[/div]]
@@ @@

[[div class="tablered"]]
||~ This is a ||~ red table. ||
|| I hope you || don't mind ||
|||| the roses. ||
@@ @@
[[div class="code"]]
= This is some bloody code, yo.
[[/div]]
@@ @@
[[div class="blockquote"]]
= And a blockquote to boot!

= **{{@@[[div class="tablered"]]@@}}**
[[/div]]
[[/div]]

@@ @@

[[div class="tablegreen"]]
||~ But maybe ||~ you like it green. ||
|| Just a little || taste of ||
|||| mother nature. ||
@@ @@
[[div class="code"]]
= This is some Lorax code, yo.
[[/div]]
@@ @@
[[div class="blockquote"]]
= Oh, look: Another blockquote.

= **{{@@[[div class="tablegreen"]]@@}}**
[[/div]]
[[/div]]

@@ @@

[[div class="tablenut"]]
||~ Maybe you have ||~ a taste for peanuts. ||
|| Look away || and your neck ||
|||| will get snapped. ||
@@ @@
[[div class="code"]]
= This is some nutty code, yo.
[[/div]]
@@ @@
[[div class="blockquote"]]
= Voila, it's //another// blockquote.

= **{{@@[[div class="tablenut"]]@@}}**
[[/div]]
[[/div]]

@@ @@

----

[[=]]
[[div style="font-size: 1.5em;"]]
[[span style="font-family: var(--header-font);"]]Header font is Oswald.[[/span]]
[[span style="font-family: var(--title-font);"]]Title and Monospace font is Roboto Mono.[[/span]]
[[span style="font-family: var(--body-font);"]]Body and UI font is Noto Sans JP.[[/span]]
[[/div]]
[[/=]]

----

+ Source Code

@@ @@
[[collapsible]]
[[code type="CSS"]]
@import url('https://fonts.bunny.net/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.bunny.net/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.bunny.net/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;
}
[[/code]]
[[/collapsible]]
@@ @@

[[/iftags]]

[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Acleaning-services/1);
[[/module]]

Cleaning Services Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source