Old Kansas Sector ~ 14: Bobble the President

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

rating: +28+x

☦Allan fights anomalies in a post-normal world.☦

The Last Era: 14, August, 2119 AD
Gersha's Frontal Lobe, EL, Murder Town, Kansas, USA
3 AM, but Evil

Bobble cleared his throat and licked his lips, then placed a needle gingerly on a phonograph. “Please stand for the Gershan anthem.”

The intro to Bobble the Clown, Season 1 broadcast itself into every person and thoughtform’s view screen in Murder Town. The jingle blared over the intercoms in Killdie Square.

Bobble the Clown-

Fun to be around!

Bobble the Clown-

Comin’ to town!

Bobble the Clown,

Really funny guy!

Bobble the Clown?

Get rid of that frown!

What! Bobble the Clown?

Wow? Bobble the Clown!

Allen turned to face the entity on one of the many video billboards perched about the city. Bobble walked off camera, his two dimensional form wobbling like a sidewinder. Bobble appeared on another screen. Within the screen was a crane machine with a live samoyed puppy inside. On the bottom right of the screen there was a watermark that read "C-SPAN3" in bright red and yellow caliope font.

“Happy Tuesday, fellows," he said, delicately pressing the button on the machine, causing two robotic arms with laser guns to manifest within, each shooting in unison, disintegrating the puppy before quickly disappearing. Bobble crossed his arms and scratched his chin. He pulled a chart out of his pocket and studied it for a moment.

“Hmmm… It looks like we are… NOT,” Bobble pounded on the view screen, “BUILDING THE NEW TRANSIT SYSTEM!!”

Gunshots and cheers rang out through the city. A Cauliflower Bisque next to Allen seemed to groan.

Allen flinched. Holy shit. But it’s Thursday! How long have I been here?

“Burn in hell you miserable bastards, burn, forever! I hate you! It's not a joke! I wish your death! Die!” Bobble screamed, wobbling quickly off screen. The city rioted with applause.

Allen chirped and ran in circles. I’ve got to find that Clown! He must be in charge!

Clef slapped himself in the leg. “239, well, shit, fuck me sideways is that you? Hell it's been so long, how have you been since Site-19 was shut down? Wow, you’re older than hell! You’d think… You doing good? Learned any new spells?"

Tatty’s eye twitched. “Tatty, not 239, you damned sociopath. You absolute monster.”

Clef tried to gauge his distance between himself and the bubble.

She still thinks she’s a witch. I can probably manage to get her neck by the neck. I've got a pen too… Clef thought.

Gersha squealed. “You’re like the Crunch lady! You squished Kansas together! Wow, you’re my hero!”

Tatty allowed her a smile, recognizing Gersha's description. “Hon, thanks."

Keep talking.

"… But I need to deal with your friends first, if you’d please.”

“Woah woah woah,” Kondraki sputtered, hanging out of the helicopter with his hat in hand. “What’d I do to you? I’m just some guy, man! What’s your problem?”

Gersha interjected. “Ummm, these aren’t my friends.”

“What?” said Kondraki.

Tatty turned her head. “Then why are you traveling with them, dear?”

“They "abducted" me.” Said Gersha, matter of factly.

“Absolutely absurd!” Kain furrowed his brow.

Gersha strained to think. “Hmm, puppy, not the right word. They shot the first kidnapper, then the big one said something about a ‘Foundation’ program for me, then they put me in a helicopter. Then he kinda warmed up to me talking about something, about, umm, repopulation, study? Gosh I could be wrong! I do live in a basement. This is the first time I've seen real life people, like moving around still."

Tatty rubbed her temple. “Woof. Gersha, you didn’t even need to speak, I assumed it was worse.”

Kain barked excitedly. “That is… Just ridiculous. Out of context. We are actively preserving humanity. We are working for the greater good. Kondraki spoke out of turn."

Tatty rolled her eyes. “The Foundation created its own status quo, oof. They even decided just how they would fail if I recall correctly. Your preservation is perversion. I… I really don’t want to discuss what being human, being normal means with a talking dog. Cuffs are off.” Tatty threw the makeshift wand over her shoulder and the bubble disappeared. She began floating through the void toward Clef.

“Why did you,”

Clef’s mouth disappeared. Kondraki and Kain vanished. The purple sky and twisting concrete spires of Old Kansas began to fade in around them. They were back in Salinas again.

“I don’t feel like playing fair.”

I demand entrance! Allen hissed at Bobbles' secretary.

Boss Butternut the Foul, a 1LB butternut squash in the late stages of decay, said nothing. Butternut sat with utter indifference at his desk, rotting, feeding flies, as was custom.

What? Am I not important enough for you? You know how close I am to just going OFF? I’ll fucking kill you. I’ll kill every piece of shit monster in the god damned city. Do you really want to fuck with me? Do I look hinged to you? I’m not, I’m unhinged!”

Bobble looked at the scene on his security camera. A roach had gotten in, somehow.

Allen began nibbling on the squash. I don’t give a fuck! Ha ha ha!

The door to Bobble’s office flung open, Bobble stomped toward Allen in his oversized clown shoes, honking toward him menacingly with a flyswatter in hand.

Allen hissed and flew into Bobbles face.

Bobble screamed and stumbled backwards. “Christ, its one of the flying ones! Butternut help!”

Butternut looked on helplessly. Bobble collided with a shelf of porcelain vases, slipped on Banana Peel, and landed face first in a conspicuously placed Banana Cream Pie.

“You people are useless!”

Allen skittered along Bobbles face.

“What are your demands, roach!"

Allan hissed.

“English! Please, it’s the law!” Bobble pulled a bottle of seltzer from his pocket and cleaned his face with an endless rag from the opposite pocket.

Allan hissed.

Bobble removed his shoe and drank from it. “Listen, I’m a reasonable guy, I understand, you know,” He whispered. “The anger. Being angry. Christ, I’ve been angry for centuries. I've been angry since the Silent Age. Since I've been put to paper. Since I was 30FPS. Since magic ink. But you know what? Roach? You can't let it take over. You can't become the anger. That’s not you, that’s just a feeling. You're more than a feelin’. Know what you are otherwise? An animal. A beast. One of the non sentient ones that it's okay to eat."

Allen tilted his antennae. Get a load of this hypocrite.

Bobble leaned back on his elbow, absently pulling an electrified stick of gum out of his pocket. “I know what you’re thinking: ‘Get a load of this hypocrite.’ But me, I’m not angry. I’m mad.” Bobble began sobbing, loudly, blowing his nose. “I have trouble with my emotions.”

Damn, dude. That sucks.

Bobble began chuckling. "But I'm in a good mood today. I can nullify your bond with Envelope Logistics. Hell it's fine if you don't want to talk, I know what it's like being a roach, I've been a roach my whole life. A mad roach, a dad roach. I am actually a part roach…"

I want to die.

| Hub |

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