嘁，老子不干了！

---

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

---

+ Show component code

: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);
 
        --logo-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg");
    }
 
    #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);
        }
 
         #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;
    }

我是一名新来到基金会的普通员工，并且急于表现自己。

不错，刚来第4天就有事做了，我觉得，我可以写一篇实验策划案！

如果写的不错，受到嘉奖的话，一定会让我声名鹊起的！

好的，决定了的话，就开始写吧！

于是我找到同事们的实验策划案，一张一张翻看了起来——嗯啊，原来如此，是这样啊，只要这么写就好了吗？

我坐在我的办公桌上，打开抽屉，拿出水笔和A4纸，尝试用我最工整的字体写了起来……不时地参照一下同事们的策划案。

不过，我觉得他们写的太寡淡了，干硬极了，而且一点都不酷，啧，如果我把他们的优点缺点结合起来，这篇报告一定会被点名表扬的！甚至可能被挂在站点公告上呢！

这样想着，我很快写完了我的第一篇实验策划案，我反复看着，甚是满意。那么接下来，还是参考一下同事们的建议把！

于是我找到了阿西，请求他阅读一下我的策划案，并准备接受夸奖。只见他仅看了几秒便抬起头，把一本新人手册塞给我，说道：“你可以再读一遍，嗯……我有在上面做了笔记。”

我随口应着，问道：“那你觉得问题在哪里？”

他说：“格式有点错误，而且，我觉得有点乱。”

这回，我好似被泼了一盆冷水，接回了我的报告，回到办公桌，翻阅了一遍新人手册，啊，找到了，问题在这儿呢！

于是我高兴地提笔修改，这回，应该没问题了吧？

于是，我又兴奋地拿着它找到了阿护。“可是，我现在有点忙……” “求求了，帮我看一下吧！感激不尽！”

于是他拿起来端详了一阵，便对我说：“我觉得你的语言有点问题，多少有点不够精炼简洁。作为一篇实验策划案，不需要这么多修辞。”

于是我又接回了我的策划案。去他的吧，不知道这样读起来才生动吗？

拿着我心爱的实验策划案，我截住了阿莱，他倒是没有任何犹豫，立即帮我看了起来。

“啊，写的，还行吧，但是我认为呢，太短了，似乎没写出什么东西啊。”

我略有所思地点了点头，回到办工作，思索后，草草地加了几段补充资料，再次拿了起来，找到了我们部门的大佬——阿奇。

他也是好为人师，接过了那张布满修改痕迹的策划案，细细阅读了起来，随后指出了我的问题：“是这样的，你的报告没有很清楚地叙述这个项目，让人简单直观地看懂并理解才是一个好的策划案应该具备的基本条件。”

说罢，他也递给我一份新人手册，以及一篇他自己的策划案，“看看这个吧，还有这篇策划案，你可以参考一下，和你的思路有点类似的。”

我谢过他，又跑回到办公桌，看了看阿奇的实验策划案，真长啊。于是我当机立断大笔一挥，在描述过程的段落添加了一大堆我认为还可以添加的描述，然后心满意足地欣赏着我的成品。

嗯，是时候誊写一遍然后上交了！

我用着我最工整的字体，仔仔细细地誊写了一遍，然后直接跳过审核部门前往了站长办公室。

在门口整理了一下衣着，郑重其事地敲了敲门。

“进来！”

缓缓打开了门，我毕恭毕敬地走到了主管面前，交给他了我的策划案。

他也没有过多的废话，直接阅读了起来。

我紧张地看着他，他明亮的双眼缓缓扫过我的策划案。看罢，抬眼看向我，缓缓开口：

“写的很长，不过你不觉得里面没什么东西吗？”

我接回了策划案，道别了主管，回到办公桌。

我把策划案撕得稀碎，狠狠摔在垃圾桶里。

“嘁，老子不干了！”

---

次日。

嗯……也许，我还是应该写一些什么，如果能获得褒奖的话，一定会让我名声大噪的！

实验策划案行不通。那不如，写一篇异常物品记录吧？

好，开写！