Byㅤ Blue FootBlue Foot
Published on 30 Aug 2023 04:14
rating: +26+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; }

rating: +26+x
Item#: 7049
Containment Class:
Secondary Class:
Disruption Class:
Risk Class:

Assigned Site Research Head Assigned Task Force
Site-47 Dr. Brown N/A

Special Containment Procedures: SCP-7049 is to be stored in a standard containment box. Interaction with the object has been ceased indefinitely.



Description: SCP-7049 is a pair of dilapidated spectacles dated to roughly 1400 A.D. The physical deterioration of SCP-7049's lenses do not alter the visual information received by a wearer.

When worn properly, SCP-7049 significantly alters the visual information received by the wearer. The effects of SCP-7049's visual alteration is provided below:

  • Color Distortion: Colors appear highly saturated, vivid, and often shift to hues that do not correspond to the actual colors of objects. Color boundaries may blur, making it challenging to differentiate between objects.
  • Visual Confusion: Objects may appear to move, morph, or distort in shape. Perspective and proportions become warped, leading to difficulty in estimating distances and sizes accurately.
  • Abstract Visuals: Ordinary objects may take on abstract, surreal, or geometric patterns. This effect can be disorienting and cause difficulty in identifying familiar objects.
  • Lack of Coherence: Scenes may lack logical coherence. Objects and their behavior may appear to exist within unusual contexts. Objects may appear despite lacking an equivalent in reality.

SCP-7049 does not impact the capability of wearers to interact with objects around them. However, testing has shown this to be difficult due to the disorienting effect SCP-7049 has on visual information. It is unknown if visual information provided by the anomaly is different between observers.1

Addendum.7049.1: Test Log

Test ID: 7049.01

Procedure: Dr. Pelekanos is to wear SCP-7049 in his office and describe what he observes.

Results: Notable observations include:

  • Gases take the appearance of a translucent liquid with a non-constant coloration, making visually distinguishing objects difficult. Inhaling gases into the mouth and nose cause this liquid to visually be taken into Dr. Pelekanos in a stream.
  • The water in a glass fluctuates between several colors. It appears to rapidly and erratically move around the glass. Dr. Pelekanos compares it to wave behavior in a storm.
  • Most objects are closer than they are in actuality. While attempting to take hold of a pencil on a desk, Dr. Pelekanos pushes an empty mug off the desk in question, causing it to fall to the floor and shatter. He describes the impact as causing a strong disturbance, as the coloration of the vicinity of the impact site shifts to deep shades of red, brown, and purple. As the mug breaks into ceramic shards, they quickly shoot out from the impact site, deeply scratching the floor.

Test ID: 7049.16

Procedure: Dr. Pelekanos is to wear SCP-7049 in a forested area near Site-47.

Results: Notable observations include:

  • Plants are largely translucent and take on a constantly shifting color that is some shade of blue or green. Trees appear to grow upwards endlessly, while their roots are vaguely seen through the translucent ground, spreading deeply into the Earth.
  • Animals are abstract in shape. All species appear as appropriately-sized bright objects, lacking a distinct form.
  • The sun emits multicolored beams, in which a distinct though unidentifiable object seems to move.
  • Near the conclusion of the test, a falcon is seen to assault a mourning dove perched in a tree above Dr. Pelekanos. The falcon impacts the dove at a high speed, although it fails to take hold of the it. This causes the dove to fall roughly 10 meters to the ground. The bird struggles for a few moments, confused. Dr. Pelekanos sees this as the abstract object corresponding to the bird manifesting and demanifesting in several different locations around him. The falcon then dives down to the forest floor, taking hold of the mourning dove with its talons and thrusting its beak into the dove's neck. The dove expires, and the falcon exits the area with the carcass. Although the mourning dove has expired at this point, Dr. Pelekanos observes, that the falcon has flown from the area, and the mourning dove has recovered from its fall and returned to its perch on the tree. The abstract object corresponding to the dove behaves as it was before the encounter with the falcon, and continues to do so until the conclusion of the test.

Test ID: 7049.19

Procedure: No procedure approved prior to the conduction of this test. Dr. Pelekanos wears SCP-7049 and views a photograph of his daughter, 15 year-old Clara Pelekanos.


The photograph viewed by Dr. Pelekanos during the duration of this test.

Results: The photograph is almost entirely unaffected by SCP-7049's visual and color distortions, leaving the image almost identical to its actual appearance. However, the image of Clara Pelekanos begins to move, mimicking the behavior of a person at rest. The image seems to inhale, exhale, blink, and wind appears to blow its hair. His hands begin to shake as he holds the sheet of paper.

The image then begins to move its mouth, mimicking the motion of speech, although no sound is heard. After several moments, the image ceases this movement, and it makes a facial expression resembling disappointment. The image then makes eye contact with Dr. Pelekanos. Dr. Pelekanos then throws the paper onto the floor and exits the room, claiming that the experience was "too much".

Note-Dr. Pelekanos was not authorized to conduct this experiment or have possession of SCP-7049 at the time. This experiment was conducted at 02:17 without the presence of any other personnel, and the information contained in this log was obtained via interview of Dr. Pelekanos after the fact.

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