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; }
我不理解什么基金会，
亦未曾了解过这些文字，
这一切仅仅是大梦一场，
或许我也只是溜大了。
那个晚上，阿妈疯了，没人知道原因，她冲进雪山，消失在理塘的大雪中，仅仅是留下一串灰白的脚印以及一滩如三箭头的血迹。
——丁真熄灭手中的传统香烟，抚摸着理塘最后的一只雪豹，再过两个小时，基金会的人就会来这里，他知道之后发生的事情。
丁真拿出手枪，他只是沉默，雪豹亦是如此。他们明白此后的一切。一声枪响，接下来，两声，最后仅剩寂静。
除雪山中仍然含着报废的电子烟的丁真与衔着烟弹的雪豹外，机动特遣队没有更多发现。
后记
有人，也许叫作Metic，或者其他人，曾在这里留下了一点东西，至于到底留下了多少，究竟是哪些东西，现已不得而知了。
而我，本人Coffee_2020现在此向各位有幸阅读此篇启事的读者征集所寻得的有关此人于此地留下的任何物品，有意向请联系四川省甘孜州理塘县，丁真珍珠先生。
追记
好吧，Metic也许真死了，死在一个叫Site-CN-24-D的烂尾楼或者世界的任何一个阴暗无人的角落里。你问我怎么知道？尸体自己站起来找到我说的，觉得我为他所记的一切文字皆是些狗屁不通，彻头彻尾的垃圾，于是我只得追加些文字，记录下这个无法欣赏我脑中满溢的才华的傻逼，这个傻逼叫Metic，世界的罪人。
又记
噢。
我什么时候变得这么健忘？
健忘得就连那遍布天空的阴云都以为理所应当。我记不清，我当然记不清。
可我又为什么忘了这片土地？可我又为什么忘了高楼拔地而起的原因？可我又为什么忘了那片湖泊的样子。
噢。噢。噢。
我实在记不得了。试图想起答案已经太迟了，迟到他们已经成了既定的事实，我却大梦一场。
我还记得什么？雪白的墙，灰白的灯，苍白的……
不，不，不。
我试图回忆。
我想到了人们：他们是黑色的，他们是白色的，黑白对立，却只有黑色被留在那扇门后。
我想起了自己：我是灰色的。是我向他们发出野餐的邀请，是我向他们低头弯腰，乞求最后一段时间。
最后一段时间。
他们被留在那个时代，只剩我在一片崭新的废墟中迎接另一批人
我却总会想起他们，湖中的他们，湖边的他们，想起湖边的时光
湖边的时光。
啊。我想起那个美好的午后了。湖面微波粼粼，我们坐在湖边，大笑着，等待日暮，仿佛又听到夕阳下他们的呼唤。
我又听到他们的呼唤，他们在喊。
窗外的阳光射进房间，天气正好，该去找他们了。
美雨的洱泗湖。
Metic其人
Metic，该词被认为源自于Memetic（模因），无实际意义，仅为一人名。Metic本人亦不知晓其名字来源。
Metic本人曾任SCP基金会Site-CN-24-D首席研究员，Site-CN-82-β研究员以及SCP基金会圣伊丽莎白精神病院掩盖设施员工，其现与███主管同事，任Site-CN-12主管。
根据SCP-CN-2530，Metic确信已在1986年12月30日失踪于洱泗湖畔，然而，1987年12月30日其再次出现于Site-CN-12设施内，对于例行审问，Metic拒绝透露细节，并且抱歉。
大雪纷飞，我却没有追上屋内的炉火。
于是我们走在路上。
于是我们荡起双桨。
可是洱泗湖结冰了，冻得已经太深太深，无法挽救。
我站在大雪中，望着远行的身影。
我却现在才想起，洱泗湖的盛夏，永远不会下雪。
页面版本: 82, 最后编辑于: 05 Sep 2023 12:40
