| SCP-634-KO |
|---|
| By: |
| Published on 18 Apr 2022 17:14 |
What this is
A bunch of miscellaneous CSS 'improvements' that I, Croquembouche, 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; }
@font-face { font-family: 'GowunBatang-Bold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Bold.woff') format('woff'); font-weight: normal; font-style: normal; } /* sigma-9 기반 n주년 연말경연 테마 */ :root { --header-logo: url(http://scpko.wdfiles.com/local--files/theme%3Aanniversary/anniversary_h.png) 0px 35px no-repeat; --color-bg: var(--color-bg-1, #B01); --color-ip: var(--color-ip-1, #000); --font: var(--font-1, #FFF); --shadow: var(--shadow-1, transparent); --header-sub: "우리가 살아가는 곳"; --color-bg-1: {$bg}; --color-ip-1: #E7340C; --font-1: #FFF; --shadow-1: #000; } /* COMMON */ #content-wrap { min-height:1700px; height: auto; } h1, #page-title { font-family: 'GowunBatang-Bold', Arial, sans-serif; color: var(--color-ip); } #page-title { border-color: var(--color-ip); } /* links */ a { color: var(--color-ip); } a:visited, #side-bar a:visited { color: var(--color-ip); } #page-content a.newpage, #side-bar a.newpage { color: var(--color-ip); filter: opacity(60%); } body { background-color: #FFF; color: #000; } /* HEADER */ div#container-wrap { background: none; } div#extra-div-1 { height: 140px; width: 100%; top: 0; position: absolute; background: var(--color-bg); } div#extra-div-2 { height: 22px; width: 100%; top: 140px; position: absolute; background: var(--color-ip); } #search-top-box-input { border: transparent; color: var(--font); background-color: var(--color-bg); } #search-top-box-input:hover, #search-top-box-input:focus { border: solid 0.5px #888; color: var(--color-ip); background-color: var(--color-bg); } #search-top-box-form input[type=submit] { border: transparent; color: var(--font); text-shadow: 0 0 3px var(--shadow); background: none !important; background-color: var(--color-bg); } #search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus { border: solid 0.5px #FFF; color: var(--color-ip); background: none !important; background-color: var(--color-bg); } #login-status { color: var(--font); text-shadow: 1px 0 var(--shadow), -1px 0 var(--shadow), 0 1px var(--shadow), 0 -1px var(--shadow); } #login-status a { color: var(--font); text-shadow: 1px 0 var(--shadow), -1px 0 var(--shadow), 0 1px var(--shadow), 0 -1px var(--shadow); } #login-status ul a { color: #444; text-shadow: none; } #header { background: none; } div#header-extra-div-1 { background: var(--header-logo); background-size: 100px; filter: hue-rotate({$h}deg) saturate({$s}) brightness({$b}); position: absolute; top: 0px; bottom: 0px; left: 0px; width: 100px; } #header h1 a { color: transparent; font-family: 'GowunBatang-Bold', Arial, sans-serif; font-size: 150%; text-shadow: none; letter-spacing: 0.5px; } #header h1 a::before { content: "SCP 재단"; color: var(--color-ip); text-shadow: none; } #header h2 span { color: transparent; font-family: 'GowunBatang-Bold', Arial, sans-serif; font-size: 120%; text-shadow: none; margin-left: 5px; } #header h2 span::before { content: var(--header-sub); color: var(--font); text-shadow: 1.5px 0 var(--shadow), -1.5px 0 var(--shadow), 0 1.5px var(--shadow), 0 -1.5px var(--shadow), 1px 1px var(--shadow), -1px 1px var(--shadow), 1px -1px var(--shadow), -1px -1px var(--shadow); } #top-bar a { color: #FFF; } #top-bar ul li ul { border: solid 1px #EEE; box-shadow: none; } #top-bar ul li.sfhover a, #top-bar ul li:hover a { background: #EEE; color: #444; } #top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a { border-top: 1px solid #EEE; } #top-bar ul li.sfhover a:hover, #top-bar ul li:hover a:hover { background: #DDD; } #top-bar ul li ul a, #top-bar a:hover, .c_topbar_arrow { color: #444; } #top-bar ul li ul li ul { border: none; } /* SIDE MENU */ #side-bar { background: #FFF; } #side-bar .side-block .menu-item img { display: none; } #side-bar div.side-block:nth-child(4) > div:nth-child(1) > div:nth-child(1) img { filter: none; -webkit-filter: none; } #side-bar .side-block { border: none; background: #FFF !important; box-shadow: none !important; } #side-bar .heading { color: var(--color-ip); border-bottom: solid 1px var(--color-ip); } #side-bar div.menu-item.inactive a { color: var(--color-ip); } #side-bar div.menu-item .sub-text { color: var(--color-ip); } #side-bar .collapsible-block-folded { background: #FFF; } #side-bar .collapsible-block-unfolded-link { border-bottom: solid 1px var(--color-ip); } #side-bar .collapsible-block-unfolded-link .collapsible-block-link { color: var(--color-ip); } #side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover { color: var(--color-ip); } /* YUI-TABS */ .yui-navset .yui-content{ background-color: #FFF; } .yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a { background: #EEE url(none) repeat-x; border-top: solid #333 1px; border-left: solid #444 1px; border-right: solid #444 1px; color:#000; } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */ .yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */ background: #444; /* selected tab background */ color: #EEE; } .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus { background: #DDD; text-decoration: none; } .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav { border-color: #444; } /* Rating Module */ .page-rate-widget-box{ box-shadow: none; } .page-rate-widget-box .rate-points { background-color: var(--color-bg) !important; border: solid 1px var(--color-bg); color: var(--font); } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown { background-color: var(--color-bg); border-top: solid 1px var(--color-bg); border-bottom: solid 1px var(--color-bg); } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a { color: var(--font); } .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover { background: var(--color-bg); color: var(--color-ip); } .page-rate-widget-box .cancel { background-color: var(--color-bg); border: solid 1px var(--color-bg); } .page-rate-widget-box .cancel a { color: var(--font); } .page-rate-widget-box .cancel a:hover { background-color: var(--color-bg); color: var(--color-ip); } /* Info Rating Module */ .rate-box-with-credit-button { background-color: var(--color-bg) !important; border: 1px solid var(--color-bg) !important; border-radius: 5px !important; box-shadow: none !important; } .rate-box-with-credit-button .creditButton p a { border-left-color: var(--color-bg) !important; color: var(--font); } .rate-box-with-credit-button .creditButton p a:hover { color: var(--color-ip); } .rate-box-with-credit-button .page-rate-widget-box .cancel { border-radius: 0; } .rate-box-with-credit-button .page-rate-widget-box .rate-points { border-left: 0; } /* Heritage Collection Rating Module */ .heritage-rating-module { background-color: var(--color-bg); box-shadow: none; } /* Mobile Media Query */ @media (max-width: 479px) { div#header-extra-div-1 { background-position: 0 4.5em; background-size: 60px 60px; width: 60px; } #header h1 a { font-size: 120%; } #header h1, #header h2 { margin-left: 66px; } } /* Small Mobile Media Query */ @media (max-width: 385px) { div#header-extra-div-1 { background-position: 5% 5.5em; } #header h1, #header h2 { margin-left: -webkit-calc(66px + 5%); margin-left: -moz-calc(66px + 5%); margin-left: calc(66px + 5%); } } /* Note Media Query */ @media (min-width: 480px) and (max-width: 580px) { div#header-extra-div-1 { background-position: 0.5em 4.5em; background-size: 66px 66px; width: 72px; } #header h1 a { font-size: 120%; } #header h1, #header h2 { margin-left: 80px; } } /* Mini Tablet Media Query */ @media (min-width: 581px) and (max-width: 767px) { div#header-extra-div-1 { background-position: 0.5em 3.5em; background-size: 77px 77px; width: 85px; } #header h1 a { font-size: 140%; } #header h1, #header h2 { margin-left: 93px; } } /* Tablet Media Query */ @media (min-width: 768px) and (max-width: 979px) { div#header-extra-div-1 { background-size: 88px 88px; width: 88px; } #header h1, #header h2 { margin-left: 106px; } }
일련번호: SCP-634-KO
등급: 안전 (Safe)
특수 격리 절차: SCP-634-KO는 제05K기지의 식물형 SCP 격리 동에 격리한다. SCP-634-KO를 대상으로 한 관리는 표준 식물형 SCP 관리 절차를 따른다.
설명: SCP-634-KO는 대한민국 전라남도 광주광역시 [편집됨]에서 발견된 동백나무(C. japonica)이다. SCP-634-KO는 조선 중기에 심어진 것으로 추정되며, 아래에는 9구의 시신이 매장되어있다.
SCP-634-KO에 접촉한 대상은 SCP-634-KO-A를 목격하게 된다.
SCP-634-KO-A는 정주성 심령 독립체로, 일반적으로는 지박령(地縛霊)이라 일컬어진다. SCP-634-KO-A는 성인 여성의 형상을 띄며, 조선 시대의 기녀복(妓女服)을 착용하고 있다. SCP-634-KO-A는 SCP-634-KO와 접촉자를 제외한 모든 대상과 물리적인 상호작용이 불가능하며, 접촉자에 한정하여 음성을 통한 의사소통이 가능하다.
부록 634ko/A: 다음은 SCP-634-KO-A를 대상으로 실시된 면담 기록의 발췌본이다.
면담 기록 634ko
비고: SCP-634-KO-A의 발언은 신재우 박사와 함께 SCP-634-KO에 접촉하고 있었던 재단 서기에 의해 기록됨.
(중략)
신재우 박사: 여기서 뭐하고 계십니까?
SCP-634-KO-A: 자리를 지키지요.
신재우 박사: 자리를 지킨다 하심은?
SCP-634-KO-A: 말 그대로요. 이곳에서 재회하기로 하였기에.
신재우 박사: 누구와 재회한다는 말씀이시죠?
SCP-634-KO-A: 그야 물론 저의 소중한 임 아니겠습니까.
(중략)
신재우 박사: 실례지만, 그러면 귀하는 스스로가 어떤 상태인지 알고 계신다는 말씀이십니까?
SCP-634-KO-A: 당연한거 아니겠소. 소녀의 몸이 어찌 산 자의 몸이겠습니까. 이리 봐도 저리 봐도 망자임이 분명커늘.
신재우 박사: 그렇다면 어째서 이곳에 계시는 겁니까?
SCP-634-KO-A: 재회하고자 약조하였으니까.
신재우 박사: 약조라 함은, 이전에 말씀하셨던 '임' 말씀이신가요?
SCP-634-KO-A: 그러하오.
신재우 박사: 어떤 약조를 하셨는지 여쭤봐도 되겠습니까?
SCP-634-KO-A: 제가 사정이 생겨 먼저 절명하고 말았으니, 이 동백나무 아래서 그이를 영원토록 기다리겠다. 하는 약조이지요.
신재우 박사: 그분을 굉장히 사랑하셨나봅니다.
SCP-634-KO-A: 한낱 기생 나부랭이였던 저를 사모하여 이름과 삶을 주시고, 몽매하던 저를 손수 일깨워주시고, 황천을 헤메이고 있던 저를 마지막까지 걱정해주신 그이을 어찌 애정치 않으리오.
(중략)
신재우 박사: 그럼 그 '임'은 만나셨습니까?
SCP-634-KO-A: 사실 옛저녁에 몇번 만나긴 했소만, 매번 사정이 있어 돌려보냈지요.
신재우 박사: 어째서죠?
SCP-634-KO-A: 임께서 오랜 세월에 그만 바람이 든건지, 저를 잊고 다른 것을 품는 것 아니겠습니까.
신재우 박사: 그럼 귀하는 어떻게 하셨나요?
SCP-634-KO-A: 남의 임을 탐하는 어리석은 것들은 죄로 다스려야 마땅치 않겠습니까.
신재우 박사: 자세히 말씀해주세요.
SCP-634-KO-A: 그이를 유혹했을 그 입술과 혀를 도려내고, 그이를 붙잡았을 그 더러운 손을 잘라내고, 그이와 정을 나눴을 그 성기를 뽑아버려 산채로 묻어버렸지요.
신재우 박사: 이 나무(SCP-634-KO) 아래에 말씀이신가요?
SCP-634-KO-A: 그러하오.
신재우 박사: 시신이 9구가 발견되었습니다만.
SCP-634-KO-A: 난(蘭)을 탐하는 충(蟲)이 많아 달리 어찌 할 도리가 없었지요.
(하략)