Dark Age: Hazmat
Dark Age: Hazmat
Byㅤ tiredsn0wtiredsn0w
Published on 02 Feb 2022 23:48
rating: +11+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; }

Dark Age: Hazmat

I sat on a rooftop next to 7CB7, who was consuming conveniently packaged fauna. Yes, fauna. I tried not to stare as it tore off pieces of meat with its knifelike teeth, actually swallowing the substance. It blew my mind that it had a whole organ system to process the chunks of matter.

My lungs can absorb a small amount of water, but chunks of fauna in there? I had the urge to cough just thinking of it.

7CB7 finished and put the empty package into one of its pockets.

“You gonna have anything?”

“I don’t, um, eat…” I said awkwardly.

“Oh, I knew that.” It mimed injecting something into its arm. “I meant your liquid stuff. What about those syringes I see you using? Those prescription?”

“I am prescribed them, yes.”

It raised an eyebrow. “Is it, like, meds?”

“I mean, they’re all meds. They come in a syringe, what did you think they were?”

It rolled its eyes, “I guess I should have asked, what are they for?”

I didn’t really want to tell it. “Isn’t that kinda personal?”

“Okay,” It grinned. “I’ll ask 4B80. Twos got dirt on other twos, right?”

I made a face. “Fine. They’re mostly psychiatric meds. Some performance enhancers. Happy?”

7CB7 blinked. “Didn’t take you for someone on that kinda stuff.”

What was that supposed to mean? “Yeah, well, some Twos come out deformed.”

“Yeah,” it eyed the empty space over my head. “I thought Twos were supposed to be big.”

I made another face. “They fucked up the samples they grew me from or something. Or maybe it has to do with stuff that happened further down the line.”

“Like what?”

I regretted mentioning it. “Getting dropped too many times as a bud? Not training enough? Inadequate nutrition, maybe?” I shrugged. “Spending too long in regen tanks stunted my growth. That’s what I’m going with.”

“Maybe you’d have to spend less time in regen tanks if you didn’t get blown up so much.”

Maybe I wouldn’t have to spend as much time in regen tanks if someone hadn’t made me blow other people up. I bit back the urge to say this when I heard someone climbing up the fire escape. I whipped around, only to find 4B80.

“Break time’s over. There’s a group of rioters that we’ve been assigned to break up.” It looked at me. “I don’t know what you two were talking about, but no blowing people up.”

I picked up my face shield from where it was resting and put it on. “Yeah, sure.”

Days stayed mostly uneventful, dissipating crowds and taking people into custody when necessary. Mild displays of force that resulted in mild injuries. Hey, at least I didn’t have to kill people.

Speaking of killing people, there were more and more people with my old job, yet more and more Ones were disobeying the government. Could it have possibly been that murdering the shit out of people you disagree with didn’t help the root issue of why they didn’t like you? Mind blowing. Who would have thought?

“No! I’m not listening to you!”

We were standing in a semicircle in front of a yelling civilian, trying to get it to calm down.

“It’s not a conspiracy, the government did create this virus!”

“Calm down,” 4B80 said in a flat tone. “Viruses are extremely rare nowadays, due to the hard work of the government. Think about it reasonably, they have no reason to make a new one.”

“You're not listening! Ones are getting it, dropping like flies. It practically kills us, forcing us to be hospitalised!”

All (legal) hospitals were under government jurisdiction. All doctors and nurses were government employees. I could see where this was going.

“They're making us rely on them to keep from dying,” it continued. “And you lot are helping them! Fucking messed up, it is.”

I understood what it was saying. Relying on the government was not a good idea. Being at their mercy? Believe me, that was a horrible idea.

“Calm down,” 4B80 repeated. “This is heresy. Stating such things is a crime, which you know.”

“You know what else is a crime?” It drew a weapon on 4B80. The firearm was an old model, relying on combustible powder and small projectiles to inflict damage.

I darted forwards and reached for the civilian’s hand with the intent to wrestle the weapon out of its grasp. It fired at my chest, which my vest helpfully absorbed the brunt of— though I was still going to have a giant bruise later. Asshole.

“Fuck off, runt!” It hit me upside the head with the barrel, which I could not absorb, and I stumbled to the side. 7CB7 grabbed it by the front of its shirt, drew one of its weapons, and pressed the tip to the civilian’s neck.

“Don’t talk to it like that.”

4B80 put a steadying hand on my shoulder. For a moment, I thought things were caming down because the civilian looked rather shocked; it appeared 7CB7 had rather gotten its point across. But then its expression became angry.

“What the hell, man? You’re one of us, not one of those drones!”

“I’m not one of anyone, and I will shoot you if you don’t comply.” I knew 7CB7’s weapon was set to stun, but even that hurts so bad that you might as well have been hit with energy weapon fire.

“No you won’t.” And then the civilian shot me in the arm. Grazingly, because its aim was garbage, but blood started pouring out of the gash and I pressed my hand to it as 4B80 radioed the Handler and 7CB7 discharged its weapon into the civilian’s neck, then chest, then abdomen. It dropped to the ground as it slowly curled into a shaking ball.

The projectile weapon clattered to the ground. 7CB7 rolled the stunned civilian onto its stomach, cuffed its hands together, and started dragging it towards the nearest detention center.

4B80 got off the radio and turned to me. “Let me see that.”

“It’s fine.” My sleeve was rapidly turning blue and the wound stung badly.

“Let me see,” it insisted.

I dropped my hand and felt a significant amount of blood roll down my arm. 4B80 opened its medkit, using the trauma shears to cut some of the fabric away so it could see the injury better. From the way it sucked in its breath, I inferred there was more damage than I thought. It packed the wound with gauze and wrapped my arm in a self-adhesive bandage.

“Keep pressure on that until you reach the hospital. I’m going to help 7CB7 with that rebel. And 5A82?”


“Actually go to the hospital. I know you didn’t last time.”

Well, busted.

I was actually in the hospital, actually getting my bullet wound looked at when a familiar doctor stepped into the room. I recognised it from a while prior, from when I’d most recently come out of a regen tank. From when… the Handler had gotten a little upset with me.

It waited until the nurse had finished rebandaging me and left.


I rubbed the bandage. They’d given me painkillers, so it didn’t really hurt. “Hello.”

It pointed at my arm. “What happened there?”

“Someone was really mad about the virus.”

The doctor cleared its throat. “How much do you know about the virus?”

That was a weird question. “Not much.”

Silence. Unease crept up on me. I didn’t know how much I should say; if this person was very much a government suck-up, it would be terminally stupid to put the government in any sort of bad light. But if it was trying to interrogate me, it was doing a bad job.

“It said it thought the government created the virus.” I was going to add a, ‘which is obviously a conspiracy theory’, but the doctor nodded solemnly before I could get a word in.

No. No way.

“You can only scare people so badly. You can only shoot so many rebels. Violence doesn’t force people to buckle; desperation does. And there’s no better way to cause desperation than an incurable disease.”


“No matter how hard you scrub, it doesn’t come off of surfaces. It hangs in the air for hours, and you can contract it just by breathing it in. If you weren’t wearing those face shields, you might have been infected by now.” Again: I loved my face shield. I had assumed the reason there were no gaps was to keep our faces from being seen; that’s why I loved it. But the added bonus of filtering everything you breathed in was nice.

“First, you have a hard time breathing. If you’re a One, you start vomiting. Then as you get worse, you start basically coughing your lungs up. Blood stops going to your limbs, and if you don’t recover fast, they die and need to be amputated.” I very much did not like the sound of that.

“There isn’t a medication you can take or a treatment to get the virus out of your system. At least, not a government regulated one.” It looked pointedly at me.

“So there is a cure?” I asked hesitantly.

“How loyal are you to the government?”

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