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;
}
}
“不，不，不。那样看上去就像是新的，好像是画上去的。你得弄得更有棱角些。”
Sarah正在帮世界上最挑剔的考古学家伪造证据。Dr.Leo每时每刻都在对Sarah画的翅膀，羽毛，衣裙挑三拣四。老实说，Sarah不知道他为什么这么着急。他们正在搜索的这座地下埃及金字塔自从透特从月亮里蹦出来起还从未被发现过呢。
“听我说，能不能就让我歇10分钟？我的手已经抽筋了。”
Dr.Leo点点头。“只要记着别在这抽烟。”他转过身，踱向他们放午餐盒的地方。
Sarah转身朝另一个方向走去。边走边点着了一根烟。墙上覆盖着各种各样的埃及壁画。不过既然鸟的众神已经决定给予每个人一双翅膀，这上面还留着没有翅膀的人显然很不明智。特工们想让他们纠正这个错误。神啊！这里有几千幅壁画！Sarah勉强能够想象她要在这个热的能把水煮开的地下金字塔待上多长天。
这里不应该有个藏宝室吗？Sarah自言自语着。这种金字塔一般都会有点宝藏的不是吗？既然那些特工就给了她那么一丁点报酬，她估摸着应该自己想办法捞点外快。
宝藏室不难找，就在一扇已经被打碎很久的暗门后面。重点在于里面的东西：五幅Sarah带不走的古壁画，两个巨大的花瓶，同样带不走。一个金梳妆镜，还有一大堆金币。意识到十分钟已经快到了，Sarah随手抓了几把金币，把它们和那个梳妆镜一起塞进了背包。
老实说，她喜欢那个镜子。虽然看起来没什么，但不知为何，那面镜子映出的她似乎比其他镜子里的映像更加美丽。
“啊，好吧，”Katy开口打破了沉默。“Diego，停下，我们有麻烦了。”
Diego正忙着给汽车加上一罐他们带来的汽油。当他回头看的时候，发现一队骑着马的人正在靠近。这些人都穿着金属板甲，手里拿着长矛和长弓。Katy响亮地叹了口气。
“这帮家伙……你应该知道蓝鸦社吧？”
“……没有？”
“Diego，大人说话你都不听的吗？”
“那到底是什么玩意儿？”
Katy叹了口气：“他们是…大麻烦，我想。他们认为大爆炸是神的谕示，目的是为了阻止我们使用科技，所以他们试图回到中世纪时代，到处抢劫。我们应该能甩开他们。你油加完了吗？”
“加完了。”
“好，上车，我们现在就走。”
“你确定他们追不上我们？”
“Diego，他们骑在马上。我可以亲自向你保证，这辆车的功率不止一马力。”
Diego清空了油罐，把自己砸在前排座位上。他转动点火开关，猛踩油门。汽车在启动前发出类似于他们父亲早上打哈欠的声音。正如Katy所预测的那样，他们把追击者甩在了扬尘当中。然而，还没等他们拉开距离，就看到另一个穿着盔甲的男人在马路对面跑来跑去，拖着一条刺带。Diego踩下刹车，但还是没来得及避免四个轮子都被刺破的结果。
“妈的，”Diego说，“现在怎么办？”
“别慌，Diego。”
“我没慌。”
“好。我想我可以说服他们别追着我们。让我去试试。”
在煎熬地看着骑手骑着Diego一生中唯一见过的马几分钟后，他们停在了两人面前。他们耸立在二人组面前，Diego本能地缩了下来。Katy双手举在空中走上前去。“我们把所有的财产都交给你，”她说，“但请不要杀我们。我们有家人。”
其中一名骑手——戴着金冠而不是面罩的人——下马转身面对他的手下。“看看这些家伙！”他用一种非常明显的假声高叫了起来。“他们认为我们会杀了他们？他们不是很搞笑吗！”他假笑，示意其他骑手跟着他一起笑。
他回头看向Katy和Diego。他留着修剪得非常整齐的小胡子，此刻正微笑着露出他泛黄的牙齿。“不，不，不，我们不是来抢劫你的。为什么要这样做呢？我们做的恰恰相反！我们要征召你们！”
“等等，”凯蒂说，“你想让我们加入你吗？去…袭击别人？”
“袭击？”国王又笑了。“为什么这么说？我们是最不像那些污蔑上帝的野蛮人的！我们是圣兵，在打一场反对工业革命的战争！”
随之而来的是漫长而令人不适的沉默。Diego看着Katy；她有生以来第一次显得困惑。
国王继续说道。“我连我的名字都没告诉你！我是骑士王亚瑟埃克斯-威-艾-艾，蓝鸦骑士团的领袖！他嘟囔道。“而你们，年轻的先生女士，将参加世界上最伟大的战斗！突袭塔！”
“现在有一座塔了？”Diego问道。他的下颌骨已经掉到了地上。
“只有那座这个病态世界历史上最邪恶的塔。它是基金会的总部，秘密控制这片土地的人。他们想恢复世界，把它变回原来的样子。难道他们不知道我们会再次把世界炸成一个空壳吗？他发出一阵鸦叫，队伍中的其他人也跟着他吟唱，就像唱着爱国的圣歌。
“你们…”Katy开口道：“你们要——”
“是！”亚瑟王打断道：“我们确信这些基金会人是至高无上的邪恶！世界领导人只是他们的傀儡！他们派出邪恶的黑马，带走那些仅仅是质疑他们的人。这就是为什么我们最好的勇士，凯撒一世爵士，被他们带走了，他们还夺走了世界上最珍贵的神器，预言之镜。”
“等等。”Katy说，然后停顿了一下。她有一个想法；我能从她缺乏表情的脸看出这一点。“如果我能给你提供法宝呢？你可以很容易地击败……那座塔。”
“一个有趣的提议！”亚瑟王回答说：“……但很可能是一个陷阱！我怎么才能相信你呢？”
“我被下了诅咒，永远不能说谎，”凯蒂回答。她用的是那种讲故事的腔调。“我可以告诉你，在离这里不远的地方，有一个古老的法师们保存着他们最伟大武器的地方。可以一击毁灭塔的武器。”
亚瑟王想了想。“我们需要足够的火力来摧毁塔……好！我们将跟随您到这个所谓的……地方。但注意！如果你撒谎，你会希望你从未出生过！”
“你到底在胡说什么？”Diego低声对Katy说。他们都骑在马背上，骑士们一想到要打倒他们的死敌就欢呼雀跃。
“你觉得我们要去哪里，天才？”Katy低声回答。“高速公路旁很快就会出现一个旧的军事掩体。去年夏天我在这里迷路时找到了它。我本打算躲在那里囤积武器，但我想既然我们和这些家伙有同样的敌人，我们应该采取更积极主动的方法。”
“然后呢？我们攻击这座‘塔’，那你怎么办？”
“嗯，我在想——”
“你们在那嘀咕什么？”亚瑟王喊道。
“我说我们迫不及待地想看到基金会成员跪下！”凯蒂回头喊道，然后发出了一声狂热的鸦叫。
骑士们都发出了一声巨大的呐喊，然后他们继续在无尽的高速公路上行驶。
