A Terrible Thing

rating: +70+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: +70+x

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

Navigation:

1 | 2 | 3 | 4 | 5 | 6

The freak, the librarian, the spook, and the jailer are seated in a room in the compound. Once every six cycles, a meal aligns. The jailer arrived last. It is not the first time.

Their bodies are present, but their minds are elsewhere. Mired in past iniquities.

There is no conversation but that between utensil and plate. The only other noise is the low buzz of the generators.

The freak has nearly finished his third portion. The librarian is lost in thought. The spook is watching the jailer. The jailer looks at nothing.

All four of them see the lights of the compound shut off. All four of them hear the generators die.

The spook stands quickly and knocks his chair over with a metallic noise.

The librarian looks at the others, wild eyed and nervous.

The freak's flesh ripples. He is ready.

The jailer does not react. Her eyes are watching the spook.

In the anemic irregular yellow flashes of the emergency lights, the four can see the gun that the spook has pulled. It travels between the three but the jailer is its favourite.

The spook speaks first.

- Someone's a rat.

The jailer's voice is hoarse from disuse. - And this is how you convince us?

- Shut up! Shut! Up!

The gun snaps to the jailer like a wounded animal.

- I'm in charge. This. This was sabotage. Someone killed the generators.

The spook continues. - I saw someone. Outside, headed to the generators. Oh-Eight-Hundred hours, a quarter into the cycle. No one was supposed to be outside for another five hours.

The freak and the librarian speak over each other.

- And how do you know this?

- W, weren't you at the listening station at that time?

The freak and the librarian lock eyes. One wonders how the spook's location was known. The other wonders how it was not.

The freak breaks the silence. - Is everyone tracking the movement of each other, then?

The spook's eyes dart towards the librarian. His gun shifts towards them. He is loathe to move it from the jailer.

- Where were you then?

Their neck cranes back. Behind them. - I was in the Room. Since I woke up.

The librarian's eyes are wide but clear. The spook nods. He has what he needs. He turns to the freak now.

- And you? Are you the traitor? Why are you even here? So you could try and revive your dead prophet?

The freak's face darkens. The spook feels cold sweat on his neck.

- Only one left then.

The safety clicks. Gun turns towards towards the jailer.

The freak begins to stand. The gun jumps back to the freak. The spook moves like a caged animal.

The freak speaks. - Why don't we all stop and consider? We all want the same thing here. I am sure there is no need for weapons.

- You? You think you conscience is clean? I saw what your dead prophet did. I saw the fanatacism in your peoples eyes. Don't fucking pretend you're a peacekeeper.

In the interminable silence only the jailer responded.

- You were there. At Sarajevo.

The gun sweeps smoothly back to the jailer. It is guided by steady hands. Anger has strengthened the spook's resolve. He speaks.

- Yes. I saw the skies turn dark with pitch. I heard His last screams. And I saw your slimy organisation ooze up right before it was complete and undermine our victory from us. Because you didn't think we could do it. Because you didn't have the balls to do what needed to be done. Like we did. Like I did.

- I see.

- I see? Can't you say anything else? Can't you be a fucking person for once and show some sort of regret for what you did? For forcing us into this hellhole? Day after goddamned day?

- There was only supposed to be one person who bore witness to Sarajevo.

The spook slams his fist onto the table, launching fury and utensils. The gun shakes with rage. It is a foot away from the jailer's face now.

Her silence says enough.

- I know what you are. You play all high and mighty like you're above it all. But you're not. You let others fight your battles for you. Deep down in your shriveled black heart you just want power. So you can crush everyone beneath you. A fucking boot stomping on the human race forever.

The spook stands triumphant. He knows he has trapped the traitor and there is only her confession left.

Her cracked lips peel into a smile. A thin rivulet of blood trickles down.

- Bold coming from you.

The freak moves deliberately. The spook moves on feral instinct and boiled over rage. He pulls the trigger three times.

Five things happen at once.

The first bullet goes wide. He did not concentrate on his target. A vacuum tube breaks from force of impact. The glass shards like so many stars begin to fall.

The freak's flesh flows like liquid across the table to grapple the spook. He catches the second bullet in a tangled gnarl of abscess and tendon.

The jailer moves fluidly. She grabs the spook's arm and runs it through with an unclean knife. Using the knife as leverage she pulls at the spook's arm where it does not bend. It is not a clean break.

The space around the librarian flashes a sickly green. The end of the table they were sitting at is gone. A high pitched whine sounds. It is redolent of things that man long forgot.

The third bullet finds its mark in the lower stomach of the freak. It bores a clean hole through his heart. The spook could not have known. Only the librarian knew.

The jailer wrests the gun from the spook's hand and shoots him in the head.

The glass shards of the vacuum tube shatter on the concrete like ice crystals.

The jailer stands. She walks around the spook's body that is now pooling blood and tracks dark red prints on the concrete. The librarian watches her warily but she pays them no mind. She stands before the freak, gun in hand.

The freak's vision fades in and out of white snow at the edges. He feels warm for the first time since he came to the compound. It is not as comforting as he remembers.

He sees the jailer loom above him. He sees her squat down next to him.

They have long exhausted words to share. In this moment there is only silence and an understanding.

The freak closes his eyes.

The gun sounds once, a dull thud.

He can no longer see the snow.

The librarian speaks. The jailer has not put down the gun. - What now?

- We continue.

- Was it you?

- No. Bad luck. Paranoid man. Shame. He broke so early.

The librarian moves quickly. Words in an old dead tongue spill forth from their mouth, the rush of pain and power and exhilaration filling the librarian. Leylines course through them, so easy when they are weakened by the Machine. The green light explodes past human colours and bolts towards the jailer.

And then something is taken from them. The librarian feels their connection cut abruptly jagged and cold. Alone, separated from their magic and the Library. Only the cold remains.

The jailer still stands, a gun trained on them and a dripping boot above a crude blood-etched rune that scratches at the back of their mind.

The gun is not loud enough to be heard over the blizzard outside.

Navigation:

1 | 2 | 3 | 4 | 5 | 6


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