Ecronak, Ekronak
rating: 0+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.

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.

…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; }

Find all posted tales and articles here!

SKIPS


TALES


The ship's bow lurched as the strong stormy waves pushed it to the side, causing everyone contained within it to cling on to the nearest handhold.

Mauci, twenty summers old, wrapped his arms around the old wooden mast, his Asiatic features, a mixture of traits from his Mongol father and Chinese mother, staying stalwart and brave against the hard slaps of the sea. Around him, numerous other young and middle-aged men ranging from the ages of thirteen to thirty were just as frightened by the weather as he was. Mauci could hear a few of them shout as another pack of fresh rations was tossed overboard, now serving only to feed the fishes and the spirits that lived under the waves.

"Damn them," grumbled Ogudei, one of the older crewmen close to him that was clinging to a wooden barrel of Arkhi that had been bolted with hempen ropes to the deck. He leveled a finger forward, his face angered as he grunted. "We've been starving out in the open sea for months, and we still haven't found a landing place without that."

Ahead of the ship, the Japanese mainland, the place where the great Kublai Khan had dared to invade seven years previous, beckoned to the fleet as the waves tossed them up and down. Where Ogudei was pointing, Mauci could see an array of two meter high stone walls protecting the coast line, barely visible in the open stormy sea.

"What do you mean?" Mauci said, his legs trembling unsteadily as he made his way beside Ogudei. "Surely the Khan will be able to find a way."

Ogudei looked at the youth beside him like one would look at a foolish child. "You blind, boy?" He said, his dark eyes meeting his. "It's hopeless for anyone to find a spot. The Shintoist bastards made sure of that."

He gestured to a ship in the distance that had crashed into the rocks a day earlier. "Soon," he said, his voice gruff. "We'll all be like that."

Mauci sat up straight, his gaze now just as piercing as the older man's. "No, we won't." He looked back towards the mainland. His voice lowered to an uncertain whisper. "We won't."

Ogudei sat up and looked back at the youth. Annoyance colored his eyes. "Then keep it in your thick skull, teneg." With that, he stomped off.

Thunder echoed above the clouds as Mauci sat silently, turning the sailor's words around in his head. The man's last insult had done no effect on him, where normally it would've provoked him to a fight.

He has a point, he thought. A good one.

Mauci looked at what remained of their fleet. Some had holes in their masts, or no masts at all. Others had great wounds in their hulls, and a few had already crashed into the treacherous rocks. Rations being distributed to the troops in the fleet and the sailors that crewed the crafts were already being spread thin, and would become thinner as time passed by.

He sighed.

We need to turn back.

Suddenly, the grey skies overhead turned even darker. The previously distant thunder seemed to boom on top of them.

Mauci turned his head upward to the horizon in front of him.

On the shore, a figure stood on top of the wall that hadn't been there before. Even from the distance that the fleet held from the walls, the man's chanting was audible.

Under normal circumstances, Mauci wouldn't care less. The practices and prayers of heathens were below him, no matter what they were. But the sudden change in weather compelled him to listen closer, trying to see if the fool on the walls was conducting actual sorcery or not. Other men began to crowd around the bow of the ship, blocking Mauci's view. Yet nothing could stop the man's chanting from entering his ears.

Then, Mauci heard the howl of the wind, distant yet still unbelievably loud. He could hear the Shinto man chanting even louder, as if he was trying to be heard amongst the gusts of the stormy wind. Immediately, the ships of the fleet began moving to the left, despite the fact that most of them had already folded up their masts. Each craft began quaking under the power of the wind, as if the gusts were ready to take them someplace else.

Mauci's heart beat loudly in his chest as his gaze went from the direction of the man on the shore to the origin of the sudden gusts.

In the background, Mauci was still able to hear the sound of the priest's voice. He was chanting only one word now, and every sailor could clearly hear what it was.

"KAMIKAZE! KAMIKAZE!" the man shouted over and over. "KAMIKAZE! KAMIKAZE!"

Mauci watched as a storm made up of multiple snaking winds began to form in front of his eyes. The storm looked like a coil of screaming white snakes made up of pure air, slowly picking up its pace as it inched forward closer to the Mongol fleet.

The effect was electric as men immediately came to their senses and started jumping off the ships. Chaos ruled the fleet as its frightened sailors and soldiers began fleeing from the crafts. Only a few brave sailors dared stay, the captains of each ship the most prominent ones.

In the cacophony of panicked screaming, Mauci's eyes met Ogudei's, who was holding on to one of the masts. The older man smiled at Mauci, the panic that would have normally plagued a man in his position completely gone from his face.

"I told you so, Mauci!" Ogudei shouted. "I told you so!"

Unable to come to terms with what was happening, Mauci broke his gaze and turned his view to where the storm was. Far-away ships began breaking down with the turning and tossing of the waves, the coiling ball of snakes that was the newly-developed storm crushing the wooden transports under the overwhelming strength of its winds.

"KAMIKAZE!" the man on the shore shouted still, his voice now growing hoarse with each word. "KAMIKAZE!"

Mauci closed his eyes, sitting on the wet wooden deck.

The storm grew closer with each passing moment, the screams and hisses of the white snakes that made up its winds now deafening in the short distance from the ship to the destructive storm itself.

"Kamikaze," Mauci whispered to himself. "Kamikaze."

In a split second, the ship overturned violently, and he felt himself sinking deep into the water, the air being robbed from his lungs.

He remembered sinking deeper into the abyss, the endless expanse dark and unforgiving.

He remembered the salt of the sea burning his eyes as he opened them, awakening him to the reality of his impending doom.

He remembered kicking desperately upwards towards the light of the beckoning sky, his lungs screaming in agony as he swam up and further up.

Then, in an instant, his face felt the hard stone of the Japanese sea walls, alongside the corpses and dying bodies of dozens of his fellow sailors- their gazes vacant, their tongues lolling open.

He looked around slowly, his body numb from the cold of the abyssal sea. Everywhere around him floated bodies numbering now not in the dozens, but in the hundreds. He was alone in a floating land of corpses, dying among the dead.

Then, he heard hollow steps on the sea wall that he now so desperately clung to. Tired, he turned his head upward to look at the man that now walked above him, his head turned to the side as he looked at him askance.

The Shintoist priest responsible for their doom gazed at him from the top of the seawall for a moment longer, before opening his mouth to speak a bastardized form of common Mandarin.

"You are alive among many," The priest said, leaning down to take a closer look at the sailor. "Even when the Kamikaze has ensured that you will not live. You are either very lucky… or very blessed."

He laughed, gesturing to unseen people behind him as he did. At his command, a number of men began reaching out to take him, pulling him up by his outstretched arms towards the safety of the sea wall.

As the Japanese men set him down on top of the hard stone, the Shintoist priest looked at him with a grin on his face.

"We will take you in, Mongol," He said, a grin on his face. "and we will see you for who you truly are."

None


Ideas


  • A method actor with access to polymorph
  • A literal social butterfly that metamorphosizes from a human and tries to talk to people. The results aren't good.
  • A Satanic cult that worships Satan through cloth (Satin Satan)
  • Incorporeal ghost children left behind by a dead man that didn't want to burden society but still wanted kids.
  • A reality bender with cancer that can only bend with the help of nostalgia.
  • The eyes of the butterflies. I don't know what that means, but that's probably the leptiderophobia fuel you've been looking for.
  • Watch CGP Grey's You are Two. Yes. That. The notion of other people living in our heads and causing havoc.
  • An optometrist that absorbs the evil out of everyone's eyes.
  • PEOPLE STRIPPING THEIR SKIN TO GET OUTTA THE PHILIPPINE HEAT
  • SHITPOST: Mozart's shit symphonies (search it up) being commissioned by a bunch of shit cultists for a shit god that have a shit plan to bring upon a shitpocalypse that continues into the modern day.
  • A person whose attitude (cold, warm) affects their body temperature. They aren't invincible. Go figure what happens when they act like a bitch.
  • A playlist on shuffle that goes through every song in the multiverse- including stuff like Sarkic chants, death spell tunes, and everything in between.
  • Characters in an author's head taking over him and turning him into a chimera of different fantastical characters.