Old Kansas Sector ~ 5: Sinopec Dark
rating: +48+x

rating: +48+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 explores SinDark.☦

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

Everyone knew about Sinopec Dark, shopped at one of their stores, or had one of their products in their home. By 2100 SinDark, as it was often called in shorthand had bought out most other companies in the world, save for Wondertainment & Cools. In 2050 they merged with the newly public Dark Enterprises, formerly a collectively owned business dealing in fine luxury goods and automobiles. Also absorbed was Prometheus Factory Inc, formerly known as the Factory; the world’s largest producer of medical equipment and pharmaceuticals.

SinDark had a less than sterling reputation, and in 2090 they were publicly outed en masse by the Manna Charitable Foundation for their natural and human rights abuses. Unfortunately, there was little anyone could do to stop a company that virtually owned the world.


Allen stood now in front of one of their decrepit Mega Centers, each a retail colossus with on site manufacturing and food production. The three story building and each of its 561,000 square foot floors dominated the downtown plaza.

Here at Sinopec Dark, we Cut Out the middleman.

Against his better judgement, Allen picked up an old dusty flyer underneath a flickering streetlamp.

Mulhausen Body Butter 魂34.99 - You’ll Never Feel Better!

He hated the copper smell of that stuff.

Whole Milk 魂34.99 - PSF CERTIFIED ORGANIC.

Chuck Round: 魂24.99 per kg - Meat made from real, happy cows. Vegan.

Butterfly Pork Loin: 魂43.99 per kg - Maggo’s Old Fashioned Lab Grown.

Pink Federal Meat: 魂1.99 per kg - The ethical choice.

Federal meat was delicious, even if it was seventh generation.

Avocado 魂620.99 per kg - Get them while they last!

Allen was interrupted by a tap on the back of his head. In a jerk reaction, he twisted and jumped away, only there was nothing behind him. He looked up to see Grammie’s enforcer pointing at the back of another enforcer’s wrist.

It’s getting late.

“Right, yeah.”

The sun was just halfway sunken into the horizon. Allen turned around and peered into the windows of the foreboding shopping center. He could spot figures crawling around in the ceiling mirrors, looking back at him. Allen glanced at the doorways of broken glass, and caught another in the middle of its peep show. But there was nothing to be seen in the hallways, and nothing behind the doors.

Toms. Stupid, annoying Peeping Toms. The whole place was filled with them.

“What do you even do!” Allen yelled at one as it quickly skittered from view. They crawled in his peripheral vision as he made his way to the main entrance. Allen ruffled his hair and took the slugger to the window. As he chipped away at the stripped glass he was taken by surprise by a massive, buzzing insect in the corner of his eye.

He turned around with a start and scanned the sky, but saw nothing. Allen grimaced.

He knew better than to pull his flashlight out. Among the corpses and dried bones of the humans and Changed there wasn’t much to fear here. He knew that monsters were territorial, and where one type tended to group, others wouldn’t. The exception to this rule were the Shadowmen, who went wherever they pleased. The sharp angles of light gave their nebulous forms physical presence, and that made you vulnerable to ablation. It was acceptable to avoid these things, as fighting them was costly. In addition to this, Allen wasn’t devout - he couldn’t execute the Barclay protocol and bless his slugger. It was better to accept the dark when he could, and he was lucky to only be dealing with the almost peripherally-natured Peepers.

Allen hollered into the store as loud as he could.

"Honey, I’m home!”

This survival tactic was hotly contested among new age survivalists, most left it to personal discretion. The lack of a response from potential squatters made Allen feel a lot better about taking his first steps in.

He wondered to himself if this person he was rescuing was a person, or a Changed. He wondered if he would like them. He smiled softly as he threw some bags of Federal Beef into his backpack.

“Anyone home?” He shouted as he made his way along the edge of the rotted produce garden. “Anyone at all?” But there was no response. Only the dripping of old pipes and the soft buzzing of some shy and not quite tangible insect.

It was too dark to make out the particular shade of the enforcers, but he wasn’t quite sure Grammie would help him along every step of the way. She was old fashioned like that. A guy needed to learn to take care of himself.

Occasionally Malo would appear in dark corners and behind empty shelves, but she was mostly useless. A little creepy, too, and a little bit too clingy for Allen’s taste. He thought downloading her through the net would make things a little less lonely, but most monsters just didn’t know how to interact with humans.

Malo breathed heavily behind a stalk of long rotted avocado.

“At least say hi! We’ve known each other for four freakin’ years!”

Malo disappeared.

Allen looped the corner and made his way toward the still dim lights of the stairwell. He paused for a moment and looked around. Behind him and through the aisle he could just barely make out the entrance to the store. Night had fallen.

In the dark he could make out a soft noise… someone was crying. He moved toward the bakery and the noise tapered off. “This is going to be interesting.” He whispered to himself as he turned back toward the elevator lobby. The sobbing was louder as he approached the base of the stairs. It sounded like a woman.

Three floors. He hoped it wasn’t too much of a walk.

The thought that he could find a computer passed his mind, as well as the thought that he had forgotten to pick up some vodka.

“I should really make a list.”

He spotted the royal purple and gold plaque, a directory of services and a map of SinDark’s floor plan.

F1

B1

B2

| Hub |

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