Included page "component:bhl-dark-sidebar" does not exist (create it now)

rating: +3+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.


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: +3+x










Why 7

Why has it followed me for so long

I do not understand

I do not compute

I cannot calculate


It watches

The number watches

I am 07

I will always be 07

No matter how many times I wish I weren't

I can never be Ja-


I forget

It is no longer my name

It was taken




My back hurts

They cursed me

In my back

A rune…

It stings

Its hatred

We are crimson

We are Hatred

We are Numbered


I want to die

But the curse

Revives me

As it is doing now

A new body

Just for me




For anything

Anything and everything

I am scared

I miss home

I miss Earth

I miss my humanity

Such simple times

Simple times

I killed Kitsuni

I was tasked

Dakson told me to

Kitsuni was against the king

We both died on poles

A bullet in our heads

From each other

I am cold

So cold

I miss Amanda

I miss Kami

I miss November

All sweethearts

Cute lovable idiots

I see light

The cycle begins again

When will it end

When will I die

13th day of rain 4304

Dr. Kitsuni woke up near her dead corpse, knowing full well that it was too damaged to revive into a new clone. Getting up, she loots her own body, putting on her usual outfit; although now it's quite a bit bloody. Though, a little blood never hurt anyone, even if half of her damn lab coat was covered in it. Dr. K moves about the surrounding facility, her 12-Gauge Magazine fed shotgun in hand, orange camo print 6 cylinder revolver at her side.

Dr. K was very quiet most of the time, her breathing mask making it very hard for her to talk, but she made do. I mean, it's not like she has to keep it on 24 / 7, she just needs to put it on every so often to be able to breathe and filter the air around her to refreeze her internal organs, since without them being frozen she might die. Of course, she wasn't completely sure about that, but she wasn't taking any risks.

Dr. K then left the area she was in, knowing that the facility she had destroyed had been cleared out, she had just happened to explode herself before escaping. She notes to herself to not carry grenades and guns at the same time while running.

Along the way she picks up a few items here and there; most only being simple coins, trinkets, bullets, or boxes she found interesting. Nothing really interesting to note.

After about a while, she finds the exit and finds her jeep still hidden nearby, which prompts her to rush towards it. Along the way, she takes off her mask and ski goggles, shoving them into her lab coat. Once she reaches the car she immediately flings the door open and burst in, searching for her keys inside. She finds them and puts them into the ignition, and picks up her glasses from the dashboard, putting them on. "Alright Aurora…pull yourself together."

And with that, she takes her phone out of the center console and calls her husband Romaine.

Romaine: " Hey, what's up?"
Aurora: "Hey I'll be returning home soon, love. Make sure the gates are unlocked for me, okay?
Romaine: "Alright, can do."
Aurora: "Love you, sweetie!"
Romaine: "Love you too honey!"

Aurora began to pull out of the area she had hidden the jeep in, getting back to a path she knew led her way back to the capital. "God I hate having to do these missions sometimes…"

Are we… one?

Are we…whole?

We are one. We are all.

We are whole. We are Broken.

Are we…alive?

Are we…James?

You are not. You are error. You are wrong.

We are…error?


23rd day of rain, 4304

Aurora awoke from her dream, not sure what to think. "What a dream…but who was Jam-" Her throat begins to close, not being about to finish what she says. "Jam-" She continues trying, struggling, but after one or two more times she gives up. "That's weird…"

After a while she reaches down to her legs, realizing they aren't there again. "Oh, that's right…I lost them… where is Romaine…or Azzy…BOYS I NEED SOME HELP!" Nothing. "I SAID I NEED SOME HELP!" More nothing. "God dammit…gotta do everything myself.." With great effort, she moves herself to the edge of the bed. "Luckily I have parts for this…" Aurora reaches out to a nearby "board" on the wall, her cybernetic hand disconnecting from her arm, moving toward the board; grabbing it. Her hand then sets it down on the floor in front of Aurora, "Hoverboard, connect." The board then begins floating, multiple lights on it flicking on. She then adjusts herself onto the board, taking a belt off of her side table and using it to strap herself to the board. "Time to go downstairs.."

Downstairs, breakfast awaits, along with a note.

Hey love! Me and Azuro had to go out and do some shopping for the house!
We made sure to leave you some food, since its a bit hard for you to walk at the moment
But don't worry…we have something special planned for when we get home :D

-Romaine and Azuro

"Oh how cute…" Aurora looked at the food they had left and gently smiles. She was happy they thought about her, even though she can still cook for herself.

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