Old Kansas Sector 1: Farmhouse
rating: +103+x

rating: +103+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: 12, August, 2119 AD
Sylvan Grove, Kansas, USA

Allan had closed the shutters that night due to the swarms, and slept restlessly through the assault. He woke up the following day oblivious to the trial of the last night for a few moments, until he saw a small, circular hole letting sunlight in through his boarded window.

The crows were diligent.

He lived alone in his grandmother's old farmhouse. She had a chicken farm and she would sell eggs at the farmer's market while she was still alive. She was taken by a monster a few years ago while she was making a trip to the city. He wasn't sure of the particulars, but he really didn't want to know the rest. The Public Safety Foundation sent a notice that she was killed by a Shock Creature, and that death was quick. Shock in this case was meant to imply inevitable death.

Allan opened the window and saw the small, dead city of chicken coops covered in dust and old bird droppings. Out beyond was the great nothing of Old Kansas, shallow rolling hills and dirt.

The farmhouse was old. 200 years old at least, and he was grateful that it was so sturdy. The only thing he ever had to deal with on his property were the crows.

He had butchered some rats last night and found them where he left them in the cupboard. The meat wasn't all too bad with the right spices, and the innards were actually quite good. You just had to remember to boil them. After frying the meat, he sat down with the food on a nasty old plate and turned on the TV.


A young man in a raggedy brown vest was shown walking down an old, dusty road. He had a spade shovel holstered at his side and a large backpack.

Words in red and all caps appeared rushing toward the screen.

PUBLIC SAFETY TIPS: OLD KANSAS SECTOR

ALWAYS CARRY A BACKUP WEAPON.

An eyeless, hairless, rabid dog appeared down the road and began galloping toward the young man. He aimed his revolver at it, and it clicked. He rolled his eyes, hefted his shovel, and delivered a fatal blow to the dog thing's head. He hoisted the shovel over his shoulder and gave a thumbs up toward the camera.

"It's easy!"

ALWAYS CARRY A DAY'S WORTH OF FOOD AND MEDICAL SUPPLIES.

He checked his backpack, finding that it was full of fresh apples. He gave the camera a wry grin.

"Safe and sure!"

REMEMBER TO BOIL WILD ANIMALS BEFORE CONSUMING THEM. DON'T EAT MONSTERS.

The young man lifted a strange, three-headed caterpillar creature, pulling his head away from it. He shook his head.

"No way Jose."

They called them monsters to pander to public sensitivity. But that was a good enough name for them. Calling them extranormal creatures and objects just wasn't an accurate way to describe them anymore.

NEVER CAMP OUTSIDE. SECURE ALL ENTRANCES TO YOUR DWELLING.

The young man popped his head out of a shipping container. He locked eyes with a statue just outside, and slowly pulled his head back in the door before slamming it shut.

"Impervious!" He said happily, face lit with a match.

He hated that so much. Now it was time for the important part.

NEWS AND UPDATES FOR YOUR REGION: OLD KANSAS SECTOR

BE ON THE LOOKOUT FOR CROW SWARMS. THESE CREATURES ARE NOCTURNAL AND WILL ATTACK YOU IF YOU ARE CAUGHT OUT IN THE OPEN.

Golly jeepers, if he didn't already know that. He rolled his eyes.

ESTIMATED HUMAN POPULATIONS FOR YOUR TOWN: SYLVAN GROVE, KS: 120.5

KNOWN HOSTILE EXTRANORMAL CREATURES AND OBJECTS IN YOUR AREA: 23

SURVIVAL RATE MONTHLY AVERAGE: 76.22%

WEATHER: SUNNY

THREAT LEVEL FOR OLD KANSAS SECTOR IS ORANGE. ENCOUNTERS WITH EXTRANORMAL CREATURES AND OBJECTS ARE TO BE EXPECTED

STAY TUNED FOR PROFILES ON KNOWN EXTRANORMAL CREATURES AND OBJECTS IN YOUR AREA.

TO ENTER A TICKET FOR ASSISTANCE, PLEASE CALL 911. TICKETS ARE RESPONDED TO ON AN ABSOLUTE PRIORITY BASIS.

THANK YOU FROM YOUR FRIENDS AT THE PUBLIC SAFETY FOUNDATION

PAID AND PROVIDED FOR BY MCF

STAY VIGILANT


He told the TV to shut off, and walked over to the coat rack. He grabbed an old, bloody baseball bat, and a backpack with a healthy supply of dandelion greens. He unbolted the door and let the fresh, purple sunshine warm his face. He looked out over the dead old farm with a feeling of longing and nostalgia.

But the forecast was good today.

| Hub |

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