By: Lt FlopsLt Flops
Published on 22 Jan 2019 12:54
rating: +254+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: +254+x

NOTICE From the Department Of

Pataphysical and Digital Archivists

Advertisement-based inoculation disseminated.

Need containment insurance? We've got you covered. South-Central Protective Services, protecting you against malignant fae hexes, hemovore invasions, and flesh-eating Nälkän rituals since 1826.

Advertisement-based inoculation completed.

Beginning biometric and neural scan.

~$ Simurgh.aic: nominal
~$ Last login: 2024-02-28 @ 06:45 PM (UTC−05)
~$ Memetic advertisements tracked and quarantined: 45,214
~$ Anti-infiltration detection: nominal
~$ Accessing intSCPFN:/files/SCP-3739/SPOILED_MILK_SEQUENCE

Biometric and neural scan completed.

Inoculation completed! You may proceed.





A natural Moosphere, Inc. cave udder, photographed via VERITAS Resonance Imaging (right).

Special Containment Procedures: Containment of SCP-3739 is focused on the introduction of a stable competitor product to gain a foothold in the paranormal market..This market, as it pertains to the dairy industry, consists of the following competitors: Moosphere, Inc., Ambrose Thorn Valley, dado go, etc. To this end, Foundation front company Stratford Cattle Productions.Stratford Cattle Productions: A parascientific bovine research firm and designer cattle farm. is to manufacture and market a legally safe anomalous dairy product. Cattle engineers are to distill dairy milk using bovine gene pool manipulation techniques and conceptual form separation. The Department of Economics is to reintroduce 13% of all revenue into Stratford Cattle Productions, and 87% into various other Foundation revenue streams.

Meatspace Transitional Suppressor purification filters (or MEATS) are to replace normative methods and technologies used for gauging bovine health by 2025. Clinical trials and filter prototyping are to continue at Site-82 Command.

Description: SCP-3739 is a cognitohazardous vector spreading into human perception via hidden advertisements, which target the worldwide paranormal market. SCP-3739 manifests from the human noosphere.noosphere: The realm of memetic activity. The existence of free memes implies the noosphere has an existence separate from physical reality. The precise nature of this existence is poorly understood. For more information on the ecosystem of memes, see: Hoygull, F. (2015). Memetics and Chill: The Power of Virulent Thoughtforms. SCP Foundation Journal of Memetics and Informational Hazards, 48(3), 192–207. as the company Moosphere, Incorporated: A gestalt thought-based dairy corporation threatening an impending CK-Class restructuring event.

Moosphere uses microscopy technologies — ordinarily used to transmit images visible only at 300 microns — to produce invasive cognitohazardous catchphrases (designated SCP-3739-1). SCP-3739-1 instances are brand archetypes that anchor themselves onto symbols and signals already embedded in the consciousness of humanity. Transmission occurs when humans are unconscious: SCP-3739's archetypes and its related bovine motifs are only visible in REM sleep.

Digital reconstruction of milk curdle build-up (blue).

(Hover to enlarge.)

Moosphere's mass neurological advertisement campaign connects to a chain of legitimate products — both real and dream-based — produced by the human subconscious and esoteric sources. A significant sum of Moosphere's products come from the neural and memetic pathways of its market base.

Moosphere ectoentropically generates 31% of its flagship product, Mind-Milk™, from the hypothalamus and pineal gland (hormone release centers) respectively, while a metaphysical source secretes the remaining 69%. Regular consumers of Moosphere products develop milk curdle build-up on portions of cerebral tissue, which further influences consumers to use Moosphere products but does not otherwise negatively affect their health.



Site-82's Memetics Research Group C mail-ordered Moosphere company products for testing. Researchers selected Chocolate Mind-Milk™ due to its popularity and unique production process. Testing occurred with the goal of understanding Moosphere's use of literary archetypes in marketing, manufacturing, and product sales.

Each Chocolate Mind-Milk™ packaging contained.Alongside a dairy-based pun on the carton inset. the text "What was your Mind-Milk™ experience like?" with an attached phone number. Researchers consumed the product daily (before a full night's rest) over a 10-day period. Personnel noted any recurring dreams or motifs in a Standard Dream Report before relaying them to the phone line.

Within two to five business days, each of the researchers encountered the following archetypal representations:

Archetype 01: Trickster
Moosphere expression Outreach Specialists
Moosphere manifestation Moosphere mascot "Jackie the Clown Cow" (SCP-3739-1-A) appeared to researchers. Subject possessed a lean bovine appearance and wore a mask resembling a fennec fox. Subject danced in the air, emitting bovine vocalizations and showering researchers in soy milk.
Archetype 07: Mother
Moosphere expression Mammary Mothers
Moosphere manifestation See Addendum 3739.4.
Archetype 08: Wounded Child
Moosphere expression Child Curdles/Coagulated Children
Moosphere manifestation A group of 15 "Child Curdles" (SCP-3739-1-C) appeared at the Research Group Supervisor's home at 4:07 AM. All subjects had varying levels of injuries and appeared as golden age animated cartoon characters..Hand-drawn, rubber hose animation dating back to the 1920s. One of the instances, self-identifying as "Creamy Charlie", recounted dairy-themed parables at 90 decibels. Most notably, the Supervisor's daughter, age 7, was diagnosed with hypocalcemia.hypocalcemia: A medical condition wherein a patient has too little calcium in the blood. three weeks prior.
Archetype 14: The Flood
Moosphere expression N/A
Moosphere manifestation Researcher Mathias dreamt of a biblical flood sending tsunamis of milk into population centers. Upon reporting the motif to the phone line, an automated voice said "Please hold" before expelling milk from the receiver at 1 L/minute. This ended after five minutes when Mathias severed the phone line. Dream aligns with designated MF-Class "Spilled Milk" Scenario on the catastrophe classification list.



Aswan Low Dam c. 1906.

(Hover to enlarge.)

Egyptian Foundation personnel first became aware of SCP-3739-1-type neural advertising during the October 1952 survey of the upper Suez Canal. While conducting initial geological testing for the Aswan Low Dam renovation, Suez Canal Company workers accidentally breached an underwater chamber, releasing a flow of viscous white fluid. Workers 15 meters from the Lake Nasser embankment made physical contact with the fluid and experienced immediate glossolalia..glossolalia: The phenomenon of speaking in an unknown language. Known colloquially as "speaking in tongues."

Language interpretation officials.The Suez Canal Company employed a multitude of national and international specialists during its pre-Suez Crisis management of the Suez Canal region, which includes American, British, French, Saudi, and Egyptian nationals. identified the glossolalia as pre-Ptolemaic Era Egyptian. The phenomenon affected one Maat Mohamed (designated Person of Interest #11366) for the next three days. Mohamed later underwent medical evacuation at St. Sophia's Asylum — a Foundation-owned medical facility — under the guise of demonic possession affecting his memetic health. He became the first recorded vector for SCP-3739-1 phenomena.

The following is a translated excerpt of a key phrase spoken by Mohamed:

"Bat,.Bat: The name of a Middle Egyptian goddess associated with femininity and fertility, typically depicted as a cow or ox. my Earthly mother. She leads me out of the depths of my head. She says it is nutritious. Should I siphon the teat?"

Whilst in the recreational room at St. Sophia's Asylum, Mohamed imitated marketing jargon from commercials and shows played on television. He produced SCP-3739-1 marketing jargon after viewing Coca-Cola advertisements..Corporate advertisements used minor compulsion memetics (which POI-11366 was likely affected by) until the UNGOC Extranormal Advertisement Act passed in 1961. Moosphere falls outside legal jurisdiction due to its location in metaphysical space. A week into his inpatient stay, Mohamed lactated, flooding his room. Mohamed displayed no further anomalous properties over the course of his month-long psychiatric containment.

Three months after his release, Mohamed fled Egypt, escaping Foundation surveillance. Local law enforcement discovered his apartment abandoned, containing the following materials:

  1. Publications by Fyodor Dostoevsky and Sigmund Freud.
  2. Books on cattle farming and entrepreneurship.
  3. Several documents indicating plans to establish a dairy farm.
  4. A bathroom containing 200 liters of curdled milk in the sinks, toilet, and bathtub.

The Foundation became aware of Moosphere in 2014 following a sudden influx of online and television advertisements flagged with memetic and cognitohazardous properties. The advertisements drew a similarity to POI-11366's behavior, prompting a formal investigation. The Department of Analytics tracked Moosphere company presence for several years but could not locate physical operation locations.

As of 2023, Moosphere has reported a total global workforce of 61,000 employees. With anomalous control of an estimated 1% of the noospheric market share, their product manufacturing output has a capacity 100 times a company of its size.

In June 2023, Analytics Management deployed field operatives (impersonating FDA inspectors) to multiple Eastern Wisconsin dairy farms flagged with irregularities. The following is one such inspection.






Between 12 October and 19 October 2023, a wide-scale interrogation campaign across U.S. farmlands reveals that over 3,100 oneiric advertisements coerced dairy corporate executives, regional managers, and ranchers to sign away rights to their dreams.

On 21 November 2023, several hundred livestock facilities experience bovine and human inflation. Like the entities seen in OPERATION: L.I., body fluids became replaced with a voluminous amount of non-anomalous milk product. MEATS filtration and conventional FDA regulations fail to contain public knowledge of oneiric dairy products. Wisconsin dreaming is the first to be assimilated. The REM sleep of thousands of citizens becomes irreversibly altered.

On 30 January 2024, Pennsylvania and Washington dreaming are assimilated. The REM sleep of thousands of citizens becomes irreversibly altered. Despite reintegration attempts made by Stratford Cattle Productions (via top-selling beef and yogurt products implanted with gustatory memetic agents), large numbers of civilians from these regions support CEO M.M.'s presidential campaign, with running mate VP Jackie the Clown Cow.

On 9 February 2024, the CEO of Moosphere interrupts all of Wisconsin, Pennsylvania, and Washington's major telecommunication broadcasts with a payload of cognitohazardous advertisements. Moosphere employs affected populations by force. Televisions broadcast the following:


CEO M.M. descends onto a podium, cranium inflamed. He sighs. He opens his mandibles and a bovine eye atop his brow. Cream cheese secretes from the two orifices. Palpable dripping and sloshing sounds are audible for the next three minutes and twenty-seven seconds.

Undulating, it thinks.


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