人ならぬものハブ

---

+ Show component code

@supports(display: grid) {
    :root {
        /* header measurements */
        --header-height-on-desktop: 10rem;
        --header-height-on-mobile: 10rem;
        --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem);
        --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem);
    }
 
    #header {
        --search-textbox-text-color: var(--swatch-secondary-color);
        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 0;
        background-size: auto calc(var(--header-height-on-desktop) - 1.5rem);
        opacity: 0.8;
        pointer-events: none;
    }
 
    #header h1,
    #header h2 {
        margin: 0;
        padding: 0;
        width: 100%;
        height: var(--header-height-on-desktop);
        display: flex;
        align-items: center;
        justify-content: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    #header h1 a,
    #header h1 a::before,
    #header h2 span,
    #header h2 span::before {
        margin: 0;
        padding: 0;
        z-index: 0;
        display: block;
        text-align: center;
    }
 
    #header h1 {
        z-index: 1;
    }
 
    #header h1 a::before,
    #header h1 a::after {
        content: var(--header-title);
    }
 
    #header h1 a::before  {
        color: rgb(var(--swatch-text-tertiary-color));
        z-index: -1;
        -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark));
    }
 
    #header h1 a::after {
        color: rgb(var(--swatch-headerh1-color));
        z-index: 1;
    }
 
    #header h2 {
        z-index: 0;
        text-transform: uppercase;
        pointer-events: none;
    }
 
    #header h2 span {
        margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em);
    }
 
    #header h2 span::before,
    #header h2 span::after {
        --wght: 600;
        content: var(--header-subtitle);
        position: absolute;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 100%;
        text-align: center;
    }
 
    #header h2 span::before {
        -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark));
    }
 
    #header h2 span::after {
        color: rgb(var(--swatch-headerh2-color));
        z-index: 1;
    }
 
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        color: rgba(0, 0, 0, 0);
    }
 
    @media (min-width: 36rem) {
 
        #login-status {
            flex-grow: 1;
            left: 3%;
            right: initial;
        }
 
         #login-status::before {
            --mask-image: none;
            background-color: transparent;
        }
 
        #login-status:not(:focus-within) {
            color: rgb(var(--login-line-divider-color));
            -webkit-user-select: initial;
            -moz-user-select: initial;
            -ms-user-select: initial;
            user-select: initial;
        }
 
        #login-status #account-topbutton,
        #login-status:not(:focus-within) #account-topbutton {
            --clip-path:
                    polygon( 0 0, 100% 0, 100% 100%, 0 100% );
            background-color: rgba(var(--login-arrow-color), 0);
 
        }
 
        #login-status #account-topbutton::before{
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(var(--login-arrow-color), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton:hover::before {
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
        }
 
        #login-status:not(:focus-within) #account-topbutton::after {
            display: none;
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            pointer-events: all;
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) {
            opacity: 1;
        }
 
        #login-status #my-account {
            --wght: 300;
        }
 
        #account-options {
            background: var(--gradient-header);
        }
 
        #search-top-box {
            top: 1.5em;
            right: 3%;
            background: rgba(var(--search-focus-textbox-bg-color), 0.4);
            box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) rgba(var(--search-focus-textbox-bg-color), 0.4);
        }
 
         #search-top-box:focus-within ~ #login-status {
            opacity: 1;
        }
 
        #search-top-box::after {
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
        }
 
        #search-top-box:not(:focus-within)::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0% 100%
                    );
            background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #search-top-box:not(:focus-within):hover::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            background-color: rgb(var(--search-icon-hover-bg-color));
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) {
            max-width: var(--search-width);
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
            max-width: var(--search-width);
            padding: 0 var(--search-height) 0 1em;
            outline-width: 0;
            background-color: rgb(var(--search-focus-textbox-bg-color), 0.35);
            color: rgba(var(--search-textbox-text-color), 0.4);
            cursor: pointer;
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"],
        #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] {
            pointer-events: all;
            border: none;
        }
 
    }
 
    #page-title::after,
    .meta-title::after,
    #page-title::before,
    .meta-title::before {
        content: "";
        flex-grow: 1;
        height: 0.0625rem;
        background: rgb(var(--swatch-primary));
    }
 
    #page-title::before,
    .meta-title::before {
        margin: auto 1.25rem auto auto;
    }
}

+ Show component code

@supports(display: grid) {
    :root {
        --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
        --body-width-on-desktop: 45.75rem;
    }
    @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;
            z-index: -1;
        }
 
        #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.5rem;
            left: 0.5rem;
            width: 3rem;
            height: 3rem;
            padding: 0;
            margin: 0;
            text-align: center;
            pointer-events: all;
            cursor: pointer;
            transition:
                opacity var(--sidebar-transition-timing);
        }
 
        #side-bar .close-menu::before {
            --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%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(--sidebar-bg-color))) !important;
            border-radius: var(--toggle-roundness, 50%);
            border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) 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: calc(var(--sidebar-width-on-desktop)*-1);
            z-index: 10;
            transition:
                left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            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);
            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;
            transition:
                opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            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: calc(100% - var(--sidebar-width-on-desktop));
            opacity: 1;
            pointer-events: all;
        }
 
        #content-wrap {
            display: flex;
            flex-direction: row;
            width: calc(100vw - (100vw - 100%));
            min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
            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: var(--body-width-on-desktop, 45.75rem);
            max-width: var(--body-width-on-desktop, 45.75rem);
            margin: 0 auto;
        }
 
        #page-content {
            max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
        }
 
        @media not all and (-webkit-min-device-pixel-ratio:0), not all and (min-resolution:.001dpcm) {
            @supports (-webkit-appearance:none) {
                #side-bar {
                    transition:
                        left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                        padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                        background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
                    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 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
                    transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
                }
 
                #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: 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.
 
Translated by Mishary
*/
 
@import url('https://fonts.googleapis.com/css?family=Cabin+Sketch|Ubuntu|Space+Mono|Baumans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');
 
/* BHL Vars */
 
:root {
    --theme-base: "black-highlighter";
    --theme-id: "calamity";
    --theme-name: "Calamity Theme";
 
    /* Header */
    --logo-image: none;
    --header-title: "人ならぬもの";
    --header-subtitle: "終焉を越えし生命";
 
    /* Typefaces */
    --body-font: "Ubuntu", sans-serif;
    --header-font: "Cabin Sketch", "New Tegomin", sans-serif;
    --title-font: "Baumans", "Yusei Magic", 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;
    --visited-link-color: var(--medium-accent);
 
    /* 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) * 3.2);
    --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 !important;
    --linkColour: #FCFCFC !important;
}
 
:root:lang(ja){
    /* Header */
    --header-title: "人ならぬもの";
    --header-subtitle: "終焉を越えし生命";
 
    /* Typefaces */
    --body-font: "Ubuntu", sans-serif;
    --header-font: "Cabin Sketch", "New Tegomin", sans-serif;
    --title-font: "Baumans", "Yusei Magic", sans-serif;
    --mono-font: "Space Mono", "Andale Mono", "Courier New", Courier, monospace;
}
 
/* 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;
}
 
#header h2 span {
    margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 1em);
}
 
/* 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 {
    position: absolute;
    top: 1rem;
    width: 100%;
    height: 8rem;
}
 
div#extra-div-1 {
    background: url("https://scp-jp.wdfiles.com/local--files/theme%3Acalamity/unhuman-left-logo.png");
    background-repeat: no-repeat;
    background-position: calc(50% - 9rem) 80%;
    background-size: contain;
}
 
div#extra-div-2 {
    background: url("https://scp-jp.wdfiles.com/local--files/theme%3Acalamity/unhuman-right-logo.png");
    background-repeat: no-repeat;
    background-position: calc(50% + 9rem) 80%;
    background-size: contain;
}
 
/* Header on Mobile */
@media only screen and (max-width: 64rem) {
 
    :root{
    --header-h1-font-size: calc(var(--base-font-size) * 2.25);
    --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%;
    }
}
 
#header {
/* ===HEADER ELEMENTS=== */
    /* ===HEADER TITLES=== */
    /* Header H1 and H2 colors */
    --swatch-headerh1-color: var(--swatch-text-light);
    --swatch-headerh2-color: var(--swatch-text-light);
 
    /* ===SEARCH ELEMENT=== */
    --search-icon-color: var(--swatch-text-secondary-color);
    --search-icon-bg-color: var(--swatch-primary-darkest);
    --search-icon-hover-color: var(--swatch-text-secondary-color);
    --search-icon-hover-bg-color: var(--swatch-alternate-color);
    --search-textbox-text-color: 0, 0, 0, 0;
 
  /* Focus is when the search box has been clicked on */
    --search-icon-focus-color: var(--swatch-text-secondary-color);
    --search-icon-focus-bg-color: var(--swatch-primary);
    --search-focus-outline-color: var(--swatch-primary);
    --search-focus-textbox-bg-color: var(--swatch-alternate-color);
    --search-focus-textbox-text-color: var(--swatch-text-secondary-color);
 
    /* ===LOGIN BOX ELEMENT=== */
    --login-line-divider-color: var(--swatch-text-secondary-color);
    --login-username-color: var(--dark-accent);
    --login-myaccount-color: var(--dark-accent);
    --login-myaccount-underline-color: var(--swatch-primary-darkest);
    --login-myaccount-hover-bg-color: var(--swatch-primary-darkest);
    --login-arrow-color: var(--swatch-text-light);
 
   /* Dropdown Box when arrow is clicked */
    --login-dropdown-bg-color: var(--login-gradient);
    --login-dropdown-bg-image: var(--login-gradient);
    --login-dropdown-border-color: var(--bright-accent), 0.5;
    --login-dropdown-text-color: var(--swatch-text-secondary-color);
    --login-dropdown-text-hover-color: var(--swatch-text-secondary-color);
    --login-dropdown-bg-hover-color: var(--black-monochrome);
}
 
/* Login Status */
#login-status .printuser,
#login-status #my-account {
    --ui-wght: 700;
    color: rgb(var(--login-username-color));
    text-shadow:
        rgb(var(--white-monochrome)) 0.0625rem 0rem 0rem,
        rgb(var(--white-monochrome)) 0.0338rem 0.0526rem 0rem,
        rgb(var(--white-monochrome)) -0.026rem 0.0568rem 0rem,
        rgb(var(--white-monochrome)) -0.0619rem 0.0088rem 0rem,
        rgb(var(--white-monochrome)) -0.0409rem -0.0473rem 0rem,
        rgb(var(--white-monochrome)) 0.0177rem -0.0599rem 0rem,
        rgb(var(--white-monochrome)) 0.06rem -0.0175rem 0rem;
}
 
#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 {
    height: 0px;
    border-top:  0.0625rem solid rgb(var(--medium-accent));
    border-bottom: 0.0625rem solid rgb(var(--dark-accent));
    background: rgba(0, 0, 0, 0);
}
 
/* Blockquote */
blockquote,
.blockquote,
div.blockquote {
    margin: 1em 0;
    border-style: solid;
    border-color: rgb(var(--medium-accent));
    background-color: rgba(var(--pale-accent), 0.1);
}
 
/* table */
table.wiki-content-table th {
     border-color: rgb(var(--pale-accent));
     background: rgb(var(--medium-accent));
     color: rgb(var(--white-monochrome));
}
 
/* Side Bar Touch Up */
#side-bar .heading,
#side-bar .side-block>.collapsible-block:nth-child(1) .collapsible-block-folded {
    background: rgba(var(--pale-accent), 0.35);
    font-family: var(--title-font);
    min-height: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-size: 125%;
}
 
#side-bar .heading p {
    color: rgb(62, 62, 104);
    font-family: var(--title-font);
    text-shadow: none;
    --text-shadow: none;
    text-align: center;
}
 
/* Top Bar Touch Up */
#top-bar {
    --topmenu-category-color: var(--swatch-text-secondary-color);
    --topmenu-category-hover-color: var(--swatch-text-primary-color);
    --topmenu-category-hover-bg: var(--pale-accent);
    --topmenu-hover-border-color: var(--swatch-primary);
    --mobile-topmenu-sidebar-button-color: var(--swatch-text-secondary-color);
    --dropdown-bg-color: var(--swatch-alternate-color), 0.9;
    --dropdown-border-color: var(--swatch-text-tertiary-color), 0.5;
    --dropdown-links-color: var(--swatch-text-secondary-color);
    --dropdown-links-bg-color: 0,0,0,0;
    --dropdown-links-hover-color: var(--swatch-text-secondary-color);
    --dropdown-links-hover-bg-color: var(--swatch-primary);
}
 
/* Header Background - adapted from Croquembouche's Swirling Ashes theme */
body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height-on-desktop);
    pointer-events: none;
}
 
body::before {
    -webkit-animation: sky linear var(--sky-time) infinite;
    animation: sky linear var(--sky-time) infinite;
    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;
}
 
@-webkit-keyframes sky {
    from {
        background-position: 0 calc(var(--header-height-on-desktop) * var(--sky-length));
    }
 
    to {
        background-position: 0 0;
    }
}
 
@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;
    position: absolute;
    top: 0%;
    left: calc((-100vw + 100%)/2);
    width: 99.4vw;
    height: 10rem;
    -webkit-animation: rainOne 1.7s infinite linear,
        rainFade var(--sky-time) ease;
    animation: rainOne 1.7s infinite linear,
        rainFade var(--sky-time) ease;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Acalamity/rain1.png');
    background-repeat: repeat;
    background-size: 14.375rem;
    pointer-events: none;
    -webkit-filter: blur(.9px);
    filter: blur(.9px);
}
 
#header-extra-div-2 {
    display: block;
    position: absolute;
    top: 0%;
    left: calc((-100vw + 100%)/2);
    width: 99.4vw;
    height: 10rem;
    -webkit-animation: rainTwo 1.2s infinite linear,
        rainFade var(--sky-time) ease;
    animation: rainTwo 1.2s infinite linear,
        rainFade var(--sky-time) ease;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Acalamity/rain1.png');
    background-repeat: repeat;
    background-size: 23.125rem;
    pointer-events: none;
    -webkit-filter: blur(0.4px);
    filter: blur(0.4px);
}
 
#header-extra-div-3 {
    display: block;
    position: absolute;
    top: 0%;
    left: calc((-100vw + 100%)/2);
    width: 99.4vw;
    height: 10rem;
    -webkit-animation: rainThree .75s infinite linear,
        rainFade var(--sky-time) ease;
    animation: rainThree .75s infinite linear,
        rainFade var(--sky-time) ease;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Acalamity/rain1.png');
    background-repeat: repeat;
    background-size: 45rem;
    pointer-events: none;
    -webkit-filter: blur(.2px);
    filter: blur(.2px);
}
 
@-webkit-keyframes rainOne{
    0% {
         opacity: .9;
         background-position: 0rem 0rem;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 0.95;
    }
    100% {
        opacity: 0.85;
        background-position: 0rem 46.875rem;
    }
}
@keyframes rainOne{
    0% {
         opacity: .9;
         background-position: 0rem 0rem;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 0.95;
    }
    100% {
        opacity: 0.85;
        background-position: 0rem 46.875rem;
    }
}
@-webkit-keyframes rainTwo{
    0% {
         opacity: 0.8;
         background-position: 0rem -6.25rem;
    }
    8% {
        opacity: 1;
    }
    90% {
        opacity: 0.9;
    }
    100% {
        opacity: 0.8;
        background-position: -3.125rem 43.75rem;
    }
}
@keyframes rainTwo{
    0% {
         opacity: 0.8;
         background-position: 0rem -6.25rem;
    }
    8% {
        opacity: 1;
    }
    90% {
        opacity: 0.9;
    }
    100% {
        opacity: 0.8;
        background-position: -3.125rem 43.75rem;
    }
}
@-webkit-keyframes rainThree{
    0% {
         opacity: 0.9;
        background-position: 0rem 6.25rem;
    }
    13% {
        opacity: 1;
    }
    91% {
        opacity: 0.9;
    }
    100% {
        opacity: 0.7;
        background-position: 0rem 46.875rem;
    }
}
@keyframes rainThree{
    0% {
         opacity: 0.9;
        background-position: 0rem 6.25rem;
    }
    13% {
        opacity: 1;
    }
    91% {
        opacity: 0.9;
    }
    100% {
        opacity: 0.7;
        background-position: 0rem 46.875rem;
    }
}
 
@-webkit-keyframes rainFade {
    34%,
    56% {
        opacity: 1;
    }
    0%,
    30%,
    60%,
    100% {
        opacity: 0;
    }
}
 
@keyframes rainFade {
    34%,
    56% {
        opacity: 1;
    }
    0%,
    30%,
    60%,
    100% {
        opacity: 0;
    }
}
 
/* Translation Box - coded by Calibri Bold */
div.scpnet-interwiki-wrapper {
    -webkit-filter: invert(18%) sepia(11%) saturate(216%) hue-rotate(203deg) brightness(104%) contrast(111%);
    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 {
        -webkit-animation: none;
        animation: none;
  }
}
 
/* Credit Info Position fix */
#page-content .rate-box-with-credit-button>.creditButton>p>a:before {
    width: 100%;
    -webkit-mask-position: center;
    mask-position: center;
}

その災厄は特効だった。特別のものだった。的を絞ったと言ってもいいだろう。地球を破壊するのでも、全ての生物を殺しつくすのでもなかった。ただ、人間を殺し去るだけだった。

では、人間は如何にしてこの終末を生きながらえ、再び繁栄しえるのか？
単純なことだ

彼らは変わらねばならない。

Unhuman人ならぬものに。

『人ならぬもの』の物語

新世界の物語 (Tales of the New World)

ナイトフラワーよさようなら

• Cinéma Chaotique - 著者: Oboebandgeek99
  • ナイトフラワーよさようなら: はじまり - 著者: Oboebandgeek99
• Haphway There - 著者: Oboebandgeek99
  • Goodbye Nightflower: The Shining City - 著者: Oboebandgeek99

Otel Entra’s Quest to find Music and become the Best Lich Rapper in the Wasteland
オーテル・エントラとデモリッション・ダービー - 著者: Tropinano
オーテル・エントラとリッチとして生きるという複雑な災難 - 著者: Tropinano
Otel Entra And The Stupid Hat - 著者: Tropinano
Otel Entra And The Cheese Wheel - 著者: Tropinano

Corporate No More
Corporate Dealings After The Calamity - 著者: Kensing
Crown of Splendor - 著者: Kensing
The Greaze, The Lich, and The Face Monster - Written by Kensing

Thur'lex the Devourer
貪欲のサーレックスの心温まるお話 - 著者: Mooagain
thur-lex-the-devourer-and-bernie - 著者: Mooagain
thur-lex-the-devourer-commits-voter-fraud - Written by Mooagain
thur-lex-the-devourer-wins-a-fight - Written by Mooagain
thur-lex-the-devourer-conquers-a-small-house - Written by Mooagain
thur-lex-the-devourer-is-barely-in-this-one - Written by Mooagain
SCP-6550 - Thur'lex the Devourer - Written by Mooagain

その他のTale
The Unhuman Experience: Former Prime Minister Harold Holt - Written by Tstaffor
The Witch and the Lich: Prologue - From the Grave, I Awaken. - Written by winkwonkboi
One Tiny Voice- Written by Marcelles_Raynes
Color and Light - Written by Oboebandgeek99

財団の遺物 (Remnants of the Foundation)

The Omni Bot
Jalick and the Omni Bot - 著者: Marcelles_Raynes
SCP-6801 - The Promethean, The Mech, and the Omni Bot - 著者: Marcelles_Raynes

岸辺のモリー (Molly on the Shore)
SCP-5825 - 岸辺のモリー - Written by Oboebandgeek99
Ship to Wreck - Written by Oboebandgeek99
Siren Song - Written by Oboebandgeek99

Sanctuary-64
Do Androids Dream of Sanctuary? - Written by BlueJones
Unhuman, Not Inhumane - Written by Quadraginta

その他の文書
SCP-6060 - 人間だけが - Written by Mew-ltiverse and Oboebandgeek99
The Bright Pit - Written by Marcelles_Raynes
Oh Lord - Written by tiredsn0w

その他の遺物 (Remnants of the Others)

The Icarus Takes Flight - Written by BlueJones
Corporate Dealings After The Calamity - Written by Kensing

世界観

概説

『人ならぬもの』には複雑かつ非常に柔軟な設定が存在します。以下は基本設定です。

1. およそ現代のある時、「完全な人間」を殺しつくす「災厄("calamity")」が生じた。
   1. 誰ひとりこの災厄が訪れることを予期していなかった。財団さえも。
2. しかしながら、何ゆえか完全な人間とは見なされなかったがために、異常な人間という形を以てして人類は生存した。
   1. 更に、異常の影響によって後々復活したものもいた。
   2. 更に加えて、災厄の後この惑星へやってきた種族もいた。
   3. これら「人ならぬもの("unhumans")」（以降総称して人ならぬものと呼称）の多くは条件付きの不死性を有している。すなわち不死ではあるが、コストはかかる。
3. 人間以外の一切は、たとえ人知を有していても、災厄によって死に至ることがなかった。
4. 急速且つ急激な生態系の変動にも関わらず、地球上の生物は存続し、一部の種は栄えすらした。
5. 一部の人ならぬものは団結してコミュニティを形成した。また一部の人ならぬものはスカベンジャーとなって世界を放浪した。
6. 大多数の人ならぬものは何らかの魔術を習得することができる。
7. 生存者の殆どが存在を知らなかったため、財団及び他GoIの影響は間接的なものである。

「人ならぬもの」の設定は概して、世界権力による政治的陰謀の干渉を排して冒険譚やキャラクター中心の物語を書くのに最も適しています。詳細な設定は以下をご覧ください。また、本シリーズの記事を執筆しようという方は、 「書き方」タブを確認してください。

災厄The Calamity

• どれほど昔であるかは不明だがあるとき、地球上の人間を全て一掃してしまうような事態が発生した。
• この破局が正確にはどのようなものであったか知るものはいない。不死の者たちはこの事象に記憶を抹消するようなものが付随していたか、或いはそれを経験したものの誰しもがすぐさま記憶を消し去ってしまうほどに衝撃的な事象であったのではないかと推測している。
• SCP-2000は動作しなかったか、存在を知っているものが死に絶えてしまった。終末をもたらしたものがSCP-2000の事を知っていてこれを標的としたのか、或いはただただその存在を知るものが居なくなってしまうほどに完全に、全てを消し去ってしまったのか。
  • 他の終末的事象の修復・防止を行うSCPについても同様である。
  • 但し、SCP-2000の場所と機械とは依然存在しており、図書館への道も同じである。いつの日か、誰かがこれらを見つけるかもしれない。
• 殆どの機関及び組織化されたGoIは消滅した。範疇の緩やかな団体は依然いくらか存在しており（例: ある程度の異常宗教団体）、また厄災の後形成された集団も存在する。詳細は「住民」を見よ。

世界

• 自然が再生した地もあるが、依然人間文明の様相を残す場所も多い。
• 人間社会の残骸を再利用した集落もあれば、辺境に形成された集落もある。
• 多くの者は集落で半ば典型的な生活を送っているが、そのほとんどは世界の他地域とは切り離された自給自足のコミュニティーである。
• 不毛の地でスカベンジャーとなる道を選ぶものもいるが、その理由はこの敵愾心に満ちた生活が不死者へやるべきことをもたらしてくれる為であるらしい。
• 工業化はもはや存在しない。資源が見つかれば工業技術は再び息を吹き返せるかもしれないが、交通輸送手段を求める少数の人々を除いて、工業の再始動に関心を持っているものはごく僅かとみられる。

法則（魔術、技術…）

• 魔術は存在し、ほとんどの者がある程度まで習得できる。スカベンジャーは生存のためにもテクノマンシーの基礎的な知識が必要であり、定住民は時おり生活を豊かなものとするために、とりわけ医療問題に対して、魔術を用いることがある。
• 最も一般的な魔術はテクノマンシーであり、これは産業革命以降に生まれた技術を古い魔術的手法によって向上せしめるものである。
  • その代表例が万能翻訳機である。ほとんどすべての人が他者の言葉を翻訳する （バベルフィッシュ¹のような）翻訳機械の一種を身につけている。
• 不死性は一概に語ることが出来ない。不死以外の点では人間であったため終末に死んだ不死者もいたが、基底人類から十分逸脱していたために生存が保たれた不死者もいる。いずれにせよ、現在「不死」であるものはすべて生存のため一程度の自己保全を必要とする。コストは必ずかかるものである。

住民

誰もが知っているように、全ての人間は終末によって死に絶えた。とはいっても知的生命体はなお地球上に生息している。ただ、その姿を見つけるのは昔より少し難しい。知的生命体は3つの大きなグループに分けられる。すなわち、サーヴ(Survs)、リーヴ(Reeves)、そしてニュー(News)である。

サーヴSurvs - 生存者

災厄のとき完全な人間ではなかったために生き延びたもの。

• シフター (Shifters) - 変身能力者であり、もっぱら人間と動物の両形態を行き来するもの。吸血鬼や人狼を想像するとよい。
• クリーチャー (Creatures) - 人間に近いか同等の知能を有するが、人間ではないために生存した生物。
  • イェレン (Yeren) - SCP-1000あるいはビッグフットたるイェレンはその数を増やしており、小さなコミュニティを形成して平穏な遊牧生活を送っている。かつて地球を闊歩していた人間とは、複雑な関係にあるようである。彼らは何かを隠しているのだろうか？
• メック (Mechs) - 人間の知能と同等以上のAIを搭載したロボット。そのほとんどがサーヴにあたり、一部はニューである。
• シヴ（Civs） - 終末を生き抜いた人間の子孫たる平凡な人間。ほとんどのものは神話上の存在であると考えている。

リーヴReeves - 復活者

終末の最中、或いはその少し前に殺害され、その後復活したもの。

• リッチ (Liches) - 死から暫くの期間を経て魔術によって復活した人間。終末以前からリッチとなっていたものも、終末以後にリッチとして復活したものもいる。外見上は完全な人間から生きた骸骨までさまざまである。
• ゾンビ (Zombies) プロメテアン (Prometheans) - 終末以前に死去し、その後間もなく科学的手法によって復活した人間。リッチが身体の崩壊度や死からの経過時間に関わらず甦ることが出来るのに対し、プロメテアンは死後すぐに甦る必要があり、常に身体の崩壊と闘っている。あまり食事をとらず、専ら一味変わった連中だと評される。プロメテアンはリッチよりも稀少である。
• ゴースト (Ghosts) - 肉体を持たない人間の霊魂であり、大地をさまよっている。確証を持っているものはいないが、多くの者がその存在を尤もなものと信じている。

ニューNews - 新たな生物形態たち

終末の後に地球へやってきたか、進化した知性体。

• エイリアン (Aliens) - 他惑星または他次元からやってきたもの。
• トラベラー (Travelers) - 過去からやってきた時間旅行者たち。時間旅行は難解な存在であり常に同一の未来へ繋がるとも限らないため、それほど多くは存在しない。
• イヴォ (Evos) - 災厄の後に進化した生物形態。

『人ならぬもの』の執筆

『人ならぬもの』に関する記事を書きたい！その為のヒントが欲しい！ということであれば、ここにその為の情報があります。

一般的なヒント

• このタブと世界観のタブを読んでください。
• なんでも理屈や構造にとらわれすぎないでください。この設定で全てを説明する必要はありません。
• 楽しんで！この設定が存在するのは、私がポストアポカリプス世界に映画的なモンスターが生存しているというアイデアを気に入ったためです。
• 原則として、他の著者によって『人ならぬもの』の為作成されたキャラクター（例: Candela、Otel Entra、Jalickなど）を使用しようと考えている場合、原著者に連絡してキャラクター使用の了解を取り、また同キャラクターの使用について根本的に矛盾をはらんだものでないかの確認を行ってください。
• 物語を投稿したらば、ハブへの追記を行ってください！原則として、「財団の遺物」にはSCP記事及びとりわけ財団に焦点を置いた物語を、「他の遺物」にはGoIフォーマットと特定のGoIに焦点を置いた物語を、「新世界の物語」にはそれまでの世界観よりも新たな設定に焦点を置いた物語を配してください。
  • 記事がシリーズに属するものであれば、関連するメインヘッダーの下にそのシリーズ名を冠したサブヘッダーを自由に追加してください！

テーマ

人類
ポスト・ヒューマンの世界に於いて、人類はどんなところにいるのでしょうか？あなたはこの荒廃した世界を無法で非情の地であると想像しており、時としてそれは正しいかもしれませんが、しかし多くの場合平和で協調的であるのです。かつて人間であった人々は、今や己が人間でなくなっているという疑いなき証を前にして、どのように立ち振る舞うのでしょうか？
歴史
とりわけ歴史が喪われているような場合、我々はどのように歴史に向き合い、交わっていくのでしょうか？誰が歴史を書き記すのでしょうか？我々は常に過去の罪から学ばねばならないのでしょうか? それとも、忘れてしまった方が良いこともあるのでしょうか？
不死性
主要人物の多くは（条件付きの）不死です。彼らはどのようにして人生を充実させているのでしょうか？不死は期待通りに素晴らしいものなのでしょうか？不老不死の代償は何なのでしょうか？不死になると何を失うのでしょう？

ジャンル

• ポスト・アポカリプス世界を舞台としているにもかかわらず、そのジャンルはかなり軽いものとなっています。
• 『ナイトフラワーよさようなら』はアドベンチャーを主軸としており、主人公たちが自分たちの住む世界を探検していくものです。
• 『岸辺のモリー』はより悲劇的な筋書きを持ちますが、災厄はこの悲劇の真の焦点ではなく、この研究者の人生と悲劇との関係性こそが焦点です。
• 暗いジャンルは相当に稀であるべきです。グリムダークを求めるのであれば、よりよいカノンがあることでしょう。

財団

• 異常や財団の影響はカノン全体に及んでいます。
• けれども、それが焦点となることはまずありません。財団が世界にどのような影響を与えてきたのか、という事の方が重要です。
• 実際には財団はもはや存在しませんが、一部の住民はかつての財団のことを覚えているかもしれません。

The Others

• 他の多くの要注意団体も同様に消滅しています。
• しかしながら、全ての要注意団体がそうであるというわけではありません。サーキック・カルトや壊れた神の教会のような多くの異常宗教組織は、今なお何らかの形で存在しています。
• 財団と同様に、諸要注意団体の影響もまたカノン全体に及んでいます。

Footnotes

1. （訳注）銀河D．アダムスのSFシリーズ、『ヒッチハイク・ガイド』に登場する魚で、万能翻訳を可能とする。