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; }
项目编号：SCP-CN-3300-EX
项目等级：Explained
特殊收容措施：已确认SCP-CN-3300-EX为常态的一部分，无需更多措施。
描述：SCP-CN-3300-EX指代一种异常现象。该现象发生于暮塞村。该村居民在夜晚，会对回头这一行为产生一种强烈的渴望反应，且通常矛盾地伴有对其恐惧的情绪。
自这一现象被发现前一段时间以来，犯罪率大幅上升，且这些案件中出现人员死亡的频率相较以前偏多。同时人员尸体，多存在一个器官失踪，其中失踪器官也存在多次重复现象。其中大部分案件并未解决，存在为同一人所为的推论。
近乎全部居民皆表示在夜晚存在听到一男性发出的模糊不清的声音，其内容为：“嗨，朋友，借我一个……”根据潜在调查，有居民听到内容略有偏差。但后者在前者所占人数比例较少。不同群体的村民回应方式亦有所差异，但大部分仍并不回应。
现阶段，SCP-CN-3300-EX相关情况已被确认为常态。对相关实验机构的调查和追责正在进行中。相关个体已于暮塞村一据称已废弃庙宇内被发现，但其已死亡许久。
是否存在其他该种个体是未知的，该情况被列为造成SCP-CN-3300-EX持续的可能的两种情况之一。而由来自暮塞村的负责人Dr. Daisy领导的对目标区域进行的搜寻一无所获，暂无法证明Dr. Promise的猜想正确。事实上，即使其猜想被证实，基金会是否需要进行干涉也尚存争议。
现在，SCP-CN-3300-EX现象仍持续，但不被认为有必要再采取更多措施。进一步的相关搜寻工作的优先级已降低。
附录：来自已故的Dr. Promise的笔记。
永远不要低估它，能做的有做好最坏的想法，但不要抛弃，这是唯一能对抗它的。这里的光不可见。对于受害者，对于施暴者，或对于从前者演变来的后者，或对于两者，都亦然如此。
只要白日不以映照，它就不会死——尽管白日也对于它的隐藏束手无策。
能杀死它的只有我们，是我们。这里的我们不只是你我，也不只是暮塞村，更不是什么科学怪人，也不是基金会，是我们。让白日赤裸裸地映照我们。它才是SCP-CN-3300。它在我们每个人。
以上给所有人，包括白天的眼睛，我也希望你能不再只见凉光。即使是所谓意外点燃那本手记，但我知道你也明白，我已读完它，也读懂了黑夜。而纵使被黑夜吞没，我也不会成为。我是我，我不融于暮色，也于黑夜不沉默。
页面版本: 11, 最后编辑于: 08 Aug 2021 14:35
