Published on 31 Aug 2022 15:46

rating: +42+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; }


ITEM:SCP-7272 LEVEL1/7272
CLASS:Keter unrestricted



Fig. 1: SCP-7272 alongside two SCP-7272-1 instances.

Special Containment Procedures: SCP-7272 must not be perceived by common housecats. All housecats that do so must be isolated until their limb and eye count return to baseline values,1 after which they may be released. If an SCP-7272-affected feline is improperly isolated and is allowed to make contact with another affected instance, the newly created amalgamation will be designated SCP-7272-1-X and placed within permanent containment.

Description: SCP-7272 is an anomalous ball of yarn originally located in Bahçelievler District, Istanbul. When common housecats perceive SCP-7272, they manifest physical deformities, the severity of which increases with observation duration. When viewed by human subjects, SCP-7272 possesses a notable cognito-effect wherein every subject perceives it in a different colour(s).

Housecats exposed to SCP-7272 will suffer from the growth of extraneous limbs and organs, composed of a mixture of cotton, polyester, and internal muscle tissue. However, not all housecats will undergo this effect; those that are owned by individuals will remain entirely unaffected, refusing to even perceive the object as existing. Feral housecats undergo the most severe effects of SCP-7272, often gaining more than ten times their original weight in growths.

SCP-7272-1's transformation is subsequently amplified when multiple housecats observe SCP-7272 simultaneously, causing the aforementioned extraneous limbs, organs, and flesh to grow exponentially larger. When multiple housecats affected by SCP-7272 make physical contact, the instances begin fusion by intertwining their extra limbs in a French braid. The process has been observed to be painless for both parties, and typically results in the formation of a single hybridized feline entity.

As long as the SCP-7272-1 instances remain in the vicinity of SCP-7272, the newly conjoined felines will remain complacent; however, if the primary anomaly is removed, the instances will react violently and attempt to untangle themselves. This process typically results in great damage — both external and internal — to the SCP-7272-1 instance, and can result in fatal injuries. During this process, SCP-7272-1 entities will attempt to reach SCP-7272, instinctively knowing its location. The SCP-7272-1 instances will display intense hostility to the individual carrying the anomaly at this time and will display hivemind-like behaviour, surrounding and ambushing the carrier and pushing them to the floor before attempting entry into all viable orifices.

Following this, a portion of tissue and fibre will detach from the main SCP-7272-1 instance and remain within the victim's body, amalgamating and integrating with the victim's internal nervous system. So far, this behaviour has resulted in a total of 23 such systems becoming stray, escaping from Foundation custody, and becoming a notable criminal organization inside of Istanbul; it is believed that, as of writing, SCP-7272-1 instances account for more than 15% of food-related thefts in the whole city.

While initially observed behaviour of SCP-7272-1 instances was purely animalistic in nature, crimes committed by said instances have increasingly demonstrated a level of planning and sapience comparable to baseline humans. Despite this, forensic investigations of SCP-7272-1-related crime scenes confirm that these instances still exhibit habits akin to feline traits, including the regurgitation of hair and bile, excessive use of sharpened nails as claws, and intensive self-bathing with large quantities of human saliva.

The motivations behind the actions of the SCP-7272-1 crime syndicate appear to be focused primarily around providing sufficient food to the stray cat population of Istanbul; notably, SCP-7272-1 have formed a protective cordon around SCP-7272 and actively attempts to prevent most housecats from seeing the anomaly.

Notice: Following Incident 7272-1, all wild SCP-7272-1 instances are to be considered hostile to human life and are to be eradicated with prejudice.

The SCP-7272-1 instance known as "Dilara" — the known instigator of Incident 7272 — is to either be neutralized or contained within a high-security isolated site where it will be interrogated. All objects created by Dilara are highly virulent visual cognitohazards and are to be destroyed upon discovery. Persons exposed to these objects are to undergo surgical removal of all subsequent growths and, if necessary, euthanasia and incineration of the resultant pile of yarn. Containment and neutralization of Dilara should be considered a top Foundation priority, with the treatment of Dilara-affected individuals serving as secondary.

If Dilara cannot be swiftly terminated, or the aforementioned affected individuals begin defusing and/or expire, the resulting instances are to be forcibly quarantined to prevent further spread of increased SCP-7272-1 infection, especially to Foundation agents in pursuit of target Dilara.

Drs. Daniel Asheworth, Athenodora Cat, and Sheldon Katz have been found to be immune to the cognitohazardous properties of Dilara's creations, theorized to stem from their polymorphic anomalies and their pseudofeline natures, and have been recruited as specialist consultants in the tracking of Dilara and the containment of SCP-7272.

Addendum 7272.01: Incident 7272-23

On 03/07/2006, a docile SCP-7272-1 instance2 approached Site-133, repeatedly requesting an audience with Dr. Asheworth. The SCP-7272-1 instance was denied entry on the grounds of suspicious behaviour, and the fact that Dr. Asheworth was not regularly employed by Site-133, and was detained by site security.

However, to ensure the proper study of the unusual SCP-7272-1 instance. Dr. Asheworth arrived on-site via a Foundation-made portal three hours following the initial request being made; shortly after, he proceeded to interact with the SCP-7272-1 entity for a prolonged period of time, which led to the discovery that it was in fact the individual identified as Dilara. The conversation also yielded significant scientific advancements in regard to the entirety of the SCP-7272 case.

The neutralization order of Dilara has been rescinded as of 06/07/2006, in recognition of their skill in manipulating visual cognitohazards, as well as a misunderstanding of their underlying intentions; Dilara, having no formal instruction nor education in cognitohazard manipulation, simply did not know how to palliate their creations to have a less severe effect.

A written transcript of Dr. Asheworth's third interview with Dilara has been attached to this Addendum in order to provide necessary context regarding the intentions and goals of SCP-7272 and the SCP-7272-1 instances it has created.


Asheworth: You prefer to go by Dilara, yes?

Dilara produces a guttural human scream and a feline hissing noise, though somewhat drowned out, for 10 seconds.

Asheworth: Mhm, that's great. You made a good choice then, coming to us. Though yes, I understand that my organization has had problems recently with your, erm, people, right?

Dilara positions its body into a more relaxed stance and starts hissing and occasionally purring for 15 seconds.

Asheworth: Yeah, I thought so, it would be helpful if you first state your exact aims these last months of activity.

Dilara contorts its head and starts shooting a clear liquid out of its wrist joints. It coughs up a hairball made of yarn.

Asheworth: Of course you have a right to a home and a better world for those like you… but you're literally several cats puppeteering a human suit. You understand why the O4 is hesitant to empower me to give you any concessions.

Dilara hisses and screeches rhythmically, inscribing the table with a cognitohazardous glyph as it does so. Dr. Asheworth's anomalous medical condition starts manifesting.

Asheworth: Oh for the love of… Security!



Fig. 2: Sparky Junior.

Following this interview, Dilara was moved to a high-security containment cell, which is to be monitored solely by non-organic Artificially Intelligent Conscripts and cleaned by autonomous drones to remove any cognitohazardous glyphs. In order to appease rogue SCP-7272-1 instances, and prevent further food theft, Dr Asheworth has recommended alterations to the current Foundation policy regarding stray cats in Istanbul. These include:

  • Regular shipments of food into local animal shelters and stray animals;
  • Deployment of a Foundation campaign popularizing animal adoption in Istanbul and local areas;
  • Several large monetary donations to global groups fighting for animal rights and protection;
  • Adoption of several stray cats by Foundation personnel, which included Dr. Asheworth himself, who is now taking care of a two-year-old black cat, whom he had named "Sparky Junior."

As of writing, Sparky Junior and several other animals have remained in Foundation care for four months and crime-related activities conducted by SCP-7272-1 instances have gone down significantly.

rating: +42+x

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