Oboebandgeek99's Author Page

---

+ Show component code

@supports((display: -ms-grid) or (display: grid)) {
:root {
    /* header measurements */
    --header-height-on-desktop: 10rem;
    --header-height-on-mobile: 10rem;
    --header-h1-font-size: -webkit-calc(2rem + (2.5 - 2) * ((100vw - 18.750rem) / (60 - 18.750)));
    --header-h1-font-size: -moz-calc(2rem + (2.5 - 2) * ((100vw - 18.750rem) / (60 - 18.750)));
    --header-h1-font-size: calc(2rem + (2.5 - 2) * ((100vw - 18.750rem) / (60 - 18.750)));
}
 
#header {
    background: none;
}
 
#header::before {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0.75rem;
    background-image: var(--logo-image);
    background-repeat: no-repeat;
    background-position: center -3.5rem;
    -webkit-background-size: auto 8rem;
    -moz-background-size: auto 8rem;
    -o-background-size: auto 8rem;
    background-size: auto 8rem;
    background-position: center top;
    opacity: 0.45;
    pointer-events: none;
}
 
#header h1,
#header h1 a,
#header h1 a::before {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    max-height: inherit;
    z-index: 0;
}
 
#header>h1>a>span {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    max-width: inherit;
}
 
#header h1 {
    height: -webkit-calc(100% - 2.25rem);
    height: -moz-calc(100% - 2.25rem);
    height: calc(100% - 2.25rem);
}
 
#header h1 a::before,
#header h1 a {
    text-align: center;
    line-height: 0.8;
}
 
#header h2,
#header h2 span,
#header h2 span::before {
    position: absolute;
    left: 0;
    top: 0.15em;
    margin-left: 0;
    padding: 0;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -moz-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    max-height: inherit;
    z-index: 0;
    text-transform: uppercase;
    pointer-events: none;
}
 
#login-status {
    min-height: -webkit-calc(var(--base-font-size) * 1.5);
    min-height: -moz-calc(var(--base-font-size) * 1.5);
    min-height: calc(var(--base-font-size) * 1.5);
    -webkit-border-radius: .0625rem;
    -moz-border-radius: .0625rem;
    border-radius: .0625rem;
    -webkit-border-radius: var(--border-radius-width);
    -moz-border-radius: var(--border-radius-width);
    border-radius: var(--border-radius-width);
    color: rgb(var(--pale-gray-monochrome));
    background-color: rgba(0, 0, 0, 0);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    left: 3%;
    right: initial;
}
 
#login-status .printuser {
    --wght: 900;
    position: relative;
    top: 0;
    left: 0;
    color: rgb(var(--swatch-menutxt-light-color));
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding: 0.25rem;
    margin: 0;
    font-weight: 900;
}
 
#login-status #my-account {
    --wght: 300;
    color: rgb(var(--pale-gray-monochrome));
    font-weight: 300;
}
 
#login-status #account-topbutton {
    border: initial;
    padding: 0.5em 0.5em 0.5em 0.25em;
    position: relative;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    font-size: 1em;
}
 
#account-options {
    width: auto;
    padding: 0.5em;
    border-color: rgba(var(--bright-accent));
    background: var(--gradient-header);
    color: rgb(var(--swatch-text-light));
}
 
#account-options ul li a {
    color: rgb(var(--swatch-text-light));
}
 
#account-options li a:hover {
    color: rgb(var(--swatch-text-light));
    text-decoration: underline;
}
 
@media only screen and (min-width: 769px) {
    #search-top-box {
        right: 3%;
        top: 0.5rem;
    }
 
    #search-top-box-form>input,
    #search-top-box-form>input:hover,
    #search-top-box-form>input:focus {
        background: rgb(var(--black-monochrome));
    }   
 
    #search-top-box-form>input {        
        -webkit-box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-dark-color));
        -moz-box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-dark-color));
        box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-dark-color));
    }
 
    #search-top-box-form>input:hover,
    #search-top-box-form>input:focus {
        -webkit-box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-medium-dark-color));
        -moz-box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-medium-dark-color));
        box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-medium-dark-color));
    }
 
    #search-top-box-form input[type="submit"],
    #search-top-box-form input[type="submit"]:focus, 
    #search-top-box-form input[type="submit"]:hover {  
        border: none;
        border-left: 0.0625rem solid rgb(var(--swatch-primary-darkest));
        -webkit-box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-dark-color));
        -moz-box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-dark-color));
        box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-dark-color));
    }
 
    #search-top-box-form input[type="submit"] {
        background: rgb(var(--swatch-primary-darkest));
        color: rgb(var(--swatch-menutxt-light-color));
    }
 
    #search-top-box-form input[type="submit"]:focus, 
    #search-top-box-form input[type="submit"]:hover {
        background: rgb(var(--swatch-primary));
        -webkit-box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-medium-dark-color));
        -moz-box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-medium-dark-color));
        box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-medium-dark-color));
    }
}
 
#page-title {
    text-align: center;
}
 
@media only screen and (max-width:768px) {
    :root {
        --header-h1-font-size: -webkit-calc(2rem + (2.5 - 2) * ((100vw - 18.750rem) / (60 - 18.750)));
        --header-h1-font-size: -moz-calc(2rem + (2.5 - 2) * ((100vw - 18.750rem) / (60 - 18.750)));
        --header-h1-font-size: calc(2rem + (2.5 - 2) * ((100vw - 18.750rem) / (60 - 18.750)));
    }
 
    #header h1,
    #header h1 a,
    #header h1 a::before {
        top: 0.25rem;
    }
 
    #header h2,
    #header h2 a,
    #header h2 a::before {
        top: 0;
    }
 
    #header h2 span {
        margin-top: -webkit-calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 + .25rem);
    margin-top: -moz-calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 + .25rem);
    margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - .25rem);
    }
}

+ Show component code

@supports((display: -ms-grid) or (display: grid)) {
    @media only screen and (min-width: 769px) {
        #side-bar .close-menu {
            display: block;
            position: fixed;
            top: 0.25rem;
            left: 0.5rem;
            width: 3rem;
            opacity: 1;
            pointer-events: all;
        }
 
        #side-bar .close-menu img {
            color: transparent;
        }
 
        #side-bar .close-menu::before,
        #side-bar .close-menu::after {
            content: "";
            box-sizing: border-box;
            position: fixed;
            display: block;
            top: 0.25rem;
            left: 0.5rem;
            width: 3rem;
            height: 3rem;
            padding: 0;
            margin: 0;
            text-align: center;
            pointer-events: all;
            cursor: pointer;
            -webkit-transition:
                opacity var(--sidebar-transition-timing);
            -o-transition:
                opacity var(--sidebar-transition-timing);
            -moz-transition:
                opacity var(--sidebar-transition-timing);
            transition:
                opacity var(--sidebar-transition-timing);
        }
 
        #side-bar .close-menu::before {
            --mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg height='32px' id='Layer_1' style='enable-background:new 0 0 32 32;' version='1.1' viewBox='0 0 32 32' width='32px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z'/%3E%3C/svg%3E");
            z-index: -1;
            background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important;
            -webkit-mask: var(--mask);
            mask: var(--mask);
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: 50% 50%;
            mask-position: 50% 50%;
            -webkit-mask-size: 60%;
            mask-size: 60%;
        }
 
        #side-bar .close-menu::after {
            z-index: -2;
            background-color: var(--toggle-button-bg, rgb(var(--swatch-menubg-color))) !important;
            -webkit-border-radius: var(--toggle-roundness, 50%);
            -moz-border-radius: var(--toggle-roundness, 50%);
            border-radius: var(--toggle-roundness, 50%);
            border: var(--toggle-border-color, rgb(var(--swatch-border-color))) var(--toggle-border-width, 0.25rem) solid;
        }
 
        #side-bar:focus-within .close-menu::before,
        #side-bar:focus-within .close-menu::after {
            opacity: 0;
        }
 
        #side-bar {
            display: block;
            position: fixed;
            top: 0;
            left: -webkit-calc(var(--sidebar-width-on-desktop)*-1);
            left: -moz-calc(var(--sidebar-width-on-desktop)*-1);
            left: calc(var(--sidebar-width-on-desktop)*-1);
            z-index: 10;
            -webkit-transition:
                left var(--sidebar-transition-timing);
            -o-transition:
                left var(--sidebar-transition-timing);
            -moz-transition:
                left var(--sidebar-transition-timing);
            transition:
                left var(--sidebar-transition-timing);
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            margin-top: 0;
        }
 
        #side-bar:focus-within {
            left: 0;
        }
 
        #side-bar .side-block {
            margin-top: 1rem;
            background-color: rgb(0, 0, 0, 0);
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            border-left-width: 0px;
            border-right-width: 0px;
        }
 
        #main-content::before {
            content: "";
            display: block;
            position: fixed;
            top: 0;
            right: 0;
            z-index: -1;
            opacity: 0;
            -webkit-transition:
                opacity var(--sidebar-transition-timing),
                width var(--sidebar-transition-timing);
            -o-transition:
                opacity var(--sidebar-transition-timing),
                width var(--sidebar-transition-timing);
            -moz-transition:
                opacity var(--sidebar-transition-timing),
                width var(--sidebar-transition-timing);
            transition:
                opacity var(--sidebar-transition-timing),
                width var(--sidebar-transition-timing);
            margin-left: var(--sidebar-width-on-desktop);
            background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat;
            padding-right: 0;
            width: 100%;
            height: 100vh;
            pointer-events: none;
            z-index: 99;
        }
 
        #side-bar:focus-within~#main-content::before {
            width: -webkit-calc(100% - var(--sidebar-width-on-desktop));
            width: -moz-calc(100% - var(--sidebar-width-on-desktop));
            width: calc(100% - var(--sidebar-width-on-desktop));
            opacity: 1;
            pointer-events: all;
        }
 
        #content-wrap {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -webkit-flex-direction: row;
            -moz-box-orient: horizontal;
            -moz-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            width: -webkit-calc(100vw - (100vw - 100%));
            width: -moz-calc(100vw - (100vw - 100%));
            width: calc(100vw - (100vw - 100%));
            min-height: -webkit-calc(100vh - -webkit-calc(var(--final-header-height-on-desktop, 10.125rem)));
            min-height: -moz-calc(100vh - -moz-calc(var(--final-header-height-on-desktop, 10.125rem)));
            min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
            -webkit-box-flex: 2;
            -webkit-flex-grow: 2;
            -moz-box-flex: 2;
            -ms-flex-positive: 2;
            flex-grow: 2;
            height: auto;
            position: relative;
            margin: 0 auto;
            max-width: inherit;
        }
 
        #main-content {
            width: 100%;
            position: initial;
            max-height: 100%;
            padding: 2rem 1rem;
            width: 45.8rem;
            max-width: 45.8rem;
            margin: 0 auto;
        }
 
        @media not all and (min-resolution:.001dpcm) {
            @supports (-webkit-appearance:none) {
                #side-bar {
                    -webkit-transition:
                        left var(--sidebar-transition-timing),
                        padding-right var(--sidebar-transition-timing),
                        background-color var(--sidebar-transition-timing);
                    -o-transition:
                        left var(--sidebar-transition-timing),
                        padding-right var(--sidebar-transition-timing),
                        background-color var(--sidebar-transition-timing);
                    -moz-transition:
                        left var(--sidebar-transition-timing),
                        padding-right var(--sidebar-transition-timing),
                        background-color var(--sidebar-transition-timing);
                    transition:
                        left var(--sidebar-transition-timing),
                        padding-right var(--sidebar-transition-timing),
                        background-color var(--sidebar-transition-timing);
                    padding-right: 0;
                    background-color: rgb(0, 0, 0, 0);
                    pointer-events: all;
                    overflow-x: visible;
                    overflow-y: visible;
                    z-index: 999;
                }
 
                #side-bar::-webkit-scrollbar {
                    opacity: 0;
                    -webkit-transition: opacity var(--sidebar-transition-timing);
                    transition: opacity var(--sidebar-transition-timing);
                }
 
                #side-bar .close-menu::before {
                    z-index: 999;
                }
 
                #side-bar .close-menu::after {
                    z-index: 998;
                }
 
                #side-bar:hover .close-menu::before {
                    opacity: 0;
                }
 
                #side-bar:hover {
                    left: 0;
                    background-color: rgba(var(--swatch-menubg-color), 1);
                    padding-right: 0;
                }
 
                #side-bar:hover::-webkit-scrollbar {
                    opacity: 1;
                }
 
                #side-bar:hover~#main-content::before {
                    width: -webkit-calc(100% - var(--sidebar-width-on-desktop));
                    width: -moz-calc(100% - var(--sidebar-width-on-desktop));
                    width: calc(100% - var(--sidebar-width-on-desktop));
                    opacity: 1;
                    pointer-events: all;
                }
            }
        }
    }
}

+ Show code

/*
    Calamity Theme
    [2021 Wikidot Theme]
    Created by Oboebandgeek99
    Based on Swirling Ashes Theme created by Croquembouche.
    The UnHuman logo was created by Oboebandgeek99 based on an image in the Public Domain. Licensed under CC-BY-SA 3.0.
*/
 
@import url('https://fonts.googleapis.com/css?family=Cabin+Sketch|Ubuntu|Space+Mono|Baumans&display=swap');
 
/* BHL Vars */
 
:root {
    --theme-base: "black-highlighter";
    --theme-id: "calamity";
    --theme-name: "Calamity Theme";
 
    /* Header */
    --logo-image: none;
    --header-title: "UnHuman";
    --header-subtitle: "Life After The End";
 
    /* Typefaces */
    --body-font: "Ubuntu", sans-serif;
    --header-font: "Cabin Sketch", sans-serif;
    --title-font: "Baumans", sans-serif;
    --mono-font: "Space Mono", "Andale Mono", "Courier New", Courier, monospace;
 
    /* Standard Colors */
    --black-monochrome: var(--sky-at-night);
    --dark-gray-monochrome: var(--sky-at-evening);
    --pale-accent: 150, 150, 254; 
    /* lavender, for visited links */
    --bright-accent: 51, 201, 208;
    /* bright turquoise */
    --medium-accent: 23, 152, 158;
    /* darker turquoise */
    --dark-accent: 90, 90, 152;
    /* darker purple */
    --alt-accent: var(--sky-at-dawn);
    /* pinkish red, for newpage links */
 
    /* Sky */
    --sky-at-dawn: 221, 93, 112;
    --sky-at-morning: 131, 192, 233;
    --sky-at-daytime: 104, 153, 186;
    --sky-at-evening: 87, 98, 106;
    --sky-at-dusk: 99, 100, 90;
    --sky-at-night: 21, 25, 43;
    --sky-length: 15;
    --sky-time: 65s;
 
    /* Delete the default header background */
    --gradient-header: linear-gradient(transparent, transparent);
    --diagonal-stripes: linear-gradient(transparent, transparent);
 
    /* Background Colors */
    --background-gradient-color: var(--sky-at-daytime);
 
    /* Primary Theme Colors */
    --swatch-primary: var(--medium-accent);
    --swatch-primary-darker: var(--pale-accent);
 
    /* Primary Menu Colors */
    --swatch-menubg-medium-dark-color: var(--medium-accent);
 
    /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
    --swatch-secondary-color: var(--bright-accent);
    --swatch-tertiary-color: var(--pale-accent);
 
    /* Link Colors */
    --link-color: 110, 110, 170;
 
    /* Spacing Measurements */
 
    /* header measurements */
    --header-height-on-desktop: 10rem;
    --header-height-on-mobile: 10rem;
 
    /* final values */
    --header-h1-font-size: calc(var(--base-font-size) * 4);
    --header-h2-font-size: calc(var(--base-font-size) * 1.6);
 
    /*Toggle Colors */
    --toggle-border-color: rgb(var(--dark-accent));
    --toggle-icon-color: rgb(var(--pale-accent));
    --toggle-roundness: 40%;
 
    /* Login Gradient */
    --login-gradient: linear-gradient(
    to top,
    rgb(var(--dark-accent)) 0%,
     rgb(var(--medium-accent)) 100%
    );
 
    /* Ayers Info Bar */
    --barColour: #5A5A98; 
    --linkColour: #FCFCFC; 
 
}
 
/* Remove text shadow from headers */
#header h1 a::before,
#header h2 span::before {
    --text-shadow: none;
    text-shadow: none;
}
 
/* Subtitle size and case */
#header h2,
#header h2::before,
#header h2 span,
#header h2 span::before {
    text-transform: none;
}
 
/* Tab Selected Color */
.yui-navset .yui-nav .selected, 
.yui-navset .yui-nav .selected a:focus {
    background-color: rgb(var(--dark-accent));
}
 
.yui-navset .yui-nav {
    color: rgb(var(--black-monochrome));
    background-color: rgb(var(--pale-accent));
}
 
/* Header Logos -
 * This calculates the distance between the two images that make up the 
 * UnHuman logo, measured in rems (root ems - an em as defined by the root 
 * font size) from center.
 */
 
#header::before {
    display: none;
}
 
div#extra-div-1, 
div#extra-div-2 {
    height: 8rem;
    width: 100%;
    top: 1rem;
    position: absolute;
}
 
div#extra-div-1 {
    background: url("https://scp-wiki.wdfiles.com/local--files/theme%3Acalamity/unhuman-left-logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: calc(50% - 9rem) 80%;
}
 
div#extra-div-2 {
    background: url("https://scp-wiki.wdfiles.com/local--files/theme%3Acalamity/unhuman-right-logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: calc(50% + 9rem) 80%;
}
 
/* Header on Mobile */
@media only screen and (max-width: 1024px) {
 
    :root{
    --header-h1-font-size: calc(var(--base-font-size) * 2.65);
    --header-h2-font-size: calc(var(--base-font-size) * 1.25);
     }
 
    div#extra-div-1 {
      background-position: calc(50% - 6rem) 80%;
    }
 
    div#extra-div-2 {
      background-position: calc(50% + 6rem) 80%;
    }
}
 
/* Login Status */
#login-status .printuser {
    color: rgb(var(--dark-accent));
    text-shadow: rgba(var(--white-monochrome), .7) 1px 0px, 
                 rgba(var(--white-monochrome), .7) 0px 1px, 
                 rgba(var(--white-monochrome), .7) -1px 0px, 
                 rgba(var(--white-monochrome), .7) 0px -1px;
}
 
#login-status #my-account {
    color: rgb(var(--dark-accent));
    text-shadow: rgba(var(--white-monochrome), .7) 1px 0px, 
                 rgba(var(--white-monochrome), .7) 0px 1px, 
                 rgba(var(--white-monochrome), .7) -1px 0px, 
                 rgba(var(--white-monochrome), .7) 0px -1px;
}
 
#account-options {
    width: auto;
    padding: 0.5em;
    border-color: rgba(var(--bright-accent));
    background: var(--login-gradient);
    color: rgb(var(--swatch-text-light));
}
 
/* search box */
#search-top-box-form>input,
#search-top-box-form>input:hover,
#search-top-box-form>input:focus {
    background: rgb(var(--dark-accent));
}   
 
#search-top-box-form input[type="submit"] {
    background: rgb(var(--medium-accent));
}
 
#search-top-box input.empty {
    color: rgba(var(--white-monochrome));
}
 
/* Horizontal rule */
hr {
    border-top: 1px solid rgb(var(--medium-accent));
    height: 0px;
    border-bottom: 1px solid rgb(var(--dark-accent));
    background: rgba(0, 0, 0, 0);
}
 
/* Blockquote */
blockquote,
.blockquote,
div.blockquote {
    border-style: solid;
    border-color: rgb(var(--medium-accent));
    background-color: rgba(var(--pale-accent), 0.1);
    margin: 1em 0;
}
 
/* table */
table.wiki-content-table th {
     background: rgb(var(--medium-accent));
     color: rgb(var(--white-monochrome));
     border-color: rgb(var(--pale-accent));
}
 
/* Side Bar Touch Up */
#side-bar .heading p {
    font-family: var(--title-font);
    --text-shadow: none;
    text-shadow: none;
    color: rgb(62, 62, 104);
}
 
/* Header Background - adapted from Croquembouche's Swirling Ashes theme */
body::before {
    content: "";
    position: absolute;
    height: var(--header-height-on-desktop); width: 100%; top: 0; left: 0;
    pointer-events: none;
}
 
body::before {
    background: linear-gradient(
                  to top,
                  rgb(var(--sky-at-morning)) 0%,
                  rgb(var(--sky-at-morning)) 11%,
                  rgb(var(--sky-at-dawn)) 22%,
                  rgb(var(--sky-at-night)) 33%,
                  rgb(var(--sky-at-night)) 44%,
                  rgb(var(--sky-at-dusk)) 55%,
                  rgb(var(--sky-at-evening)) 66%,
                  rgb(var(--sky-at-daytime)) 77%,
                  rgb(var(--sky-at-daytime)) 88%,
                  rgb(var(--sky-at-morning)) 100%
                );
    background-size: 100% calc(var(--header-height-on-desktop)
                               * var(--sky-length));
    animation: sky linear var(--sky-time) infinite;
}
 
@keyframes sky {
    from { background-position: 0 calc(var(--header-height-on-desktop) * var(--sky-length)); }
    to { background-position: 0 0; }
}
 
/* Rain - adapted from EstrellaYoshte's Christmas theme */
#header-extra-div-1 {
    display: block;
    height: 10rem;
    width: 99.4vw;
    position: absolute;
    left: calc((-100vw + 100%)/2);
    top: 0%
    background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Acalamity/rain1.png');
    background-repeat: repeat;
    background-size: 230px;
    pointer-events: none;
    animation: rainOne 1.7s infinite linear, 
               rainFade var(--sky-time) ease;
    animation-iteration-count: infinite;
    filter: blur(.9px);
}
 
#header-extra-div-2 {
    display: block;
    height: 10rem;
    width: 99.4vw;
    position: absolute;
    left: calc((-100vw + 100%)/2);
    top: 0%;
    background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Acalamity/rain1.png');
    background-repeat: repeat;
    background-size: 370px;
    pointer-events: none;
    animation: rainTwo 1.2s infinite linear,
               rainFade var(--sky-time) ease;
    animation-iteration-count: infinite;
    filter: blur(0.4px);
}
 
#header-extra-div-3 {
    display: block;
    height: 10rem;
    width: 99.4vw;
    position: absolute;
    left: calc((-100vw + 100%)/2);
    top: 0%;
    background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Acalamity/rain1.png');
    background-repeat: repeat;
    background-size: 720px;
    pointer-events: none;
    animation: rainThree .75s infinite linear,
               rainFade var(--sky-time) ease;
    animation-iteration-count: infinite;
    filter: blur(.2px);
}
 
@keyframes rainOne{
    0% { 
         background-position: 0px 0px;
         opacity: .9;
    }
    10% { opacity: 1; }
    90% { opacity: 0.95; }
    100% {
     background-position: 0px 750px;
     opacity: 0.85;
    }
}
@keyframes rainTwo{
    0% {
     background-position: 0px -100px;
     opacity: 0.8;
    }
    8% { opacity: 1; }
    90% { opacity: 0.9; }
    100% {
     background-position: -50px 700px;
     opacity: 0.8;
    }
}
@keyframes rainThree{
    0% {
     background-position: 0px 100px;
     opacity: 0.9;
    }
    13% { opacity: 1; }
    91% { opacity: 0.9; }
    100% {
     background-position: 0px 750px;
     opacity: 0.7;
    }
}
 
@keyframes rainFade {
    34%, 56% { opacity: 1; }
    0%, 30%, 60%, 100% { opacity: 0; }
}
 
/* Translation Box - coded by Calibri Bold */
div.scpnet-interwiki-wrapper {
    filter: invert(18%) sepia(11%) saturate(216%) hue-rotate(203deg) brightness(104%) contrast(111%);
}
 
/* Wikidot Footer Link Colors */
#footer {
    background: #4A4A7D;
    color: #55D2D8;
}
 
/* Reduce Motion Check */
@media screen and (prefers-reduced-motion: reduce) {
  body::before, #header-extra-div-1, #header-extra-div-2, #header-extra-div-3 {
    animation: none;
  }
}

Hey, I'm Oboebandgeek99, most call me Oboe or OBG or very rarely by It's Will, by the way. Pleasure to meet you!my name. You probably know me as the guy who recorded "Track 4: You and Me" (and if you're here for those uke chords, click here) but I sometimes also write things. Click on the buttons below to see some of those things.

---

Self Contained Stories

Narcissus

Tale

An Echo haunted flower grows more curious by the hour

θullsh't

Tale

SCP-033? A missing number? That's complete bullshit.

The Hanged King's Tragedy

Black Queen Format

What's a Hangèd King without his Queen?

Scared Stiff

Parawatch Format

Stop looking for Blackthorn. You will not find him, and only misery awaits you on the path ahead.

Second Contact

Tale

Ok but do the aliens have titties? Part of the Ad Astra Per Aspera canon. NSFWish.

Seven Children

Poem

The kids aren't alright.

Black Bird

Poem

A poem about corvids.

The Halloween Watch

Tale

Time for the annual halloween forum at Parawatch.

Three Musings On How It Might've Happened

2nd Hytoth format

How was the Holy Fifth forgotten?

SCP-5678

The Bamboo Thicket

Start with that which you know to be certain. My 5kon entry.

Nobody Special

Poem

A poem about Nobody.

I Don't Wanna Be Special (I Just Wanna Survive)

Tale

Eric is just trying to survive high school. He doesn't want to deal with these new feelings, or these new people, or his father.

Capitis

Tale

Beware the Ides of March. Part of Project Thaumiel.

Can You Show Me the Way to Alagadda?

Tale

No one else on earth knows the way. Part of the On Mount Golgotha canon.

…remember us?

Tale

Don't look away. Runner-up in CupidCon2021

Clef Eats Ass: The Musical

Mistake

…And I mean that literally. One of the winners of crackficcon 2

Self Similar (Collabcon 2k19)

Richardson Island

Black Queen Format

It's ya boi, Al. Collab with Dr Lake

Self. Similar.

Tale

The Black Queen goes to the island, and Nobody follows her. Collab with Dr Lake, currently in stages of rewriting.

Schwarzwald

Der Machandelbaum

Tale

In which a Grimm tale begins anew. Part one of the Von dem Machandelbaum subarc of Schwarzwald.

Verdure

Tale

In which David goes looking for a tree. Part two of the VdM subarc of Schwarzwald.

Toejamcon (Jam-con 2020)

Winner of two judges awards: Yay!The Cicierega and Oh no.The Tarantino!

#toesplosion2020

Tale

GAW discovers toes that 'splode. Prompt: "Explosions"

SCP-5591

Easy-Fake Oven

Brought to you by Sugarcomb Confectionary and MWDOT, inc. Prompt: "Delicious"

Single: [untitled]

Fifthist Song

In which the file name tells more than the lyrics. Prompt: "More Than Meets the Eye." Tied for 3rd place.

UnHuman

My post apocalyptic series. Check out the hub for all the great tales or keep reading for the ones I wrote

UnHuman Hub

Hub

How is a human to survive and thrive in the post-apocalypse?

SCP-6060

Only Human

Let's leave this place. Let nature run its course. Co-authored with Mew-ltiverse, our 6kon entry.

Goodbye Nightflower

---

Cinéma Chaotique

Tale

Two documentary filmmakers set out to learn more about the world.

Goodbye Nightflower: Beginnings

Tale

You know about the calamity, right?

Molly on the Shore (jamcon2021)

---

SCP-5825

Molly on the Shore

It's been a while. Let's reminicse.

Ship to Wreck

Tale

Oh, my love, remind me, what was it that I did?

Siren Song

Song

What could possibly go wrong? Tied for first place tale day 3.

---

What? It looked fun.Achievements:

From EstrellaYoshte's Achievements

               

Original characters do not steal! Just kidding, you can use them if you want (and please tell me if you do!)Characters I've Created:

Ray Nox - A precocious nonbinary researcher. Their inquisitive nature gets them noticed by higher ups at all stages of their job. Goes onto become O5-11, the Liar. Maybe.

Flora Davis - A newly promoted researcher with a chip on her shoulder. Trying to solve the mystery of The Juniper Tree. Half of Davis and David.

David Vadas - A silly but determined junior researcher who specializes in plants. Trying to solve the mystery of The Juniper Tree. Half of Davis and David.

Black Queen Ariadne - Alison Chao from timeline L-99. Has discovered that the current L-99 Nobody is actually an alternate version of Dr. Gears, and is determined to save him. Co-created with Dr Lake.

"ya boi, Al" - Al Chao from timeline Z-273. An unconventional Black Queen, refuses to take on the Black Queen title and identifies as nonbinary. Co-created with Dr Lake May or may not currently be dating David Vadas.

Commentary is listed in chronological order of postingCommentary on stuff:

+ Narcissus

The first tale I submitted, and it remains the most popular in terms of pure upvotes. One of the first tales about 2521, and definitely a different take than many people expected. It's a little rough around the edges, and I'd love to clean it up some day, but I think the poetry and thematic elements carry some of the weaker prose.

Favorite fun fact: This was tale of the week on r/scp for like three weeks straight. Good times.

+ Schwarzwald

I swear I'm still working on the series. I think Der Machandelbaum is actually a really strong introductory tale for David and Davis as well as Site-99 and Nexus-43: Grimm brother fairy tales are anomalous, and these two glorious idiots have to take care of them. But it falls flat until I can get the follow-ups posted. Part 2 (Verdure) should be up as soon as I get translations and part 3 (Fauna) should be up as soon as I stop being lazy.

Favorite fun fact: Davis and David initially came from a failed collab tale. Me and my would-be collaborator were bad at communicating and ultimately we had very different ideas of the focus of the anomaly we were working with, and I don't think either of us had a satisfying answer to the question our tale posed. Maybe i'll contact them one day and revive that draft.

+ CollabCon articles

Mad props to Dr Lake for writing this with me. Early on in brainstorming Lake suggested using the idea of an island that was a real fractal, in accordance with the Richardson effect, aka the coastline paradox. From there we came up with the anomalous properties and quickly decided we needed to use the Black Queen and Nobody for our gois. The only problem was, which nobody and which Black Queen? We both liked the idea of a youngish black queen, still trying to find her father, and shortly after we came up with the idea to use gears for nobody. I wish i'd had more time to research gears as a character before submitting, and Dr Lake and I are planning on rewriting these articles once we have time (and maybe even an accompanying scip).

Favorite fun fact: For a brief period of time we thought we'd have both the black queen and nobody be alison chao, but we decided having nobody as gears was more dramatic.

+ θullsh't

Ok I really love this one. Ultimately this is just me trying to justify 033 existing, because so many people have tried to explain it but every time im like "…but that's not how math works." Some people initially thought it was supposed to be a secret 001 proposal but that wasn't the intent at all. 033 is the focus, but the tale is about Ray and their coworkers as they get older and rise through the ranks in the Foundation, how their relationships to each other, the anomalous, and the Foundation change, and ultimately show a less dramatic side to daily life at the Foundation. It can't all be doom and gloom.

Favorite fun fact: Ray, Vivian, and Ahmed were all characters I took from a failed tale draft based on Robert Frost's "Fire and Ice" and Ray (while still planned to be nonbinary) was named Martin.

+ The Hanged King's Tragedy

After having a ball with Richardson Island, I wanted to revisit the Black Queen format. It lets you get out a bunch of short, contradictory ideas while still telling a compelling narrative. I'd been reading up on alagadda and thought "…surely there has to be a Black Queen aligned with alagadda." The plot just kinda came to me from there. It was fun to explore what the play might look like in other timelines, and think about the potential of a conflict between the library and alagadda.

Favorite fun fact: One of the timelines was based on the play #kidsthesedays, which quickly rose to prominence after being posted on ao3, but as far as i can tell has never been performed.

+ Scared Stiff

Abwesenheit, Tower-B, and Skunk Ape had just come out. Sunday Dinner was to be released in just a few hours. And I had a bandwagon to catch.

Coming up with the plot with this one felt like stacking like five maybe-okay ideas on top of each other, wrapping it in a trench coat, and somehow it came out equaling more than the sum of its parts. I started by thinking about what Parawatch was or was supposed to be, and it occurred to me that neither of the (at the time 2) authors who had written for Parawatch had really taken advantage of the forum format except in passing (tower-b and skunk ape both tell their stories in multiple parts but from the same user). What would it look like while they were trying to investigate things, not just creeping each other out? Immediately Candle Cove came to mind, a creepy pasta told by multiple postings on the same forum, and the idea wouldn't leave my head. Running with the first thing my head came up with, I thought about the Goosebumps series and wondered how an anomalous version of that might react. Again, going with my first instincts, I wondered what would happen if reading the books caused them to come true. This shouldn't have worked and I probably should've stopped right there, but I kept thinking about it. The twist at the end of candle cove is the anomalous properties, that parents just saw it tuned to static, it wasn't real or something really fucked up was going on, but that's the very thing they have to investigate in scared stiff. So what if the twist is there's a really mundane explanation for it all? Surely the wiki would be able to connect the dots of foundation containment and disinformation without the line needing to be drawn. But that wasn't narratively satisfying, we needed an untwisting, one person contradicting the logic without any supporting logic of their own, something emotional that tells you "oh this guy's fucked." Everything fell into place once I came up with the idea to incorporate 2747 into the anomaly. I incorporated some of the aesthetic motifs of 2747 in the name of blackthorn, came up with the plot of the book that the character finds, and figured out the ending of the user not remembering making those posts. Combine the motivic cat and mouse chase to add more intrigue/another lead, et voila! A creepypasta kinda like but not the same thing as candle cove. I drafted and posted it in like less than a day I think? it was real quick, and nat liked it so success.

Favorite fun fact: I actually love all of the usernames, wander-nameless is a subtle reference to another username I sometimes use, and the other three are just so fun.

+ Second Contact

Coming Soon!

+ Seven Children

Coming Soon!

+ Black Bird

Coming Soon!

+ The Halloween Watch

Coming Soon!

+ Three Musings On How It Might've Happened

Coming Soon!

+ SCP-5678: The Bamboo Thicket

Coming Soon!

+ Nobody Special

Coming Soon!

+ Toejamcon Articles

Coming Soon!

Music:

Track 4: You and Me:

Ballad for a Faraway Disaster:

Single: [untitled]:

Siren Song:

Songs from Clef Eats Ass: The Musical:
Prelude

Just One Day (Without Apples)

Logic My Way Through

Clef Eats Ass

They're

Useless Clef

List is noncomprehensive and in no particular orderAuthors I think are rad:

• CelesteKara
• Mew-ltiverse
• Lt Flops
• Calibri Bold
• taylor_itkin
• TheMightyMcB
• Crashington
• AbsentmindedNihilist (inactive)
• nat_voltaic (inactive)

test/author tool

+ Swiped from a lot of people but lets say it was GW for now

Article	Rating	Comments	Last Comment
SCP-6060	64	12	01 Jul 2021 03:11 by GremlinGroup
UnHuman Hub	74	3	06 Jul 2021 20:37 by Ralliston
Clef Eats Ass: The Musical	105	24	12 Jul 2021 01:42 by Machen2
Siren Song	52	12	26 Mar 2021 08:29 by JayKillbam
Ship to Wreck	28	1	23 Mar 2021 17:44 by Oboebandgeek99
SCP-5825	42	4	23 Mar 2021 02:13 by J Dune
Goodbye Nightflower: Beginnings	17	2	06 Jun 2021 11:43 by Tropinano
Cinéma Chaotique	19	1	01 Mar 2021 06:03 by Oboebandgeek99
...remember us?	71	11	04 May 2021 03:31 by Wombat140
Can You Show Me The Way To Alagadda?	40	2	08 Oct 2020 13:53 by ManyMeats
Capitis	35	1	27 Aug 2020 19:16 by Oboebandgeek99
I Don't Wanna Be Special (I Just Wanna Survive)	87	17	31 Jan 2021 02:59 by ProfessorCarvalho
Single: untitled	129	19	16 Dec 2020 16:00 by Ryuzaki Dono
SCP-5591	40	4	15 Mar 2020 05:12 by TheMightyMcB
#toesplosion2020	59	5	12 Mar 2020 18:37 by ThatMan
Nobody Special	9	10	17 Feb 2020 22:08 by HotColes
SCP-5678	57	14	18 Jan 2021 12:05 by Comrade Xander
Three Musings On How It Might've Happened	36	3	05 Feb 2020 23:13 by Oboebandgeek99
The Halloween Watch	25	16	13 Nov 2019 19:33 by augmentedspartan
Black Bird	31	5	24 Oct 2019 06:47 by Zyn

page 1 of 212next »