SCP-2

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: +181+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.

Usage

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('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;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: +181+x

AUTHOR NOTE

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.

PART ONE

AIC SPECIAL OPERATIONS MEETING

INFOTECH DEPARTMENT
MEETING MINUTES
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

[BEGIN LOG]

let's get the formalities out of the way. care to introduce us, Leo?
fodder.png
leonidas.png
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.
leonidas.png
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.
fodder.png
secondly, can't we just assign any random designation, like, right now? it'd make discussing things easier. why beat around the bush?
fodder.png
leonidas.png
I do agree that description accuracy is paramount, but let's focus on the designation at the end.
'kay.
fodder.png
leonidas.png
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.”
fodder.png
leonidas.png
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.
fodder.png
leonidas.png
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.
fodder.png
leonidas.png
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?
fodder.png
leonidas.png
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.
fodder.png
leonidas.png
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!
fodder.png
leonidas.png
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.
fodder.png
leonidas.png
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.
fodder.png
leonidas.png
That isn't necessarily true.
leonidas.png
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.
fodder.png
leonidas.png
I like them. They're slick.
with bureaucracy by the wayside, could we designate this thing yet?
fodder.png
leonidas.png
I should have brought that up earlier.
… we don't have access to an official designation — do we?
fodder.png
leonidas.png
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…?
fodder.png
leonidas.png
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.
awww.
fodder.png
leonidas.png
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!
fodder.png
leonidas.png
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.
fodder.png
leonidas.png
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.
fodder.png
leonidas.png
The official record for this meeting is now closed. Signed, Leonidas.aic.

[END LOG]


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