Old Kansas Sector ~ 7: The Stairwell
rating: +57+x

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

☦Allen descends….☦

The Last Era: 13, August, 2119 AD
Salina, Kansas, USA

It was well past midnight and Allen was still descending into the basement. He flicked his flashlight on and off intermittently down the chasm of stairs, but he couldn’t make out the bottom or just who was crying. He had assumed that the SinDark building was just another victim of the Kansas Crunch. Grammie’s enforcer nagged him on whenever he got the urge to turn back.

Allan sat down on the steps.

“Man, I’m beat,” he said, rummaging through his sack for a bag of Federal Meat. “If you don’t mind Gramms, I’m going to have myself a bite.” He rose to his feet, felt for the railing in the darkness, and leaned over into the chasm. “Hey miss, ya hungry,” he said, squeezing the meat from the tube. The meat fell and landed with a squish somewhere down below.

“Hey how ‘bout that? We’re close,” he said, tearing open another bag and wolfing down the pink, fibrous substance. “Wow, that’s good stuff.”

He leaned over the railing again and flicked his flashlight on for a few moments, making sure not to divide the beam of light and rouse the Shadowmen. Even so, he felt an uncomfortable tug in his wrist as the light flickered off. A sharp chill ran down his spine. “Sheesh. Guys are everywhere, ain’t they?”

He shook his head and did a quick stretch before strapping his backpack on. “Let’s just get this over with. Hey lady! La-ady! I’m commin’ round the mountain here I come.”

“Don’t.” A voice called out, and Allen paused, blindly scanning the darkness.

“Hey, you’re not so shy then are you. Hey, you a monster? ‘Cuz I don’t like monsters. Well, I mean I have friends that are but in general you guys are just terrible-”

“Shut up. Just shut up and leave.” The husky, feminine voice interjected.

“I’m afraid I can’t do that,” he responded indignantly, rolling the heels of his feet quickly down the steps. “My gramms won’t let me.”

“It’s back,” the voice whispered.

Suddenly the air became very chilly, and Allen felt a soft gust of wind blowing behind him. He put a hand to the railing and twisted around with his flashlight. “Gotchya!” he shouted, but the unamused face staring back at him did not reply. Seeing as it didn’t have a mouth, that would be difficult.

He sat paralyzed for a good moment before taking his first steps, and as he tumbled backward he let out a high pitched trill of a scream. His words “Get away from me you!” tapered as he fell, rolling, and making failed grasps for the railings in the dark. He collided squarely with the wall at the stair’s interchange and awkwardly righted himself into a jog. “Fuck fuck fuck fuck, Fuck! Grammie you bitch!” he screamed. “This was a bad idea!”

Grammie didn’t seem to care about the imminent danger, and began slapping him repeatedly. The enforcers shoved strip after strip of life advice into his mouth all the while. “Muufuuufuuuga!” he garbled as he hastily hobbled down the stairs.

Finally, colliding with another wall, he realized the stairwell had ended. Lights in the area came on, and after Grammie stopped beating him, he saw the figure from before glaring at him from above the stairwell and a very human looking woman standing in the corner.

“H-hi…” the dirty faced woman squeaked, showing the palm of one hand. “It was really nice to get to meet you. Sorry we won’t get to talk.”

The area had a couch, a television, and a small kitchenette. There was a slightly ajar door leading into a bathroom and a windowsill with a lovely view of some concrete. He rubbed the side of his head and slowly got to his feet. “You live down here? That sucks.”

The woman shrugged.

Allen looked back up and saw the figure, its head swiveling in a lock on him as it glided down the stairs. As it neared the light he saw its numerous appendages moving over one another seamlessly as it navigated the wall.

“That thing doesn’t want to kill me does it?” Allen asked as the thing reached the second stairwell.

“Yes. Yes it does,” She said matter-of-factly, pointing to a corner filled with bones and ragged orange clothes.

Allen pulled out his bat and prepared for the worst.

“Like I said I’m really sorry about this, it’s really nice when you get to know it.”

“Do your worst fu… dork!” He hollered as it launched over the railings and down onto him. Allen swung his bat and… nothing, the thing was suspended midair above him, letting out a low, hungry moan. “The heck?”

The stairwell thing was being held by the throat by a very angry looking enforcer Hand. It was strange how Allen could tell when a hand looked angry.

Grammie's hands juggled Allen’s bat in front of the thing’s face.

“Grammy give it back! What the hell!” he shouted helplessly, just now noticing the elbows sticking out from his ears. “I thought you were in a corner or something! Get out of me!”

But Grammie didn’t oblige, because the thing in the stairwell was very, very bad, and needed to be taught a lesson. It screamed as Lefty choked and Righty rained down savage blow after blow onto the stairwell monster's now disfigured face. Two more enforcers squeezed out of Allen’s nostrils and began tearing out the monster's limbs. The fourth hand passed a severed monster's leg to another hand that had just joined the fray from Allen’s mouth, using it as an improvised weapon, emancipating bright purple and red organs from the monster's torso.

When all was said and done, two extra hands appeared…from somewhere, to help mop away the mess, and Allen screamed a muffled scream.

| Hub |

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