Where Would You Like To Go?
Where Would You Like To Go?
Published on 30 Jul 2022 19:41
rating: +21+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;
        pointer-events: auto;
@media not all and (max-width: 767px) {
    #top-bar .mobile-top-bar {
        display: block;
        pointer-events: none;
    #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: -18rem;
        width: 15.25rem;
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        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;

Canon Hub » The Coldest War / Ad Astra Per Aspera » Where Would You Like To Go?

rating: +21+x

Alexandra dreams with xyr third eye open. Xy will get there. Xy will get there, one night.

Throughout my life, I've had a recurrent dream about a water tower, beside the southern campus of my school. It is tall and white, protruding from a patch of trees behind identical houses; a rusty ladder leads all the way up its side to the tippy-top.

The water tower has no visible holes or entrances. In fact, the ladder just stops once it hits the curve of its upperside. However, in my dreams, there is a windowless iron door, red text strewn about its center: Goodbye Water, World Love. Incomprehensible nonsense, like most dreams, but there's a foreboding aura to the shifting of it.

I step out of the empty backyard, and hop the chain link fence. The clinking and clacking of a tennis match echoes from far away, bouncing off service vehicles and a dusty shed; but I ignore it in favor of my goal, the water tower, and the ladder that extends down from its avian shape and into the freshly planted Earth.

One hand after the other, I latch onto the sides of the rusty ladder. I climb1.

The absence of a door is a wall.

Admittedly, I hadn't been paying attention, but my teacher's comment catches my ear. I glance up from my half-scrabbled, chicken scratch notes to inquire what prompted such a thing; he has drawn a square on the whiteboard in red marker.

He turns to us, stroking his greying beard sagely. No window, no door, no exit, a wall. He circles it, as if that would help us understand. But it is not impossible to go through a wall. If it were so, we wouldn't have doors.

I sigh and put my head back down, his voice fading into empty static again. I doodle myself on the water tower, a silver-grey feline against the prison-white pellet. The sun sets over my margins.

The climb is longer each time, I think. The rungs blur together after a while; blending and bending at unusual angles. The sky is a sickly shade of blue, like the Fire Of Unknown Origin, but the sun is nowhere to be seen. Not a cloud in the sky, either, the only white is the water tower.

I turn away from the ever-closing distance between me and the sky, and focus on my task. If I drop in lucidity, I will fall. The ladder must be climbed, the ladder must be climbed, the ladder must be climbed.

My hands burn from the rust collecting beneath the skin. Little punctures, like splinters, give way to the shedding of dead cells until they fresh and clean, like a baby's hands; but without the protection of the years, they grow weary and shaky.

I have untreated carpal tunnel in both hands. Writing on the computer is a painful and difficult process; writing with a pencil is all but impossible. I've been this way for as long as I remember; doodling the tower, the ladder, the rungs, for so many years was bound to take a toll.

Whenever I reach forward to open my bedroom door, I catch myself shaking. Not just my hands in their untreated malady, but my legs, too, for fear of something outside that is no longer here.

By the time I reach my destination, my old legs are ready to give out and my young hands can no longer support my weight. If I rest here, surely, I will awaken — and I'd rather face the white of the imaginary tower than the reality of my white fitted sheets. Limply, I rise.

I recall the radio tower. It shined black on the brightest day, and shined red in the deep nights. Though in the human world it communicated with frequencies, surely with Plemora, it shares wind with distant pylons, exchanging goodbyes and love beyond walls, and beyond doors.

Let me start again.

By the time I reach my destination, my old legs are ready to give out and my young hands can no longer support my weight. If I rest here, surely, I will awaken — and I'd rather face the white of the imaginary tower than the reality of my white fitted sheets. Limply, I rise.

There is a crevice in the tower. I don't call it a crosshall or a hallway, for it's too small for that, but it's too large to be a nook.

Pedantry aside, the space would be more fit at a sanitorium. Formerly white bricks stacked precariously with paste, now turning green from exposure to the elements; rusted floodlights mounting the walls on either side. If anything here was still alive, it would spring back into action as soon as I stepped foot here, but the crevice is still.

Opposite of me is a windowless iron door, red text strewn about its center: Goodbye Water, World Love. The pitter-patter of leaking faucets is just barely audible behind. It makes me twitch.

I outstretch my hand to open the door, but as I make my way to the handle, I struggle. My hand is too shaky to get a proper grip. In time, my legs begin to shake too.

I first began to dread the opening of doors one night in '89. I had to use the bathroom in the middle of the night, so, I, polite and cautious, opened the door slowly, and stepped into the darkness of the hallway.

You could just barely see the white of the walls. The summer nights were deep and black, and it required not just your eyes, but also the palms of your hands to see. Shuffling silently across the white matted carpet, the door to my mother's room came into vision.

Just around the corner was the bathroom. With a quick sideways step, I slid away from the door to her room; but back down the hall — my sibling’s room — something clashed against the ground. Her door flew open faster than I could slide back into the darkness.

What I had expected to happen was this: She would yell profanities, throw objects, curse me for my presence. I never understood why she wanted me to sleep and stay asleep2; her tantrums over this could be so foul, I prepared for the possibility of a thrashing — though they had grown rarer as I grew older.

Instead, she looked at me, her eyes so sunken you could see the white of bone, her pupils so small you could see nothing but veins and sclera, and she shrieked. Wordlessly, a single syllable came from her mouth as she waved her head back and forth.

I slid into the darkness, quietly closing the bathroom door behind me and locking it as quickly as I could. I sat in shadows for a moment longer before I heard her door slam, and then turned, to stand before the mirror. The faucet dripped.

The sound of water quickly becomes overbearing, even as I approach the door. The swirling red of its text keeps me focused; my senses cannot drive me away from my final victory. It pulls precariously towards me, like ripples in water, and with a final thrust of my legs, I fall against the door knob.

With my free hand, I grip the steel plating of the door and pull myself upwards, until the text is in my face. It's legible, now. Where Would You Like To Go?

I stare at the text in confusion, my eyes darting left to right as I read and reread. Where would I like to go? Where would I like to go?

The absence of a door is a wall. I am staring at a wall and picturing a door there. The wall is white, so the door is drawn in black chalk. Under the harsh light, it shines red, deep beneath the non-reflection of the surface.

I knock twice on the outline of a window, grasping fruitlessly with my free hand towards a flat doorknob. I repeat these uneven motions, swallowing the notion that there is no door here. There is always a door when there has to be.

There is always a method of escape; of retreat. I continue to grasp at the black, my fingernails collecting chalk dust as I pull with all my might.

The radio tower shined its dull red against the sky. Xyr Oldsmobile's name suddenly began to make sense, as xy shook xyr way back into town; xy heard the clunking of some failing internal mechanism as xy passed by xyr old neighborhood.

Taking a glance around the empty street, Alexandra swerved into xyr driveway at the very center of the block. The divet beneath the road sent xyr a few inches into the air, but xy came back down light as a feather, scraping against unrefined asphalt.

Xy looked past xyr front window, towards xyr parents' house. Prison-white and square; no soft edges, just black windows.

All the lights were out. No one home. Alexandra stopped beside the walkway and killed the engine; xy sat in silence, just taking it in.

By the time xy got into the house, the sun was rising behind the clouds. Alexandra sat at the kitchen table, coffee mug in one hand, metabolism boosters in the other, and exchanged nervous glances with the stairway.

Honey, I'm home!

Not even 12 steps up, and there would be my old room. Across the way would be my mothers' room, and in front of hers, the bathroom. There would be the musty white carpet and the shimmering shade. It was all still there, untouched, waiting for me. So, I slept on the couch, and I dreamed about the water tower.

The stress is getting to me. If I can't open this door soon, I will wake up. I pull with all my might, gripping the slimy handle until my knuckles turn as white as the paste in the bricks. I place my foot beside the door, pushing outwards, until my balance is lost and I hit the floor with a dull thud. I stay perfectly still, my breath echoing around me, until I am sure I am not awake — and with a slow push, I right myself. I dust myself off cooly, as if anyone would be able to see me.

I once again recall the chalk on the wall. What is there to do when the door and the wall are one in the same? How does one break through a wall? I trace my hands against the iron frame, feeling the rust with my fresh pores.

I step back, and I knock. Gently, at first, a rhythmic rapping, scraping up and down its words, but as the desperation sets in my knocking becomes striking. With my balled fist, I punch the door — my form is imperfect, and and I bend the knuckles on my fingers inwards in one swoop.

Alexandra wakes up gasping for air.

Alexandra stumbles out of xyr one-story apartment, xyr wet boots squeaking noisily in the early morning dark. There is no serenity; the birds are not chirping, the trees are not whispering. Alexandra is driven forward by forces unknown, forces beyond.

The bustling traffic sloshes past xyr as xy slips into the suburbs, xyr left hand extending forward to gently guide the xyr vehicle. There's a rhythm to the roadside march like a failing heartbeat; it makes xyr twitch and clutch xyr hair, pulling xyr down east.

By some luck, xy slips to the front of the crowd, stopping and pulling over before the great white water tower.

Good luck, you.

As xyr locking mechanisms shudder within xyr sternum, the sun rises behind the tower. With fresh hands, xy places xyr palms against whitened rust. Where Would You Like To Go?

rating: +21+x

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