Byㅤ NecroKittenNecroKitten
Published on 17 Oct 2022 00:15
rating: +85+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; }

By NecroKittenNecroKitten, BillithBillith, and EmotionalEntropyEmotionalEntropy
Published on 17 Oct 2022 00:15
rating: +85+x
SCP- SCP-7533
Containment Class:
Secondary Class:
Disruption Level:
Risk Level:
Item#: {$item-number}
Containment Class:
Secondary Class:
Disruption Class:
Risk Class:

Item #: SCP-7533

Object Class: Euclid

Special Containment Procedures: Due to the nature of SCP-7533, containment is unlikely. Members of Mobile Task Force Ifalos-Rho ("Deadliest Catch") are to track SCP-7533 at all times, updating research staff on the whereabouts and behaviour of the anomaly whenever new information arises. Its habitat should be restricted by Foundation agents using the appropriate measures for the area in question.

At no time should any personnel interact with SCP-7533, and must consider anyone who has entered into its habitat with the intent of engaging with the anomaly or its effects lost.

Any phenomena experienced by personnel that is considered unusual, mesmerizing, striking or otherwise in stark contrast to expected reality should report to the nearest medbay. If you witness any of the above behaviours, please report them to your supervisor.

Description: SCP-7533 is the designation for an adumbration1 resembling a mature deepsea anglerfish, which roams various metropolitan areas in the island nation of Japan. Although SCP-7533 prefers these areas due to food availability, it remains outside of beaten paths, moving through dark and enclosed areas such as back alleys, subway systems and maintenance tunnels for most of its time.

While in a passive state, SCP-7533 appears as an incorporeal space marked by significant refraction, akin to the effect observed over hot asphalt, surrounded by a pink umbra. The entity only becomes active to consume prey, which will cause it to gain opacity and become visible to the naked eye.

SCP-7533's exact size is unclear, with measurements taken through captured footage estimating a length span between 2.1-2.3 meters. As with non-anomalous species of this kind, it possesses poor eyesight, oversized teeth, and a luminescent dorsal ray which features significant deviations from baseline; SCP-7533's "lure" resembles an oil lantern and glows in a soft, pink hue with qualities not dissimilar from neon tube lighting. This appendage emits a low hum and undulates in brightness, though its appearance does not fluctuate in terms of shade, which is observed as Baker-Miller Pink2 in all cases.

SCP-7533 feeds primarily on large animals, humans being the plurality of organisms encountered by the anomaly. Despite having impaired vision, SCP-7533 is an adept hunter, moving at high speeds in short bursts when prey is near, but tiring quickly. Due to this limitation, SCP-7533 prefers to position itself in an opportune location and attract prey, which it accomplishes with relative ease.

The light that emanates from SCP-7533 has been shown to adversely affect cognition in order to weaken and manipulate its prey, though the extent of this effect is unknown at this time. Immersive audiovisual hallucinations, mirage-like illusory manifestations, and behavioural expressions of fear, panic, distraction, confusion and awe have all been reported, often resulting in victims unwittingly putting themselves in close vicinity to SCP-7533 for easy capture.

It should be noted that hallucinations experienced as an effect of SCP-7533 are unique to the individual, and thus contradictions in observed phenomena can be used to differentiate hallucination from reality.

It is not known whether the anomaly's hunting behavior is indicative of a need to sustain itself, however, prolonged lack of feeding has been shown to cause increased aggression and more intense manipulative phenomena over a larger area of effect. Due to this, feeding efforts from personnel should be responsive, focusing on behavioral changes as a marker to plan accordingly.

Addendum 7533.1 - Discovery

SCP-7533 came to the attention of the Foundation after the death of Hinata Ito on April 18th, 2018. Akira Nakamura, who was with him at the time, reported the entity to the local authorities, where embedded Foundation agents quickly took notice of and assumed control. Upon viewing Nakamura's phone recording of the event, it was determined that a monitored containment was necessary.

The video has been transcribed and translated from Japanese to English below.

Since recovering the video from the police, Akira Namakura has been routinely amnesticized and the incident was forgotten. The body of the deceased, Hinata Ito, has been recovered and disposed of by Foundation personnel.

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