By: NDHeckfireNDHeckfire
Published on 30 Sep 2022 02:39
rating: +15+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: +15+x

Item#: SCP-5829
Containment Class:
Secondary Class:
Disruption Class:
Risk Class:

SPECIAL CONTAINMENT PROCEDURES:.Eparch-class objects are only anomalous by association. The video recorder that captured SCP-5829 has been confiscated by Foundation operative agents embedded within the University of Toronto, with all civilian individuals administered standard Class-A Amnestics.

The recorder has been placed in storage in the Archives and Revision Research Section of Site-43.

DESCRIPTION: SCP-5829 is the designation given to a video footage recovered from the Haliburton Forest & Wild Life Reserve, in Ontario, Canada. SCP-5829 was captured on the 5th of May, 2018, via a hidden stationary video recorder initially set up by individuals from the University of Toronto with the purpose of documenting various local wildlife on footage.

SCP-5829 captures the video of two distinct possibly anomalous entities (hereafter designated as SCP-5829-A and -B) conversing amongst each other in perfect English for several seconds. Due to the position of the video recorder, it could only capture the bottom half of the entities.

The following is a transcription of SCP-5829:

<Begin Transcript>

Footage shows a large tree branch that has fallen on the forest floor, with the camera facing a wide crystal-blue lake. In the far distance of the lake, the sun can be seen almost setting. The sound of trees rustling and loud deep footsteps becomes audible. The camera slightly shakes at this.

The legs of an extremely large humanoid (SCP-5829-A) enter the frame. Shaggy dark-brown fur covers the entirety of the humanoid's leg with the exception of its bottom feet, which are observed to be almost ape-like.

SCP-5829-A walks around in circles for several seconds, before seating itself upon the fallen tree branch, resulting in both its lower torso and arms becoming visible to the camera, the latter of which are also ape-like. SCP-5829-A audibly sighs, and places both of its hands to its face(?).

SCP-5829-A remains seated for around thirty minutes, before another sound of trees rustling once again becomes audible. The lower body of a highly-emaciated humanoid (SCP-5829-B) enters the frame. Both of its hands can be seen to possess long sharp talon-like claws, and its feet are reminiscent of the hooves of a stag (or male deer). SCP-5829-B begins to vocalize.

SCP-5829-B: Oi! Thank the gods I finally found you, you sonuvabitch. What the hell are you doing here? Though you hated this part of the woods. "Too many prying eyes", you said.

SCP-5829-A: You ever realized how beautiful the lake is here?

SCP-5829-B: The hell you saying? Lost your mind, is it? (chuckles)

No response.

SCP-5829-B: Heh. Uhhh, hey. You all right there, bud?

SCP-5829-A: (sighs) Have you ever felt like you just don't… matter anymore? Like everyone else in the world has forgotten you and left you alone? Like, you used to mean something, but then along the line of your life you just… fade away.

SCP-5829-B puts its hand on SCP-5829-A's shoulder, and seats next to it on the fallen branch.

SCP-5829-B: Hey. What are you talking about? No one's forgotten you. I… I'm still here, right? What's gotten you so worked up?

SCP-5829-A produces a crumpled piece of paper from its shaggy fur and hands it to SCP-5829-B.

SCP-5829-B: What's this?

SCP-5829-A: I just… I found that while walking alone on the trail last night. Reading it… it really fucked me up, y'know? Got me questioning things. About my life.

SCP-5829-B: (murmurs and pauses) Damn.

SCP-5829-A: Yeah, that's what I said too.

SCP-5829-B: I mean… I'm sure they don't really think that. This… Y'know, this could just be a joke.

SCP-5829-A: Don't you ever wonder why the bearded guys with the guns and traps never come any more? It's because of that! I'm… (sniffles) I'm not worth their time.

SCP-5829-B: Hey, hey! C'mon, man. Don't be like that. If they think that, then they're the ones that are wrong. You know why? Because you're here! Right now! In front of my own eyes! C'mon, look at me, alright? Fuck them. Just… fuck all of them. We don't need them to be happy with our lives. You don't need them to be happy with your life. Okay? This? (gestures at the piece of paper) This is nothing. It doesn't define you. It doesn't define anything! So… let's just… go back to my place and have a couple of drinks, alright? Forget all this "not-matter" bullshit.

SCP-5829-A: …Yeah. Yeah. You're right. (chuckles) You're always right. That shit doesn't mean nothing. Not to you. Not to me. Not to anybody. (sighs) Fuck all of 'em. Why the hell am I getting fucked up with this shit? Jesus. Those guys with beards are fucking lame anyways. (pauses) Thanks, Wend. You're… You're a good guy. I'm glad you're my friend.

SCP-5829-B: Well, I don't hear that everyday do I? (clears throat) Alright, you go ahead. I gotta take a leak.

SCP-5829-A: There's a thing called toilet holes, y'know?

SCP-5829-B: Fuck that. I'm an old-school kinda guy.

SCP-5829-A audibly laughs and stands up from the branch. It walks away out of the camera's frame, its footsteps slowly receding. SCP-5829-B also stands up, but looks back at the crystal-blue lake in front of it. It looks at the piece of paper once again.

SCP-5829-B: Assholes.

It crumples the paper into a ball and throws it to the lake, before also walking away out of frame.

<End Transcript>

Foundation operative agents investigated the location in which SCP-5829 took place, though any evidence revealing the presence of both of the entities was not able to be recovered. Despite this, Agent Griffin Clarke was able to fish out what is believed to be the piece of paper that was thrown into the lake by SCP-5829-A. The contents of the paper (in reality, a page ripped from the local daily newspaper) were partly dissolved due to water exposure, though fortunately, the main headline was able to transcribed below:


Haliburton County, Ontario



BY: Bennet Clarkson

For months now, the good folks from the University of Toronto have been attempting to disprove the existence of the worldwide famous (or possibly infamous) cryptid known only as the "Bigfoot". The idea of the Bigfoot roaming around the woods has been around for centuries past, though the creature first slowly gained fame after a photo…

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