Old Kansas Sector ~ 4: Grammie Knows
rating: +67+x

rating: +67+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('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; }

☦Allan is punished by Grammie. SCP-517.☦

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

A monster ran the town of Salina, and mostly monsters dwelled there. The odd human happened along now and then, but only the loony ones stuck around. The leader of the town was an enigmatic figure known as “Grammie”. No one had ever actually seen her, except for maybe Grammie’s enforcers, who kept the peace.

She had drawings of herself in stained, brown ink over the buildings. She looked more or less like a grammie.

The enforcers were hands. Black, shadowy hands with elbows that stretched off around corners and into nowhere. Some of them ran shops. Allen swore he saw some planting crops at one point, there was even an enforcer-run sock puppet show (which featured humans as the prominent characters, oddly enough). They never spoke to him, but they seemed to understand what he was saying. If he offered to trade an MP3 player for four sardine cans, they would understand that his offer wasn't unreasonable, and slap him softly on the side of his head.

“Crap! This MP3 has 3TBs and call answering!” He had once complained, and a falling strip of paper retorted that Grammie knew best.

Allen worked up the courage to make his way back down the K-18 after the episode with the Walking Sticks. He didn't want to, but as he sulked home the realization that he would not have alcohol or noise cancelling earplugs began to dawn on him.

He arrived mid-afternoon at the edge of town, wiping sweat from his brow as he surveyed the area. It was dead, which was to be expected as most humans were.

He could see the Smart Mart was completely deserted save for the Enforcers skittering about. There were too many to count, the foundations of the building were cornered three feet high in shadowy elbows.

“Grammie,” Allen shouted, cupping his hands in a circle around his mouth. “I need a computer and booze! What’dya want for it? I got magazines and a bunch of chicken bones.”

He waited and spied the streams of enforcers sliding in and out of the shadows until one of them stopped and turned to him. It flowed in his direction from its quarter mile distance in two seconds, stopping inches from Allen’s head. It wagged a finger at him.

“Oh why not? Offer not good enough? Here! I’ll sell you the vest off my chest!” He said, beginning to unstring the buttons.

The hand formed a fist and shook left and right.

“Then what!? What’dya want from me Gram?”

The hand shook left and right again. No sell.

“Why not!” Allen pleaded, hands upturned. “I got good goods here for yours. Ain't no reason you shouldn't be sellin’ to me."

Suddenly five other hands joined the party, all grouped together a few feet away from Allen’s conversant. The metacarpal actors formed wriggly, serpent-like shapes and began wobbling toward the conversant hand. The protagonist digit formed a claw-like mouth and began bashing the other hands down until they lay in a black shadowy pool on the ground. After a second they rose back to eye level and glared as well as hands could glare at him.

“The twiggy people? What’s the big deal? They're a nuisance. They're not even aware like us humans are." He paused, taking a deep breath. "Listen, what do I have to do so I can trade with you again? I ain't got all day.”

The hands went limp for a moment, and then turned northeast. After about five seconds another hand carrying a tiny strip of paper appeared. They grabbed Allen’s hands and puppeteered him to read it.

“Hey hey, guys, easy! I can move on my own! Now what’s this say?”

Two hands clapped together silently as he scanned the words.


A hand shaped like head nodded slowly. It had to be done if they were to barter.

“Grammie no!”

The hands grabbed him by the feet, flipping him onto his back. They dragged him kicking and screaming down the parking lot and he crashed through the doors of the vacant old department store. Luckily this all happened within a few moments, and he would only notice the trail of blood from his scraped back and the ensuing pain when he was several blows into his whoopin'.

Allen, his face blue with bruising, and his back fused with the congealed blood on his shirt stumbled out of the Smart Mart. He would not be able to sit down for a day or two.

“Never again!" Allen coughed, spitting blood on the pavement. "Never again do I do business in this town you ass! Hear me? Cunt! Hear me you fu-”

A hand slapped him hard in the face. He drew blood digging teeth into his tongue.

If he wanted to trade in this town he needed to be good, and that meant no cursing. He also needed the alcohol for his rash, and to forget this day ever happened. He needed the hard stuff.

“….fudge faces.”

How Grammie knew he was cursing or killing more or less friendly monsters, he could only guess at. She just seemed to know. Sometimes he wondered what she did to really bad people. It probably had a lot to do with why the town was always so deserted.

“What do you want me to do?” Said Allen, softly.

Five seconds later a hand floated slowly toward him holding a strip of paper. Allen grabbed it gently from the thing's grip, trying not to wince as his finger brushed up against the awkward squeezing feeling of the shadow finger.


He held the paper up and squinted at the ridiculously tiny, cursive script.

“‘Help your neighbors’. What? That’s vague. Grammie. Please clarify.” He massaged his temple and looked to the again moving conversant hand. It pointed off toward the direction of the sun setting.

“That’s opposite the direction of my house! You want me to go that way? Can I do it tomorrow?" His eyes were wide in exasperation. "Please? You know, being outside, well you don’t know, but being outside at night is suicide. I’m not exaggerating, Grammie. I could be stung by an ender and shrunk into nothin'! I could get ablated by a shadowman!”

The hand went limp as if exhausted. A delivery hand arrived with another strip.

~Say your prayers. Grammie knows best.

“Are you serious! Are you f… Freaking serious?”

The hand gave him a thumbs up. She was. He rubbed his face and slowly started toward downtown. An enforcer snuck its way back into his skull while it was still throbbing. Grammie sat behind his eyes to make sure he wasn't making an ass of himself when he rescued his future friend.


| Hub |

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