Hopping Through Worlds

rating: +30+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; }

rating: +30+x

"Superb work, Agent Hopper. The rest of the Archivists are going to have a field day." Archivist Silvia Haven grinned at Agent Hopper from across his desk. "I admit, I was unsure about you when L.S. brought you in, but nothing wins my respect more than a pile of files."

Hopper chuckled. "I'm just glad that some good is finally coming from my excursions. I'm super grateful to you and L.S. for the opportunity to be here.”

Haven shook her head. “Not at all, we’re the ones who should be grateful.”

A tablet lying on the desk between them beeped. Haven picked it up and glanced at the screen.

“Speak of the devil, L.S. wants me to get them a report on that unmasqued universe you visited by tomorrow. I suggest you head to your quarters and rest, you've certainly earned it. As for me, these documents aren't going to sort themselves."

Hopper pushed himself out of his chair. He opened his mouth to say goodbye to Haven, but she was already intently reading through the documents.

Upon leaving Haven’s office, Hopper was greeted by the maze of endless bookshelves that filled the great Wanderer’s Library. Wide windows were built into the wood-panelled walls, giving a clear view of the vast cosmos that the library drifted through.

Hopper had lived in the library for just over a week. The serpentine architecture was hard for him to get used to, and the repeated rows of identical leather-bound books made one stretch of corridor in the Wanderer's Library indistinguishable from another. He strolled aimlessly amongst the shelves, stopping to look at the occasional book, until he came across a place he recognised and turned right towards his quarters.

He stopped walking and winced as a familiar nausea gripped him. A powerful migraine exploded within his head, colours spilling before his eyes. Trying to hold himself up, he leaned against a bookshelf, and his body fell through it onto soft ground, a far cry from the hardwood floor of the Library. When the kaleidoscopic visuals faded, Hopper found that the world around him had completely changed. He had shifted.

Hopper pushed himself out of the mud he had landed in and wiped himself off as best he could. The ground, dark earth covered in darker grass, extended into the horizon with nothing else in sight. The sky was blue, with bright white clouds staggered across it. Upon closer inspection, he noticed that something was off. Hopper's eyes widened. Those weren't clouds. They were massive holes in the sky. Each hole was rectangular, with dark shapes swirling in the milky void behind them.

Hopper tore his eyes from the freakish sight above. There were no houses, power pylons, or even beaten paths. Hopper couldn’t control how he shifted, but he usually landed in a city, or at the very least someplace with signs of habitation; that being said, a barren waste with nothing and nobody in sight wasn't impossible. The best strategy in these situations was to walk straight forward until he came across a settlement or some other place where he could camp out until he shifted back to where he came from.

Hopper walked for a few hours. Bushes and trees bearing sickly, dark-green foliage began to dot the landscape as he went. The comfortable slippers that he wore around the library became soaked in the mud, so he threw them aside and went barefoot. The cold dirt squelched beneath his feet, but at least he moved quicker.

A branch crunched just behind him, and Hopper turned to find himself staring down the barrel of a rifle.

"Wait! Please don't shoot!" Hopper yelled, raising his hands.

The rifle spun around and the butt swung into his jaw. He shouted and fell into the mud for a second time. Scrambling back, he looked up, trying to catch a glimpse of his assailant.

She was a tall woman, with features made gaunt from hunger. Her face was painted with dirt, and her hair was choppy like it had been hacked at with a knife. She wore a thick, dirty coat and a bulky knapsack.

The woman looked him up and down. "You don't look like a survivor. What are you?"

"I'm lost, I'm sorry if I'm on your land-"

"I don't like bullshit. I'll blow your fucking brains out," the woman interrupted.

Taking in her stuffed pack, along with the holes in the sky, the diseased look of the plants, and the word she had said: 'survivor', Hopper figured that this was an apocalypse world. Something had gone wrong here, destroying the world.

There was no point in beating around the bush. "Ok, I came here from another reality. I can prove it, too."

Slowly reaching into his pocket, he retrieved a chocolate bar he had been saving. He lobbed it to the woman, and she caught it out of the air. The rifle stayed trained on Hopper as she peeled the wrapper with one hand and wolfed it down.

"Shit, that's good. Fresh, too," she said between bites. "Name's Micha." The rifle was lowered away from Hopper's face. "Alright, I believe you. Weirder things have happened, anyway." She firmly gripped Hopper's arm and hoisted him to his feet. "So, what brings a tourist to this rat's nest of a reality?"

"Well, um, it's sort of a long story. I tend to randomly shift around between my home reality and others. I didn't want to go here, I just did."

"Heh, what fun. I wish I could jump out of this universe." Micha slung the rifle over her shoulder and gestured for Hopper to follow. "C’mon. Tell me about yourself on the way. I got places to be."

They set off in the direction of a cluster of disfigured trees. Hopper noticed that despite her relaxed demeanour, Micha’s eyes never stopped scanning their surroundings. She even gave the bushes a wide berth, as though something might pounce if she let her guard down.

"Well, I don't suppose you've heard of the Foundation?" Hopper asked.

"Those idiots? Yeah. They showed up after the world had already fallen apart and most people were killed. They didn’t really do much besides let their magic prisoners escape and complain about how the governments were handling things. You have them in your universe?"

"Yeah. Long story short: they tried to keep me contained, but I got away. I joined a group called the Serpent’s Hand, and now I live in a massive library. I record information about the universes I go to for the Hand to archive."

"Living in a library? And I thought my world was bad.” Micha chuckled. “So if you have to get information for this Serpent’s Hand, does that mean you’re going to ask me irritating questions about my world?"

"If it's fine with you."

"God yes. It's been so long since I've spoken to someone who wasn't homicidal." Micha grinned.

"My name's Hopper, by the way."

"Just Hopper? Doesn't sound like a first name."

"My real name doesn’t mean anything to me anymore. The name Hopper relates to how I hop between realities."

She laughed. "That seems a bit dramatic if you ask me. So, pray tell, Hopper, how's my magnificent universe treating you?"

"It's pretty ominous, to be honest. What's up with the holes in the sky? Are those normal?"

"Those are our lovely reality rifts. Don't ask me why they're there, or where they lead to. When they first appeared, maybe seven years ago, the British Air Force tried flying through them. A year later the planes were found sticking out of a cliff face in Iceland."

“Interesting.” He gestured to a nearby tree, asking, “How about the plants? Do they normally look like this or is that new?”

“Since the sun got fucked all the plants look like that. I'm no biologist, but I figure it does something to the chlorophyll.”

Hopper squinted up at the sun, shading his eyes with his hand. "I'm not seeing anything wrong with the sun."

"Well, it moves around in the sky randomly, there was a fun period when it melted people to death, and hell, it even turned green for a year or two. You’ve just arrived, so you wouldn’t know that the sun’s been stuck at that point in the sky for the past three days."

"How does that happen?"

Micha rolled her eyes. "All I know is that it makes sleeping a bitch. I'm not exaggerating when I say that this reality is ripped to shreds. I don't really know anything about what’s happening. I just live here."

“Is anyone else still alive out here, besides us?”

“Probably a few, here and there. When things got really bad, with insane people with superpowers, whole cities dying for no reason, and the Foundation fucking up royally, most really populated places were evacuated. I packed all of my stuff and lived in a hut in the woods for a year, so I didn’t know what was going on in the rest of the world. I didn’t have any family left, and I wasn’t really in a hurry to leave my cushy box of splinters. A few months ago some major wildfires forced me to leave and get into a community with a few other people. Some stuff happened, we got attacked, and I was able to escape. All I've met since are a few crazies who tried to kill me, so I had to act first.”

She trailed off, and they walked in silence. A few hours later Micha turned and looked at him cautiously. "Listen, I want a yes or no answer. The last thing that I want is false hope. Can you take me with you, away from this world?"

Hopper nodded, he had been expecting this question to come. “Yes. If I’m touching someone then I can bring them with me.”

As soon as he said this Micha reached out and grabbed his arm, her fingers digging into his skin.

“You’re not going to even think about letting me go. Got it?” Her voice was filled with desperation. “How long does it take for you to go back to your universe?”

“Um, it varies. From a few hours to a few weeks.”

“Well, neither of us is letting go for as long as it takes, then. Let’s get out of here.”

They increased their pace, leaving the muddy grasslands far behind them. They crossed over a hill and a forest came into view in the distance. “Change of plan. There should be an old shack in there,” she explained. “We can hold out there until you get us out of this dump.”

They approached the forest, and the air was suddenly split by a deafening crack. Tremors shook the ground around them and the earth broke open, scarring the landscape with deep fissures. Micha broke into a sprint and Hopper just managed to jump over a gap that opened at his feet. The shaking slowed to a stop and grey slime began to seep out of the lesions, pooling on the ground. Micha urged Hopper to run faster, but he was already going as fast as his legs could carry him.

Not long after they had passed the last of the holes, the liquid began to coagulate, rising into amorphic mounds of grey flesh. There were no eyes or ears to be seen, but they knew exactly where the pair were as they undulated towards them at astonishing speeds.

“Oh shit. Why now?” Micha hissed.

“What is that thing?” Hopper shouted.

“I don’t know!” she snarled. “Of course something has to go wrong just when I get some goddamn luck. We’re going to try and lose them in the forest. If we can’t do that, then we’ll just have to keep moving.”

Hopper was panting too hard to say anything. Even after they had gone under the cover of the trees, the abominations still followed them, their massive forms staying low on the forest floor. Micha and Hopper still had a lead on the pursuers behind them, but in the shadows of the trees ahead, more massive shapes slithered across the ground. They were surrounded. Micha dropped her pack to the ground and scrambled up a tree, then pulled Hopper up after her. They sat on a branch near the top of the tree, keeping their eyes pinned to the ground.

A blinding headache wreathed Hopper's vision in stars. Whether it was the fault of the long run or the beginning of a shift, he couldn't say. He groaned and clutched his head.

“Micha, I think I’m about to shift.”

“At least your power has dramatic timing,” she muttered.

One of the larger blobs, the size of a van, wormed its way out from behind a grove of trees. It stayed at the base, trying to hold a stable form for long enough to reach up and grasp them, before collapsing into ooze again. Micha levelled her rifle and fired into the creature. Grey fluid leaked from the puncture wounds in its soft membrane, but it didn’t seem to notice. In turn, the amorphous blob of meat shot out a barbed protrusion, quick as a flash, and punched through Micha's leg. She screamed and the fleshy harpoon retracted, pulling her from Hopper’s grip. Blood spurted across Hopper's face as he scrambled forwards along the branch; in that desperate bid to pull her back, he lost his balance and fell, snapping the branches below him as he-

Fell hard onto solid wood planking. Forest had instantly turned to rows of bookshelves. Hand shaking, Hopper reached up to his face, felt the warm stickiness covering him, and collapsed.

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