Swirling Ashes Theme

Link to article: Swirling Ashes 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");

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

(none)

```
code
```
```
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");
[[/module]]
[[>]]
[[module Rate]]
[[/>]]

[[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
]]

This is the Swirling Ashes theme, designed for use by articles set in the [[[rat's nest hub| Rat's Nest]]] canon.

Made by [[*user Croquembouche]] and named after [[*user faminepulse]]'s description of the skies in Oregon, US in September 2020.

The header goes through a 1 minute-long day/night cycle. Every third night, the fog briefly dissipates.

+ Usage

To get this theme on your page, include [[[theme:black-highlighter-theme|Black Highlighter]]] and optionally [[[component:bhl-dark-sidebar|BHL Dark Sidebar]]]:

[[div class="code"]]
@@[[include :scp-wiki:theme:black-highlighter-theme]]@@
@@[[include :scp-wiki:component:bhl-dark-sidebar]]@@
@@[[include :scp-wiki:theme:swirling-ashes]]@@
[[/div]]

To adjust the header text:

[[div class="code"]]
@@[[module CSS]]@@
:root {
@@  --@@header-title: "SCP Foundation";
@@  --@@header-subtitle: "Secure, Contain, Protect";
}
@@[[/module]]@@
[[/div]]

+ Theme colours

[[include :scp-wiki:component:theme-squares -=-
| color1-name=Industrial Sludge
| color1-variable=--dark-accent
| color1-info=rgb(63, 9, 143)
| color1-has-light-text=1
| color2-name=Bottom of the Drain
| color2-variable=--dark-gray-monochrome
| color2-info=rgb(26, 24, 26)
| color2-has-light-text=1
| subcolor1-name=Dawn
| subcolor1-variable=--sky-at-dawn
| subcolor1-info=@@ @@
| subcolor1-has-light-text=1
| subcolor2-name=Morning
| subcolor2-variable=--sky-at-morning
| subcolor2-info=@@ @@
| subcolor3-name=Daytime
| subcolor3-variable=--sky-at-daytime
| subcolor3-info=@@ @@
| subcolor4-name=Evening
| subcolor4-variable=--sky-at-evening
| subcolor4-info=@@ @@
| subcolor5-name=Dusk
| subcolor5-variable=--sky-at-dusk
| subcolor5-info=@@ @@
| subcolor5-has-light-text=1
| subcolor6-name=Night
| subcolor6-variable=--sky-at-night
| subcolor6-info=@@ @@
| subcolor6-has-light-text=1
]]

+ Source code

[[collapsible show="+ Show source code"]]

[[code type="css"]]
/* - == === BHL VARIABLES === == - */

/* This is a BHL theme, which is configuration-based, so the root element
 * contains variables that will affect the whole theme
 */
 :root {
    /* S-CSS-P integration */
    --theme-base: "black-highlighter";
    --theme-id: "swirling-ashes";
    --theme-name: "Swirling Ashes Theme";

    /* Colours */
    --dark-gray-monochrome: 26, 24, 26;
    --swatch-topmenu-bg-color: var(--dark-gray-monochrome);
    --swatch-menubg-color: var(--dark-gray-monochrome);
    --dark-accent: 63, 9, 143;
    --medium-accent: 81, 13, 181;
    --bright-accent: 105, 49, 186;
    --pale-accent: 128, 80, 200;

    /* Sky */
    --sky-at-dawn: 236, 112, 99;
    --sky-at-morning: 174, 214, 241;
    --sky-at-daytime: 249, 231, 159;
    --sky-at-evening: 248, 196, 113;
    --sky-at-dusk: 140, 50, 70;
    --sky-at-night: 50, 40, 67;
    --sky-length: 15;
    --sky-time: 60s;	

    /* Header adjustments */
    --header-title: "Rat's Nest";
    --header-subtitle: "let's begin at the end";

    /* Delete the default header background */
    --gradient-header: linear-gradient(transparent, transparent);
    --diagonal-stripes: linear-gradient(transparent, transparent);
}

/* - == === HEADER BACKGROUNDS === == - */

/* The header is made up of a million different stacked backgrounds.
 * Instead of fucking about with z-index, I've added backgrounds to
 * the ::before and ::after of various full-page elements in their
 * natural stacking order.
 */

/* The following pseudoelements each contain a different part of the
 * header background. They need to be drawn precisely over the header
 * and made unclickable so they don't interfere with the links up there.
 * They appear on the page in this order, so they'll also be drawn on
 * top of each other in this order.
 */
body::before,
div#container-wrap-wrap::before,
div#container-wrap::before,
div#container-wrap-wrap::after,
body::after {
    content: "";
    position: absolute;
    height: var(--header-height-on-desktop);
    width: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* The sky, which loops through a series of colours to evoke the
 * unstoppable passing of time
 */
body::before {
    background: linear-gradient(to top,
    		rgb(var(--sky-at-morning)) 0%,
    		rgb(var(--sky-at-morning)) 11%,
    		rgb(var(--sky-at-daytime)) 22%,
    		rgb(var(--sky-at-daytime)) 33%,
    		rgb(var(--sky-at-evening)) 44%,
    		rgb(var(--sky-at-dusk)) 55%,
    		rgb(var(--sky-at-night)) 66%,
    		rgb(var(--sky-at-night)) 77%,
    		rgb(var(--sky-at-dawn)) 88%,
    		rgb(var(--sky-at-morning)) 100%);
    background-size: 100% calc(var(--header-height-on-desktop) * var(--sky-length));
    -webkit-animation: sky linear var(--sky-time) infinite;
            animation: sky linear var(--sky-time) infinite;
}

@-webkit-keyframes sky {
    from {
    	background-position: 0 0;
    }

    to {
    	background-position: 0 calc(var(--header-height-on-desktop) * var(--sky-length));
    }
}

@keyframes sky {
    from {
    	background-position: 0 0;
    }

    to {
    	background-position: 0 calc(var(--header-height-on-desktop) * var(--sky-length));
    }
}

/* The city skyline */
div#container-wrap-wrap::before {
    background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/skyline.png');
    background-size: auto var(--header-height-on-desktop);
}

/* Two backgrounds: a white and blurred shine on the buildings,
 * taken from a brightness threshold of the original skyline
 * image; and a white-to-transparent gradient that uses the
 * original skyline image as a clipping mask. These appear in
 * the day and fade for the night to represent the sun's 
 * reflection on the buildings.
 */
div#container-wrap::before {
    background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/skyline-whitewash.png'),
    	url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/skyline-highlight.png');
    background-size: auto var(--header-height-on-desktop);
    -webkit-animation: shine ease-in-out var(--sky-time) infinite;
            animation: shine ease-in-out var(--sky-time) infinite;
}

@-webkit-keyframes shine {

    0%,
    40%,
    100% {
    	opacity: 0.2;
    }

    55%,
    77% {
    	opacity: 0;
    }
}

@keyframes shine {

    0%,
    40%,
    100% {
    	opacity: 0.2;
    }

    55%,
    77% {
    	opacity: 0;
    }
}

/* The final two pseudoelements contain the ashes: clouds that
 * roll past the city at ground level. Two elements are needed 
 * because the two layers of clouds have different widths and
 * move at different speeds.
 * The fade animation affords an unobscured view of the city
 * every 3rd night.
 */
div#container-wrap-wrap::after,
body::after {
    background-size: var(--ashes-width) var(--header-height-on-desktop);
    background-repeat: repeat-x;
    -webkit-animation: ashes-move linear var(--ashes-move-duration),
    	ashes-fade ease calc(var(--sky-time) * 3);
            animation: ashes-move linear var(--ashes-move-duration),
    	ashes-fade ease calc(var(--sky-time) * 3);
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}

div#container-wrap-wrap::after {
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/ashes-large.png');
    --ashes-move-duration: 27s;
    --ashes-width: 500px;
    --ashes-opacity: 0.5;
}

body::after {
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/ashes-small.png');
    --ashes-move-duration: 20s;
    --ashes-width: 800px;
    --ashes-opacity: 0.4;
}

@-webkit-keyframes ashes-move {
    from {
    	background-position: 0 0;
    }

    to {
    	background-position: var(--ashes-width) 0;
    }
}

@keyframes ashes-move {
    from {
    	background-position: 0 0;
    }

    to {
    	background-position: var(--ashes-width) 0;
    }
}

@-webkit-keyframes ashes-fade {

    0%,
    85%,
    96%,
    100% {
    	opacity: var(--ashes-opacity);
    }

    88.66%,
    92.33% {
    	opacity: 0.1;
    }
}

@keyframes ashes-fade {

    0%,
    85%,
    96%,
    100% {
    	opacity: var(--ashes-opacity);
    }

    88.66%,
    92.33% {
    	opacity: 0.1;
    }
}

/* - == === BODY BACKGROUNDS === == - */

/* This psuedolement contains the faint purple patchy smog on the page
 * just below the header, as a thematic transition from dark to light.
 */
#content-wrap {
    position: relative;
}

#content-wrap::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-repeat: repeat-x;
    pointer-events: none;
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/purple-smoke.png');
    opacity: 0.2;
}

/* - == === MISCELLANEOUS === == - */

/* Add a pinch of extra contrast to the login info */
#login-status {
    background: rgba(var(--dark-accent), 0.3);
    padding-left: 0.5rem;
}

/* Respect user motion settings */
@media screen and (prefers-reduced-motion: reduce) {

    body::before,
    div#container-wrap::before,
    div#container-wrap-wrap::after,
    body::after {
    	-webkit-animation: none;
    	        animation: none;
    }
}
[[/code]]

Sidebar Code:
[[code type="css"]]
/* - == === BHL VARIABLES === == - */

/* This is a BHL theme, which is configuration-based, so the root element
 * contains variables that will affect the whole theme
 */
 :root {
    /* S-CSS-P integration */
    --theme-base: "black-highlighter";
    --theme-id: "swirling-ashes";
    --theme-name: "Swirling Ashes Theme";

    /* Colours */
    --dark-gray-monochrome: 26, 24, 26;
    --swatch-topmenu-bg-color: var(--dark-gray-monochrome);
    --dark-accent: 63, 9, 143;
    --medium-accent: 81, 13, 181;
    --bright-accent: 105, 49, 186;
    --pale-accent: 128, 80, 200;

    /* Sky */
    --sky-at-dawn: 236, 112, 99;
    --sky-at-morning: 174, 214, 241;
    --sky-at-daytime: 249, 231, 159;
    --sky-at-evening: 248, 196, 113;
    --sky-at-dusk: 140, 50, 70;
    --sky-at-night: 50, 40, 67;
    --sky-length: 15;
    --sky-time: 60s;

    /* Header adjustments */
    --header-title: "Rat's Nest";
    --header-subtitle: "let's begin at the end";

    /* Delete the default header background */
    --diagonal-stripes: linear-gradient(transparent, transparent);
}

/* Respect user motion settings */
@media screen and (prefers-reduced-motion: reduce) {

    body::before,
    div#container-wrap::before,
    div#container-wrap-wrap::after,
    body::after {
    	-webkit-animation: none;
    	        animation: none;
    }
}
[[/code]]

[[/collapsible]]

[[/iftags]]
[[include component:bhl-dark-sidebar]]
[[include :scp-wiki:component:croqstyle -=- ]]
[[module CSS]]
@import url('https://scp-wiki.wdfiles.com/local--code/theme%3Aswirling-ashes/1');
[[/module]]

[[include :scp-wiki:component:interwiki-style
| priority=3
| theme=https://scp-wiki.wdfiles.com/local--code/theme%3Aswirling-ashes/2
]]

Swirling Ashes Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source