Rat's Nest Hub

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

rating: +210+x

Is there anything wrong with the world at all, or has it always been this way? Can we point to one singular event that caused the anomalies to multiply out of control?

Who started the fire?

Nothing has changed. No, I think it’s always been this way. I’ve read the reports, “alchemical” texts, old memetic studies, prophecies, rituals, recipes, and meetings of minutes. Contradictory ephemera each describing the same event. I’ve read and reread accounts and I can’t quite put my finger on what changed that day. Again, if anything changed at all.

I’m convinced it’s all just superstition. The precursors to the GOC, the Initiative, like other such occult societies during the time were mostly interested in putting on airs. You would say you were a skilled soothsayer to impress your noble friends. You would say you communed with god, or perfected a curative tincture to gain status. These things should all be read with a grain of salt.

Is there evidence that no anomaly has ever existed before that day? If that could be proven somehow, maybe we would have a line.

Today the sky above is wispy with feathers of birds migrating to nowhere, and down by the water their heads become temporarily dislodged.

The horizon is shaded in static purple, and I can see it all. Everything is real and original. Everything has gone to hell, and this rock seems to be my faraday cage. I can't be sure of what I am anymore.

Am I the only one still capable of being afraid? I could be the only one waiting for the singularity. Everything else is indifferent. The rats have been multiplying for ages, but it shouldn't be long now.

The year is 3053, and I've seen it all.

Let's begin at the end.

The End

A Small Bundle Of Letters

Worry, Worry

The Four Arcana

Ambrose Vienna: An Out-of-Mind Experience
December 4th, 2018

Cesnavicius & The Deep Dark Forest
December 31st, 2023

The Information Age

Changes at Site-18
July 28th, 1976

Beginning of 21st century

May 14th, 2028 - July 14th, 2028

Senescence, Consumption, Persecution
August 14th, 2051 - September 9th, 2077

September 12th, 2061

Anno Domino
December 1st, 2081

June 11th, 2082

February 2nd, 2087

The Last Era

A Terrible Thing
Forgotten Cycles

The Serpent Gambit
December 21st, 2090

Four Agents And A Campfire
December 27th, 2092

Hopping Through Worlds
December 31st, 2099

I Wake for Naught
December 17th, 2100

Another Lost Legacy
September 13th, 2112

The Last Meeting
November 19th, 2117

August, 2119

The Age of Rot

October, 2142

How Tightly The Coils Squeeze
September 18th, 2160

A Eulogic Elegy For The Dreams
October 10th, 2167

What Lurks in the Dark?
All Hallow's Eve, 2213

May 31st, 2454

The Rat's Nest

Kali Yuga, 30XXXXX

T-Minus X

Isle Unto Thyself
T-Plus X

- - - - - - - - -

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