Document recovered from a Parallel Universe
Document recovered from a Parallel Universe
By: notgullnotgull
Published on 10 Jan 2019 03:42
rating: +52+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;
@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: +52+x

Document was recovered from universe E-██████ shortly before total entropic collapse. Context of document is believed to be the final stages of an unexpectedly aborted SCP-4800 event. Greater context is unknown; E-██████ was not the subject of study prior to this incident.

I woke up after a night of thin sleep to my mechanical alarm, realizing that today was the day! I flung over my bed covers, hastily got myself dressed, and burst out of my house. It was the day of the Birdsville Bake-Off, and I was going to win it!

As I was sprinting over to the Bake-Off Building, I passed by an old lady who told me "good luck, Emily!" I didn’t quite know her, so I simply waved back as I continued my run.

Eventually, exhausted, I came to the door. The plaque above the door read “Birdsville Bake-Off Building” in gray, curvy font. Anticipation filled my feathers as I pushed open the heavy door and entered the confectionary contest.

I found myself behind a kitchen counter, an array of assorted baking ingredients in front of me: flour, salt, eggs… I looked around at my competitors— my friends— who thought that they were winning this bake sale from me. They were wrong!

I looked up to the neon clock attached to the ceiling that would time us. The contest wasn’t based around time, but it was a factor that the judges used to score the Bake-Off. The timer read: "-0:20." The contest was starting in 20 seconds!

I heard an announcer who I couldn’t see shout over the nervousness in the room told us that it was time to begin. I’d had the recipe for my gramma’s famous muffins memorized down to the fiber. Two cups of flour, three eggs, five pinches of cinnamon. Mix until you can’t see the flakes of cinnamon anymore. Pour into a muffin pan, and cook for twenty minutes.

As I prepared my special dish, I looked around at the other pastries being baked. There were cookies, cakes, bread, donuts, and bagels all being molded from dough. I was the only one making muffins. I knew that it would give me an edge.

Before I could press the "Timer" button on the oven, I heard an ear-curdling scream. I turned around to see one of the bakers, a green-feathered women with a shocked look on her face, in the midst of a mental breakdown.

"I— I— I—" she said, stuttering over her words, "—never imagined it would be over this quickly. Look out the window!" Then she collapsed.

I suddenly became acutely aware of a darkness visible through the windows. I stopped what I was doing and pressed my beak against one, peering into the darkness. It was morning when I arrived; why was it night now? It wasn’t night, though. There were no stars, not even any visible land, just pure dark. It was like I could reach out to touch it.

I turned around and saw a pelican-girl, who finished her cookies early and was taking them to the judging room. Her arms and upper body were shivering, as if she was struggling against molasses. As she opened the door, I saw the blackness emanating from behind, the same as the windows. I heard her scream as she walked straight into the blackness.

It has been five hours. Three other girls, participating in the Bake-Off, finished their dishes: a cake, a plate of brownies, and a plate chocolate-chip cookies that looked quite delicious. All three got up, possessed to bring their dishes into the blackness to die.

My muffins— my great, delicious muffins— have been in the oven for five hours. For that time, I had been in fetal position next to the oven, panicking. One of the other bakers— a penguin girl wearing a baseball cap— had spent the time mixing, complaining about how her arm was sore. Everyone else was locked in various stages of the process. We couldn’t idle. We just couldn’t; it felt wrong.

It has been one day. The blackness outside hasn’t changed, and my muffins have probably disintegrated inside of the oven. I forced myself to stand up and walk over to the front door. The outside is the blackness too. I can’t escape.

Suddenly, the blackness began advancing. Everybody started panicking. However, once I ran back over to my oven, it stopped. It looks like it gets worse when I’m not actively baking.

It has been two days. I started to feel pain in my stomach. The penguin girl— her name is Karen— called it "hunger." She told me that we baked to cure the hunger. Was it not just a contest?

It has been three days. Mia, the parrot girl, shoved some of her cake mix into her mouth and said it cured the hunger. The others did the same. I tried to put the burnt remains of the muffins into my mouth, but the pan burned my hand. I had to use the raw flour to do this.

I was thinking, and I realized that I have no memory from beyond when I woke up three days ago. At least, I think it’s been three days. What happened before that?

I have asked the other bakers, and they do not have a better memory than I do. Karen asked me about my gramma, the one who made the muffin recipe, and I actually couldn’t say anything. This is getting really weird.

It has been five days. Mia actually stopped frosting her cookies, screamed, and jumped into the darkness. Karen said that she wanted to do that as well, and I would be lying if I said I didn’t consider it.

The green-feathered girl is beginning to rot. It seems so obvious, now that I think about it. This began with the bake sale, and I think it will end with it too. I wonder if this could’ve been avoided. Karen says that it was pre-determined. I asked her what I meant, and she said that we had no choice in the matter.

Now, it has been seven days. We have all agreed to walk into the blackness that surrounds us now. Goodbye.

It is of note that E-██████ was inhabited by non-anomalous humans. References to avian features may be related to previous "Migration" class scenarios. Further involvement inconclusive.

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