Changes at Site-18
rating: +84+x

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

☦Site-18 refit to house overflow of Safe objects.☦

July 28th, 1976 - Disinformation Site-18

“Good evening Mr. Mayreder.” Sanders spoke in tired tones as she walked into the fat, balding man’s office. “How are you? How was your day?”

“Oh, fine, just as any other. The day was good too,” mumbled Mayreder as he craned over, manipulating some dominoes on the edge of his desk.

Sanders edged her way past stacks of papers littering the floor in the dusty office. “What are you doing?”

“Just contemplating the containment procedures for the new object we’ve been assigned. Did you know SCP-1463 has over two hundred pages in its containment procedures file? Two hundred! 8 point font!” Mayreder settled back in his straining chair after placing the last domino on the metallic, tarnished table.

“That’s… very interesting,” said Sanders, adjusting the bun on her ponytail.

“Oh, yes, right, how was your day?” asked Mayreder. The question was offhanded at best. Mayreder reached under his desk and pulled out a large, spiral bound sheet of papers.

Sanders let out a deep sigh. “Fine, I just performed observational duties. Very uneventful, not very colorful.”

“Outstanding. Why don’t you have a seat? Do you have any other place to be? No you don’t.” Mayreder grunted as he began flipping through the pages.

“No I do-… Your book is upside-down.”

“Ah, I see why they have you on observation duty!” interjected Mayreder while he continued to flip through the pages as they were. Sanders offered a funeral stare in his direction.

She eyed the domino pattern on the table. It was a nautiluses’ spiral, beginning at the edge of the otherwise spotless desk and terminating at the center. She knew where the end point was, because Mayreder had always placed a red domino at the center. She hated that she remembered this.

“Sir, may I ask you why you do this every so often.” Her tone was snippy, barely professional. Mayreder gave her a puzzled stare from out over his book. Sanders had to remember to count to ten. “…the dominos,” she clarified.

Mayreder raised his eyebrows and placed his gaze back at the un-righted containment procedures manual. “I get bored. I enjoy setting them up - how neat they look. Very pretty.”

“I’ve never seen you knock them down before,” offered Sanders after a good one minute of silence. It was uncomfortable; the atmosphere in this wing was poor due to the fact that most of the power had been routed to the newly housed SCP’s air filtration system. She didn’t really care about Mayreder’s dominoes, but she would be sitting here for a half hour wasting time in this stuffy office regardless.

Mayreder began again, tilting his nose slightly; “I wipe them up when I’m finished admiring them, and then place them back in their box.”

Sanders let out a snort. Mayreder looked back at her with a serious mug. His reaction caused her to crack up.

“What’s so funny?”

Sanders wiped her nose and righted herself on her chair. “Nothing, nothing I was just thinking of something silly.”

Mayreder paused for a few moments before speaking, began to say something, then stopped. “You can leave now. I need to memorize these finer points.”

Sanders nodded, a small grin detectable on her face, and left the room wordlessly.

Mayreder put his book down lightly and studied the nautilus pattern on his desk.

Sanders forgot about Mayreder and thought about the refit of the facility as she rounded the corner in the hallway. Site-18 was originally used as a Disinformation facility, or the Foundation’s docu-serve as many people liked to call it. Sanders worked under Mayreder as a proofreader, Mayreder simply handled the projects and packaged the media given to him. The documents were then sent to the Site Director for approval, and, if they were improper, they were sent back down again.

The Foundation didn’t like moving personnel to different facilities if they didn’t have to. Mayreder, Sanders, and two of their colleagues were retrained in the space of three weeks in the Special Containment Procedures for the object now located in their wing. Two freshly recruited researchers also joined their ranks.

Containment for these objects wasn’t complicated; most of the intensive work was saved for actual researchers. Most of the training consisted of memorizing routines and very dull evenings of watching an object through a monitor.

The contents of the media rooms of Site-18 were moved to a smaller facility, and refit to contain Safe objects. The contents of the Document Archive were also shipped off somewhere else, and this room was refit as an anomalous artifact warehouse. The labyrinth of lockers currently held roughly five hundred objects. Luckily Sanders didn’t have to deal with them, and they didn’t need much done - after some bureaucratic hoopla, individual items would be sent to Cold Storage to be indefinitely forgotten.

She could understand the refit. The new warehouse was already half full, and the area that was housed with these trinkets was packed tight as if they were expecting more. There was no shortage of new parcels every week. She wondered to herself how the Foundation managed to pay their rent every month.

She shrugged it off. Staring at some weird thing every day from 9 to 5 was a lot less stressful than editing a mountain of expense reports and newspaper editorials. Other than having to deal with Mayreder, her job was easy, the changes were welcome.

In his office, Mayreder rested a fat finger lightly on the edge of the domino track. Each domino was perfectly spaced two fingers apart. There were seventy dominoes in this set. Each domino was faceless, and fashioned from ivory. Each weighed sixty grams. His father gave the dominoes to him two years ago.

Knocking the first one off to see what happened to the rest was a temptation. The fact that he had never done it was ridiculous; some sort of superstition had prevented him from doing so. His life was dominated by paranoid obsessions, which made him a good fit for the job. This habit of compulsive carefulness had caused month old piles of revised documents to form in middens around his office, and his worry for synergy a permanent annoyance to the people who answered to him.

Mayreder’s ruminations were interrupted by a sudden itch on his scalp. He stamped a foot down in an awkward hop on as his finger slipped. He watched with some perturbed distress as the chain of pieces began to fall.

Sanders could hear the faint machine-gun clicking of ivory down the hall as she punched in her key code and retired to her room for the night.

| Hub |

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