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;
}
}
Diego在树冠稍下的高度盘旋着，小心地不发出任何声响。他在放风。这在他看来是毫无意义的工作。有活要干的白天，没有人会想要在荒凉的树林里游荡。他真希望自己没有答应来；耸立的树木只是让他更加沮丧。烧焦而倒地的树木不断地让他想起过去那段轻松地时光：他会不断试着爬的更高，找到形状最好玩的树叶。即使后来他的祖父安眠在了这里，他也会尽力给那老人找片看起来不错的树叶。
不知怎的，那块墓碑在大爆炸中逃过了一劫。看着Katy铲起坟上的土，他心里忽然涌起了一阵因为犯罪和打扰墓地安详而产生的愧疚。
嚓，砰，嚓，砰。在Katy铲土的时候，泥土不断发出嚓的金属碰撞的声音，以及堆起泥土时发出的令人神经一紧的砰。不管怎么样，那泥土有着金属的外观和质地。那声音总是会在Diego昏昏欲睡的时候像脚步声那样响起，他不时查看一下背后，就好像那里蹲着一个随时会扑上来的东西。
“我真觉得你疯了，Katy。”Diego说道，“如果老爸发现你干了什么，一定会杀了我们的。”
“而我觉得你搞错了。”Katy回嘴道。她继续铲着，不带一丝犹豫。当她铲开了最初一层土。铲子渐渐不再发出嚓声了。这下面的泥土似乎变得松软了许多。
“我就直说了。就因为你觉得有特工绑架了镇上的科学家，你就要来刨我们死去爷爷的坟？你是不是哪根筋搭错了？”
“他们还杀了Dan先生。还有，爷爷已经死了很久了，你用不着担心他会跳出来吓我们。我带你来是为了让你给我放风的，不是让你来抱怨的。”此乃谎言。Diego很清楚，Katy带他来的唯一原因就是她需要有人目睹这个自大狂难得的高光时刻。
“Dr.Andrea搬走了，但那不代表我们也会有被绑架的危险啊？”
“怎么，你还以为Dr.Andrea是搬走了？你觉得她会丢下她丈夫的骨灰盒就那样扬长而去？”Katy喘了口气，转过脸来面对Diego。她那双冰冷锐利的眼睛从未流露过一丝激动或恐惧。“我亲眼看见她被拉进一辆卡车。我从没在这附近看过那样的卡车，那是一辆外地的车。”
“那你为什么要刨爷爷的坟呢？”
“沉默是金，Diego。你马上就能明白了。”Katy转身的当，Diego能听见她在咕哝着什么。他一下子就猜到那是爷爷的遗言：咕噜森林，校舍北三百，悬崖之上，三尺之下。
爷爷生前是工程师。他通过计算得出了他一生中最重要的地点，他的坟墓，最合适的位置。校舍是他接受一生中所有教育的地方，也是他迷上代数的地方。她与奶奶第一次接吻就是在悬崖上。不久之后，他又在那儿向奶奶求婚。如果你从校舍往北走三百米，就会看到老河。爷爷就是在那条河里完成了他第一个发明：一个自制水车。再往东五百米，就是他从父母手里继承的，他住了几乎一辈子的老房子。可惜，大爆炸之后，那儿只剩下了残破的地基。
由于森林地势陡峭，所有这些地方的高度都不一样。当爷爷把它们的高度取平均值之后，得到的结果是地表往下三英尺。所以，爷爷最终必须安眠在地下三英尺的地方。Diego仍然记得那时他爸拿着一根园艺棒比划着，用他那浓重的大西洋口音念叨：“对喽，这儿就是地下三英尺。”
咕噜森林。校舍北三百。悬崖之上。三尺之下。
原来这里比那些地方更加重要。
在经过长长一段令人苦恼的只有诡异沉默和规律铲土声的时间后，Katy挖到了什么。“好像找到了，Diego，来帮我把浮土拨开。”
因为Katy忘记给他带铲子了，Diego只能用手捧起棺材上的然后抛开。棺材盖上雕着人群和浮云。就算她不说，Katy的脸也明显地表露着恐惧和激动。Katy掀开棺材板，露出这对家伙辛劳半天的成果：一具枯骨。
“天哪，好恶心。好吧，所以看看爷爷生满蛆的死尸到底有什么用？”
“好好看，好好想，Diego。这里是不是少了点什么？”
“少了节操？”
“他的翅膀哪去了？”Katy伸手扳住Diego翅膀上的骨头。他后退一步，甩落了她的手。她说得对，爷爷的翅膀是不见了。
“也许他们把它砍掉了？这棺材很小，放不下他的翅膀。”
Katy似乎早就想到他会问这个问题。“爷爷始终坚持要完整地下葬;你也知道他反对器官捐献。这里边从头到尾都是他计算好的。他就是那种会花费大把时间去测量棺材尺寸的人。”
“好吧，也许只是有人过来挖走了翅膀？拿东西可以用来做肉汤，对吧？”
“这里已经有……”Katy扳着手指头计数。“七年没有人来过了，就从大爆炸之后。泥土没有人动过，所以不可能有人到这儿来，挖出爷爷，拿走他的翅膀，然后重新埋好。Diego，我上过一次课。你现在正在看着左上方，这说明你正在努力想一个能够驳倒我的证据。承认我是对的有那么难吗？哪怕就一次？”
“你到底想说什么？你已经犯了罪了。”
“听好。不管什么原因，炸弹落了下来然后爆炸了。与此同时所有人类学著作全都消失了。为此，Dr.Andrea开展了一项关于翅膀的人类学研究。她总结发现翅膀是人类在很近的过去新获得的，而且非常近。第二天，那辆卡车就来到她家，然后她就‘搬走’了。她的邻居，Smith先生，当众宣布她差一点就在进化论上取得了‘激动人心’的突破。两天后，他死在了一条阴沟里。表面上他是自杀的，但Sturgis市长不允许任何人给他做尸检。”
“所以你意思人类本来是没有翅膀的？”
“没错。而且有些人不想让我们知道这一点。然后这个‘有些人’正在追踪我们，所以我们必须离开，就现在。”
“你真的不是在胡思乱想吗？他们为什么要追踪我们？”
“因为我们知道他们。我亲眼看到他们晚上在房子外边晃荡，正在想办法以最好的方式闯进来。”
“老爸不会放他们进来的。”
“他们有机关枪。我在书上看到过，我们连还手的机会都没有。”Katy抬头看了看天。“快中午了，老爸可能还在公社开会。要是我们能把老爷车开上路，一直到会议结束，他都不会发现我们已经走了。”
Diego回头看了看他爷爷腐朽，裸露的尸体。“老爸会气疯的。”
“那些人追的是你和我，不是他。如果我们现在就走并且跑得远远的，就能让这帮家伙不去动老爸。”
“好吧，但是我们能不能把爷爷重新埋好？就这样抛下他好像有点不尊重死者。”
“我们必须离开这儿，就现在，没时间用来哀悼亡者了。”
