SCP-426-KO

/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
#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;
}
 
@media (min-width: 768px) {
 
    #top-bar .mobile-top-bar {
        display: block;
    }
 
    #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-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;
    }
 
    /* FIREFOX-SPECIFIC COMPATIBILITY METHOD */
    @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;
    }
    }
}
SCP-426-KO
Author: PayroyPayroy
Published on 30 Nov 2021 16:37
/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
#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;
}
 
@media (min-width: 768px) {
 
    #top-bar .mobile-top-bar {
        display: block;
    }
 
    #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-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;
    }
 
    /* FIREFOX-SPECIFIC COMPATIBILITY METHOD */
    @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;
    }
    }
}
평가: +25+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.

Usage

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('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;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; }
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
 
/* Flopstyle CSS Theme
 * [2020 Wikidot Theme]
 * Created by Lt Flops
 * Select CSS Styles Are Credited Where Necessary
 * -- (CC BY-SA 3.0) --
**/
 
/* ---- SITE HEADER ---- */
 #header h1 a{
     font-family: "Montserrat", "Arial", "Noto Sans KR", sans-serif;
}
 
/* ---- FORMATTING | [SPECIAL] ---- */
 @font-face {
     font-family: "D2Coding";
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/D2Coding.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 }
 :root{
     --mono-font: "D2Coding", "Fira Code", "Nanum Gothic Coding", monospace;
}
 
/* ---- CUSTOM DIV BLOCKS ---- */
 .journal{ /* ---- Journal Block (Adapted From SCP-4003) ---- */
     font-family: "Architects Daughter", "Nanum Pen Script", cursive;
}




평가: +25+x

일련번호: SCP-426-KO 3/426-KO 등급
등급: 유클리드(Euclid) 보안인가 필요

위협등급: 주황색


crow.jpg

SCP-426-KO의 스프라이트.

특수 격리 절차: SCP-426-KO는 현재 본 문서 내에 자가 격리 중인 상태다. SCP-426-KO가 인터넷 기능으로 위장했을 가능성이 있으므로, 문서에 접근하는 인원들은 오로지 키보드만의 기능을 사용해야 한다. 문서에 광고창이 첨부되어있는 경우, 직속 상사에게 보고해야 한다. 매주 D계급 인원을 이용해 SCP-426-KO에게 먹이를 지급한다.

설명: SCP-426-KO는 인터넷 상에서 출현하는 새 모양의 픽셀 스프라이트다. SCP-426-KO는 지각이 있으며, 대체로 인터넷 사이트를 중심으로 거처를 삼으려는 습성이 있다. SCP-426-KO는 그렇게 한 사이트에 3~4개월 동안 존재하다가 다른 곳으로 거처를 옮긴다.

SCP-426-KO는 관념 포식성 독립체로, 대상은 때때로 인터넷 이용자들의 인식을 포식할 때가 있다. 인터넷 이용자가 마우스 커서를 통해 SCP-426-KO를 클릭했을 경우, 대상은 직접적으로 이용자의 관념에 접근할 수 있는 것으로 추측된다.1 이를 위해 대상은 인터넷에 속한 기능이나 광고창 따위로 위장하는 경향이 존재한다. 관념을 포식당한 인원들은 약 일주일간 지능이 떨어지거나, 감정의 기복이 커지거나, 매사에 부정적으로 되는 등의 현상을 겪게 된다. 이는 회피성 인격장애의 증상과 유사한 경향이 있다.

SCP-426-KO는 주 거처를 인터넷 이용자가 가장 몰리는 대한민국의 커뮤니티 사이트들로 삼고 있다. 현재까지 10개 이상의 커뮤니티를 거처로 삼었던 것으로 확인되며, 갖은 피해를 야기한 것으로 예상된다. 이때까지 있었던 특정 커뮤니티 이용자 대부분이 기행을 벌인 사건들 또한 SCP-426-KO의 존재가 어느 정도 영향을 끼쳤으리라 예상된다.

부록 426KO.01: SCP-426-KO는 2017년 6월 15일 인터넷 사이트를 이용 중이던 재단 직원들에게 발견되었다. 해당 직원들은 당시 SCP-426-KO가 위장하는 모습을 목격하였고, 직속 상사에게 이를 보고했다. 당일 SCP-426-KO를 클릭한 김██ 상급연구원의 관념이 개체에 의해 포식되었고 다음과 같은 기행을 벌였다.

  • 감정 기복을 주체하지 못해 동료 직원과 말싸움을 벌임
  • 부하 직원들을 향한 모욕적인 언행과 조롱
  • 격리 실패로 탈출한 변칙개체를 방임하고 시설에서 혼자 탈출함
  • 탈출한 이후 민간인에게 시비를 걸다 경찰에게 연행됨

김██ 상급연구원은 곧바로 체포되어 재단에 연행되었으며, 변칙개체의 탈출에 대한 방임 문제로 2주 정직과 전근을 선고받았다. 당시 김██ 상급연구원을 심문했을 때 그는 “여기서는 괜찮을 줄 알았다”며 자책하는 모습을 보였다. 이후 진행된 추가 조사에서 SCP-426-KO의 변칙성이 드러나, 재단 연구팀은 곧장 조사 및 연구에 착수하였다. 김██ 상급연구원은 피해 받은 직원들에게 사과하는 조건으로 면책되었다.

사건기록 426KO.01


scpoffices_logo.svg

사건 426KO.01 2019년 2월 15일경, SCP-426-KO는 머무르던 사이트를 벗어나 초상 커뮤니티 사이트인 골목길2로 이주했으며, 이하의 사건을 겪었다. 다음 문서는 해당 사건을 서술하며, 수집된 자료들을 시간선에 따라 첨부해둔 것이다.






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