By: NDHeckfireNDHeckfire
Published on 27 Nov 2022 07:06
rating: +136+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: +136+x

Item#: SCP-7617
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: As the nature of SCP-7617 has only been recently discovered by the Department of Metafictional Research, its containment procedures are still being drafted and are awaiting approval from Site-400's current site director.

Description: SCP-7617 is the designation given to Junior Researcher Francis Selakkan, of Site-400's Department of Mundane Artifacts and Uneventful Data Evaluation (MAUDE). SCP-7617 is a Caucasian adult male of British-Israeli descent, 161 centimeters in height with brown eyes and short black hair.

Throughout recent observations conducted by the Department of Metafictional Research, SCP-7617 has been shown to possess an extremely low amount of pataphysical involvement potential. While baseline individuals have around at least 2 to 5 DMRGs1, SCP-7617 seems to only possess a reading of -3 at the time of writing, which is extremely unusual and completely unlikely for personnel employed by the Foundation.

Essentially, this would mean that any and all developing narratives fundamentally avoid SCP-7617, as he doesn't have the required cynosure to be the focal point of a narrative. As such, he has, at the time of writing, successfully evaded being affected and/or killed by some external story-driven force.

Addendum 7617-1, Recognized Events: The following is a list of events compiled by the Department of Metafictional Research that may have been attributed to SCP-7617's anomalous properties:

Date & Time Event Description
23/4/2018 (1:21 PM) During a containment breach caused by an SCP-4310 instance2, the West Wing of Site-400, which also houses the personal quarters, was put on indefinite lockdown. Unfortunately, most of the Foundation personnel who were present in the Wing were killed by the SCP-4310 instance. SCP-7617, who was also present in the West Wing, was asleep during the breach, and therefore did not exit his quarters and encounter SCP-43103.
13/07/2019 (4:44 AM) In the midst of a raid conducted by the Chaos Insurgency, SCP-7617 (along with his colleagues from MAUDE) evacuated their workstations as per protocol and attempted to lock themselves within a nearby emergency shelter. However, on his way to the shelter, SCP-7617 was accidentally struck on the head by a fallen pipeline, and was knocked unconscious. His aforementioned colleagues, not noticing his absence, did not retrieve SCP-7617 and proceeded to enter the shelter without him. Thankfully, when Insurgency operatives arrived where SCP-7617 had fallen unconscious, they did not acknowledge him and moved on, possibly thinking that he was already dead. As a result of this, SCP-7617 is one of the few individuals who survived the raid.
02/09/2019 (11:43 AM) While an SCP-008 containment outbreak4 was plaguing the entirety of Site-400, SCP-7617 was safe at home, recovering from a head injury he sustained from the previous Chaos Insurgency raid.

Addendum 7617-2, Incident Log: On December 7th, 2020, following ten seconds after the official posting of the above document to the SCiPnet server, SCP-7617, who was having lunch below an opened skylight roof in Site-400's main cafeteria, was struck by five consecutive lightning bolts and immediately died to internal burns and severe organ damage.

Analysis of SCP-7617's corpse revealed that it now possesses a DMRG reading of 1, and is consequently no longer considered anomalous. His remains were subsequently cremated and stored within Site-400's residential columbarium.

SCP-7617 has been reclassified to Neutralized as of this incident. Its main document will be updated shortly.

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