Object 56 Supplementary Document / Discussion

---

+ Show component code

:root {
        --sidebar-width-on-desktop: calc(var(--base-font-size) * (266 / 15));
        --body-width-on-desktop: 45.75rem;
    }
    @media only screen and (min-width: 56.25rem) {
        #content-wrap {
            display: flex;
            position: initial;
            flex-direction: row;
            flex-grow: 2;
            width: calc(100vw - (100vw - 100%));
            max-width: inherit;
            height: auto;
            min-height: calc(100vh - var(--final-header-height-on-desktop, 10.125rem));
            margin: 0 var(--sidebar-width-on-desktop, 13.6rem) 0 calc(var(--sidebar-width-on-desktop, 13.6rem) * -1 / 2);
        }
 
        #main-content {
            position: initial;
            width: var(--body-width-on-desktop, 45.75rem);
            max-width: var(--body-width-on-desktop, 45.75rem);
            max-height: 100%;
            margin: 0 auto;
            padding: 2rem 1rem;
        }
 
        #page-content {
            max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
        }
 
        #side-bar {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            left: 0;
            grid-area: side-bar;
            width: var(--sidebar-width-on-desktop, 13.6rem) !important;
            min-width: var(--sidebar-width-on-desktop, 13.6rem) !important;
            max-height: 100vh;
            padding-right: 2.5rem;
            padding-left: 0.5rem;
            overflow-y: scroll;
            transition:
                translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                padding 300ms linear,
                margin 300ms linear;
            border: none;
            border-color: rgba(var(--swatch-tertiary-color, 170, 170, 170), 0.4);
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
            translate: calc(var(--sidebar-width-on-desktop, 13.5rem) * -1 - 1rem);
            direction: rtl;
            scrollbar-width: thin;
            -ms-scroll-chaining: none;
                overscroll-behavior: contain;
            scrollbar-color: 
                rgba(var(--swatch-primary-darker), 0.1) /* Thumb */
                rgba(var(--swatch-tertiary-color), 0.05); /* Track */
        }
 
        #side-bar::-webkit-scrollbar-track {
            background-color: rgba(var(--swatch-secondary-color, 244, 244, 244), 0.8);
        }
 
        #side-bar::-webkit-scrollbar,
        #side-bar::-webkit-scrollbar-thumb,
        #side-bar::-webkit-scrollbar-corner {
            width: 0.5rem;
            border-right-width: calc(100vw + 100vh);
            border-right-style: inset;
            border-color: inherit;
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
        }
 
        #side-bar:is(:hover, :active, :focus-within) {
            margin-right: 2.25rem;
            padding-right: 0.25rem;
            overflow-x: hidden;
            overflow-y: auto;
            border-color: rgba(var(--swatch-primary-darker), 1);
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
            translate: calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0));
            scrollbar-color: 
                rgba(170, 170, 170, 1)  /* Thumb */
                rgba(252, 252, 252, 1); /* Track */
            scrollbar-color: 
                rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
                rgb(var(--swatch-menubg-color, 252, 252, 252), 1);  /* Track */
        }
 
        #main-content::after {
            content: " ";
            display: flex;
            position: fixed;
            top: 0;
            left: 1rem;
            align-items: center;
            justify-content: center;
            width: 1rem;
            height: 100%;
            max-height: 100%;
            transition:
                left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg");
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-position: center left 1rem;
            background-size: 1rem 12.875rem;
            pointer-events: none;
        }
 
        #side-bar:is(:hover, :active, :focus-within) + #main-content::after {
            left: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
            width: 0rem;
            transition:
                left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            opacity: 0;
            background-position: center left calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
            font-size: 0em;
        }
 
        #main-content::before {
            content: " ";
            position: absolute;
            z-index: 9;
            top: var(--final-header-height-on-desktop, 0);
            left: 0;
            width: var(--sidebar-width-on-desktop, 14.5rem);
            height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
            margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
            transition:
                translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            opacity: 0.5;
            background-color: rgb(var(--swatch-alternate-color, 0, 0, 0));
            pointer-events: none;
            translate: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1 + 1rem);
        }
 
        #side-bar:is(:hover, :active, :focus-within) + #main-content::before {
            translate: 0;
            opacity: 0;
        }
 
        #side-bar .side-block {
            margin-top: 1em;
            padding-left: 0.25em;
            border-right-width: 0rem;
            border-left-width: 0rem;
            border-radius: 0;
            background-color: rgb(0, 0, 0, 0);
            direction: ltr;
        }
 
        #side-bar .scpnet-interwiki-wrapper {
            direction: ltr;
        }
 
        /* Print Friendly Formatting by Estrella */
        body.print-body { 
            --sidebar-width-on-desktop: 0; 
        } 
        body.print-body #main-content::before,
        body.print-body #main-content::after { 
            display: none; 
        }
    }

This is the discussion related to the wiki page Object 56 Supplementary Document.

Author Post and Guidelines

Natedagreat563 27 Mar 2022 00:33

Due to popular demand, I have decided to create the wiki’s 3rd collaborative log. This log is based off of my Object 56 article, and has no direct relation to its lore. Due to that, feel free to be completely creative with this. You are allowed to use metric instead of Customary, use Level numbers, etc.

RULES AND GUIDELINES:

• I reserve the right to remove any entries I do not approve of. You are allowed to be creative, but I will not be allowing rule breaking content or posts such as “sussy imposter smoothie.” I politely request that all additions are run by me either through wikidot pms or discord dms at Natedagreat563#7458.
• Please try your best to use backrooms objects for this when possible. For example, instead of saying “water” say “almond water”
• You are at full liberty to not abide by the rules of the original article, as this is a separate thing. If you want to use metric, refer to things by their level numbers, etc. you are free to do so.
• If you need help producing the side info graphic, feel free to dm me, but I have placed a set of directions below:

Directions

1. Edit this template in a sandbox to reflect your recipe’s information:

[[module css]]
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
.top {
font-family: 'Montserrat', sans-serif;
}

.sideline{
padding-left:2%;
border-left:2pt solid #c7c089;
margin:1rem 0 1rem 1%;
}
[[/module]]

[[div class="sideline"]]
+++++ ##0080e0 | Makes:##
------

[[div style="font: 1rem 'Montserrat'"]]

X servings

+++++ ##0080e0 | Prep Time:##
------

X minutes

+++++ ##0080e0 | Cook Time:##
------
10 minutes

[[/div]]
[[/div]]

2. Screenshot and crop the info into a vertical photo.
3. Go to Here to make the background transparent.
4. Upload the image to the files tab
5. Replace SIDE INFO IMAGE LINK on the template with the file link

• You may submit entries roleplaying as other characters/groups/etc. go wild

Anyways I hope you enjoy this collaborative log! I look forward to seeing what you guys come up with!

Last edited on 27 Mar 2022 00:53 by Natedagreat563 Show more

The Funny

Hikarinu 01 Apr 2022 02:36

Where tofu recipe?

Re: The Funny

--hikikozap 27 Jan 2023 00:08

I know this is an old comment but, i wanted to say it anyway. Considering how Lucky Ol' Milk is a 100% soybeans based drink, you could techincally make that into some sort of tofu. Not to mention theres a good chunk of tofu recipes which are sweets / a desert. So it isn't out of the ordinary to make sweet tofu recipe with Lucky Ol' Milk.

---

tis' ya boy.. liquid mcgee. Don't ask how I got here.

ayo

Finstercon 01 Apr 2022 19:06

this is cool

PenOrSaber1 05 Sep 2023 13:49

Holy cow I didn't know this existed I am definitely going to contribute to this sometime.
Just don't know when…

---

Just a high schooler who thinks he is good at writing. Likes working on a lot of stuff, ranging from writing for the Backrooms Wiki, to providing critique, and reading. ~ Pen.
"The truth is the truth. What changes is what we know about it and what we're willing to believe."
- Jonathan Maberry, Rot and Ruin

Last edited on 05 Sep 2023 13:49 by PenOrSaber1 Show more