By: Jack WaltzJack Waltz
Published on 16 Aug 2022 18:14
rating: +7+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: +7+x


Item #: SCP-7991

Object Class: Keter

Special Containment Procedures: MTF Psi-7 ("Home Improvement") is working with locally implanted surveillance agents and Foundation front companies to bring SCP-7991-affected households under Foundation control. Affected individuals may be interviewed by personnel who have attained a CRI1 score of 5.8/10 or higher.

Image # 7991-0324
Last location of Miss ████ ██████ (49), ██, US.
Taken — 08/29/09

Cover-up protocols are to be enacted as appropriate to handle the disappearances of SCP-7991-affected persons.

Description: SCP-7991 is a spontaneous and currently unpredictable occurrence that affects individuals who have been alone in their homes for a prolonged period of time, and who will continue to remain so for the duration of the phenomenon in spite of any and all unforeseeable circumstances.2 No pattern or link between affected individuals has been determined, however, SCP-7991 mainly appears to affect those in high-stress, urban environments.

Once afflicted by SCP-7991, the subject will complete their daily routine before returning to their bedroom. They will then move an object suitable for sitting down on next to a window, situated within the room, and will sit there for the remainder of the day with a sombre and relaxed expression.

During the length of SCP-7991, no adverse weather conditions will arise in the subject's immediate vicinity, with most cases almost always consisting of sunny and cloudy weather.

Over the course of the day, the subject will lose the ability to perceive the voices of individuals around them, though will display no distress towards this change. They also appear to become hypersensitive to other stimuli, with a fondness for natural sounds.

The affected individual is unable to engage in any meaningful conversation, often expressing confusion when such attempts are made. Upon noticing that they are being spoken to, the subject will glance between their surroundings, the initiator of the conversation, and the window they are seated near with visible tension. After several seconds, the individual then regains their composure, smiles, and politely waves the initiator off before they resume looking back towards the window.

The next morning, occurrences coinciding with the start of an SCP-7991 IRIDESCENT event will transpire. Attached below is a written transcript of a recorded IRIDESCENT event, experienced by an SCP-7991-affected subject henceforth only referred to as "Jane"3 due to privacy concerns.


[Jane stares outside the window during the early hours of the morning.]

[She leans against her chair and tilts her head, tracking the slow cluster of clouds in the distance, hiding the sun behind them, only letting several small strands of light escape through.]

[She watches the clouds, intently, and slowly turns her attention to the shadow of a large oak tree in the back garden. Its old branches sway with the soft breeze blowing past and creak amidst the sound of the rustling leaves.]

[A frog hops towards the tree's base, having jumped out of the garden pond, and takes cover behind it. It croaks in unison with the few chirping crickets in the garden and the two yellow warblers, singing atop the tree's branches.]

Image # 7991-0316
Rainbow formed by the phenomena, prior to demanifestation.
Taken — 08/29/09

[A soft rain starts falling. Jane raises her head, looking at the light-grey clouds above.]

[The drizzle continues for a while. The warblers puff their feathers out and continue to sing. Jane yawns, listening to their songs mixed with the ambience of the soft rain patter on the window.]

[A small rainbow appears in the distance. Growingly vivid, it towers up into the clouds. Jane's gaze rises towards it and she observes it with great interest, highly enamoured.]

[A splash is heard from the garden, the frog having jumped back into the pond. The number of chirping crickets, now having been reduced to one, rings quietly with the birdsong.]

[Jane smiles.]

[Leaning back into her chair, she exhales and closes her eyes. Her chest continues to rise and fall, rhythmically, as she falls into a deep sleep listening to the rain and the echoes of a clock monotonously ticking throughout the dull peeling walls of her home.]

[The clouds part, revealing the sun. Slowly, the sunlight penetrates the window, falling on Jane, lounging. With every passing second, it grows in intensity and brightness and the ray, golden and pristine, reflects off the slow particles of dust afloat beside Jane.]

[The camera is soon blinded, the last viewable frame still showing a genial smile on Jane's face.]

[A short period of time later, the light dims. The clouds begin blanketing the sun once more, and gradually the ray grows smaller.]

[An empty chair is revealed.]


The subject invariably disappears in all recorded IRIDESCENT events.

Of note is that the subject's close family members are observed to overcome their grieving period, find closure, and return to their mundane routines significantly faster than anticipated through the cover-up process. These individuals will then completely forget about the subject over the coming months.

rating: +7+x