Dark Age: Intro
Dark Age: Intro
Byㅤ tiredsn0wtiredsn0w
Published on 09 Jan 2022 05:45

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

Dark Age: Intro

I pulled on the insulating layer, zipping it up my neck. I put on my uniform over it, slipped my feet into boots, and got my hands into gloves. My face shield and headset came after that.

I took a long look at myself in the mirror. All identifiable features were completely obscured; the most you could make out was the rough shape of my body. It was weird but enthralling. This was the first time I’d put on my whole uniform.

What was coming was going to be… interesting, for sure.


I stared out the shuttle window, observing the approaching city with detachment. I clasped my hands in my lap. The closer I got, the less I thought this was a good idea, but I reminded myself:

We’re doing the right thing.


I stepped onto the platform and accepted the weapon handed to me. Its weight was familiar and reassuring in my palm; I’d trained, and trained, and trained for this. I knew what I was doing.

I was given orders, and reminded of my mission. I nodded, then stepped off the platform and loaded into a small vehicle. It had no windows or markings, external nor internal. There were two rows of seats, facing each other. The only occupants were the driver and myself.

I sat down in a seat and fastened my seatbelt. The click of the buckle echoed inside the vehicle. The vehicle began to move and I took a shaky breath, anxiety swirling around inside me.


A One was standing in front of me, a One that matched the description I’d been given. I imagined a target practice dummy in place of the person standing in front of me, staring at me, looking shocked and terrified. I discharged my weapon into their chest. I watched them keel over, blood spurting from the gaping wound. I discharged a second time, into their head. Brain matter sprayed against my face shield.

I swallowed, gaze locked on the slumped, oozing figure in front of me. I told myself that it was just a target practice dummy, just a ragdoll my teacher had put there. I pretended they were standing next to it, nodding and affirming my accuracy, reminding me:

We’re doing the right thing.


I stood in the middle of a room, surrounded by the corpses of Ones. My fingers trembled as I put another power cell into my weapon; my gloves were stained blue and I didn’t want to look at them. I didn’t want to think about the blood, and how it looked just like mine.

It was easier to keep pretending they were dummies, but even that was getting hard; they all had that same look in their eyes. I knew I was the last person they wanted to see, and the last person they would see.

Only one of us was leaving, and both of us already knew who it would be. My uniform was synonymous with enforcement. What that means depends on what you did.


I stood in a hallway, aiming down my sights. A group of Ones entered through a connected door. I discharged my weapon once, twice, three, four times, hitting them once in the head each. I told myself I did it like that because it was more efficient and used less ammo. The truth was closer to an ethical debate that I didn’t want to think about.

I walked to the group of corpses, stowed my weapon, and started dragging them individually to a large pile of dead Ones. There was a reason they’d given me a ranged weapon; I hadn’t developed my upper body strength yet. They were almost twice my weight and I struggled considerably to move them, but my supervisor would be upset if the bodies weren’t organised and easy to collect.

But, hey, things that were neat and orderly were good, right? We weren't so savage that we’d leave corpses for civilian Ones to find… I thought. It wasn’t really clear how or when they collected the bodies. That wasn’t my job.

My job was to keep my head low and follow orders. Orders that I could definitely trust, probably. Orders that were always just and fair, usually. That was what we were made to believe, anyways — a mantra they'd drilled into my head:

We’re doing the right thing.


My suit was drenched with blood and bits of entrails. The coppery smell was revolting. Unease and discomfort rose in me as I realised that I’d caused this, I’d made the internal parts become external. I killed them.

I leaned against a wall and stared at the explosion of insides coating a significant portion of available surfaces. There’d been a struggle, and I wasn’t able to get headshots due to close range and being thrown around. I had to use the “this thing will eventually die if I shoot at it enough” method. It worked, but there was a lot of screaming from injured Ones from what I could only assume was agony. It was a very uncomfortable situation.

More orders came through my headset so I pushed by not-so-fun experience to the back of my mind and changed my weapon’s power cell again. Letting out an unsteady breath, I advanced down the hall, leaving the pile of Ones for someone else to have nightmares about.

I tried to keep telling myself:

We’re doing the right thing.


I stood perched on a roof, looking out at a field of carnage. I knew I should have felt something. I really should have.


I swayed on my feet as the shuttle took me back. It felt like if I sat down, I would never stand up again. None of the other Twos mentioned the blood dripping off my clothes, guts splattered across my front. They didn’t have jobs like mine; they’d been spared the indignity of such cleanup. But it was an honour, right? It was the best job. That’s what they told us, but I could see the wariness in the eyes of other Twos. I could sense their unease, and it was because of me.

At least my face shield was opaque. I didn’t want to give away how I felt.


I threw my bloody clothes into a washer, then dragged myself to a shower. I stood under the room-temperature liquid and stared at the wall. The shaking extended to my whole body as I rinsed coagulated blue globs off my skin.

I collapsed into my bed and wrapped a blanket around myself. I curled into a ball and tried to close my eyes, but whenever I did I could see it. I could see myself. I could see the bodies. The gore. The suffering.

All we did was take orders from the big guys. We were creations, their creations. Their soldiers. Their angels. That’s what they’d told us.

But it’s not like we had a choice. We were made through synthesis, in a lab, for the sole purpose of doing their bidding. They raised us to be obedient, to control the rebellious Ones, to keep the Ones that made us in power. And sometimes that involved lots of scaring and killing people who disagree with them, though not always directly or violently.

Was it okay to hurt people, to kill people? We’d been told it was; we were made to do it. We had to. If I didn’t, someone else would just take my place. I couldn’t hide from it. That doesn’t make it go away.

It was inevitable; even though we were given different jobs and go through different training, we were all given a purpose to carry out, and that purpose always serves someone’s political ideology. Of course, I'd been assigned soldier. It was supposed to be the best job. It was the worst job, and everyone knew it.

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