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; }
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap);
/* Centered Header Sigma
* [2021 Wikidot Component]
* By Lt Flops (CC BY-SA 3.0)
* Forked from:
* Penumbra Theme by EstrellaYoshte
* Also based on:
* Centered Header BHL by Woedenaz
**/
/* ---- VARS ---- */
:root{
--titleColor: hsl(0, 0%, 95%);
--subtitleColor: hsl(60, 62%, 85%);
--lgurl: url(https://scp-wiki.wdfiles.com/local--files/component:pride-highlighter/lgbtqp_logo.svg);
}
/* ---- SITE BANNER ---- */
#header,
div#header{
background-image: none;
}
#header::before{
position: absolute;
width: 100%;
height: 100%;
content: "";
background-image: var(--lgurl);
background-position: center top;
background-repeat: no-repeat;
background-size: auto 9em;
opacity: .33;
}
#header h1,
#header h2{
float: none;
margin-left: 0;
text-align: center;
}
#header h1 span,
#header h2 span{
/* Hide the Existing Text */
display: none;
}
#header h1 a::before,
#header h2::before{
/* Style the New Text */
font-family: "Montserrat", "Arial", sans-serif;
text-shadow: none;
}
#header h1 a::before{
position: relative;
bottom: .15em;
color: var(--titleColor);
font-size: 115%;
font-weight: 700;
}
#header h2::before{
position: relative;
top: .1em;
color: var(--subtitleColor);
font-size: 130%;
font-weight: 600;
}
#header h1 a::before{
/* Set the New Text's Content From Variable */
content: var(--header-title, "SCP FOUNDATION");
}
#header h2::before{
content: var(--header-subtitle, "SECURE - CONTAIN - PROTECT");
}
/* ---- SEARCH ---- */
#search-top-box{
top: 1em;
right: 0;
}
#search-top-box-form input.button{
margin-right: 0;
}
#search-top-box-input,
#search-top-box-input:hover,
#search-top-box-input:focus,
#search-top-box-form input[type=submit],
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus{
border-radius: 0;
box-shadow: none;
font-size: 100%;
}
/* ---- TOP BAR ---- */
#top-bar{
right: 0;
display: flex;
justify-content: center;
}
#top-bar ul li ul{
border-bottom: 1px solid hsl(0, 0%, 40%);
box-shadow: none;
}
/* ---- LOGIN ---- */
#login-status{
top: 1.1em;
right: initial;
color: hsl(0, 0%, 87%);
}
#account-topbutton{
border-color: hsl(0, 0%, 87%);
font-size: 100%;
}
/* ---- PAGE TITLE ---- */
.meta-title,
#page-title{
text-align: center;
}
/* ---- BREADCRUMBS ---- */
.pseudocrumbs,
#breadcrumbs{
text-align: center;
}
/* ---- MOBILE DISPLAY ---- */
@media (max-width: 767px){
#search-top-box{
top: 1.85em;
width: unset;
}
.mobile-top-bar{
position: relative;
left: 0;
display: flex;
justify-content: center;
}
#login-status{
top: 0;
right: 0;
}
#header .printuser{
font-size: 0;
}
#header .printuser img.small{
margin: 0;
transform: translate(6px, 4px);
}
#my-account{
display: none;
}
#account-topbutton{
margin-left: 2px;
}
}
3月12日，群鸟远去后的第593年（593 A.A.R.）
乔乌鲁城堡地面
傍晚 6:43
城堡从树林中渐渐显现出来，Louis打了个寒战。在过去的二十年里，他一直认为这城堡应当比自己想象的再大一些。不，这城堡过去就是那么大。
“进去吧，Myers。”Diane向广播中说道。“你看过这个城堡吗？”
岁月催物老。整个墙体已经塌陷。Louis曾常认为将刺破天际的中央尖顶，也已经塌漏了很长时间了。它只留下了一个年久失修的残骸。即使如此，Louis依然感到了它的气势恢宏。它的金属骨架与显眼的玻璃吊灯融合在一起，将整个结构在暮光下照上了一层诡异的橙色光辉。
Louis意识到了他的手发出了冷汗。他再看一次城堡，真的有必要那么惊讶么？他弯下腰，捡起了对讲机，定下心来，然后按下了按钮。
“这里是Myers，”他说。“我看见它了。开始吧。”
Diane急忙回复。“好。我也见到了，录音和定位已开启。从南侧入口进站。”她停顿了一会儿。“别他娘的让我在这儿干等着，特工先生。”
他的随身摄像头与GPS跟踪器启动，Louis感到了他的仪器嗡嗡作响。Diane会知道他的每一步动作。这是她为了保证他不会做任何冒险举动的保险措施。
城堡嵌在了山腰上。Louis知道城堡更多在山内，而不是山外。山被一些看起来让人有不祥预感的建筑点缀，每个都由一个架在柱子上的横梁构成。有些东西被故意挂在了上面。一条人工运河从城墙中穿出，将森林分割。Louis将他的车停在了峡谷边上。
他走了出来，经过车，打开后备箱。一个基金会生产的MSR突击步枪和一把军用刀，这曾是他每天都要装备的标准器械。
“十年之内没人来过这儿，”Louis说。他知道Diane会听到的。“为什么我需要这个？”
“这是以防万一。”Diane向对讲机中说道。“快点。我们在主力部队到达前还剩大概两个小时。”
通过峡谷的唯一路径是一座哥特式的桥，接着一座黑乎乎，吱吱响的大门。在Louis的往日里，会有一个人将桥升高、降低，另一个人会拿着一把锯短的霰弹枪以防侵入者。这两人已经去世了很长，很长时间了。
二十年前，基金会启动了一次军事行动，去将城堡从它的原主手中夺来。乔乌鲁奋力抵抗，却还是败给了基金会的冷酷无情。没有被打死的人都被监禁在了黑暗的站点里度过余生。城堡此后被基金会工作人员的骨干成员所占领。经过Diane的努力，他们已经规定了一个轮班表，可是里面的人都已经去世了。去世地久到让Louis觉得是时候去找到它需要的东西了。
在Louis过着桥，小心翼翼地躲开桥上的漏洞时，忧思在他的脑海中涌动。他已经远离这个世界很多年了。他就像走进了一个频频发生的梦里。
“你怎么停下来了？”Diane问道。
“我还好，”Louis回复道。“只是再次看到所有这些东西，有些震撼罢了。”
“你不是到这里来观光的。继续走。”
Louis选择不回复，弯下腰来进入大门，到了内院里。
用“宏伟”来描述这个内院都是在贬低它。即使已经废弃了二十年之后，内院还是想Louis记忆中那样华丽且富有张力。米黄色的石砖路，用金属镶边，编织在成群的塔楼，兵营和地堡之间。有些道路已经逸失了，即使如此它还能明显的看出它制作时有多么的精心。如果Louis瞟一眼的话，他还能破译这些石刻的意义，和这些石刻一样古老。一个特殊的玻璃照明系统将所有的这些，仅仅用落日的余晖照亮。
但是真正使Louis驻足的，是山腰中向下通向城堡遗址的隧道。在它之上是一块高到像楼一样的厚石板。一只手持太阳的巨鸟雕于其上。
从Louis的方向看去，它正在俯视着他。
9月15日，573 A.A.R.
乔乌鲁城堡地面
下午 5:32
Louis想要大叫。
他蜷缩在一个狭小到可以用双肘碰到墙的空间里。这空间十分憋闷，他甚至不能呼吸。最坏的是，他与必死无疑之间只隔了一块不结实的石头。
一般情况下，除了轻声对话的声音和流水的细语之外，城堡是安静的。但是在几小时之前，这一切都快速被尖叫，枪火声和直升机的轰鸣所取代了。
三小时之前，一位僧侣和他一块跑进了同一个隔间里。在他关门之前，他献给Louis一个最后的智慧。
“如果你以任何原因打开这扇门，你就会死。”
突然，Louis听见了木板破裂的声音，这次更近了。在这之后，他听到了尖叫声。他认出了那是一个木匠的声音。在恐慌中，他尽可能地他这间房屋中藏了起来。
“别开枪！”木匠叫道。“我只是——”
他在三声枪响之后迅速安静了下来。Louis在他的洞里缩得更紧了。他感到胸中隐隐作痛。就像他中了枪一般。他收回了泪水。
Louis听到了电子器械的嗡嗡声。接着，他听见了袭击者的回复。
“这里是Zeta-4-15。我会立刻赶到这里来。
直到士兵离开之前，他都没有注意到他整个期间都在屏住呼吸。当他呼吸时，他流出了泪水。
Louis在这天夜晚哭了出来。之后，他会逃出来，在森林之中游荡，直到他到达最近的镇子。他会进入一所孤儿院。这是他劫后余生的第一天。
3月12日，593 A.A.R.
乔乌鲁城堡
晚上 7:03
“Myers，你在干什么？”Diane问道。
Louis意识到了他已经盯着地板上的洞大概五分钟了。隧道的旁路能带你到达一个在山中的蓄水层上的高架桥。金属格栅将他和下方流淌的地下河分开。一块假地板将高架桥下的一个小隔间伪装起来，刚刚好能容下一个13岁的男孩。
“对不起，”Louis说道。“我只是……”他的思维停顿了一下。
“这是我最后一次提醒，我们在执行一次任务。”她叹道。“跟我说实话，Myers。是这里真的有一个城堡的秘密地下室，还是你只是想回家？”
“大教堂就在这上面。”Louis忽略了问题的回答。
“那我们继续走吧。我们没多长时间了。”
3月12日，593 A.A.R.
乔乌鲁城堡
晚上 7:07
走进大教堂就像是穿越回过去一样。太阳还是照样的照在染色的玻璃窗上。Louis想象着一家一户排排坐在大长椅上，其他孩子在他奔向妈妈时看着他笑。他看到祭司站在祭坛前，准备着他伪善的话。他看到了……祭坛。经常有个人捆在上面。经常是染着血的。
不是所有的Louis在这里的记忆都是美好的。大部分都不是。他们做的任何事，他们做的任何让他成为“更好的人”的事。
Louis走上了祭坛。当他看见镶在石头里的木碗和金属台时，一阵恶心感传来。木碗的下半截被它曾装过的液体染成了红色。在其他天里，为了打开门，有人会将碗里装满血液，然后让太阳“审判”他们。Louis就只是将碗按了下去。
地板在他旁边打开了，像活板门一样翻了上来。楼梯向下通到下一层。
“我已经打开通道了，”Louis说。
“我的录像信号断了，”Diane说。“描述一下。”
“它……它向下延得很深。如果我记得对的话，那里还有另一座祭坛在底下。”
“10-4。继续。”
每一层台阶在Louis通过楼梯间时都发出了轻轻的吱呀声。他不禁咧起嘴来笑。他过去已经来这里三次了。那是在一次乔乌鲁规定的节日里，在他们突然消失之前。来这里的时间很少，一般是庆典。
该死的二十年过去了，Louis第四次来这里。
阳光增强器几乎到了地窖里。地窖有一个廉价的小型公寓那么大。在夜晚的余晖里，Louis看到了四个砖石柱支撑着天花板。在房间的中心，Louis可以看见通道钢件的闪光。大门由一个箅子组成，四条暗渠接着它。还有一个相同的箅子在上面，带着各种金属法器装在钢梁上。在通道里面，是一个大的杠杆开关。
Louis拖着生锈杠杆开关的把手，接着他嗯着拼尽全力拉动杠杆。在用了几秒力之后，Louis将杠杆从它的原位上猛扳了过来，接着，阳光涌入了房间。
现在他可以看到大门辉煌的全貌了。它的底座是由一种来自另一个世界的黄色金属打造，镶在钢制的框里。四个魔法激动器吸收阳光并开始发光。一束光柱将地板底座和上方的箅子联通。上方的箅子打开，创造出异常明亮的光源。激活的装置发出像是金属摩擦时发出的吱呀吱呀声，让Diane对他的行为产生警惕。
“那儿发生了什么？”她在对讲器中大喊道。
在大门的中央，一个现实的裂口通往一个遥远的神庙。它放出温暖的光辉。现在已经无路可退了，Louis终于快要回家了，在他重获新生的第一天。
“对不起呀，”他若无其事地说道。
他走入了通道，把他带进了比所有人想的更向下的地方。
