NOTICE:
This is a fragment page.
It is an internal page used by the SCP Wiki, and is not meant to be read directly, but included by another. This page should be parented, see above.
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; }
Navigation:
1 | 2 | 3 | 4 | 5 | 6
A consciousness in a sea of magic swims with determination. It has no name, only a purpose. It lands on a leyline, one of many that used to cross the world. It spindles along, paying no mind to the others that touch its edges. It has been set with a task.
The sun does not rise. But in their small room, cluttered with books and words, the librarian sees a soft and golden glow. It is small comfort.
The consciousness, its purpose served, fades. It was a tool for a job and nothing more.
The librarian rises. There is work to be done.
Mechanically, they begin to don layers. Their mind wanders. When they are finished, they are an unrecognisable golem of nylon, fur, and fleece.
The librarian steps into the leprous white snow. Behind their emerald goggles, the frozen moor appears a garden. The floor is verdant expanse, the magics that grow at the edges of the Machine are its flora. The leylines that converge on the horizon, on the Machine, are tillage ripe for growing. The snow is ablutive rain, feeding and cleansing. It reminds them of the Library.
The librarian savours this transgressive memory before discarding it. Memories serve only to distract. A tool has no need for distractions. A tool has no need for names.
In an anodised steel tube of specific proportions, the librarian gathers the first dew of the morning. A single crystal of ice shimmers with static and potential in its metal prison.
The librarian turns back towards the compound.
The jailer has laid out the new instructions in the room. On each card, a binding to be done. A seal to be repaired. Each cycle the jailer delivers new ones. The method is crafted by numbers and scientists. The librarian does not know its design, but they know its purpose.
First, blood. They feel the cold steel pierce their flesh and watch the warm life spill from them onto the floor. Hands slick, they coax the blood into sigils of long dead languages that fight against their resurrection. Their eyes water as it takes hold in the firmament behind it.
Elsewhere, five people die in a gas leak. Two of them have no name. Another sees only snow.
The world grows a little smaller.
The librarian continues. They take the anodised steel and open it, pouring forth oil and sacrament and heresy and flesh. It pools in the concrete room, a thing now bound and made form. It knows only the librarian and the desire to be unmade.
The librarian begins to speak in hoarse and frozen tongues. The thing writhes and thrashes, but it is chained by concrete and ice and things that man was never meant to know. The words freeze the librarian's throat but they are no longer the words of any language.
The thing breaks free and smothers the librarian and is broken upon the bow of the fringes of the Machine. The cycle is not broken.
The librarian has finished cleaning the room. Their task has become rote - with each cycle the thing occupies a smaller space in their mind.
They gather the notes from the jailer and hold the collection to their chest. They can feel the warmth of every word. In the boreal abyss, any writing is valuable. The librarian pockets the words and returns to their room.
They bolt their door and wait for stillness. In that stillness they speak their name. They feel its power hang in the air before them.
The librarian turns to their books and begins recording names.
Navigation:
1 | 2 | 3 | 4 | 5 | 6
