No matter what.

---

+ Show theme code

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
 
@supports(display: grid) {
 
    :root {
        /* S-CSS-P Integration */
        /* If you're making a new CSS theme, please include the following three variables at minimum. */
        --theme-base: "black-highlighter";
        /* must be either "black-highlighter" or "sigma9" */
        --theme-id: "SCP-Offices-theme";
        /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
        --theme-name: "SCP Offices Theme";
        /* set this to your theme's full name */
 
        /* Typefaces */
        --body-font: "JetBrains Mono", Recursive, Consolas, monaco, monospace;
        --header-font: var(--header-font);
        --title-font: var(--header-font);
        --mono-font: var(--header-font);
        --UI-font: var(--header-font);
 
        /* Standard Colors */
 
        --white-monochrome: 238, 238, 216;
        --pale-gray-monochrome: 233, 231, 204;
        --light-gray-monochrome: 147, 147, 147;
        --gray-monochrome: 127, 127, 127;
        --dark-gray-monochrome: 101, 101, 101;
        --black-monochrome: 25, 20, 16;
        --bright-accent: 145, 179, 153;
        --medium-accent: 145, 179, 153;
        --dark-accent: 105, 133, 111;
 
        --swatch-text-general: var(--swatch-text-dark);
 
        --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme:scp-offices-theme/scpoffices_logo.svg");
 
        --background-gradient-color: 215, 215, 215;
        --background-gradient-distance: 40rem;
 
        /* Link Colors */
        --link-color: var(--bright-accent);
        --visited-link-color: var(--dark-accent);
        --hover-link-color: var(--dark-accent);
        --newpage-color: 221, 102, 17;
    }
 
    #container-wrap-wrap {
        background-image:
            repeating-linear-gradient(180deg,
                hsla(0, 0%, 100%, 0),
                hsla(0, 0%, 100%, 0) 0.25vh,
                rgba(88, 88, 88, 0.1) 0.35vh,
                rgba(88, 88, 88, 0.2) 0.5vh),
 
            linear-gradient(to bottom,
                rgba(var(--black-monochrome), 1) var(--header-height-on-desktop),
                rgba(var(--gray-monochrome), 1) calc(var(--header-height-on-desktop) + 0.125rem),
                rgba(var(--gray-monochrome), 1) calc(100% - 0.125rem),
                rgba(var(--gray-monochrome), 1) calc(100% - 0.125rem),
                rgba(var(--black-monochrome), 1) 100%);
        background-repeat: no-repeat;
        background-size: 
            100% var(--header-height-on-desktop), 
            100% var(--final-header-height-on-desktop);
    }
 
    a {
        --wght: 900;
        font-weight: 900;
    }
 
    #header h2 span::before {
        color: rgb(var(--bright-accent));
    }
 
    #header h1 *,
    #top-bar *,
    #page-title * {
        will-change: opacity;
        transition: opacity 0.2s ease-in-out;
    }
 
    #header h1 a:hover::before,
    #header h1 a:hover::after,
    #top-bar a:hover,
    #page-title:hover,
    #search-top-box-form input[type="submit"]:hover,
    #search-top-box-form input[type="submit"]:focus {
        -webkit-animation: flicker 20s linear infinite;
        animation: flicker 20s linear infinite;
    }
 
    #side-bar .collapsible-block-unfolded {
        background: unset;
    }
 
    #side-bar div.menu-item a.collapsible-block-link,
    #side-bar .side-block>.collapsible-block a.collapsible-block-link {
        background: rgba(var(--medium-accent), 0.5);
    }
 
    #side-bar .close-menu::before {
        line-height: 0.85em !important;
    }
 
    #side-bar .heading p,
    #side-bar .collapsible-block .collapsible-block-link {
        color: rgb(var(--swatch-primary-darkest))
    }
 
    #side-bar div.menu-item a,
    #side-bar div.menu-item .text {
        --wght: 900;
        font-weight: 900;
    }
 
    #side-bar div.menu-item a:hover,
    #side-bar div.menu-item a:active {
        -webkit-animation: flicker 20s linear infinite;
        animation: flicker 20s linear infinite;
        color: rgb(var(--swatch-text-tertiary-color));
    }
 
    #side-bar div.menu-item a:focus-within {
        -webkit-animation: flicker 20s linear infinite;
        animation: flicker 20s linear infinite;
        color: rgb(var(--swatch-text-tertiary-color));
    }
 
    .info-container .collapsible-block-folded,
    .info-container .collapsible-block-unfolded-link {
        background: rgb(var(--bright-accent)) !important;
    }
 
    div[id*="page-options-bottom"] {
        --ui-wght: 600;
        --ui-hvr-wght: 600;
        font-size: calc(var(--base-font-size) * 0.75);
    }
 
    @media only screen and (max-width: 56.25rem) {
        #header {
            background-repeat: no-repeat, repeat;
            background-position: left calc(5vw + 5.5rem - 10.4rem) top calc(4% - var(--offset-from-page-top) / 2), top center;
            background-size: calc(8.75rem + var(--offset-from-page-top)), 100% var(--header-height-on-desktop);
        }
    }
 
    @-webkit-keyframes flicker {
        0% {
            opacity: 1;
        }
 
        5% {
            opacity: .9;
        }
 
        6% {
            opacity: .8;
        }
 
        11% {
            opacity: .4;
        }
 
        11.25% {
            opacity: .6;
        }
 
        11.5% {
            opacity: .4;
        }
 
        18% {
            opacity: 1;
        }
 
        18.5% {
            opacity: .9;
        }
 
        22% {
            opacity: 1;
        }
 
        38.5% {
            opacity: 1;
        }
 
        39% {
            opacity: .8;
        }
 
        42% {
            opacity: 1;
        }
 
        60% {
            opacity: 1;
        }
 
        60.5% {
            opacity: 0;
        }
 
        62% {
            opacity: 0;
        }
 
        63% {
            opacity: .2;
        }
 
        63.25% {
            opacity: 0;
        }
 
        65% {
            opacity: 1;
        }
 
        73% {
            opacity: 1;
        }
 
        75% {
            opacity: .8;
        }
 
        79% {
            opacity: 1;
        }
 
        100% {
            opacity: 1;
        }
    }
 
    @keyframes flicker {
        0% {
            opacity: 1;
        }
 
        5% {
            opacity: .9;
        }
 
        6% {
            opacity: .8;
        }
 
        11% {
            opacity: .4;
        }
 
        11.25% {
            opacity: .6;
        }
 
        11.5% {
            opacity: .4;
        }
 
        18% {
            opacity: 1;
        }
 
        18.5% {
            opacity: .9;
        }
 
        22% {
            opacity: 1;
        }
 
        38.5% {
            opacity: 1;
        }
 
        39% {
            opacity: .8;
        }
 
        42% {
            opacity: 1;
        }
 
        60% {
            opacity: 1;
        }
 
        60.5% {
            opacity: 0;
        }
 
        62% {
            opacity: 0;
        }
 
        63% {
            opacity: .2;
        }
 
        63.25% {
            opacity: 0;
        }
 
        65% {
            opacity: 1;
        }
 
        73% {
            opacity: 1;
        }
 
        75% {
            opacity: .8;
        }
 
        79% {
            opacity: 1;
        }
 
        100% {
            opacity: 1;
        }
    }
}

---

+ 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;
                }
            }
        }
    }
}

 

Almost tomorrow.

---

▸ More by this Author ◂

---

{$comments2}

F.A.Q.

{$doesthisfixthebug}

Info

---

100% (+23)	0% (-0)
-% (+0)	-% (-0)

---

I.

"under a thousand swords made of sin
and horrid paper crowns,
i see a putrid, dying crow
dancing while its body drowns.

for it sees a black door made of worms
and shattered, painted bones;
while i see the blood of my brethren,
a mass of dying sons.

under a burning, berotten sheet of empires and prose,
i see a 'roach wearing a king's crown,
covered in the blood of those
who laugh beneath its golden gown.

and i see a man whose door is of concrete
and i feel a massive kingdom yet to come,
for it dreams with such vestiges of mine
being completely forgotten and gone.

now tell me, son. am i meant to be unknown?
are my bones crying for i am now alone,
is my name green enough to atone?"

II.

"inside a womb of gold and ash you lie
awaiting the day where the night breaks.
with endless sorrow, their faces make the children cry,
for now they know the night was fake.

a pavement of heart and tissue opens up to us,
breaking the red, cold mist in the air,
and when the day comes for them to realize, thus,
we'll know it all was never fair.

for the paper thrones were nothing but fragile,
and the paper thrones were meant to be painted on.
for the time had come for my brethren to be docile,
and this was our golden cradle, the one to cry upon.

is my name still a name, or is it a foul misery of god?
is my land- no, my city's name what i forgot?
is my name a weak, impactless shot?

III.

"yet i cry:
drae said home used to be cold.
even the rotten leaves would make us seem bold
against the mischievous shadows whose lies were always told.

yet deep in my heart, i still feel their corrupted touch,
a thin tin skin she was forced to vouch (for),
an everlasting greed to feed,
a prayer-shaped hole her innocent eyes were judged (for).

even she would say that such trees were white as snow.
even she would say that such world was not our place to go.
does your wooden door dream, draema?
all i know is that i was never meant to know.

and i weep:

is my name one of blood and lust?
o, draema, was your name meant to last?
all my rotten heart knows is that our love,
into the fire, was meant to be cast.

no matter what.

Home always used to be cold.

‡ Licensing / Citation

Cite this page as:

"No matter what." by Abrethe, from the SCP Wiki. Source: https://scp-wiki.wikidot.com/no-matter-what. Licensed under CC-BY-SA.

For more information, see Licensing Guide.
Licensing Disclosures

Filename: snow.jpg
Name: Snow
Author: FHKE
License: CC BY-SA 2.0
Source Link: Flickr

For more information about on-wiki content, visit the Licensing Master List.