| SCP-7013 - 視實是十三 |
By:  Edward_Knave |
| Published on 07 Aug 2022 19:45 |
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: -18rem;
width: 15.25rem;
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;
}
}
}
SCP-7013呈現為一系列影響全球的基金會設施及人員的極罕見事件的異常凝集。該等極罕事件俱無一例外引致不幸、傷亡、財產損壞、人員集體被惡魔附體、以及連鎖性的收容突破。一切被記錄在案與SCP-7013有關的現象俱直接或間接牽涉第十三名監督者。
[ 紀錄開始 ]
[議會全體除O5-1、O5-2、O5-6及O5-13以外俱在會議室內。全體與會者呈乏力貌，當中部分人嘆息。數人偶爾望錶，其餘與會者相互爭辯並急忙翻閱文件及其他紀錄。]
[入口敞開，O5-2手持筆記板，連同攜大量紙箱及釘裝文件的隨從而來。隨兩人現身，一陣低噓聲於助理在桌面羅列材料的同時傳開室內。眾助理隨後走到室內的遠端，為議會讓出空間。]
[O5-2揉眼並將筆記板擲落玻璃桌面，而後癱坐在其座位。]
O5-2： 好了，各位，呃、來開始吧。
O5-5： 一One和六Six呢？
O5-2： 很不幸地，他們今天來不到了，因為一件……意料之外的——
O5-7： 意料之外個屁。
[O5-2 無視打斷並繼續發言。]
O5-2： ——資安突破暫時妨礙了他們的交通。也因為突發的通訊中斷，我們也沒辦法與他們遙距聯絡。
[O5-2 深呼吸]
O5-2： 而這就將我們帶到正題——十三Thirteen。
O5-4： 甚麼？這怎會？他根本就不在場。
O5-2： 從對他所知……嗯，就對他所知，他鐵定會遲。
O5-12： 這對我們是好事，畢竟、你們懂的……
O5-10： 因為他蠢？
O5-11： 拜託，沒必要這樣說。是真的沒錯，但是……[嘆息]沒必要說。
O5-4： 天啊，我從17那邊離開來到這裡，你們究竟知不知道那邊現在發生了多少狗屁倒灶的事？
O5-8： 拜託，以現在這麼多事，我們根本就不應該靠近那些危險區。但是我也同意的，我們來這裡難道就只是為了說十三Thirteen的壞話嗎？
[O5-2嘆氣並向助理打下手。助理開始將一系列的文件派予每位議會成員。]
O5-2： 這就是十三Thirteen缺席這次會議的原因。你們現在手上的是SCP-7013的擬稿。
[議會全體與會者略讀獲發的文件，室內為之靜默。]
O5-5： 這……這認真的嗎？
O5-2： 沒錯，一切都在這裡，由一One親點的團隊一一記下。
O5-10： 我的老天，這些檔案全都是……
O5-2： 全都是被確認因十三Thirteen的間接影響所致的事件，沒錯。
[議會全體與會者繼續速讀文件，室內靜默。]
O5-9： 幹。83的襲擊？57那次他媽的突破？這……
O5-7： 嘛，我不能說這完全不能意料，但是如果這一切屬實——
O5-2： 屬實。信我吧。我跟一One用了好幾星期統整了這些情報。
O5-12： 等一下。所以你那晚就請他過來打保齡球？[提高聲量]你可是會害我們全部死在那裡！
O5-2： 沒錯。我沒有更早提出這件事，很抱歉。
[議會全體與會者凝望桌面沉思。少頃無人動身。]
O5-11： 所以，我們現在應該怎麼辦？
O5-7： 有些事必須要辦。我們有足夠資源，可以將十三Thirteen鎖在籠裡，讓他連一個念頭都逃不出去。
O5-9： 聽著，十三Thirteen是個煩得透頂的混帳沒錯，這毫無疑問的。但是這至於要鎖起一個議會成員？這從前都沒有試過！我完全不能同意。
O5-4： 他是異常啊！我們不得不這樣做！
O5-9： 好，聽著，我沒有要違反使命，一點意思都沒有，但是如果我們真的逢遇異常個體必定收容，我們半數的職員都得不見。這個論點太弱了。
O5-10： 那為甚麼不乾脆換另一個人頂他的位子算了？
O5-2： 這不成選項。現任的十三Thirteen並不是第一個，而是7013自議會新增那一席之後就一直活躍。事實上，它每次在我們管治架構有了第十三個人都會生效，甚至在議會存在之前就已經這樣。
O5-9： 好吧，所以我們現在要做的就是找個方法去——
[會議室大門忽然打開，O5-13隨之走入。他的西裝襤褸，身上多處瘀傷。議會全體隨即沉默。]
O5-13： 嗨，各位！很抱歉我遲了。我剛剛[喘大氣]試著走進站點結果就過了這九九八十一難，我去到的時候，憑證就被拒絕了！試了幾次，維安系統才解除，然後我就被Alpha-1罵了。天啊，倒楣呢，對不？
O5-2： [可見煩躁]你好啊，十三Thirteen。不如你、呃、坐啊？我們可以、呃、開始會議。
O5-13： 聽來很好！話說回來，一One和六Six他們去了ㄋ——
[槍聲可聞。O5-13頭部往後仰，隨之倒地。O5-3可見在室內對面持槍。]
O5-9： 三Three，這三小！？
O5-3： 嗯？這應該就沒問題了，對吧？
O5-9： 哪裡沒問題！？我們可以……比如說……搞一個第十四席吧？
[室內靜默。]
O5-11： 嘛……
O5-7： 這嘛……
O5-10： 老實說，我覺得現在這樣就好。
O5-4： 同意。
O5-8： 啊，反正木已成舟。
[眾人點頭，鼓掌稱頌O5-3的急才。]
[O5-2起立向議會發言。]
O5-2： 那——法定人數就這樣子。做得好。
[ 紀錄結束 ]
隨SCP-7013無效化後，監督者議會重組為十二人正。自此修訂往後，一切SCP-7013相關活動亦告停止。原O5-13遺體被置於Site-01底下的混凝土塊之內。
