By: jackVSjackVS
Published on 20 Dec 2021 17:47
rating: +100+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: +100+x

Civilian photograph of Disneyland Resort, the focal point of SCP-5768.

Item №: SCP-5768

Object Class: Euclid

Threat Level: Blue

Special Containment Procedures: Embedded Foundation agents within Disneyland Resort staff are instructed to maximize the physical safety of resort attendees and employees. In the event that an individual sustains any potentially life-threatening injury while on Disneyland Resort grounds, agents are to remove them from the property as quickly as is feasible.

Description: SCP-5768 is an anomaly affecting the Disneyland Resort in Anaheim, California. While located on grounds considered to be part of the Disneyland Resort,1 humans are unable to die. To date, no injury inflicted on a human being on resort property has resulted in the cessation of function of either the nervous or cardiovascular system. SCP-5768 does not prevent physical harm to resort occupants, only their permanent expiration. Individuals that would expire if not for the effects of SCP-5768 do so immediately upon exiting Disneyland Resort grounds.

Addendum 01: Relevant Recovered Documents

The following document was discovered pinned to a cork board in a Disneyland management office during initial discovery and containment of SCP-5768.


In the wake of the unfortunate events that occurred last week on Disney California Adventure® grounds, all Disneyland Resort® staff are reminded to review official resort policy regarding management of potential casualties while on Disneyland Resort® property. Our reputation hinges on your discretion in these crucial situations.

While we have the utmost trust in our employees, maintenance of the no-casualty record has been deemed unsustainable by Disneyland Resort® management. Moving forward, Disneyland® will coordinate with the Enchantments Division of the Walt Disney Company® in order to innovate an alternative solution. Select staff (exact personnel to be finalized at a later date) will report to the Sleeping Beauty® Castle on 05/19/1999 to enact this new opportunity for the company.

In the meantime, we trust in our staff to remain compliant with resort casualty policy. Thank you for helping to keep Disneyland Resort® the happiest place on Earth.

The following passage is excerpted from a discarded journal notebook recovered in a Disneyland mascot changing room.


Can't sleep. They said not to put this in writing anywhere but I can't stop thinking about it. Some tagger ducked a fence and got his head taken off by a coaster today. I was one of the guys they called in to get the body offsite. Sometimes they page for a specific team but maybe they were on vacation today, I don't know. So I had to do it. No problem, I'm not squeamish, except something was wrong. I've never touched a dead body before but I know for a fact this wasn't right. I was looking at this guy's head sitting on the grass, and he was still breathing.

Addendum 02: Compiled Incident Log

The following table contains a list of known or highly suspected SCP-5768 events.

Date Description of Incident Additional Notes
14/09/1999 Civilian graffiti artist decapitated by roller coaster. Body and head reportedly continued to respirate until subject was removed from resort property. First recorded SCP-5768 event. Mentioned in journal recovered from Disneyland changing room.
07/08/2007 Resort employee suffered a severe myocardial infarction2 while wearing a Donald Duck character costume in a backstage area of the Disneyland Park. Subject was later discovered by other employees and removed from resort grounds, at which time they immediately expired. Embedded personnel within Anaheim Global Medical Center reported this incident as potentially anomalous due to testimony from involved employees, eventually leading to discovery and containment of SCP-5768. Cause of death was documented as coronary artery disease brought on by poor diet, psychological stress, and overheating.
27/06/2013 Resort patron fell overboard during a riverboat tour attraction and was not immediately noticed by nearby patrons or workers. Upon being removed from the water approximately 13 minutes later by park employees, the subject was observed to regurgitate a large amount of water. Subject did not expire after being removed from resort grounds. First potential event in which SCP-5768 prevented the expiration of a subject who was later resuscitated. Subject was administered a Class-A amnestic and released.
04/07/2015 Resort employee was caught in an accidental detonation of a storage crate containing fireworks, which also caused the storage room to catch fire. Removal of subject from resort grounds was complicated by the subject having crawled approximately 4 meters from the exit of the building and into view of the public. Subject expired immediately after being removed from the resort. Aerosolized Class-C amnestics were distributed over much of the Disneyland Park area by embedded agents.
19/05/2019 Several victims of a roller coaster collapse incident are suspected to have been affected by SCP-5768. Upon being removed from the resort, 3 subjects immediately expired in a manner consistent with SCP-5768's effects. Disneyland records report that 16 individuals were present on the attraction when parts of its structure collapsed. However, debriefings of multiple present agents suggest that 15 individuals were removed from the resort due to this incident. As of 22/05/2019, investigation into the existence and/or location of the 16th victim is ongoing.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License