Blood Rivers
Blood Rivers
Byㅤ VoiiiiiVoiiiii
Published on 29 May 2023 14:44

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

  • rating: +10+x

⚠️ content warning

It was only three hours ago that she was sitting alone in her tavern. The dimly lit room that once was full of joy and mischief quickly became full of sorrow and grief. Yvith's curse upon the land had caused a great famine; hundreds perished begging for food, only to be scavenged by those desperate to survive hours later. The tavern became silent. Of course, the occasional drunkard would walk in, but there was nothing but pain behind their conversation. She herself was grieving her sister, who had been missing since a week prior. She didn’t care if others chastised her for her burden drinking; it was the least of her concerns right now.

Suddenly, the turn of a doorknob broke the uncomfortable silence. “Excuse me miss, where are we?” A masculine voice called out from behind her.

She bemoaned, “Purgatory.”

The voice cried back, “My name is Gregory Flinte, I seem to have gotten lost. I’m not quite sure where I am.” The man then appeared next to her. “I live at 728 Birmingham Lane, could you take me there?” His figure became ever closer.

“Well, I suppose I can. It’s on my route.” She finished her pint of grog with one long drink. She approached the man and immediately found herself comforted.

“Thank you,” he replied, “shall we begin?” His hand stretched towards the woman. Despite the man’s strange nature, she couldn’t help but feel at ease around him. She took it without hesitation.


They began their walk towards their housing. “Miss, I never did catch your name,” the man stated.

“My apologies, it’s Rebecca Stone,” she never really enjoyed her name. Perhaps it was the formal nature of it, but she could never quite figure it out.

“Well, you’re a lovely lady, Rebecca.” She was immensely flattered.

“Thank you! You certainly are quite the gentleman!” she laughed and looked down in an attempt to hide her smile. It didn’t help that, when she looked back at him, she could see him smiling a mile wide grin. “Greg, how did you find yourself lost in the middle of the city?” she realized the bizarre nature of their introductions.

He sighed, “Do you know the Kingsman Tavern downtown?”

“Of course.”

“Well, I seem to wander quite a bit when I become intoxicated. It’s rather embarrassing.”

“Everything has been very tough lately; we have nothing to be ashamed of.”

Gregory flashed a coy smile, barely visible through the darkness. “I suppose we don't.”

They made it to Gregory's house in silence. There was a sort of ease about him, something that made Rebecca feel safe. She never really enjoyed silence, but this time was different. The silence was not a lack of conversation or confidence, but rather the result of a deep understanding. When they made it there, Gregory gave Rebecca an offer. “Care to come in for a cup? I make quite the tea.” She couldn’t resist.

She followed Gregory inside and sat down. He quickly came back with some tea and gave the woman a pre-poured cup. “Thank you, Gregory,” she gave him a smile. The man’s generosity filled a hole in the Rebecca’s heart that had be present for ever too long. She tasted the tea and it gave a sweet flavor, although a strange aftertaste. She remembered her mom saying that men never could make a good tea. “What’s your profession?”

“I’m a barber. Yourself?” He took a seat next to her.

“Nothing of importance.”

“Rebecca, there’s no such thing as an unimportant profession.” He put his hand on her thigh. Her cheeks turned to rose. Her stomach began to feel as though it was floating. She couldn’t focus with everything that was going on in her body.

“I-I’m sorry. Give me a moment, it’s been a while since I’ve been with a man like this.”

“There is no need to apologize. I understand.” He removed his hand from her thigh.

“Thank you.” She took a few moments to collect herself. She felt herself getting tired. Perhaps it was because she felt safe for the first time in over a century. “I’m sorry, where were we?”

“Your job, if you’d like to continue.”

“I’ve never told anyone.” She began to tremble.

“We can change the subject, if you’d like.”

“No, it’s-it’s fine.” She took a deep breath. “I’m a thief. The owner of the tavern you found me in, the Manna Pub, he was in the back when you found me. I didn’t pay for my drink.” Silence flooded the room. “I should go.” She stood up, but before she could take a pace forward the man grabbed her hand.

“Rebecca, we all have our demons.” Gregory’s unrelenting support of Rebecca soothed her.

“Thank you.” She sat back down, but felt immense pain in her forehead. She placed her hand on her head and winced.

“Is everything alright?” Gregory asked. She tried to answer, but could not find the energy. She collapsed on the couch as she saw him try to catch her.

Rebecca awoke with a throbbing pain in her head sitting in a chair. She tried to see her surroundings, but all that came was a blur of darkness and the poorly defined silhouette of a man only a few paces in front of her. In trying to stand, she found herself restricted, although she could not tell if that was a matter of her frailty or something physically restraining her. She tried to speak, but something was restricting her from doing it. It was like some sort of spell. As her vision slowly began to clear, she realized she hadn’t seen her body yet, and she was horrified of what she’d find. She eventually gained the strength to look down and, to her relief, her clothing seemed untouched.

The man turned around. “Oh good, you’re awake. It’s not as exciting when they’re asleep.” He grabbed something from the table from the same table he had the tea on. The woman had a sliver of hope. Where am I? Perhaps he thought I was a witch? Will he untie me? But why would he want me awake? Vomit began to swell into her mouth like puss out of a wound.

The man placed the object firmly on the woman’s left wrist, not but two centimeters away from one of the ropes restricting her. He pressed into the woman’s skin and slowly began carving the object further along her arm. She noticed her arm started to take on a vermillion pigment, but she could not conceive as to why. It felt as though it was some sort of night terror; nothing happening quite felt real. As her vision fully, cleared, she noticed that her skin had been pierced from her wrist to her forearm by what the man was holding: a scalpel.

The man had turned over an hourglass on the nearby table. The man took notice of the woman’s ever-widening eyes. “As the last grain falls, so will you.” She could not tell the difference between the tears from her eyes and the tears in her skin.

He began to take his tongue and followed the line the blood was making. “Delicious,” he didn’t even look her in the eye. Maybe he’s a vampire? No, he would’ve bit me, and his teeth aren’t sharp enough. The gentleman repeated the process with her right arm. The woman could not help but writhe as he went further along. With her numbness starting to dissipate, every centimeter further along her arm became more and more painful; each cell of her flesh dying was accompanied by the feeling of blood leaking into others. She tried to scream, but nothing came out. It was as if she was able to scream the essence of silence. She tried so much that she became lightheaded — more so than she already was. By the time he had finished, her left arm was once again covered in blood. “Fantastic,” he muttered.

He began to peel back the woman’s skin, exposing her veins to the elements of the room as blood began pouring out faster and faster. Please stop. Please, Gods, I’ll never drink again, I’ll never steal again just please let this end. He gently traced his finger along her open flesh. He glanced over to the hourglass; his time was almost up.

“Well, I believe it is time we part. Farewell.” The man grabbed a butcher knife and slit the woman’s throat. He began to kiss her throat softly, allowing blood to flow between his lips and her neck. The body went limp, and he saw the last sand had fallen. He sighed. “Never enough.” He grabbed a hatchet to his left and began to swing towards the woman’s throat. With just twelve swings her head had left the rest of her body.

The man set down the hatchet and walked over to where her head was. He softly kissed it on the lips with blood filling the gaps between them. He took her body and dragged it back to a park covered in shadow. The head, however, had its flesh burned off. He took what remained of the skull and went into the basement, where dozens of skulls decorated the shelves. He added one more, and she was now no further than a meter from her sister. He gazed at the wall for a moment before going to clean up the blood.

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