By: TopDownUnderTopDownUnder
Published on 12 May 2022 14:51
rating: 0+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: 0+x



Item#: ####
Containment Class:
Secondary Class:
Disruption Class:
Risk Class:
Object Type:
Current Status:


Due to the distance from Earth, physical containment of SCP-XXXX is currently impossible. Sol II is currently under construction and projected to be ready for launch in 2023 en route to Venusian orbital space and projected to arrive by mid-2024.

Foundation webcrawlers have been tasked with removing any mentions of SCP-XXXX in chatrooms and academic settings. Foundation personnel planted in astronomical institutions are to remove any evidence pointing to SCP-XXXX's existence.



Image of the Valentina and Barto craters, which SCP-XXXX originates from.

SCP-XXXX is the designation given to the constant output of E.V.E and Akiva radiation originating from the Valentina and Barto craters. This output of radiation is intense enough to be detectable from Lunar Area-32, with some trace amounts being detected on Terran facilitates. SCP-XXXX was first detected in 1965 and has only increased in intensity since then.

In November 2020, SCP-XXXX experienced a large spike in intensity, releasing a targetted amount of E.V.E radiation, resulting in the malfunctioning of several Foundation satellites orbiting Earth, many of which were integral for SCiPNet, PANOPTICON, and other important Foundation functions. This resulted in a mass shutdown of Foundation activities throughout the globe, which was eventually resolved after 24 hours. The intensity of the radiation decreased after this event, but was still notably higher than its pre-spike levels.

It was this event, and the risk of another similar event in the future, that led to the creation of Project ABEONA.






Project Overview: Project ABEONA was formed to develop a means to establish a permanent Foundation presence on Venus with the end goal of decommissioning or containing the effects of SCP-XXXX.

Abstract: Project ABEONA was commissioned by Dr. Hugh Finner, and assigned to the VOYAGER Task Force.

Project Information: The decommissioning or containment of SCP-XXXX is necessary to ensure that events similar to those in November 2015, which negatively affected the ability of the Foundation to function and likely the ability of other Veil-related organisations.

To accomplish this, a permanent Foundation presence would be needed on Venus, the planet that SCP-XXXX originates from. Personnel from the Departments of Anomalous Weapons Development, Engineering, Extraterristal Anomalies, and Solar System Oversight were selected and organised to form the VOYAGER Task Force. The purpose of this Task Force is to:

  • Select an area of Venus to use as a base of operations for Project ABEONA.
  • Design and construct a starship capable of taking Foundation personnel to Venus.
  • Design and develop a means of sustaining a stable population of Foundation personnel on Venus.
  • Designate Foundation personnel to be sent to Venus.
Project ABEONA Chatroom

W_Wilkinson_42: Alright, Venus. Ain't too much of a problem, right? We've sent people to space before.

T_Alvarez_118: Solar System Oversight here, we've never actually sent anyone to space, or at least beyond the Moon. Only been unmanned drones and probes, up till now.

O_Salvaro_54: Want us to do a first in the Foundation. Ok, not too much of a problem. Extraterrestrial Anomalies has some spacecraft locked up in storage, maybe we could grab some tech from there and make it work for us.

H_Finner_10: So is the transportation side of things not too much of an issue?

W_Wilkinson_42: Nah, just give us a bit to look at what Extraterrestrial has, and we'll have something working in a couple of months.

J_Vargas_34: AWD's Aerospace Division was working on a manned spacecraft we could use in conjunction with Extraterrestrial's tech as a framework.

O_Salvaro_54: Why would AWD have a spacecraft???

J_Vargas_34: Everest wanted to be prepared in the offchance we got invaded by extraterrestrials.

T_Alvarez_118: Of course.

H_Finner_10: Well, glad to know we won't have to fret too much about that. What about a base on Venus? What's our plans for that?

W_Wilkinson_42: Why build it on Venus? I feel like it's way too hostile of a place to permanently be on. High surface temperatures, extremely thick atmosphere, high air pressure. Not to mention the weather.

J_Vargas_34:** Why not just make a flying structure? Something that can stay above the acid rain and all that.

O_Salvaro_54:** At that point, just put it in orbit.

T_Alvarez_118: Not a half bad idea, actually. We already got some of our own people in orbit here on Earth, should be easy to do it for Venus too.

W_Wilkinson_42:** We can even give it a cool name, like HARBINGER-I or something.

H_Finner_10: Why Harbinger?

W_Wilkinson_42:** IDK it's just a work in progress.

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