By: NDHeckfireNDHeckfire
Published on 21 Sep 2022 02:37
rating: +89+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: +89+x

Item#: SCP-7742
Containment Class:
Secondary Class:
Disruption Class:
Risk Class:

Assigned Site Site Director Research Head Assigned Task Force
Site-400 Director Adam Desmond N/A N/A

Special Containment Procedures: With the approval of Site-400's current Site Director, SCP-7742 has been granted permission to continue his long-term employment with the SCP Foundation as an Analytics containment supervisor. However, he is to be under constant surveillance and protection in order to prevent any accidental death.1

Description: SCP-7742 is the designation given to former Foundation Field Agent Blonsky Batherson, previously an active operative of Mobile Task Force Eta-77 ("Spheres Within Spheres"). SCP-7742 is currently stationed at Site-400, in the Newcastle region, Northern Ireland.

To summarize, SCP-7742 possesses the capability of functional immortality, with some noted hindrances.

If a living organism directly (or indirectly) causes the death of SCP-7742, said organism will immediately transfigure into an exact identical physical copy of SCP-7742. This copy would retain the previous SCP-7742's memories and experiences that occurred prior to his death, along with its inherent anomalous properties. Extensive testing has shown that any living organism will be transmuted, regardless of biology and composition.

It is theorized by Foundation researchers that the only way for SCP-7742 to permanently expire is if he self-terminates or if he dies through natural causes.

Addendum 7742-1, Notable Resurrections:

Date & Time Event Description Observations Notes
04/01/2018 (5:43 AM) During a night drive along a cliffside, SCP-7742's vehicle collided with a car belonging to a Foundation researcher (Rs. Riyan Dajeed). SCP-7742's vehicle toppled down the cliffside and he eventually died of excessive bleeding and spinal rupture. Rs. Dajeed spontaneously transmuted into SCP-7742. The newly created SCP-7742 was able to pull over his car and contact emergency services. N/A
09/03/2019 (3:36 PM) While in Site-400's third-level men's restroom, SCP-7742 accidentally slipped and fell on a wet spot on the floor, resulting in him hitting his head on a nearby ceramic sink and dying from snapping his neck at the base of the skull. Janitor Finley North, who was within their personal quarters at the time, transmuted into SCP-7742. Through surveillance investigations, it was revealed that Janitor North neglected to properly place a Slipping Hazard sign upon the wet floor during his shift cleaning the third-level men's restroom.
13/07/2019 (4:56 AM) In the midst of a raid conducted by the Chaos Insurgency, SCP-7742 was among the personnel that was captured and held hostage in Site-400's multi-purpose cafeteria. After around thirty minutes, SCP-7742 attempted to assault one of the Insurgents, resulting in him being killed via gunfire from the other operatives. An Insurgent transmuted into SCP-7742. He immediately wields the combat firearm previously held by the Insurgent to successfully terminate the rest of the operatives. SCP-7742 would proceed to release Foundation personnel from captivity and transport them to an emergency shelter. Following the event, the footage from the cafeteria was recovered, and SCP-7742 was eventually awarded the Foundation Silver Star, for outstanding valor and meritorious service to the Foundation.

Addendum 7742-2, Neutralization: On the 27th of November, 2020, during his smoke break outside Site-400 over a particularly bad thunderstorm, SCP-7742 was struck by a quick lightning bolt, resulting in him experiencing internal burns and severe organ damage. After he failed to attend a daily gathering with colleagues, site security would eventually discover his corpse on the grounds of Site-400. Despite extensive examination, a newly created instance of SCP-7742 was not found.

As SCP-7742 was pronounced truly deceased, his remains were subsequently cremated and given to his closest living relative, Alexander Batherson (father). A specific spot within Site-400's cafeteria was used to create a memorial for Agent Blonksy Batherson, with his Silver Star and personal memorabilia situated there.

SCP-7742 has been redesignated as Neutralized.





As of the 30th of November, 2020, both the Emergent Threat Tactical Response Authority (ETTRA) and the Department of Analytics have noted a sudden significant increase in global disasters and calamities, specifically those caused by heavy rainfall, extreme thunderstorms, dense snow storms, frequent floodings, and multiple occurrences of destructive cyclones.

In addition to this, it was also observed that a number of meteorological and weather-related anomalies contained by the Foundation have been either neutralized/nullified through unknown means or have their anomalous effects considerably amplified.

Due to these unforeseen events, the ETTRA has declared the crisis as a worldwide L&T-Class "Catastrophic Climate Collapse" Scenario. To ensure the preservation of the Foundation and the Veil, personnel are to be reminded that all requests originating from the ETTRA are mandatory directives carrying the authority of Overwatch Command.

— Dr. Dan ███████, Director of ETTRA

Addendum 7742-3, Incident Log: On the 9th of December, 2020, surveillance cameras situated outside the grounds of Site-400 captured footage of a seemingly male individual manifesting approximately fifteen meters above the ground and falling down. A containment team was dispatched to investigate the individual, with the suspicion that they might be an anomaly created from the L&T-Class Scenario.

It was discovered that the individual was, in fact, Agent Blonksy Batherson. He was in a state of extreme emotional distress and trauma, with containment personnel noting him mumbling and murmuring nonsensical sentences. Burns of varying degrees are visible on his right arm and torso.

Agent Batherson was immediately rushed to Site-400's Health and Pathology Infirmary, where his subsequent physical treatment and therapy are still in progress.

Investigation into the surrounding area where Agent Batherson manifested resulted in personnel discovering an unknown metallic object, located five meters from where the individual initially landed. The object was designated as AO-04207742 and was placed into containment2.

Analysis has revealed that large traces of electromagnetic radiation are present on AO-04207742, especially on its metallic structure. Investigation into its correlation to Agent Batherson's sudden return is still ongoing.

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