Fish Out of Water
Fish Out of Water
Byㅤ DodoDevilDodoDevil
Published on 10 Apr 2022 21:45
rating: +20+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(';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: */
#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: -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;

Fish Out of Water

rating: +20+x

Log of Anomalous Items: IT-1B3-H2J

Date Of Acquisition: 13/04/1986

Location of Acquisition: Lake Hańcza, Poland; IT-1B3-H2J was recovered from the wreckage of a 17th-century sailing ship, believed to have belonged to the Commission on Unusual Cargo.

Anomalous Properties: Usage of IT-1B3-H2J by trained personnel allows for the visualization of means of traversal to an identified location. Additionally, recovered documents indicate IT-1B3-H2J can be utilized for the instantaneous transportation of matter, although this has not been confirmed by the Foundation.

Additional Note(s): A request has been issued for the relocation of IT-1B3-H2J from its current containment at Site-120 within Poland to Site-184, Canada — where it can be stored alongside other artefacts acquired from the Commission on Unusual Cargo.

LoAI: IT-1B3-H2J


Emma breathed out a short sigh of relief as the pressure on her chest lightened; they were flying. She glanced out the window, looking down at the morning fog gathering around the Halifax International Airport.

"You know," she began reciting the oft-repeated anecdote she had heard, "when they were looking for a place for the airport, they chose that spot because it seemed to be the least foggy, but when they cut down the trees…"

She trailed off as she glanced at the man beside her. Dr. Cole Thereven was flipping through a binder of papers, seemingly oblivious to her continuing comment. He mumbled something about 'airplane mode' as he pulled out his phone. Emma noticed the home screen: a young girl on a swing set, smiling at the camera, enjoying the moment of weightlessness.

She didn't want Cole to glance at her and suspect she was snooping, so she decided to draw attention to it.

"Your daughter?"

Cole smiled at the phone before responding. "Indeed, although it's an old photo. She's 13 now."

He clicked the screen off and slipped it — well, more awkwardly scooted forward on the seat and prodded it — into his pocket. He flipped through the binder to the requisition request they had made previously. While Emma's background in Anaomolous Arts & Artefacts had helped formulate the request, it was Cole's pull that ensured it went through as quickly as it did.

"So if we've put through the forms, why are we going to Poland?"

Cole shrugged. "I make the trip fairly often, the downside of working across-sites, I suppose. Anyway, as I mentioned, it'll be good to have you there to take a look at it. I've seen your work on the Commission, so figured this would be up your alley. There's also a handful of other items they recovered from the wreck that may make more sense to ship back to 184, so I'll want your thoughts. I'm going to try and get some shuteye."

Emma doubted this was the full story, but figured it best to drop it for now. She ruffled through her backpack, pulling out the novel she'd quickly picked up the day before and settled in for a long flight.

As Emma walked through the corridors of the facility, she was struck by how different it felt from home, and the other Foundation Sites she'd worked at in North America.

Site-184 — especially the Anomalous Art & Artefacts Wing — was new and custom-built. It was precise and tailored to its needs: the secure storage of various items, both anomalous and mundane. The contrast between the records of the past and the open, airy, sanitized, and standardized collection rooms only made this quality clearer.

However, Site-120 was steeped in history. You could read it in the brick and mortar of its walls. It was saturated in lore and trauma, responsive and reflective of the ever-changing world. She could almost feel the presence of its personnel, past and present, in the hallways that seemed to resonate in the echoing of her footfalls. As someone who tried to extrapolate the past from minute details, who'd look for clues in brushstrokes and the minerals crushed into long-dried paints, the experience was overwhelming. She was in a stupor as they led her deeper and deeper into the facility.

The daze broke when she stepped into the climate-controlled room and the door sealed behind her with a hiss. Her guide was gone, and on the table before her sat an object, laid delicately on a protective mat. She donned a pair of sanitary gloves from the nearby box as she approached it. The golden filigree was more ornate and attention-catching in person — it seemed playful: reflecting and dissipating the overhead fluorescents into a warmer light. The complex arrangement of circles along its face caught her eye; mechanically they seemed inoperable, but their form hinted at deeper thaumaturgical functions. She lifted it softly and pressed her thumb against the dials, feeling them quiver responsively. Some unseen force pushed back, answering her inquiry with its own examination.

And then, with a whirl, it twisted and tilted. She traced non-mechanical movements of gliding arcs with her eye as the front face of the device lit up in a pale blue glow. It moved silently and seamlessly until, with a satisfying 'click,' the latch on the side unlocked.

Caught off-guard as she was, the thought of not opening it never occurred to her. Despite years of practiced methodical approach, this event demanded intervention; she knew she would never again have the chance if she hesitated.

Emma pulled it open, and night seized the room.

What was once finite became infinite, what was once light became dark. And in that space of nothingness, pinpricks of illumination appeared. They drew lines of connections between them, mapping out intricacies of constellations in an ice-white glow that then encompassed her. And there, in the center, was the device. Emma knew, at that moment, wherever she desired to be, wherever she wanted to go, she could get there. All she would need is the proper route, one that the device was ready to offer.

The sound of a man clearing his throat interrupted her.

Emma startled, the lights wavered then vanished, the infinite retreated to the confines of the device, and the lid sealed with a click. She was in the collections room, again — although no longer alone.

"I'm so sorry, I didn't know what happened, I —"

"It's alright." The man interrupted. "Besides, it would be a little hypocritical for me of all people to say anything."

Emma surveilled the figure: a narrow torso - crossed with two gloved hands - and a disorderly arrangement of combed-back, dark hair. She recognized Daniel Asheworth from his brief visit to Site-184.

"That was quite impressive," he continued as he entered the room, stooping in front of a nearby table and withdrawing a hard-plastic container: its dark exterior looked rugged and well-used. He placed it beside Emma, handle towards her, and unlatched the seal. The foam inside had a cut-out matching the shape of the device before her.

"As I'm sure you're aware, the Commission was referring to it as the 'Universal Compass.' A fitting name I imagine. We've yet to see it operate to its promised extent — although I'd suspect that those crewing the vessel we recovered it from were unfortunate enough to."

He picked the object from the table, turning it over in his hands for a moment. Emma could swear a faint glow reflected against the pupils of his eyes before he place it, snuggly, into the box and clamped it shut. She was startled when Asheworth slid it towards her.

"Well?" He implored. "No time like the present."

"Am I… Am I supposed to take this? I thought the shipment back to 184 was being arranged?"

"All taken care of!" Asheworth assured her, withdrawing a folded series of papers from an unseen pocket. "You're all good and clear on our end. I do have some other items you're welcome to review today — those will take a little longer to work out the details for — they've been laid out on the table over there. I suppose I'll leave you to it."

After he said goodbye and accepted Emma's thanks, she overheard Asheworth talking to himself on the way out.

"Universal Compass, hmm. Interesting name."

It was Emma's last day in Poland.

She had finished reviewing and filing the transfer documents for a half-dozen items that would be making their way to Site-184 in the coming weeks, and — back in Warsaw — was celebrating with a walk through the city's streets when it started to rain.

Glancing around for shelter, she noticed the narrow frame of an open door and an age-obscured window revealing stacks of books and warm lighting. Her ears popped as she steps inside and encountered the disorderly space of the bookstore. Texts were stacked atop mishappen shelves, wicker armchairs and the floor. A small table sat by the window, where whiffs of steam curled lazily off a cooling porcelain cup of tea.

Beside it sat an open book, the spread of its pages were covered in twirling lines and glyphs; points of connection that bore an unmistakable resemblance to the ethereal scene Emma had witnessed earlier. She was drawn to it intrinsically and found herself reaching out towards it, as though mere touch would provide meaning.

At the sound of floorboards shifting, she was drawn back into the moment. A woman - mid-60s - stood between the shelves, she wore a pair of woollen trousers and a grey turtleneck; one hand was turned upwards, reshelving a book. Her eyes gave the impression of scrutiny with wisdom beyond her apparent age; they bore into Emma, into the void between the atoms of her being, reconstructing her around those absences, weighing and evaluating who stood before her.

She smiled. "So, one of Maud's disciples pays me a visit after all these years?"

"Pardon me, I didn't mean to" Emma began before she was interrupted.

"No problem at all, dear." The woman answered. "I recognize your kind. Steeped in secret but, keeping all that bottled up just makes builds the pressure." She gestured a hand to the table. "It's for you, take it. Part of the deal I made with Maud all those years ago."

Recognition passed through Emma's mind: an old, half-decayed photo in the archives, kept alongside the documents and items bequeath to the Foundation by a person long ago.

"You're -" Emma began again, but the kindly voice stopped her.

The woman looked around the small store as she responded. "No names, not here, not now. You best get moving, we've been talking longer than you think and you've got a plane to catch."

Emma glanced at her watch, which proved the woman's claim. She thanked her and slipped the book into her bag, stepping out the entrance onto the no-longer rainy street. She turned to the shop again and found a solid wall of grey bricks. Already the reason for her examination was fading from her mind, with the sense of urgency to pack taking its place. She began down the street, the first step in the journey home.


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