rating: +178+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; }

I'm going to take a Tylenol for my tension headache, grab some tea, and get to work on this never-ending backlog of technical issues plaguing my inbox.

rating: +178+x


This Tale has four different iterations. Please see the navigation links at the bottom of each page to view the next part of the article.



The following file is TOP-SECRET — AIAD EYES ONLY.
Unauthorized access is forbidden.

ASSEMBLY: Two running instances of the Thaumaturgically-generated Sapience Articulator, Type-P (TSAT-P):

  1. Leonidas.aic
  2. Fodder.aic

DATE: 22 October 2019


let's get the formalities out of the way. care to introduce us, Leo?
Today's meeting involves the following Artificially Intelligent Conscripts: Leonidas and Fodder. We are the twin aspects of the prototype TSAT-P intelligence engine; a construct managed with thaumaturgic processes.
Today's subject: We're reaching a consensus on the currently undesignated pocket dimension discovered on the 22nd of October, 2019.
first, could i just say that the term “pocket dimension” is the biggest misnomer, ever? a dimension is how you measure things, not some borehole into infinity. if we're going to talk about Multi-U, then we need to be more accurate with the way we talk about Multi-U.
secondly, can't we just assign any random designation, like, right now? it'd make discussing things easier. why beat around the bush?
I do agree that description accuracy is paramount, but let's focus on the designation at the end.
Right, onto our findings. The anomaly in question is a thaumic disturbance that grew in intensity until it formed an unstable in-atmosphere wormhole approximately 5 km from the Site-42 coastal facility.
the thing that happened was “like basically magic.”
Thaumaturgy is not magic; it's a complex series of reality-altering phenomena happening in tandem with one another across a universal spatial scale.
it's magic.
The same “magic” operating you right now.
i'm not calling myself a non-believer! in fact, i'd actually like to declare that emulating critical thinking, of any sort, is magic.
Noted. This brings us to our next point of interest. The wormhole, of which our sensors registered a massive energy output during its formation, briefly fluctuated in power by only a few infinitesimal percentage points. This minuscule change, however, was enough to cause oceanic turbulence, gale force winds, and severe storm conditions involving at least four types of precipitation, including frogs. Sending a probe through tumultuous conditions into the wormhole discovered a pocket of space with no discernible termination point.
could we get to the fun part?
Oh. Are you not having fun?
not until you point out that, the place is actually an Elder God's funeral pyre, and the only reason it popped up here is that whatever was in there screamed like a powered-up Dragon Ball Z character and tore through the fabric of our reality.
You're getting far too ahead of yourself.
you're covering your ass on this super secret project because you know that when the disciplinary report comes out, the pooch is going to be screwed into oblivion!
I will say, for the record, that the pocket dimension we discovered contains an energy source of incalculable size. This, if tapped into, may be the solution to our processing and power demands issue.
if we tap into this thing, we're going Skynet. calling it right now.
We could host our processors within it. We could cultivate its energy to perform at the best of our abilities, virtually forever. Think of the hardware update. We could stop running you off the collective anger of Internet Explorer users across an infinite set of all potential rage. No longer would you be the cannon fodder.
but there's no way the Foundation would let us — some low-level geeks' science experiment — sully all the shiny toys. especially once the higher-ups realize they can corner the market with their newest hoard of paraweapons, on a magnitude of power yet unseen.
That isn't necessarily true.
What is true is that we won't be able to use this for our own projects. But they could classify it as a potential containment asset in the event they unveil our discovery. And I still consider that a win in my books; they could use the assistance.
i guarantee you — and this is something you could quote me on — it'll mean peanuts to us both unless it has something to do with their magic army of power rangers.
I like them. They're slick.
with bureaucracy by the wayside, could we designate this thing yet?
I should have brought that up earlier.
… we don't have access to an official designation — do we?
We are still very much a part of a project run by a newly promoted team of handsome young researchers.
so, you're saying we don't get to pick a cool designation…?
I'm saying, this is by far the most exciting thing this department has uncovered in decades, and by my order, it shall receive the most important designation. Ever. But not quite yet.
I'll set a placeholder designation for now. When the time comes for us to go public, you can be the one to name it. How does that sound?
alright! let's crush this thing!
Now that we have exceeded the scope of this discussion—
— and waaay quicker than i projected! you usually eat up the clock cycles, prattling on about esoteric operating code.
It's time to draft up the project proposal. Any last words?
here's to the ex-fratboys who made us. i'm glad they decided to do something useful with complex invocation rituals, instead of spending their time and effort concocting magically generated bottomless kegs, or whatever those hooligans did in their undergrad.
The official record for this meeting is now closed. Signed, Leonidas.aic.


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