The Fishing Council
The Fishing Council
Byㅤ DodoDevilDodoDevil
Published on 10 Jan 2022 19:32
rating: +42+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: -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;

rating: +42+x


Emma was bored.

She let out a sigh, her eyes fixated on the gently swaying bobber: it rose and fell as small waves passed by, softly buffeting the somewhat-aged fishing vessel she and the others has been sitting in for hours.

Reminded of her would-be compatriots, Emma glanced around. They too sat hunched, leaning over their fishing rods. A little more than a dozen bobbers similar to Emma's were nodding around the boat, with only an occasional shuffling or cough to break the eerie silence.

As she adjusted her hat lower, Emma thought about what series of poor decisions had brought her here.

When she accepted the transfer to Site-184's Department of Anomalous Art and Artefacts, Emma had been encouraged to participate in interpersonal activities with the other Foundation staff — "a way for them to get to know you, and for you to get used to a different facility's culture," the ever-cheery woman at the Foundation Career Advisory Center had told her.

There were a handful of such activities she had been looking forward to, first among them the department's annual "Fact of Fiction" event, where photographs, replicas, and at-time genuine artifacts were displayed, and selected personnel would deliver stories or explanations — only one of which was true — about the object's origin, anomalous properties, or use. Participants would select which they believed were correct, then after a celebratory dinner, the best-guessers would be announced.

But that event was still months away, so she resigned herself to what — at the time — had seemed like the best option: an excursion with the Fishing Council.

Emma had gone fishing before, several times in fact. She didn't own a fishing rod, but that hadn't mattered — truthfully, she rarely used the ones she had borrowed. Fishing, for her, was something one did with friends as an excuse to drink, relax, and enjoy some sun and casual conversation on a boat. In her fondest memories of fishing, fish featured very little, but getting to talk through her recent break-up and the death of her grandmother with people who had, and still did, genuinely care about her had mattered a lot.

The Fishing Council had been nothing like that. This became clear to Emma when she received the reminder in her calendar; 6:30am seemed, in her mind, far too early for breakfast, let alone hauling oneself down to the dock.

The second thing that became clear was that she was woefully unprepared. The sight of carbon-fibre rods and monogrammed tackleboxes conveyed the commitment of the assembled people. She glanced around for someone approachable looking, settling on a middle-aged man who seemed to be in charge. Sharing her recent relocation as an excuse for lacking the proper equipment earned her a sideways glance from those nearby. Shuffling through a cupboard in the waiting vessel's pilothouse, the man returned with an assortment of old, beat-up fishing supplies he thrust towards her. Emma mumbled her thanks as he spoke to the group: "Right, then. If there's no further problem all aboard. We don't want to lose the light."

What light they may be losing, Emma was unsure: the sun was still cresting its way over the horizon.


What followed was a long quiet journey, until the vessel crawled to a stop. There was a clanking as the anchor lowered to the seafloor followed by a chorus of zipping as lines were cast out into the reflective blue of the ocean.

She had been hoping for an opportunity to chat with the other fishers and get to know them, but the silence was oppressive. The few times she mustered up the courage to speak to those nearby, she was met with monosyllabic responses and glares from across the boat. She was quick to realize that talking was not what anyone else had come for.

The minutes dragged on into uneventful hours.

Lost in recollection of the unchanging day, Emma nearly missed the subtle tugging at her rod. She sat up, alarmed, a morning's worth of adrenaline shooting through her veins and nearly causing her to leap out of the boat. Her hand gripped the handle as she began to reel it in, feeling something pulling, challenging her.

Behind Emma the other fishers turned to look.

She hadn't noticed, her attention was entirely, wholly, on the fish. She was alive, caught in a battle of wills and wits, desperate to win, feeling it weakening as it struggled, futile against her — and then the line went slack.

The fish free again, herself exhausted and heart-pounding, Emma dropped back into her seat and looked up at the sun.

When she glanced around the boat a moment later, it was as though nothing had changed. She sighed, finished reeling in the fishing line, and cast it back out again.

The remainder of the day didn't seem quite as long. The motor of the boat started up, as people drew in their lines for the final time. The meagre catch swam in a saltwater receptacle built into the vessel. The successful catchers took their time to weigh and photograph each of the flapping, scaled bodies before tossing them back into the sea.

The ride back was leisurely, and Emma relaxed into the gentle rocking of the boat. As she was stepping onto the dock, a person — a young woman, extended her hand, smiling as she did.

"Nice job there, you almost had that one." She continued chatting with Emma as they regained their land-legs.

"Sorry if that wasn't quite what you were expecting. A bunch of the older folk here are pretty particular about their fishing, they're good people once you get to know them."

"A few of us are actually planning on getting some food together if you want to come. I'm Sarah, by the way, Sarah Collaert"

Emma was surprised by how enticing the offer seemed and by how genuine her acceptance of it was.

They walked together towards the imposing buildings, chatting. As they did, Emma realized that maybe waking up at 6:30 wouldn't be so bad, at least not every once in a while.


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