A Scene From a Meme(-ory)

the EVERYMAN is a person who flounders about in his own blissful ignorance, until life smacks him in the face with a TASTE OF ADVENTURE!

A Scene From a Meme(-ory)
By: Lt FlopsLt Flops
Published on 22 Jan 2020 13:52
rating: +57+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: +57+x

A Scene From a Meme(-ory)

Tales Hub » Series Archive » Void Dancer Hub » A Scene From a Meme


After a massive insect in Messianic skin swallowed him whole, Adamo Smalls could safely say he survived his own funeral. Which he did. But the real tragedy had only just dawned on him: He was having a fashion emergency. Luckily, Heather Mason came to save the day.

It took her one passing remark to win him over.

"Let's get that godawful cicada stench off you. Do you have a spare incinerator?"

At The Void's local second-hand store, Heather picked out his outfit. She traded his soot-stained, gut-garnished overcoat with attire that no memeticist worth their salt could leave home without:

A sweater vest and a pair of khakis.

Adamo gaped at his own reflection in Heather's face-screen.

"I look like someone's deadbeat uncle."

The pair crossed 'wardrobe malfunction' off the mental bucket list and slumped into a nearby alcove. They stared off into the distance. For the next half-hour, the pair was still. Faceless passersby flowed along in a stream of monotony.

What felt like days before, the pair had bid their old reality adieu when it faded out from under them. They travelled on different journeys but found themselves at the same destination.

Wherever that was.

Heather bobbed her face-screen to the side and noticed Adamo frowning. It was a brief flicker, but it sent her searching for a reason. Was he exhausted? For sure, but he showed that in his shoulders. Hungry? Maybe. There was a Taco Bell a half-block away, if they craved it, but no. There was something else. His gaze held secrets.

She had secrets, too. She knew things he didn't.

"This is just another part of the game."

"What do you mean?"

He turned his head to study her face-screen.

She told him before that their destiny — in this place-between-places, filled with memories from Adamo's past — was part of a game. Some complex game of cosmic fates played by gods and demons. But They wouldn't let her tell him the truth. The full truth.

She tipped her CRT screen head away.

"It's… Complicated."

"Let's uncomplicate it, then. Games don't usually put you right into the action, do they? There's a lot that the player needs to slog through before they can even begin. There's a tutorial, maybe some backstory scrolling down the loading screen. World-building. That sort of thing. Right?"

"Right, okay, yeah."

"Yeah. But in the span of a few hours, I've been through, like, three different unrelated places and met some buggy asshole that may or may not have been alien Jesus Christ. And now I'm here. Doesn't seem like any game I've ever played. You know?"

"I, uh, no. I don't."

"… And that's another thing. What's your role in all this? Your actual role, aside from helping me. You didn't just pop up here because I imagined you."


"Like, alright, maybe you're physically incapable of explaining why you can't explain why… If that makes sense?"


"No, it's okay, I get it. Something memetic, maybe? Never mind, you wouldn't even know what that means. That's okay, too. See, I'm not just some generic secret agent from an action movie. I'm a field researcher. I have expertise, and–"


"… Okay, you're right. Fine. I'll get to that. But first, I–"




Adamo perplexed over her change in tone. She pointed frantic fingers at her face-screen.

The ‘Pataphysics Department presents…



"… What the hell is that?"


The strange words had been flashing on Heather's face-screen for all of five minutes, but to her, it felt like an eternity.

"Can't you just think really hard about it?"

His tone didn't sound very convincing.

"It's not as easy as it looks, you know!"

And she didn't sound very convinced.

"All I'm saying is that if I had a CRT screen for a head, I might find it in my best interest to figure out how the damn thing works!"

"You're being so insensitive!"

Heather squealed as she gripped the sides of her CRT screen head. Her fingers ached and butterflies made a roost in her chest as she squirmed in fear. Adamo stood by, hands up in the en garde stance, as if he were about to supply technical aid like some IT magician.

"I don't have time to play any games, young lady."

He lowered his arms in brief uncertainty and shrugged.

"I mean, this might literally be a game, but…"

"Young lady? Who are you, my mother?!"

"Come on, you could at least check your pockets, there must be a remote for this or something."

"… That's my head you're talking about, Adamo."

Ever since a makeshift rebirth ritual pulled Heather taut between meatspace and this place-between-places, she had a TV screen for a head. That was her anchor. That was her normal. It had taken the better part of two years to get used to, and she spent hours upon angst-ridden hours fearing how the world would perceive her.

The time after she received it was the hardest in her life. The Foundation had her cooped up for three months. A brief time for an 'anomalous humanoid entity' — which is how Containment Security rats called it — but aeons for her. Eventually, through a chain of events she didn't dare question, she broke out. Her adoptive moms came to find her, and for the next year-and-a-half, they were on the lam.

And now Adamo was treating her 'anomaly' as a toy, a set piece. He was probing her like the Jailors did. She remembered the anguish that kept her up for weeks. He's just like them, she thought. Just like them!

But surely, he had faced considerable distress, too, hadn't he? An anomaly ripped him from the world. He watched his family, his friends, his colleagues, and everything he knew, slip through his fingers like coarse sand.

Maybe he empathised. Maybe he looked to her 'anomaly' the same way he looked at his. Maybe he just wanted to understand.

She forced herself to internalize all these feelings, for the briefest moment, and focused on her breathing.


"Hey, Heather?"


"You still with me?"


"Hey, if you can make jokes, then so can I. Look, I'm sorry. I'm sorry I pushed. Let's figure this out together. Okay?"


Heather shook her head. She looked at Adamo. Lucid again. She smiled and cracked a joke.

"Okay, grandpa."

"… Heather, I'm thirty-one years old!"

"So then why are you always such a grumpy old geezer?"

"All right. Let's just take a second to calm down. You're the one that wanted me to play this game in the first place."

"I know, I know."

Adamo sighed and scanned their surroundings.

"Well, I'm lost. Let's get some help."


Adamo jumped. The screen was talking. To him.

"Heather? What do I say?"

"I don't know…"

"Uh, hey. I'd like to start the game, please."




"Sure, I don't see why not. Would save a hell of a lot of grief."


"Progress? What progress? I haven't even started yet."


Adamo's placid expression twisted into shock.

"No, I do not–"

░░░░░░░░░░░░░░░ 0%

▒░░░░░░░░░░░░░░ 1%

"Shit, Heather, make it go back."

"I can't!"

█▓░░░░░░░░░░░░░ 13%

██████████▒░░░░ 69%

"Stop, abort, quit!"


██████████▓░░░░ 69.1%

██████████▒░░░░ 69.11%

Heather giggled.

Adamo's face flickered with a tinge of red, either from embarrassment, relief, annoyance, or a mixture of the three.

"Oh, perfect. Just perfect!"

A third, separate voice spoke with a robotic timbre and a spoonful of whimsy.

you should see the look on your face. i got you good!

"Drop the charade. Who are you, and what's going on?"

i am a Text-to-Speech Analysis construct, Type-P, code named FODDER! you've been selected to play THE GAME. are you excited??? i sure am!

"Let's take a step back here. I want this 'game' explained to me. Right now. Capisce?"

THE GAME follows a naive EVERYMAN on a QUEST to unlock his true potential! the EVERYMAN is a person who flounders about in his own blissful ignorance, until life smacks him in the face with a TASTE OF ADVENTURE! he stumbles into THE GUIDE: his unsuspecting companion and bearer of THE GAMEs information! he resists THE GUIDE — maybe once or thrice — until THE GUIDE pushes him into THE UNKNOWN. there, he faces VICES, and VILLAINS that scare him into battling a terrible BEAST. he narrowly defeats THE BEAST, nabs its TREASURE, and meets THE MAKER, who shows him how much of a LAZY OAF he used to be. with the POWER OF FRIENDSHIP, he returns to his old life a HERO!

"That is so vague, you could have described any game out there. Is that it? Heather, did you know this?"

"I– Uh, I know all sorts of things about the game."

"So why haven't you explained anything?"





"Oh, I wouldn't, I really, really wouldn't!"

so then, guide! whatareyouwaitingfor???? are you going to guide your compatriot here to absolution????? OR WHAT.

Heather snapped out of a slouch.

"I'm ready!"

oh gosh, you are just like the cutest li'l thing!

"… This entire thing brings up more questions than answers."

"I can't reveal anything to you, Adamo! Not anything meaningful, at least. It's like… Those mind programming things your people claim to save the world from."

yawn. boooooooring! could we get THE GAME going, or naw?

"I just need to know some things. Like… We were in the void. Why are we where we are right now? With a Taco Bell, and a thrift shop, and everything else?"

"Oh, um, like. The game uses your memories and worldview as a baseline, and then builds from there. From a game development standpoint — especially one so personalized and far-reaching as this — it only makes sense to do that."

"And, and what about that weird… Insect freak. What does he have to do with this?"

THE GAME would like to inform you that it has no discretion over multiplayer activities and takes no responsibility for damages incurred therein!

"Well, I'm exhausted already. How's about that Taco Bell, first? I've never actually had it, but I heard it's delicious."

"I, like, can't actually eat Taco Bell, so."

"What, not hungry? Maybe we can–"

The realization slammed into Adamo like an 18-wheeler.

"Oh. Forgot about that."

"But I think I spotted a cyber café nearby!"

"Great, let's go!"

The pair had more-or-less walked away before the quirky mechanical voice jolted them back.

once you all get powered up or whatever, i'm sorry to say, but THE GAME will truly begin!

"Sure, whatever. Let's eat! I know I'm starving, and this gal over here is down for a byte or two herself."

As if reading words on a screen, she let out a snort. Whether she admired him as a friend, a weird, adoptive uncle, or as his guide, was irrelevant. She admired Adamo Smalls no matter how flawed he was.

And so, she followed him, down to The Void's cyber café. Hoping that the world conjured up by this man's mind was hospitable but knowing that it probably wasn't.


rating: +57+x

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