SCP-535-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-535-KO
By: PayroyPayroy
Published on 18 Apr 2022 09:13
평가: +18+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; }
/* 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;
    }
    }
}

@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;
}
평가: +18+x

일련번호: SCP-535-KO

등급: 안전(Safe)

특수 격리 절차: 재단 알고리즘이 매년 SCP-535-KO를 수집해 통계를 분석한다.

설명: SCP-535-KO는 광주광역시 ███군에 위치한 한 고등학교에서 발생하는 이상현상이다. SCP-535-KO는 항밈적 특성을 가지고 있으며, 제대로 된 인지가 불가능하게 만든다. 이는 재단 인원들 역시 마찬가지로, 항밈적 특성만을 인지했을 뿐 개체가 무엇을 조작하는진 자세히 알 수 없었다.

현재 재단이 밝혀낸 SCP-535-KO의 변칙성은 학교 시험 등수표에 이상 조작을 가하는 것이다. 그러나 현재 이 변칙성에 대응할 수 있는 작업은 통계를 모으고 분석하는 일뿐이다. 확실한 건 밝혀진 바 없다.

부록: 통계 자료.

  • 2012년 등수표

1위: 김수영
2위: 이건휘
3위: 정화성
4위: 김휘수
5위: 한지민
6위: 이근영
7위: 하지현
8위: 감 철

  • 2013년 등수표

1위: 김수영
2위: 정화성
3위: 한지민
4위: 김휘수
5위: 고영아
6위: 감 철
7위: 하지현
8위: 이근영

  • 2014년 등수표

1위: 김수영
2위: 김휘수
3위: 한지민
4위: 고영아
5위: 감 철
6위: 하지현
7위: 이근영
8위: 김지수

  • 2015년 등수표

1위: 김수영
2위: 이휘태
3위: 성아련
4위: 김지현
5위: 김은중
6위: 공보감
7위: 감성진
8위: 안형수

  • 2016년 등수표

1위: 김수영
2위: 김지현
3위: 성아련
4위: 강희정
5위: 김은중
6위: 공보감
7위: 감성진
8위: 안형수

부록2: 음성기록

비고: 다음은 ██고 김영철 교장이 김수영 학생과 진행한 인터뷰이다. 본 인터뷰에 항밈적 성질이 검출되었다. 각별히 주의를 요하기 바란다.


김 교장: 자, 자. 이리 앉아요. 수영 학생.

김수영 학생: 또 이 학교.

김 교장: 올해도 1등을 놓치지 않았군요. 정말 장합니다 수영 학생.

김수영 학생: 어째서 내가 여기 있는 거야? 졸업했잖아, 했다고!

김 교장: 하하. 역시 인성이 바른 학생답군요. 학생들이 수영 학생을 본보기 삼아야 할 텐데.

김수영 학생: 엄마 보고 싶어.

김 교장: 수영 학생은… 어째서 그렇게까지 열심히 공부하는지 이유를 들어볼 수 있을까요?

김수영 학생: 아뇨. 아뇨. 전 공부 못해요. 한 번도 1등 하려고 노력해본 적이 없어요. 이건 전부 꼼수란 말이에요. 1등 한번 해보고 싶었어요. 엄마에게 인정받고 싶었다고요. 근데 이렇게 될 줄 누가 알았겠어요. 제발, 선생님. 제 말 들려요?

김 교장: 허허. 어린 나이에도 성실하네요. 역시 ██고의 자랑입니다.

김수영 학생: 제발요. 전 졸업했다고요. 졸업하면 다 끝이라메요. 셀레스튼가 뭐시긴가 씨발. 제발요. 매년 같은 날마다, 전 부모가 바뀌어요. 매번 다른 집에서 잠을 자야 한다고요. 전 그렇게 원래부터 그 학생인 것 마냥 연기를 해야 해요. 그게 정말, 엄마. 우리 엄마. 엄마가 이 사실을 알아요? 전 평생…(비명 지른다.)

김 교장: 음. 정말 장해요.



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