rating: +26+x
Published on 23 Jun 2022 17:05
rating: +26+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; }


I like to divide things into pieces. I would recommend it too, makes tasks easier. Have you ever heard that? Maybe. Probably not. I’ll lay it out for you.

Think of yourself doing a triple jump. May be difficult in the condition you’re in, but I’m sure you can handle it. Active imagination and all that. A triple jump, as the name suggests, is made of three tiny jumps, each getting bigger, yeah? Each one builds and builds your momentum, until you’re flying through the air, past the carriages and bobbies. They’d think you’re a bird of the night, if they ever caught a glimpse.

Now, think of yourself doing a long jump. Think of yourself sprinting along roof tiles, speeding up. You can barely see, only hearing your heartbeat in time with the ‘clack’ of your boots. Yeah, it ain’t an Olympic track but trust me it does the trick. Nothing like a little scare to get the heels springing. Then, you reach it. The edge. You slip and fall and break your neck.

Sorry. Couldn’t help myself.

You reach it: the edge, and you leap, like a frog with wings. The rain and the wind hate you for it – so do the roof tilers, but you can forget about them – and you land. You’re on the other side, triumphant. You’d definitely get a gold medal for that performance. See what I mean?

Fine. I’ll spell it out another way.

Think of a building. How bout’ the pub opposite your place- yeah, the place where we first met. How long since then? Couple hours? Right.

You know, I’ve walked above that pub once. It’s inviting. The lights flicker and jive to an imaginary rhythm, casting shadows that dance on the street outside. I don’t have a shadow myself. Mum said I was born that way. Makes the work easier.

Oh yeah, I was sayin’. The pub is made of bricks and wood, each piece holding up the next. If you remove one, then the whole place falls down. To make a pub you can’t build the roof first, you gotta start small. When I was little I thought they built them all in one go; I’d never seen a buildin’ site.

Get it yet? No? I’ll give a personal example.

A laugh is usually the first step. When you’re travelin’ alone, tightroping between lamppost lights with the moon on your back, the first step is usually a laugh – they’re easiest to hear. They say it's contagious, you know? People’ve been sayin’ that for as long as I remember. It’s funny, I’ve always thought of it like a disease – it contorts people’s faces into making a sound akin to retching. It spreads when you’re nearby someone else.

I’ve seen people laugh so hard they died.

Never believed the phrase though. If it’s true then I’d be immune. Fat chance of that.

The next step is a-

Nah, I got an idea. I wanna try something. You laugh. I want to see if it can spread after all.

Come on. We ain’t got all night.

Don’t feel like laughing? I’ll go. Haha. Hahahahahaha.

Don’t make that face.

Next step.

A smile. A simple smile. None of that fancy laughter. Just a smirk – maybe a grin, if I’m feeling like it. I read somewhere that ambush predators bear their teeth before they strike – I think about that sometimes. Then, I climb down, like a spider silently abseiling its silk thread. I cartwheel off the rooftop, I dance down drain pipes and somersault past windowsills, as if I was an acrobat and the roofs of Dezmond were my circus. I’m smiling all the way down.

Third step. Step three. Paying attention? Good.

As I land, my boots splay out on the cobbles. I walk like a freak, a fraud. My steel-tipped heels are obedient; I become silent at will. At this point, they’re still laughing. I like to say something short, get their attention. Allows me to express my creativity, you know? I know the one I came up with for you wasn’t my best. What can I say? I’m a hyena, I like to make jokes. I’ve always thought I was a creative type. No- not a Shakespeare. More like a Tennyson. You know the Kraken? Nevermind.

Anyway, they’re all confused. Some think they recognise me – they don’t, but they might’ve heard my name, here and there, in whispers. Or in the morning news days later, when they find my leftovers.

The drunk ones think we’re friends. Makes it worse.

Under the moon, in those tight alleyways, all I hear is a muffled scream. Insects are swarming under gaslights. They’re the only ones who see it happen, but they can’t talk.

You know, together those first two always sound so nice. A laugh? How wonderful. A smile? Beautiful, I love seeing your decaying teeth. But when you add the third step? Everyone panics. In my opinion, it adds flavour. Can’t make a square meal without the three essentials. Then again, who ever asked for my opinion.

A laugh, a smile, a muffled scream. It has a nice ring to it. Speaking of, the Church bell just rang.

One. Two. Three.

Huh. I thought it’d be earlier, you haven't been here long.

Next step – last step. Do I even have to explain this one? You’re here. You already know. What am I saying, you can’t even speak! Struggle if you agree.

I’m glad we could come to an understanding.

Last step. What? You thought it’d only be three?

I bring them home.

Yes, you’re not the first.

I bring them home and make them dinner. I read to them. I talk to them. I care for them when no one else would. Then, after a while, I become bored of them. There’s only so much you can say before you say it again. A new face makes the words change slightly. You know what I mean.

What happens to the old ones?

I like to divide them into pieces. Makes it easier to… you know. I don’t like to say it out loud. People get the wrong idea.

I don’t often give advice.

I’m a listener. Most of what I say comes from others. Sometimes I’ll put my ear to a hollow wall and listen for days. I’m normally careful. You thought I was a rat. Want to know what I heard? Sorry, I couldn’t tell you if I tried.

I sometimes hear things people aren’t meant to hear. I can hear the night before a heavy rain. I can hear the air turn cold. I can hear a smile. I can hear that smile turn to a frown. I can smell the worry in their eyes.

My favourites are the ones with grey eyes. I can pretend their grey reflects the grey of the city, the sky; of the cobbled streets and stone cathedrals. I can pretend so well it becomes real, and one day all my hard work might pay off.

You don’t have any idea what I’m talking about, do you?

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