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;
}
}
}
Emma很无聊。
她叹了口气，注视着轻轻摇晃的浮标：它上下起伏着，细小的波浪柔和地拍打着这艘稍许陈旧的渔船，她和其他人已经在那坐了好几个小时了。
想起她未来的同伴们，Emma瞥了一眼四周。他们也弯腰驼背地坐着，靠在钓鱼竿上。十几个与Emma的相似的浮标围绕着船起起伏伏，只有偶尔的拖动和咳嗽声打破这古怪的寂静。
Emma把帽子向下拉了拉，想着究竟是哪些糟糕的决定把她带到了这里。
在她接受调任转到Site-184的异常艺术与人工制品部时，Emma一直被鼓励与其他基金会职工进行人际交往活动——“能让他们认识你，也能你熟悉另一个设施的文化，”职业咨询中心的那个永远兴高采烈的女士这么告诉她。
有很多她期待的活动，首先就是她部门的年度“真伪鉴别”活动：到时候，他们会把站内人工制品的照片、复制品，甚至有时候是真品陈列出来，选定的人员会讲述有关它们的起源、异常性质或者用法的故事或者解释——但其中只有一个是真的。参与者会选出他们认为是真实的故事，等庆祝晚宴结束之后，猜得最准的人会公布。
但距离那个活动还有几个月的时间，所以她顺从了——至少当时看来——最好的选择：参加钓鱼议会的短途旅行。
Emma以前去钓过鱼，而且还不止一次。她没有钓鱼竿，但这并不重要——事实上，她连借来的那些也很少使用。钓鱼，对她而言，是和朋友们到船上去喝酒、放松、享受阳光与闲谈的借口。她最美好的有关钓鱼的记忆里，鱼其实不占多少，但和那些过去关心着她、到现在也还关心她的人们谈论她最近的分手和祖母的去世却重要得多。
可钓鱼议会完全不是这样。当Emma在日历上收到提醒时，她明白了这一点；对她来说，早晨6:30连吃早饭都太早了，更别提把自己拽到码头上了。
她明白的第二件事是，她一点准备也没有。不论是碳纤维钓鱼竿还是绣着字母的渔具箱，都传达出了这群人的决心。她环顾四周，想找个看着好说话的，最后选定了一个看着像管事的中年男子。她以自己最近才搬来为理由说明自己没有适当的设备，使得边上的人斜着眼瞄了瞄她。那人拖着脚穿过等待着的船舰的驾驶室，带着一堆各种各样古老破旧的钓鱼用具回来，都塞给了她。Emma嘟哝了感谢的话，而他对团队说道：“那好。如果没有其他问题了，都上船吧。我们可不想错过太阳。”
Emma不确定他们会错过什么太阳：太阳还在地平线上艰难攀升。
随后是一段漫长而沉默的旅途，直到船舰慢慢停下。船锚扎进海床时叮当作响，接着鱼线投入了反射着蓝色的海洋，发出齐声的拉索声。
她一直希望有机会和其他的钓鱼者交谈，认识一下他们，但那沉默令人压抑。几次她鼓足勇气和边上人说话，得到的都是只有一个音节的回应，还有从船那边传来的怒视。她很快意识到，其他人都不是来这里聊天的。
时间一分一秒地过去，无事发生的几个小时走得格外漫长。
迷失在一整天无所事事的记忆里，Emma几乎错过了钓鱼竿微弱的牵引感。她坐直，警惕起来，足够打起一个上午精神的肾上腺素穿过她的血管，让她差点跳出船去。她的手紧紧抓住鱼竿，把它收起来，感觉有什么在拽着、对抗着她。
在她背后，其他的钓鱼者都转过头来看着Emma。
她没有注意到他们，她的注意力完全、彻底地集中在鱼身上。她活跃起来，进入一场意志与智慧的较量之中，不甘示弱地想要获胜，感受到它在挣扎中越来越虚弱、与她无用地对抗——随后鱼线松弛下去。
那条鱼重获自由，而Emma则筋疲力尽、心跳澎湃，她倒回座位上，抬头看着太阳。
片刻之后，她环顾船上，似乎什么也没有改变。她叹了口气，收回鱼线，再次把它投了下去。
这一天剩余的时间似乎没有那么漫长了。船的引擎响起，大家最后一次收回鱼线。贫乏的收获在船上的盐水容器里游泳。成功的钓鱼人花时间给钓到的每条跳跃、有鳞的鱼称重、拍照，然后把它们扔回海里。
归航从容不迫，Emma在船慢悠悠的摇晃里放松下来。当她踏上码头时，一个人——一名年轻的女子，微笑着对她伸出手。
“干得不错，你差点就钓到那条了。”她边和Emma说着话，边和她一起走上岸去。
“很抱歉和你想得不太一样。那些老一点的家伙们对钓鱼还是很讲究的，但你认识他们之后就知道他们都是好人。”
“其实，我们几个人想去吃点饭，如果你愿意的话也来吧。对了，我叫Sarah，Sarah Collaert。”
Emma惊讶地发现这一邀请看起来很是诱人，而她对它的接受也极为真诚。
她们一边聊着天，一边一同朝着一栋宏伟的建筑走去。与此同时，Emma意识到，也许早上6:30起床也没那么糟糕——至少每隔一段时间。
