/* 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;
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;
}
/* 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;
}
}
}
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.
.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;
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;
}
/* 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;
}
새끼를 돌보는 레서판다. 출산 일주일 후 SCP-760-KO가 발생했다.
일련번호: SCP-760-KO
등급: 유클리드(Euclid)
특수 격리 절차: SCP-760-KO를 미연에 방지하거나 정확히 예측할 수 있는 방법은 아직까지 밝혀지지 않았다. 담당 인원들은 SCP-760-KO 발생 징후를 조기에 파악할 수 있도록 레서판다를 암수 한 쌍 이상 보유중인 동물원 또는 동물 사육시설을 상시 감시한다.
출산이 임박한 레서판다가 새롭게 확인되었을 경우, 재단 인원을 해당 시설로 파견해 SCP-760-KO 발생에 대처한다. 나타난 SCP-760-KO-A는 가능하다면 회수하고, 회수가 어렵다면 동물이 섭취하거나 부패해 없어지는 식으로 자연스럽게 사라지도록 둔다. SCP-760-KO를 직접 목격한 인물이 있을 경우에는 필요에 따라 기억소거제 사용이 허가된다. SCP-760-KO가 대중에게 공개된 장소에서 발생하여 기억소거 처리만으로 은폐가 힘든 경우에는 커버스토리 C7182F ("깜짝 이벤트")를 유포하여 그 변칙성이 드러나지 않도록 조치한다.
설명: SCP-760-KO는 최근 출산을 한 레서판다(Ailurus fulgens)를 대상으로 발생하는 변칙현상이다.
SCP-760-KO는 특히 출산 이후 1-2주 이내에 새끼를 낳은 레서판다에게만 발생하는데, 변칙 대상이 된 레서판다의 근처 무작위적인 장소에 각종 과일, 꽃잎, 대나무 이파리와 작은 죽순 등으로 장식한 리프이터 비스킷이 생성되는 식이다. 그 형태 및 크기는 사례마다 다양했으며, 보통 지름 8~10cm 정도 크기에 위에서 언급한 재료로 화려하게 꾸며져 있는 상태로 나타났다. 이 물체를 앞으로 SCP-760-KO-A라고 지칭한다.
생성 과정을 제외하면 SCP-760-KO-A 자체에는 별다른 특이성이 없으며, 인간과 동물 모두 회수한 SCP-760-KO-A를 섭취했을 때 아무런 이상반응을 보이지 않았다. SCP-760-KO의 발생 원인과 과정에 대해서는 아직까지 밝혀진 사실이 없다. 회수한 SCP-760-KO-A의 성분 분석 결과에서도 주목할 만한 단서는 포착되지 않았다.
현재까지 전세계 20여개국에서 SCP-760-KO 발생 사례가 기록되었으며, 대부분은 밤이나 새벽 시간대에 발생했다. SCP-760-KO가 야생 상태의 레서판다를 대상으로 발생한 사례는 아직까지 보고된 바가 없다.
발견: SCP-760-KO는 2017년 6월, 네덜란드의 로테르담 동물원에서 최초로 발견되었다. 당시 해당 시설에서는 쌍둥이를 출산한 레서판다를 사육중이었다. 처음에는 담당 사육사들이 자체적으로 마련한 축하 이벤트로 생각되었으나, 로테르담 동물원 경영진 및 직원 측에서 그러한 이벤트를 계획중이었다는 정황이 전혀 포착되지 않았다. 이후 레서판다를 보유한 다른 시설에서 유사한 사건이 수차례 발생하자 재단은 본격적으로 확인에 나섰으며, 조사 결과 변칙현상임이 입증되어 현재와 같은 격리절차가 수립되었다.
부록: 사건기록-760KO
2018년 8월, 네팔에 위치한 동물 보호시설에 출산이 임박한 레서판다가 있다는 보고를 받고 SCP-760-KO 대처를 위해 재단 인원이 해당 시설에 파견되었다. 그러나 새끼는 사산되었으며, 어미 또한 출산 직후 급격히 건강상태가 악화되어 폐사했다. 이로 인해 SCP-760-KO가 발생하지 않을 것으로 예상되었으나, 다음 날 아침 폐사한 레서판다가 있던 우리에서 종을 알 수 없는 파란색 꽃 두 송이가 생성되었다. 생성된 물체가 이전 사례와 차이가 있었다는 점에서 이 꽃들은 SCP-760-KO-B로 지정되었다.
SCP-760-KO-B는 뿌리와 잔가지가 제거된 채로 깔끔히 다듬어져 있었고, SCP-760-KO가 발생한 장소가 건조한 상태였는데도 꽃잎에는 물기가 약간 맺혀 있었다. 꽃들은 곧바로 회수되어 분석을 위해 재단 연구시설로 보내졌으나, 이송 도중 갑자기 검게 변색되더니 산산히 부서져 전부 먼지로 변했다. 남은 먼지에서 유전자를 추출해내 SCP-760-KO-B를 인공적으로 복원하려는 시도는 성공을 거두지 못했다.
