Motion Night

This theme was created by cakelord114514 based on old liminal theme created by stephlynch.

To import it into your pages, use:

[[include :backrooms-pantheon:theme:motion-night]]

BEFORE any other CSS you want to add.

Examples

This is the Image Block component.

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.

---

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 a tab view.

Tabulation

Hey look, more text here.

How quaint.

Long Tab

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

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

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

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

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

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

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

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

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

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

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

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

This empty tab has a really long name for some odd reason. I wonder why?

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

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

---

That's a horizontal rule

Nested blockquotes

This is a	table
You should know	how to make these
already

[[div class="darkblock"]]

[[/div]]

[[div class="dark-styled-quote"]]

[[/div]]

[[div class="lightblock"]]

[[/div]]

[[div class="styled-quote"]]

[[/div]]

---

Foot¹
I put this
Text here
So you can see
Different kind
Of format
And how other
Things^are
Functioning_YEAH
Including link that doesn't exist
and link that does exist!
And special warning
Or something less risky
Or simply safe!

---

+ show block

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root{
   --logo-image: url(http://backrooms-pantheon-sandbox.wikidot.com/local--files/cakelord-codingground/logo);
   --header-title: "THE BACKROOMS";
   --header-subtitle: "You're in my domain now";
   --header-font: 'Montserrat', monospace;
   --swatch-topmenu-border-color: 34, 0, 78;
   --gradient-topmenu: linear-gradient(to bottom, rgb(34, 0, 78) 0%, rgb(34, 0, 78) 100%);    --white-monochrome: 242,242,242;
    --very-light-gray-monochrome: 116,122,140;
    --pale-gray-monochrome: 38, 38, 72;
    --light-gray-monochrome: 38, 38, 72;
    --gray-monochrome: 41,47,64;
    --dark-gray-monochrome: 41,47,64;
    --black-monochrome: 38,38,38;
    --bright-accent: 217,117,30;
    --medium-accent: 54,74,115;
    --dark-accent: 41,47,64;
    --pale-accent: 41,47,64;
    --alt-accent: 242,136,75;
    --link-color: 117, 36, 201;
    --visited-link-color:60, 68, 130;
--swatch-text-general: 255,255,255;
--swatch-background: 23, 6, 53;
--swatch-menutxt-dark-color: 255,255,255;
--swatch-menubg-color: none;
}

body{
    background-color:rgb(17, 5, 40);
}

#header, #top-bar {
        --wght: 400;
        margin: 0 auto;
        max-width: 61.25rem;
    }

#skrollr-body {
    background-image: none;
    background-repeat: repeat;
    background-size: 0.25em 0.25em;
    width: 100%;
    height: 7.5rem;
    background-color: black;
}

#header h1 a::before, #header h2 span::before {
   text-shadow: none;
    font-weight: 200;
    letter-spacing: .5rem;
}

#header::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: -18px;
    background-image: var(--logo-image);
    background-size: auto 13rem;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.4;
}

@supports (display:grid) {
    #lock-info, div.note, input.checkbox, input.text, textarea {
        border: .0625rem solid rgba(var(--swatch-border-color), .25);
        background-color: rgb(17 5 40);
        scrollbar-color: rgba(var(--swatch-tertiary-color), .6) rgba(var(--swatch-tertiary-color), .1);
        color: rgb(var(--swatch-text-general));
        font-family: var(--body-font);
    }
}

#content-wrap:after {
    content: "";
    display: block;
    position: absolute;
    height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
    width: calc(100% + 100%);
    z-index: -5;
    background-image: url(http://backrooms-pantheon-sandbox.wikidot.com/local--files/cakelord-codingground/doooot.png);
    background-repeat: repeat-x;
    background-position-y: -280px;
}

#container {
     background-image: none;
    /* background-size: 0.25em 0.25em; */
    /* background-repeat: repeat; */
    /* background-attachment: fixed; */
}

#container-wrap-wrap {
    position: relative;
    overflow: hidden;
}

.lightblock{
background-color: rgb(var(--white-monochrome));
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, .25);
    color:rgb(17, 5, 40);
}

    .yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected {
        flex-grow: 2;
        margin: 0;
        background-color: rgb(34, 0, 78) !important;
        padding: 0;
    }

    .yui-navset .yui-nav .selected a:active, .yui-navset .yui-nav .selected a:focus {
        background-color: rgb(34, 0, 78);
        color: #fcfcfc;
        color: rgb(var(--swatch-text-light));
    }

    .yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content {
        border-color: #aaa;
        border-color: rgb(var(--swatch-tertiary-color));
        background-color: rgb(34, 0, 78);
    }

    .hovertip {
        -webkit-animation-name: fade-in;
        -webkit-animation-duration: .6s;
        -webkit-animation-timing-function: cubic-bezier(.4,0,.2,1);
        -webkit-animation-delay: .3s;
        -webkit-animation-direction: alternate;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-fill-mode: forwards;
        opacity: 0;
        animation-duration: .6s;
        animation-timing-function: cubic-bezier(.4,0,.2,1);
        animation-delay: .3s;
        animation-iteration-count: 1;
        animation-direction: alternate;
        animation-fill-mode: forwards;
        animation-name: fade-in;
        border: .0625rem solid rgb(var(--swatch-border-color)) !important;
        background-color: rgb(38, 38, 72) !important;
        width: 25% !important;
        color: rgb(var(--swatch-text-tertiary-color));
    }
}

@media only screen and (max-width: 760px) {
    #content-wrap:after {
        content: "";
        display: block;
        position: absolute;
        height: calc(100vh - calc(var(--final-header-height-on-mobile, 10.125rem)));
        width: calc(100% + 100%);
        z-index: -5;
        background-image: url(http://backrooms-pantheon-sandbox.wikidot.com/local--files/cakelord-codingground/doooot.png);
        background-repeat: repeat-x;
        background-position-y: -283px;
        top: 168px;
    }
}

Footnotes

1. Note