Old Kansas Sector ~ 2: Tabloid
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.

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 reads a dusty old tabloid.☦

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

The organizations that were responsible for dealing with the monsters came into public view a long time ago. Back then, people were scared. There were decades of confusion and anger, with riots all throughout the world.

Then the First Occult war began, which was spurred on by the Phantoms, or Shadow People. The United States and Canada were ravaged. Every other threshold in the northwest became a highway for the creatures. Everyone knew someone who had their heart harvested.

Two years into the war, the Barclay document, which outlined how to destroy the creatures, was made public. People armed themselves with knowledge, and the war was finally won by the newly formed (and soon deformed) Canadian-American militia.

It was decided that every person must be educated, and trained from birth to resist their fears. In a few generations, the common man wasn't so afraid. He didn't respond to the bogeyman with fear. When something bumped in the dark, he bumped back.

A culture grew around destroying monsters, and being courageous in the face of the approaching unknowns and inevitability. That is why Allen, the young man from the farmhouse in nowhere, Kansas, was holding a bloodstained Louisville Slugger, and chasing a large, naked dog-thing down a dusty back road.

"Hey! Why are you running? Kill me!" yelled Allen breathlessly.

The dog-thing, which was colloquially referred to as a Bad Dog, galloped off the dusty road and into the woods, leaving a trail of green blood behind it.

Allen laughed a silent laugh, and smiled.

He shook his head and began walking further down the road, deciding not to pursue it any further. He was on his way to the city, which was about 15 miles away. He planned on finding some booze, an antenna, and a small laptop computer so that he could entertain himself on those noisy nights when he was stuck in the house.

He would also need to find a PSF signal filter so that the hostile, brain scrambling parts of the internet were filtered out, and things couldn't travel through his screen on the wireless signal.

He traveled listening to music on his PDA for five miles, passing old, rotting ranch houses. He knew he was near the highway when he neared the red house with the family of skeletons on the porch. He waved to the tallest one, and the skeleton nodded.

A bit of a ways down the highway, he grew bored with the songs, so he pulled a PSF care package that he had found earlier out of his backpack. It was one of about twenty littering the pavement back by the gas station. They sent drones twice yearly and carpet bombed known urban centers with reading material. He didn't really see the point of this, because they still had WiFi balloons floating around.

Maybe it was for old people who couldn't make their way to the city? Posterity? Oh well.

CLEF'S GUIDE FOR DEALING WITH BRAIN FIDDLERS.

Shucks. He wouldn't ever have to deal with warpers. He was in the middle of Kansas. Warpers liked to hang out in big cities and wastelands.

He skimmed the pages just to be sure.

KILL IT. JUST KILL IT. DON'T TALK TO IT. DON'T LET IT SEE YOU. KILL IT. IT'S NOT YOUR FRIEND. TOO LATE YOU'RE DEAD.

The text was repeated across forty pages.

He pulled out another.

THE BRIGHT GUIDE TO STAYING ALIVE FOR LONGER THAN YOU SHOULD

This one was just recounting of the safety tips he saw on the PSF band, with a little commentary here and there. There were also some jokes he already heard before. These things were at least thirty years old. Half the people who wrote them were dead, and he didn't understand how the people that were still writing them were still breathing. He threw them to the side.

THE INQUIRER 2118

Okay. He had never seen this one before. He opened up the seal and tore into it.

CONTAINMENT SITES FOR K CLASS OBJECTS: STILL OPERATIONAL IN THE MIDWEST?

WHAT'S GOING ON IN THE REST OF THE WORLD? YOU TELL US.

DR. MANN, FAMOUS RESEARCHER, GONE INSANE, AND INTO HIDING. READ THE EXCLUSIVE INTERVIEW WITH SPECIAL AGENT YORIC.

THE CHAOS INSURGENCY

He stretched, and looked off into the horizon. It was almost noon. He should be walking a little faster.

TEN MILLION HANDS: THE SECOND OCCULT WAR, THE MASS BROADCAST OF THE FORTUNE TELLER, RECOLLECTIONS OF THE A.W.C.Y. MASSACRE. THE DAY GRAMMY SAW THE WORLD.

EUCLID FLORIDA. LARGEST CONTAINMENT AREA IN THE USA IS SET TO BURST

NEW YORK: THE LIVING CITY

THE GREAT WITCH OF THE NORTH

NUCLEAR STRIKES, DIMENSIONAL TEARS, NECROMANCERS, OH MY.

NO HOPE FOR THE FUTURE.

WE OWN YOU.

GO WATCH TV.

YOU'RE ON TV.

He should really know better by now.

WE OWN EVERYTHING.

HOW WE KILLED YOUR GRANDMOTHER: THE WHOLE THING: ALL OF THE JUICY BITS.

He winced as he saw and smelled, on the last page, the sensational, graphic images of himself lying dead in a pool of blood and feces.

LAY DOWN AND DIE

YOU

LITTLE

SHIT

The last, unread headline fired loud, from a voice he did not know, ringing throughout his skull.

He threw the magazine away from him.

"Gah! Enough of this smut."

He shook his head and tried to remove the thoughts from it. He tightened his brown vest and began to march.


| Hub |

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