/* - == === 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;
}
}
