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; }
Item #: SCP-CN-3300-EX
Object Class: Explained
Special Containment Procedures: It has been confirmed that SCP-CN-3300-EX is part of normalcy. No further procedures are needed.
Description: SCP-CN-3300-EX is the designation given to an abnomous phenomenon occurring in the Village of Duskfort. At night, villagers there would develop a strong desire for turning round, frequently accompanied with fear for it.
The crime rate has largely ascended since the phenomenon was discovered, and an increase in deaths has been found. Meanwhile, the dead bodies are usually found missing an organ, several of which are the same parts. Most of the cases remain unsolved. It may be inferred that these cases are done by one person.
Approximately all villagers claimed to have heard the vague voice of a male. The words were 'Hey mate, would you mind lending me a…' According to surveys, a minority of the villagers heard a different version. The responses varied, but most of the residents did not answer the voice.
At present, incidents concerning SCP-CN-3300-EX have been seen as normalcy, and the Foundation is currently looking into relevant experiment institutions. The individual concerning the cases has been found in a deserted temple inside Dustfort but has died for long.
It is unclear whether other individuals of this kind exist, and the theory is tagged as one of the two possibilities that caused SCP-CN-3300-EX to last. Personnel in charge from Dustfort, Dr. Daisy, has come across a failure in searching in the targeted area. For now, Dr. Promise's conjecture cannot be proven right. Even the theory is correct, there remains controversy whether the Foundation should interfere.
Currently, the phenomenon of SCP-CN-3300-EX still occurs, but no further procedures are considered necessary, and more investigation has been put off.
Addendum: Note from late Dr. Promise
Never underestimate it. We can choose to be optimistic or pessimistic, but never ignorant. It's the only way we can fight against it. Lights here are invisible. For victims and perpetrators, as well as perpetrators evolved from victims, for either of them it's true.
When the light of day rests, 'it' will not die — though the light can do nothing about its disguise.
Only we can kill it. Yes, we. 'We' refers not only to us and Duskfort, and never some kinda scientific freaks nor the Foundation, but to us. Let the light of day shine down upon us directly. It is SCP-CN-3300. It's inside of us all.
The above is for everyone, including the eye of day. I, too, hope you can see beyond the cold light. Even if someone claims to 'have accidentally burnt the note', I believe you understand that I've read through it all, and I've understood the dark night. I will not become the dark night even it swallows me. I am who I am; I don't get eaten by the dusk; I don't remain silent in the dark night.
