He walked a crooked mile.
He walked a crooked mile.
Byㅤ Doctor CimmerianDoctor Cimmerian
Published on 13 Jun 2022 13:02
rating: +54+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: +54+x

He walked a crooked mile.

A long drop and a short rope was all that separated me from oblivion. There was a sort of peaceful calm to the moment as the crimson sack went over my head. The crowd screamed its accusations, mostly true, but they seemed quieter now.

"Body snatcher." "Crypt thief." "Grave robber."

It didn't matter that it was in the pursuit of science. That an entry at the University of Yarsborough said "Mr. Cimmerian - 65". No one cared that those 65 corpses had done more to further the cause of science than any amount of work I could ever have accomplished in my life else wise.

One day, soon, those screaming people would be saved by the knowledge I'd helped provide. I stood there in the ruby moonlight secure in that solace.

And then the bottom fell out beneath me. The rope around my neck went tight, there was a crack, a flash of pain, and then there was nothing at all. This place had claimed another victim.

The city of Dezmond, though, rarely lets go of anything of value.

There were flashes of consciousness. Of pains unimaginable. Then silence again. The dreamlike state into which I fell was one of terror and wonder. I'd struggled to breath for a few moments. I'd see the vague shapes of faces looking down at me. Then nothing again. Oblivion. Over and over.

In the brief moments of cognizance, I imagined this was a punishment for a life of wickedness.

Then one night I awoke from oblivion for good. I was strapped to a table, raised high into the raining sky. I could feel the surge of electricity through my body. Lightning struck me a second time as I broke the bonds holding me down. I stank of burning flesh, formaldehyde and ionized air. But I was alive. I was powerful.

Still. These weren't my hands. My glasses were gone but my sight was clear, so these were not my eyes. Yet I was sure this was my mind.

I leapt from the raised platform. I came crashing down almost 80 feet below, but the cobblestones cracked instead of my bones. No one pursued me into the night, but I ran anyway. I found myself in an alley I didn't recognize, the rain slowly subsiding.

There on the ground, in a puddle of murky blood red water, I saw my reflection for the first time. A great scar started at my scalp, continued through my nose and down my neck. The skin on the left side of my face was a bit lighter than the rest of me, and a single red eye looked back. The other eye was hazel, just as unrecognizable but at least not as strange.

I tore at the loose tunic about my chest. It came off in clumps, and soon I was able to see my skin. Everything was crisscrossed with stitching and scars.

I sank against the nearby building and began to cry. There was no great punishment or reward on the other side. Only oblivion. The pain I'd felt was wholly human. Men of science trying to piece me back together. And as I came to that realization, a man entered the alley with a grin.

I must've seemed an easy mark for the cut-purse. This one held the knife with some confidence. A practiced hand. I'd fought men like him in the trenches.

But Cimmerian had been too infirm to fight in the war.

Ahh. I saw it then. This wasn't entirely my mind after all.

The cut-purse began to approach me. I stood up and looked at him. As he took my full measure, I could see the pangs of fear in his eyes. Before he could contemplate his mistake, I moved like lightning. His head smashed into the brick wall with a wet splash.

I looked down to find he'd stabbed me. Just under someone else's rib cage, in someone else's heart. A deathblow. I pulled the knife out.

I hoped to see myself bleed to death there on the cobblestones, but the only blood came gushing from the dead man in front of me as he slowly slid down the wall and slumped over.

The wound closed immediately. The scars remained, but the hole over my heart was sealed.

I considered this for a moment. Then I threw the man over my shoulder and made my way across the rooftops to Yarsborough. The university paid well for the cut-purse's body. A new entry was made for me. The Constructed Man, the doctor called me. I believe it was meant as a joke, but I allowed it to pass without comment. I even persuaded her to lend me a bed for the night and some clothing.

When the whistles blew the next morning I went back into the world. My wages paid for a meal. The good doctor from Yarsborough even rented me the room, in secret, in the Yarsborough clock tower. It was not hers to rent, but no one else is using it. I come and go in secret.

I had curiosity to be sated. I returned to where I was made, but I found the building burned to cinders. The owner's names were in no public record. Perhaps this is my penance for some imagined slight. Perhaps a friend did this to save me from death.

Perhaps I will never know who did this or why.

For now I rest atop the Yarsborough clock tower. A dull black bell my constant companion. Spider-cracked. Someone pieced it back together, but it will never ring again. That suits me just fine.

The good doctor has told me of a series of murders at the university. Some creature of the night or other has begun ripping people apart in the small hours.

Cut-purses pay the bills. The occasional tomb robbing buys my food. But how much can I get for the body of a true vampire? Or a werewolf?

I think I will hunt monsters tonight.

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