Byㅤ DodoDevilDodoDevil
Published on 29 Apr 2022 16:42
rating: +35+x

What this is

A bunch of miscellaneous CSS 'improvements' that I, CroquemboucheCroquembouche, 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.


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.

…like this!

.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;
@media (min-width: 768px) {
    #top-bar .mobile-top-bar {
        display: block;
    #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: -20em;
        width: 17.75em;
        height: 100%;
        margin: 0;
        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;
    @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;


rating: +35+x

In a darkened copse of solemn birches, the man who was once Magnus Kinslow sat — half-hidden in the interplay of light and shadow cast by a smouldering fire — watching the slow death of another world unfold.

He had known many names and titles: alchemist, arcanist, thaumaturge, but as the years slipped past they ushered him gently into a much-sought role. As a knowledge broker, he travelled between the here-and-there, now-and-then, bearing a wealth of long-accumulated esoterica, offering barter and exchange. In this occult market of whispers, he would purchase the ravings of madmen and prophets, those whose gaze slid into the ever-present fractures in existence, who saw what was and was not. Cross-referencing and conjecturing, he pieced together greater and greater answers to the questions that nipped at his heels.

He sought the knowledge, drew this substance of thought into himself, extracted meaning from the ink. What was left he burned, fed to the fire as kindling to stave off the dark nights.

The work before him, a recent acquisition, sat unmolested in his hands. The delicate parchment endured, unburnt. An act of economy, not generosity.

All the coming nights would be dark, and when ideas were gone it was people who burned.

He had endured deals going awry before; his line of work was suffused with greed and the grasping hands of covetous minds. He grew to expect the treachery, the undercutting, the lies and obfuscations of intent. To stay one step ahead, ride through these currents of misfortune, was the challenge — a challenge, he reminded himself. The challenge was one he held closest to his chest. It was a purpose that was given to him, planted in his broken, frozen form when he hung dying and bleeding. The purpose had saved him — it had taken root and flourished, mended the shattered ceramic of his being and spirit with golden ore.

It resonated within, with potential and power, with decision and demand: to hold at bay the end, or at least to document those lost to it.

And here it found him, again. Though this time of his own bringing.

He had underestimated their ambition, the grim resolution that formed the Foundation of their Babelian tower. Had he known they would do it, he never would have offered the means by which they could do it; not for the price the knowledge had cost them, not for worlds more.

As he sat amidst the encroaching darkness the unmistakable proclamation of wronged divinity — the cry of death — echoed through his and countless minds:

God is Dead,

God is Avenger.

For the Dead Endure,

And God is Dead.

He sighed as he rose, and stamped out the fire to let the night swallow him in the embrace of a jealous lover. Some things were easier in darkness.

The man focused his will. Turning inward to grasp intention and resolve in both hands, he folded them over onto themselves and tampered them into a single cutting edge. From this creation of determination emerged the familiar unreal knife, a single dimension shaped by thought and purpose. This blade honed finer than hope, wielded by careful and practiced hands, would slip between atoms, into the void.

In a single motion, he cut. Incising through the night, through the emptiness, opening up the bloody underbelly of potentiality, and pushing through. The laceration took on form, the 'there' slipping into the 'here,' unspooling matter rushed to fill the dreaded space of nothing, connecting disparate worlds: a knife-cut bridge of thought birthing substance. If he chose, it would be an escape.

But he would return to this damned world. He spoke his promise to the circle of trees, trusting them to bear witness.

He would not doom them to the end that loomed before them, would not let them be lost in the ever-night, victims to the rage of a wounded god.

But he couldn't do it alone.

He stepped through, from darkest night to the glare of fluorescent light.



Foreword: The following transcript details the events concerning a security breach and subsequent theft of SCP-529, which occurred on 28/04/2021.

This footage was captured by on-site surveillance cameras located within, and in the corridor adjacent to, Dr. Hannah Montaire's office.

03:42: Dr. Montaire resides in her office, filing paperwork. SCP-529 sits on the windowsill, batting at a hanging cat toy, as permitted by the relevant Special Containment Procedures.

03:45: A distortion in space manifests directly outside Dr. Montaire's office, who seems initially unaware. This distortion expands, forming an aperture in the hallway, only visible from the side facing the aforementioned office. The area beyond the aperture comes into focus and appears to be dark with specific forms difficult to determine.

03:46: A humanoid figured in dated, muddy clothing through the aperture into the Foundation facility. Their face is partially obstructed by a cloak and drawn hood. The figure opens the door to Dr. Montaire's office. The following dialogue is recorded:

Dr. Montaire: I— oh, who are you?

Unidentified Figure: No need to alarm yourself, I didn't realize she'd have company. Now, where are you, little one? It's time to go.

Dr. Montaire activates the panic button beneath her desk, Site Security is dispatched to her location.

Dr. Montaire: I'm not sure what's going on, but why don't you have a seat. I'm sure we can work this out.

Unidentified Figure: I'm afraid not, I'm assuming I have a moment or two. Ah! There you are, mon couer. Come along now, we best be off.

SCP-529: Meow.

Unidentified Figure: Well she certainly likes you, it seems we made the right decision. Now, with me, little one.

03:48: SCP-529 descends from the windowsill and walks towards the figure, brushing up against their legs. The figure stoops to pick SCP-529 up and cradles her under one arm and leaves the office. Site security rounds the corner and demands the figure stop. As it continues walking, one of the Security Personnel attempts to fire an electroshock weapon at the figure: the launched projectile hovers in the air a few feet from the individual as they step into the aperture carrying SCP-529, which closes abruptly after them.


Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License