평가: +5+x

By: Dr SaganDr Sagan
Published on 06 Nov 2021 14:32
평가: +5+x

What this is

A bunch of miscellaneous CSS 'improvements' that I, CroquemboucheCroquembouche, use on a bunch of pages because I think it makes them easier to deal with.

The changes this component makes are bunch of really trivial modifications to ease the writing experience and to make documenting components/themes a bit easier (which I do a lot). It doesn't change anything about the page visually for the reader — the changes are for the writer.

I wouldn't expect translations of articles that use this component to also use this component, unless the translator likes it and would want to use it anyway.

This component probably won't conflict with other components or themes, and even if it does, it probably won't matter too much.


On any wiki:

[[include :scp-wiki:component:croqstyle]]

This component is designed to be used on other components. When using on another component, be sure to add this inside the component's [[iftags]] block, so that users of your component are not forced into also using Croqstyle.

Related components

Other personal styling components (which change just a couple things):

Personal styling themes (which are visual overhauls):

CSS changes

Reasonably-sized footnotes

Stops footnotes from being a million miles wide, so that you can actually read them.

.hovertip { max-width: 400px; }

Monospace edit/code

Makes the edit textbox monospace, and also changes all monospace text to Fira Code, the obviously superior monospace font.

@import url(';700&display=swap');
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

Teletype backgrounds

Adds a light grey background to <tt> elements ({{text}}), so code snippets stand out more.

tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;

No more bigfaces

Stops big pictures from appearing when you hover over someone's avatar image, because they're stupid and really annoying and you can just click on them if you want to see the big version.

.avatar-hover { display: none !important; }

Breaky breaky

Any text inside a div with class nobreak has line-wrapping happen between every letter.

.nobreak { word-break: break-all; }

Code colours

Add my terminal's code colours as variables. Maybe I'll change this to a more common terminal theme like Monokai or something at some point, but for now it's just my personal theme, which is derived from Tomorrow Night Eighties.

Also, adding the .terminal class to a fake code block as [[div class="code terminal"]] gives it a sort of pseudo-terminal look with a dark background. Doesn't work with [[code]], because Wikidot inserts a bunch of syntax highlighting that you can't change yourself without a bunch of CSS. Use it for non-[[code]] code snippets only.

Quick tool to colourise a 'standard' Wikidot component usage example with the above vars: link

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;

Debug mode

Draw lines around anything inside .debug-mode. The colour of the lines is red but defers to CSS variable --debug-colour.

You can also add div.debug-info.over and div.debug-info.under inside an element to annotate the debug boxes — though you'll need to make sure to leave enough vertical space that the annotation doesn't overlap the thing above or below it.

…like this!

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }
/* source: */
#top-bar .open-menu a {
        position: fixed;
        top: 0.5em;
        left: 0.5em;
        z-index: 5;
        font-family: 'Nanum Gothic', san-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 0.9em;
        text-align: center;
        border: 0.2em solid #888;
        background-color: #fff;
        border-radius: 3em;
        color: #888;
        pointer-events: auto;
@media not all and (max-width: 767px) {
    #top-bar .mobile-top-bar {
        display: block;
        pointer-events: none;
    #top-bar .mobile-top-bar li {
        display: none;
    #main-content {
        max-width: 708px;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -20em;
        width: 17.75em;
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.4s ease-in-out;
        scrollbar-width: thin;
    #side-bar:target {
        left: 0;
    #side-bar:focus-within:not(:target) {
        left: 0;
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin-left: 19.75em;
        opacity: 0;
        z-index: -1;
        visibility: visible;
    #side-bar:not(:target) .close-menu { display: none; }
    #top-bar .open-menu a:hover {
        text-decoration: none;
    @supports (-moz-appearance:none) {
    #top-bar .open-menu a {
        pointer-events: none;
    #side-bar:not(:target) .close-menu {
        display: block;
        pointer-events: none;
        user-select: none;
    /* This pseudo-element is meant to overlay the regular sidebar button
    so the fixed positioning (top, left, right and/or bottom) has to match */
    #side-bar .close-menu::before {
        content: "";
        position: fixed;
        z-index: 5;
        display: block;
        top: 0.5em;
        left: 0.5em;
        border: 0.2em solid transparent;
        width: 30px;
        height: 30px;
        font-size: 30px;
        line-height: 0.9em;
        pointer-events: all;
        cursor: pointer;
    #side-bar:focus-within {
        left: 0;
    #side-bar:focus-within .close-menu::before {
        pointer-events: none;

2/6039 2/6039등급

보안인가 필요


일련번호: SCP-6039

등급: 비격리(Uncontained)


화질을 개선한 최초 발견 당시의 SCP-6039이미지

특수 격리 규약

SCP-6039을 직접 격리하는 것은 불가능하다. SCP-6039의 존재와 관련된 대중 매체는 재단의 웹 크롤러에 의해 삭제되어야 한다. 민간인 목격자들도 마찬가지로 기억 소거제를 투여받아야 한다. SCP-6039가 목표하는 연령대 때문에 SCP-6039의 활동에 대해 주장하는 사람들에 대한 더 이상의 절차가 필요하지 않다.

개정: 현재 SCP-6039와 의사소통하려는 시도가 보류 중이다.


SCP-6039는 지각, 지성, 그리고 평균 수준의 지능을 보이는 봉제인형 곰이다. 높이는 45cm 정도이고 색은 갈색이며, 목에는 나비넥타이를 매고 있다.

SCP-6039는 거의 순간적으로 한 위치에서 다른 위치로 이동할 수 있다. SCP-6039는 일반적으로 어떠한 형태의 부상이나 질병을 겪고 있는 12세 이하의 어린이가 혼자 있을 때 가까이에서 나타난다. 나타난 즉시, 대상은 다음을 포함한 다양한 활동을 통해 대상을 즐겁게 한다.

  • 춤추기
  • 인형극
  • 체조
  • 신체적 묘기

SCP-6039의 행동에 숨겨진 동기가 존재하는지, 존재한다면 무엇인지는 분명하지 않다. 일정하지 않은 시간이 흐르면 대상은 사라진다.

성인이 SCP-6039의 공연을 방해하면 대상은 즉시 사라진다. 그러나, 주변의 작동하는 카메라를 인지하지는 못하는 것처럼 보이기 때문에 영상으로는 촬영할 수 있다(발견 기록 참고). 현재까지 SCP-6039는 목표한 연령대를 제외한 개인 앞에서 나타난 사례는 보고되지 않았다.1


발견 기록

SCP-6039는 처음에 소셜 미디어 플랫폼 페이스북Facebook에서 가정용 보안 카메라의 영상이 퍼진 후 재단의 주목을 받았다. 영상은 SCP-6039가 3살인 데이지 뉴스턴과 장난스럽게 어울리는 내용이다.2 영상은 얼마 지나지 않아 내려졌고 관련된 모든 인원에게 기억 소거제가 투여되었다.

앞서 언급한 영상의 묘사를 위한 등본이 아래에 첨부되어 있다. SCP-6039에 대한 추가 영상은 요청 시 제공된다.

보안 카메라 화면

[기록 시작]

[비고: 녹화 당시 데이지의 왼쪽 다리에는 작은 상처가 있었다.]

[데이지가 앉아서 거실 카펫에 흩어져 있는 다양한 알파벳 블록들을 서투르게 갖고 노는 것이 보인다. 데이지가 공갈젖꼭지를 빼고 입 안에 블록을 넣으려 할 때, 갑자기 빛이 번쩍이고 SCP-6039가 소파의 팔걸이에 나타난다. 그러나 데이지는 등을 돌리고 있었기 때문에 이 사실을 알아차리지 못한다.]

[SCP-6039는 데이지의 시야 범위를 향해 옆구르기를 하며 관심을 끈다. 데이지는 이것을 뚫어지게 바라보며 입에서 뺀 블록을 바닥에 내려놓는다. SCP-6039는 데이지에게 조용히 손을 흔들지만, 데이지는 반응하지 않는다.]

[잠시 침묵이 흐른 후, SCP-6039는 각각 오드리 뉴스턴과 제프리 뉴스턴을 닮은 조잡하게 만들어진 두 개의 양말 인형을 뒤에서 꺼낸다. SCP-6039가 이 인형들을 어디에 두었었는지는 불확실하다.]

[SCP-6039는 양말 인형을 이용한 공연을 시작한다. 녹화 내내, SCP-6039이 거실 내의 다른 장소로 바쁘게 움직이는 것을 볼 수 있다. 연극 동안 데이지가 가끔씩 웃고 박수친다.]

[SCP-6039의 공연이 멈춘 후, 대상은 이전 위치로 돌아간다. 그 후, 고개를 숙이고, 다시 한 번 인사한다. 데이지는 일어서서 다가간 뒤, SCP-6039를 포옹한다. SCP-6039는 이에 반응하지 않는다. 이후, 데이지가 한 발 물러나고 SCP-6039는 갑자기 무너지듯 사라진다. 데이지는 잠시 멈춰있다가 영상 초기의 자리로 돌아간다.]

[기록 종료]

재단에 발견되기 전까지 SCP-6039가 얼마나 오래 활동했는지는 밝혀지지 않았다.

출현 기록

아래는 SCP-6039의 징후 예시이며, 전체 목록은 요청 시 제공된다.

조사 목록-6039

대상 사건 기록
매튜 포르쉐(6). 오른쪽 집게 손가락에 가벼운 상처를 입었다. SCP-6039는 매튜를 닮은 미니어처 인형을 꺼내 다친 손가락에 끼운다. 그 뒤, SCP-6039는 자신의 미니어처 인형을 보여준다. 둘은 장난감을 가지고 함께 놀기 시작한다.
제시 스타인필드(8). 평범한 감기에 걸렸다. SCP-6039는 동영상이 재생되는 동안 방에서 외발 자전거를 타고 있다. 제시가 박수를 치는 동안, 독립체는 인사를 한 뒤 사라졌다.
루디 홉스(10). 팔 골절상을 입었다. SCP-6039가 검은색 샤피 마커(Sharpie marker)3를 꺼내 루디의 석고붕대에 사인한다. 나머지 녹화 부분에서는 그의 방 청소를 돕는다.
대니 넬슨(12). 하반신이 마비되었다. SCP-6039는 해적 복장을 입고 등장해 공연한다. 대니는 손을 인형 삼아 활발하게 놀이한다. 놀이가 마무리되자 SCP-6039는 대상자의 무릎에서 사라진다.
베서니 굿윌(12). 백혈병을 앓고 있다. SCP-6039는 나타난 후 내내 움직이지 않았다. 베서니는 녹화 내내 대상을 안고 있다.


2021년 3월 29일, 선임 연구원 찰스 피터슨4은 상당히 늦게 왔다. 왜 그러냐는 질문에도 대답하지 않았다. 증언에 따르면, 그는 평소보다 무기력하고 의욕이 없으며, 그로 인해 업무를 잘 하지 못했다고 한다. 또한 피터슨은 격식을 차리지 않은 옷을 입고 있었고, 눈에 다크서클이 있었다. 아마도 휴식이 부족했기 때문일 것이다.

피터슨은 사무실에서 쉬는 시간을 보내기로 결심했고, 그곳에서 방해받지 않고 바로 잠이 들었다. 잠시 후, 피터슨 근처에서 느닺없이 SCP-6039가 나타났고, 이후 상호작용이 영상에 포착되었다. 녹화 내용은 다음과 같다.

녹취 기록

[기록 시작]

[피터슨은 책상 위에 머리를 대고 투명한 액체(후에 눈물로 보여졌다)로 얼룩진 채 사무실 의자에서 조용히 자고 있다. 그는 사진 액자를 들고 있다.]

[SCP-6039이 영상 프레임 밖에서 출현했다는 것이 갑자기 나타난 섬광에 의해 보여진다. 잠시 후, 대상은 피터슨 뒤에서 한 발씩 다가간 뒤 피터슨의 얼굴을 응시한다.]

[SCP-6039는 피터슨과 충분히 가까워지자 조용히 그의 왼쪽 다리를 감싸안는다. 둘은 동일한 자세로 23분간 가만히 있는다.]

[시간이 흐른 후, SCP-6039는 다리를 놓는다. 그리고 피터슨의 얼굴을 한 번 힐끗 쳐다보더니 돌연 사라진다. 그 후, 피터슨은 꺠어난다.]

[피터슨은 그의 왼쪽 다리를 잠시 바라본 뒤, 책상 위의 액체를 발견한다. 그는 주머니에서 손수건을 꺼내 닦는다. 그 다음, 피터슨은 몸을 잠시 정돈한 후 사무실을 나선다.]

[기록 종료]

이후 피터슨은 정상 상태로 돌아왔지만, 위의 장면을 언급하자 "따뜻하게 느껴졌다"고 말했다. 더 이상 이상행동은 하지 않았다.

피터슨의 사무실에서 간단한 조사가 이루어졌고, 어설프게 편지가 쓰인 구겨진 쪽지가 발견되었다. 내용은 다음과 같다.


🈲: SCP 재단의 모든 컨텐츠는 15세 미만의 어린이 혹은 청소년이 시청하기에 부적절합니다.
따로 명시하지 않는 한 이 사이트의 모든 콘텐츠는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0 라이선스를 따릅니다.