The Red Catalyst
The Red Catalyst
Byㅤ Marcelles_RaynesMarcelles_Raynes
Published on 10 Jun 2022 16:47
rating: +23+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(';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: */
#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: +23+x

A man and a vampire sat in a cathedral, basking in the glow of the blood moon. They were brothers, once, but decades of bloodlust and unquenched political ambition drove them apart. It had been years since they were in the same room together, but death has a curious way of mending even the most shattered bonds. They sat in pews on opposite sides of the main aisle and stared at the motionless body laying atop the alter with her arms folded over her chest, rose in hand.

The corpse was in pristine condition, despite succumbing to the sacred sleep last moon cycle. The body was female, no more than thirty years old physically, with black hair draped over the sides of the altar. Her hair reflected the moonlight shining through the windows, giving it a dark red hue. Her skin was pale, veins present throughout her body, eyes sunken in and her teeth sharpened. The two pinpricks in the side of her neck were barely visible now.

The vampire touched his own fangs gingerly and said, "I should have done more."

The politician scoffed, arms crossed, and replied, "I think you did more than enough."

A light breeze entered through the crack in the door. It rushed past the politician and threatened to move his tie out of place. The politician adjusted in his pew, keeping his nose upturned. His tie hadn't moved an inch.

"You bled her?" The politician asked, spotting the faded wounds on the body's neck.

The vampire shied deeper into his seat, stuffing his hands in his coat pocket. He shifted to the right, now leaning his head on the side of the pew. He shrugged.

"She couldn't afford treatment." The vampire said, spitting on the ground. "You and your cronies saw to that."

The politician inhaled, "The aristocracy controls the economy. My contemporaries and I simply manage it. You will not put this on me."

"Feh," The vampire's fists closed tighter in his pockets. His nails began to draw blood, "Dodging responsibility, as always. Will you ever grow up?"

The politician straightened his collar. For the first time since he entered the cathedral, he averted his gaze from the corpse on the altar and opted to stare at the ground. A scowl grew on his face as he ground his teeth together.

"I am the greatest member of the governing body Xerophylla has seen in centuries. I have brought unprecedented levels of prosperity to this city in the last decade alone. I have saved the human race from scarlet death. And what have you done in the meantime, huh?"

The vampire shifted in his seat, turning his back to the politician. The politician spun in his pew, accusatory eyes burning holes into the vampire's back.


The politician raised an eyebrow, "Let me guess. You became a creature of the night? Terrorized the innocents of the city? Oh, no, I've got it: You decided to sink your vile, bloodthirsty, tainted teeth into our mother instead of getting off your arse and getting her the help she needed!"

Silence flooded the room as the politician's voice rose to a shout. "You turned her into one of you foul creatures and didn't even care enough to protect her. Your failure as a son is what got her–"

The politician's voice trailed off as his eyes drifted back to the woman's body. He caught his voice in his throat. Their mother looked serendipitous still, even in death. His mind flashed back to the last moon cycle, where his brother had come to him out of the shadows and requested his help with an "important" task. The politician remembered being led to her in that alleyway by the river, how the stench of freshly spilled blood filled his nostrils.

He recalled the remains of the townsfolk that cluttered the walls and ground, how their innards were missing chunks from them. He saw broken pitchforks, splintered torches, and shattered vials of holy water. He shuddered to think about the other vampires that descended from the fire escape as he and his brother approached their dying mother.

The politician had thought he'd been led into a trap. He swore at the vampires, the monsters who surely took his mother from him and were looking to finish the rest of their lineage off. But these monsters were different than the rest. They were crippled, limbs missing, flesh seared, faces disfigured. Had they been caught off guard?

And then he remembered the vampires rummaging through the viscera like raccoons, too occupied with feeding and tending to their wounds to bother either brother. They'd had their fill on the villagers afflicted with scarlet death, or at least that's what he was told.

Their mother was bleeding from her chest, a wooden stake driven through her. She spoke to him for the last time then, and together both sons moved her from the alleyway to the cathedral, where she lay until now.

The politician started to cry.

The vampire spoke: "The aristocracy has the cure – you made sure of that – but they will not give it to the common folk. I thought I could save her. The scarlet death does not affect my kind as it does yours, but…"

A sniffle. An adjustment. A sigh.

"Does your hatred run so deeply that you would forsake your own family?"

The politician shook his head, "You are not my family."

The vampire jerked his head toward the body, "And her?"

"Don't bring Mother into this."

The vampire shrugged. He stood and pivoted on his feet, stopping only when he faced the politician. A flash of anger shot across the vampire's amber eyes, then it was replaced by something else. Sadness? Grief?

The vampire spoke quietly, "She's gone because of the scarlet death. This is on you, brother. Speak ill of me all you wish, renounce me as your kin for the decisions I've made, but do not treat her the same as you treat me. She didn't ask to be afflicted by this disease–"

"She didn't ask to be made a vampire either."

The vampire winced. "At least I did something to help."

The two brothers held each other's stare for an eternity. The politician's hand drifted slowly to his waist, where a concealed pistol loaded with silver bullets blessed by a priest lay. The vampire's eyes darted downward at his brother's hip. That same expression of anguish made its home on his face. His shoulders slumped.

The vampire looked to his mother, then to his brother, and then back to his mother. He sighed and extended a hand.

"Come," He said, stepping out of his pew and into the aisle.

The politician flinched, "I'll not hold your hand."

The vampire furrowed his eyebrows, "Then walk beside me, as brothers. For our mother."

The politician considered the offer. He had a clear shot at the vampire, and certainly enough extra bullets to put down any more that might be lurking just outside the door. He mulled the thought over in his mind as he stared into the vampire's amber eyes. Another memory drifted into his mind.

He remembered all those years ago when they were young, long before the scarlet death reared its head and established its iron-tight grip on Xerophylla. They were children then, playing in the river near this very cathedral after the sermon had concluded on Sundays. They skipped stones across the water and laughed at each other.

An ephemeral warmth crept its way into the politician's heart. He extended his hand to the vampire's and took it. Together they walked down the aisle, up the stairs, and to the body.

The men stood together in silence for the first time in years as something other than enemies.

"Do you remember when we were young," The politician began, "and mother came home from the market with an armful of groceries and quaint wooden train set for us to share?"

The vampire nodded. "I remember my trainset well."

"I remember seeing the look on your face when she told us it was for the both of us. You were devastated. You hadn't any toys for yourself at the time, not any new ones that is. So what was I to do but let you have it all for yourself? What kind of brother would that have made me?"

"You just let me have that old thing?"

The politician met the vampire's eyes and nodded. "Aye. It seemed so important to you at the time, and who was I to take something like that away from you. I already had more than enough toys in my collection."

"I don't remember it like that." The vampire said, eyebrows furrowing.

"I didn't expect you to, you were practically a baby." The politician shrugged. Tears collected in his eyes, and soon after he started crying in silence.

The vampire playfully jabbed him and said, "Well look who's the baby now."

The two men chuckled, a mixture of laughter and sniffles. The politician smiled.

When the moonlight faded from the cathedral, the doors creaked open. The siblings turned their attention to the gnarly, gangly, old man that had entered the building.

"Good evening gentlemen." Chirped Mr. Filia, smooth-tongued as ever.

The politician and the vampire looked at one another. Mr. Filia followed death wherever it went. The time to let go of their mother was finally upon them. Mr. Filia withdrew a tape measure from his inner jacket pocket and began taking measurements. The two men stepped down from the altar and walked to the entrance, where Mr. Filia's horse snorted impatiently.

The vampire turned to face his sibling, but the politician kept his eyes forward and unblinking.

"Thank you." The vampire spoke first, offering a warm smile to his sibling, "For coming, I mean."

The politician scoffed, his usual frown returning. He wiped the tears from his face and said, "I didn't come here for you."

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