By: Lt FlopsLt Flops
Published on 01 Mar 2018 03:24
rating: +118+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: +118+x





Because the anomalies associated with SCP-3787 continue to change over time, its documentation appears here in chronological order. All observed changes to the properties of this anomaly will appear as addenda materials. Only the most recent version of this anomaly's containment procedures is viable.

The original 30 June 2021 documentation is as follows.

Description: SCP-3787 is a deviance to the natural behaviour of domesticated and free-roaming horse (Equus ferus caballus) populations in the Southern and Southwestern United States.

SCP-3787 manifests as a gestation period 8–10 times more rapid than the baseline horse-breeding cycle. Within affected mares, the baseline gestation period of 11–12 months shortens to 30–45 days from conception to birth. As a result, up to 10 times as many foals are born. Growth rates of this size are unsustainable and constitute a significant risk to the equine industry's ability to maintain control.

This breeding cycle does not adversely affect pregnant mares or resultant newborn foals. Newborn foals exhibit physiological properties similar to their non-anomalous counterparts. Foals also develop within pregnant mares despite lacking the necessary sustenance over the accelerated developmental period.

SCP-3787-1 is an anomalous increase in horse aggression in free-roaming horse populations. Examples of aggression include:

  • Unprovoked hostilities toward horses outside a constituent pack.
  • The active killing of most or all members of a feral horse pack by that pack's dominant stallion.
  • The cannibalization of foals as a show of dominance.
Horses displaying SCP-3787-1 behaviour while hunting for prey. Image captured remotely.

(Hover to enlarge.)

Increase in horse hostility has also extended into normal horse feeding patterns. Feral horse packs affected by this anomaly perform organized attacks on other wildlife, escalating to a point in which affected horses ignore herbivorous feeding habits. These attacks occur even though horse jaw structures and digestive systems are biologically unsuited for meat consumption. This manner of aggression has contributed to the advancement of horses to the top of the food chain in many areas.

SCP-3787-1 began in newborn foals affected by SCP-3787. It has since transferred to an unknown number of horse populations of various ages, according to a geometric infection model. In addition, this anomaly has developed in the same period and area as a memetic form of equinophobia,1 designated SCP-3787-ε.

SCP-3787-ε is an intense fear of horses in humans without previous basis to do so. Researchers hypothesize SCP-3787-ε manifested because of a marked increase of horse population numbers, which caused an increase of equine concepts in the human consciousness. Persons may be unaware they have been affected by this anomaly until their re-exposure to the concept of horses through forms of media or personal conversations that reference horses.

SCP-3787-ε occurs in suburban areas, urban centres, and within populations far from rural communities. More specifically, SCP-3787-ε occurs within populations with little access to the equine.2

An estimated 750 000 persons within the continental United States have contracted this anomaly.



On 30 June 2021, Foundation efforts to reduce the heightened equine birth rate were successful. The median horse gestation period levelled out to ~1.5 times the baseline. In the 2 months since detecting the anomaly, more than 450 000 new horses were born in the United States alone.

On 12 July, Parazoology Division personnel observed what they hypothesized was an anomalous illness spreading throughout domesticated horse populations. Horses affected by this illness experienced a period of acute stress and entered a comatose state. In 18% of instances, affected horses later expired. An estimated 37% of horses in the Southern and Southwestern United States have been afflicted with this illness.

As of 29 August, research efforts into a vaccine have proved ineffective.



The accelerated spread of this illness has caused the death of ~1.1 million horses in the United States. In response, Site-82 — in conjunction with the Scientific Department — has published two reports on Project: DIRE HORSE to the IntSCPFN network.



On 3 September, hostile anomalous entities attempted to force access into Site-41, Facility-Aleph, during Procedure MNEMOSYNE.

A transcript of the encounter is as follows.



Foundation personnel specializing in antimemetics training have noted the emergence of large numbers of antimemetic equine entities. These entities, designated 3787-N, appear en masse as a direct result of extended Foundation efforts to control U.S. horse population numbers.

A comprehensive description of these entities is as follows.

Containment analysts at Site-82 have come to infer a complex relationship among the appearances of 3787-N and previous equine anomalies. Analysts conclude that the emergence of increased equine aggression and accelerated birth rates was, in part, a widespread anomalous defence mechanism tailored toward the repulsion of 3787-N.

Current reports show that this behaviour has almost reversed, in part because of the emergence and influence of 3787-N — which horses now act subservient toward.

Research Director Elliot Alces has approved the reclassification of SCP-3787 to an ARCHON-Class anomaly.5 The Foundation is presently undergoing wide-scale internal research efforts focused on the anomalous nature of horses as a species.

Since the appearance of 3787-N, horses in the United States have deviated from their typical behaviour.6 Almost all observed horse populations display SCP-3787-1 and attack humans, causing civilian casualties beyond Foundation control. In areas with a significant volume of horses displaying SCP-3787-1, domesticated and feral horses alike have begun a mass transit to an as-yet unconfirmed area in the American Southwest, led by groups of 3787-N.

How the two groups communicate is now under active investigation.

3787-N have directed efforts toward constructing a large equine-centric locale composed of both horses and 3787-N populations. Contact by any non-equine populations has led to confrontational behaviour on the part of 3787-N.

Foundation personnel managing the effects of SCP-3787 also face aggression. In some instances, personnel have undergone bodily transfiguration into horses via inexplicable means.



Mobile Task Force Pi-5 (“Glue Factory”) has formed to repel the attacks of 3787-N. Each member of Pi-5 is trained to deal with antimemetic anomalies and is assigned a strict Class-W Mnestic prescription.

A summary of Pi-5, Alpha Platoon, is as follows.

  • Forty combat operatives with light-based weaponry such as the 1 000-watt N-62A Laser Optics Pistol, the 2 000-watt G1A Tactical Solid-state Laser Rifle, and the prototype 30 000-watt Basov-Prokhorov RX-7Z Hard-Light Heavy Rifle (“Nulltaker”).
  • 4 000-lumen flashlights and interfaces with night vision and blue-light eye protection lenses.
  • Fifteen Polaris MV800 All-Terrain Vehicles outfitted with Light Reconnaissance Laser Optic gun platforms.
  • Ten Chenowth Utility Terrain Vehicles.
  • Four SL/SX Support Drones fitted with Mariotte-Pashler antimemetic perception filters.

Despite the formation of Pi-5, the full containment of 3787-N and any related anomalies is not yet possible because of their widespread nature.

The Foundation is now directing efforts toward reducing the fear of horses.

rating: +118+x
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License