Old Kansas Sector ~ 11: Intermission
rating: +49+x

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

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

The Last Era: 11, August, 2119 AD
Sylvan Grove, Kansas, USA

In October 2098, entertainment was acquired by Marshall, Carter, and Dark. Around this time the creation of television programs and other forms of entertainment became automated, and these programs were broadcast across the many internet balloons that floated over the skies over Earth's human (and inhuman) population centers. Long after Dark and Carter Inc, were gone, and Dark had finally bought herself out of the ancient contract, the entertainment generators and balloons continued to function. They gathered the thoughts of the denizens they floated over, catering to each of their hopes and fears.

Entertainment was available on any device, internal or external. If a person didn't have access to a device, an internet balloon would locate them and squeeze one out.

Allen liked to watch the television before he went to sleep. It helped him relax.

8:30 9:00 9:30
PSF Preobituaries Allen, shot in the face with a gun. Future News Even more crow storms, even less Walking Sticks, Mayor of Salina, dead. Postobituaries Gersha Kills "Kondraki" and "Kain" in Episode 19. Clef Kills Gersha and Allen, (for real), in Episode 20
NSPN NBA Celtics and Heat. Centennial overtime special event. Bostami Pride Day. Basketball is rediscovered.

"I thought I got that virus out of the TV? Huh. Maybe I really do get shot in the face tomorrow!"

Allen stoked the embers under the shopping cart grille. A freshly butchered rat was slowly roasting over the embers.

10:00 10:30 11:00
SinoDark USA C-SPAN Ambassador Rhadamanthus at Presidents White House Correspondents' Association Dinners. A compilation of the many disappearances of President Ronald Reagan. Part of a preview of the dinner scheduled for April 30, 20X6. Special Report King vs King Union Address Ronald Reagan discusses the ethics of cannibalism.
SinoDark USA II Presidential Debate. Four Years under Ronald Reagan, or Scarlet King?

Allen was sure cannibalism incentives were just monster propaganda. He watched for half an hour as a bleeding-from-every-orifice Ronald Reagan rattled off the nutritional contents of different body parts. Ronald produced a very confusing bell graph that seemed to indicate ideal age groups. Scarlet King opened its chest cavity, revealing an even less impressive bar graph.

"Well I'd sure love to eat a person - if I could find one!" Allen said.

11:30 12:00 12:30
Factory Radio Cash or Ash Hollywood Kleins Ultimate Loan Accrual 3! and Midlife Crisis Center Contestants telepathically coach their infant selves up until their appearance on the show. Different scoring parameters and win conditions. Hollywood Kleins Vitamin Don't! and Worth the Weight? Contestants telepathically coach their infant selves up until their appearance on the show. Different scoring parameters and win conditions.
Factory Radio 2 The Price is… Wrong Contestants compete to spay or neuter their friends by guessing the price of common household items. Talking Telephone Numbers Guests win prizes for contacting their family. Infinite time, infinite number combinations. You You again.
Factory Radio Kids Laugh is Best Public Transportation. The Wheels on the bus go round and round and round and round and round and round. The wheels on the bus are endless! You wheels! PG-13 Laugh is Best Home Cooking. Laugh and enjoy life lessons on cooking at home. Laugh and watch him use all of the best ingredients and make best tomato soup, with special hams! PG-13 Bobble's Kooky Corner Love. Bobble the clown takes his friend to a family reunion. XXX
Null —- et me out! let me the fuck out! l Must Watch Required Viewing

Allen came to his senses on the living room floor when the noise from Must Watch had finally flickered out. He realized there was half-cooked rat tail in his mouth, and he had defecated all over his nice couch. On the wall next to him there was a strange, decidedly Satanic symbol painted in feces. He checked the grille and saw that the rat was still there, slowly cooking; albeit lacking a tail.

Allen shivered. "I hate that show," muttered Allen, wiping the cold sweat and urine from his forehead. He sat down cross-legged on the floor next to the fire.

13:00 13:30 14:00
Sarx Paid Programming Paid Programming Evolution Chamber You wont believe the body parts these surgeons dream up. Neural Brain, Elbow Spikes, Special Guest Permafetus Cletus
Sarx 2 Triumvirate Documentary. Events following the Three-Brothers war. Transport of False God remnants to Moscow, Indigo Child EMP bombings. His Breakfast Table Documentary. Dimensional storms appear over cattle cities in Old Siberia. Thousands of kilograms lost. How XixXix of Daeva guided his nation through the disaster and used it to his advantage. The Gear Wars

"Gosh darnit! I have to scroll through all this stuff just to get to my thing and, what, what year is it? 2119? 2119 and we don't have TV guide anymore? To heck with the corporations, man." Allen hollered, then chomped down a rat foot.

Violins and trumpets played a sultry tune from the television box. Soft seafoam pastels slowly flooded in from all corners of the room.

"Oh! Here it is, coming up!"

A humanoid appeared on the screen dressed in a skimpy green bikini. It was half real, half cartoon, and perfect in every way. It was one of millions of things that Allen exactly wanted.

"I hope Audrey is on. She's so good for me, but Jeff is okay too I guess. Jeez I hope it's not Taylor I don't even know what to do with Taylor!"

Allen began to pull off his pants.

14:30 15:00 15:30
DJINNIMAX XXX TAWDRY AUDREY - ENABLE 4D HEADSET AND TUNE TO CODE if you're reading this travel to SEXY! mexico city meet with our SLUTTY archivists

"Wait, wait no! What the heck! No! What is this?" Allen banged on the side of the bulky television box.

The screen flickered in an out. A tall, thin man in rimless spectacles addressed him. His hair was cut short, and his features were severe. He wore a long, green and gold robe, and carried a silver caduceus in one hand. The figure placed his fingers firmly to his temple.

Allen quickly pulled his pants back up.

"Hey! Hey! Are your sensors working up there? Piece of shit TV bots? This isn't my fetish!"

we have a plan and it's EVEN LEWDER THAN where we're going god GOBBLING help you if you can't get ENHANCED SENSATION with our archivists

"Get out of my TV, jerk! My world is fine!"

The man looked through the screen, into Allen's eyes. "I've broken through! Rally everyone that you can!"

"No!" Allen stomped on the floor, grabbing the TV at the corners. "It's my time now!"

The man in the television squinted through the aether. "Your time? What?"

Around the figure a mob of man-shaped creatures circled, seemingly frozen in place, then moving more quickly the longer the man spoke. The sky behind him reddened with the silhouette of some gigantic, tentacle-covered slug shape crawling in on the horizon.

Allen sat back down. "Oh, wait, I think I know where this is going."

everything will be just like THE VERY FIRST TIME it was AND INTRODUCING DANDY RANDY it will be A FREE TRIAL worth the risk of getting here

The man waved his hand, and the screen changed to reveal four men carrying a woman up the stairs to a temple rise. They dropped the woman limply on the ground, and each of them pulled out a dagger. Each of them plunged a dagger into her belly, then, the robed figures erupted in a stream of viscera.

The mysterious man appeared again on the screen, and dropped to his knees with one hand planted firmly on the ground. The golems suddenly broke through, the invisible barrier exploding in a globe of static. The monsters converged on him and melded into his skin.

In the distance, a massive, feathered serpent ascended from the temple in the distance, growing in size until it covered the horizon.

Allen scratched his head. "I'm really not into this, at least I don't think I am."

Allen hit the television again. It flickered softly and the screen began to dim.

how can you be happy FOR THIRTY MINUTES with the world BETWEEN YOUR FINGERS! the way it is?

Allen hung his head in between his knees. This mysterious hippy broke his TV.


Allen stepped outside when the light streaming in from the windows disappeared. Two massive reptilian eyes peered out at him from over the horizon. The skies over Old Kansas darkened as the Great Serpent coiled around the Earth, and fed the globe into its maw.

The Serpent's tired eyes stared back at Allen's. They sat in silence over the barren expanse for what felt like an eternity.

No. The Serpent thought, turning away.

Never again.

The Serpent uncoiled, pushing itself far away from the Earth, and toward the sun.


| Hub |

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