By: NDHeckfireNDHeckfire
Published on 07 Dec 2022 21:57
rating: +23+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: +23+x

Site-400's Human Resources Complaint Form

Date: 28/07/2020

Reported by: Dr. Dannielle Johallender

Position of reporter:

☐ Site Director:
☑ Senior Researcher: Emergent Threat Tactical Response Authority (ETTRA)
☐ Junior Researcher:
☐ Field Agent:
☐ On-site Security:
☐ Logistics Personnel:

Anonymity: ☑ No | ☐ Yes

Report Details:

I would like to file a complaint against Junior Researcher William Herschel, of the Department of Humanoid Risk Assessment, for verbal harassment and overall extremely unprofessional conduct.

It was around 12:20 PM, during which I was simply doing unrelated paperwork when the malefactor in question suddenly burst into my office unannounced. I could see immediately that he was sweating profusely, with wet spots under his armpits and back, as if he ran a marathon just to get here. He proceeded to lean on the doorway of my office, gasping for breath. I stood up from my chair, concerned, and asked him what was going on.

He answered, in between pants, that the reason he came here was to inform me that he thinks that he's an unclassified anomaly. Upon hearing this, my ears instantly perked up, as knowing Site-400's infamous record of employing anomalous personnel, I saw this as a situation of utmost interest. I quickly grabbed a nearby Anomaly Report Form and asked him what he thought he was capable of doing.

That was when he said it. In his own repulsive words; "I think I can get myself to your [back orifice]" (suffice to say, he said a much ruder word, but I've taken the liberty of omitting and replacing it with a much civil term).

At first, I was utterly confused, but after processing what I just heard, I immediately snapped at him at to get out of my office. If I hadn't known better, I'd say he also looked puzzled. He attempted to regain himself by saying that he was serious, and that "this isn't a joke". I, of course, ignored him, and proceeded to shove him out of my office.

Before he could say anything further, I slammed the door on his face. After a couple of minutes, I heard footsteps slowly walking away, and let out a breath of relief. Without delay, I picked out this form and began writing my complaint (as you can see).

I will say, however, that I do not think that Researcher Herschel acted as he did willingly, considering the state he was in when he entered my office. Instead, I believe that he'd done this on the grounds of it being some form of a "dare"; possibly orchestrated by his colleagues from the Department of Humanoid Risk Assessment. Maybe the reason they've targeted me specifically was due to my inexperience working here, since ETTRA is still somewhat of a new addition to Site-400. If this is found to be true, and that there are other individuals involved in this cruel prank, I humbly request that they also be penalized accordingly.

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

Assigned Site Site Director Research Head Assigned Task Force
Site-400 Director Adam Desmond PENDING PENDING

Special Containment Procedures: Investigation into the sudden disappearance of SCP-7917-A is still in progress. The Internal Affairs Section along with the Department of Human Resources are currently cooperating with each other in order to hopefully solve SCP-7917.

Any Foundation personnel possessing relevant information regarding SCP-7917 are encouraged to report it to their current Adminstration and Oversight officer.

Description: SCP-7917 is the designation given to the nature of Junior Researcher William Herschel's disappearance. For the purposes of brevity within this document, Jr. Researcher Herschel is hereafter designated as SCP-7917-A.

SCP-7917 was discovered on the 28th of August, 2019, after Dr. Dannielle Johallender of the Emergent Threat Tactical Response Authority (ETTRA) filed a HR Complaint relating to "verbal harassment" and "extremely unprofessional conduct" on the part of SCP-7917-A. The very next day, two Human Resources personnel would do a follow-up on the complaint, with them expressing the purpose of visiting SCP-7917-A's office and interviewing him.

However, they would find the office to be locked from the inside. An attempt was made to communicate with SCP-7917-A but the personnel did not receive a response. On-site security was contacted to access the office, which was found to be completely vacant. Questioning with some of SCP-7917-A's colleagues revealed that, after he "met with the new ETTRA lady", SCP-7917-A proceeded to lock himself in his office and remained there for the rest of the day. These testimonies were corroborated by the footage of a surveillance camera that was in view of the exterior of the office.

Examination of the office itself revealed that it was utterly in shambles, with multiple file folders and pieces of men's clothing strewn about. SCP-7917-A's SCiPnet computer was inspected, with the search history showing recent search prompts relating to humanoid anomalies, specifically how they are handled in terms of treatment and containment.

Within the drawer of his personal desk, investigating personnel was able to retrieve SCP-7917-A's notebook journal. The journal mostly consists of unrelated dates and immaterial notes, with the exception of the final page, which seems to have been hastily scrawled with a dull 2B graphite pencil. The page reads:





The above transcription seems to suggest that SCP-7917-A was under the possession of an unknown anomaly. Investigation into the page's possible correlation with his disappearance is still ongoing.

► Play

DR. JOHALLENDER: -so darn frustrating. For some reason, they think that Batherson returning is somehow connected to the Climate Collapse Scenario. No offense, but I don't see how an immortal individual has anything to do with a worldwide K-Class event.

(sighs) Though, I must be honest, I'm still interested with that hammer thing we found at-

(Door knocking.)


(Wood creaking.)

UNKNOWN: Uhh, Dr. Johallender?

DR. JOHALLENDER: Yes, and who's asking?

UNKNOWN: Umm, Ogden Orville? From Astronomical Research? I made an appointment with you yesterday?

DR. JOHALLENDER: Ah, apologies, Dr. Orville. I seem to have forgotten about that. Please come in. And take a seat.

DR. ORVILLE: Right, thanks.

(Chair scraping.)

DR. JOHALLENDER: So, you said you have something of interest to show me? What is it?

DR. ORVILLE: I assume you want a little bit of context here. (clears throat) On February 7th, 2021, one of our orbital satellites, SAPHIR-2l3, detected a "physical abnormality" while it was on its regular annual patrol. Uhh, you see, it took a photo of the abnormality and… well, I think it's best if you see it for yourself.


DR. JOHALLENDER: Wait is that… Is that a corpse?

DR. ORVILLE: Yeah… Usually we would just file this in an empty SCP slot and be done with it, since these kind of things happen all the time. But after I saw what the corpse was wearing, I immediately thought of showing it to you.

DR. JOHALLENDER: Hold on… Let me think for a second. Uhh, where was this picture taken?

DR. ORVILLE: Oh, right, sorry. Forgot to mention. SAPHIR took it at Uranus.

DR. JOHALLENDER: … I beg your pardon?

■ Stop

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