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 leaves the compound and steps into the fog-white snow. His feet sink with a crunch into the permafrost; it breaks beneath his weight. He is not deterred. He shifts his feet, freeflowing flesh make wide pads.

He cannot see the Machine. But he knows where it is. He has had to learn.

He reflects as he walks.

He is a single dot in a snow-white void. The freak cannot remember how long he has been here. The sun does not set nor rise; his light is a pallid and grey diffuse. The routine never changes. There is only the freak, the snow, and the others.

The freak counts his steps, small tongue tasting the cold with each word. 500 steps, then stop. Turn right.

It is a familiar beat. He and the jailer have practiced it.

He turns. 1124 steps to go.


A memory.

The freak strides out into the blizzard. He is proud and tall. His drive is great, his mission two days fresh in his mind. He is Ion's child; his faith is stronger than any blizzard in these icy flats. The cold keeps its distance.

He moves with purpose, a flame lighting the vast darkness. The winds roar and howl but their rage is nothing compared to his fire.

He charts the alien topography without care. The storm grows slowly, but he pays it no heed.

The Machine should be in sight. He turns left. He will find it. The blizzard does not abate.

The pale grey has turned to empty black. The freak's wide eyes gain no purchase in the frozen purgatory. He cannot hear himself think. The only sound is ice and frost and wind.

He feels the cold on his fingertips.

The freak does not know where he is. He does not know how long he has been there. He only knows that it is cold, and that the long night has come for him. He draws his flesh close and waits. He does not know what for.

A figure wrapped thick in parka approaches an abtruse cairn of snow and ice in the frozen wastes. It has been some time since the freak had been seen at the compound. It leans down towards the cairn with pick and shovel and begins its work.


313 steps to go.

The jailer had found the freak's frozen body, preserved and crystalline. She brought him back to the compound, where they had practiced the steps, set the path.

The freak looks up. Before him rises a squat tower of steam and steel. From here he can feel the heat of the Machine below. He pulls open the door and descends the slick wet stairs.

At the end of the stairs is a small room. It smells of rotting flesh and grease. It is wet with steam and oil, which cover the gears and barrels in a thin and shiny film. The room was hollowed out from the ice for maintenance of the Machine. The far wall is the Machine - a maze of gears and pipes and flesh.

The Machine is lashed together from gears and pitch and the corpse of a God. At the end of the earth it fires the kiln of creation. But its creators were hasty. They had to be. The Machine needs maintenance. The gears that turn it run rusty. The magics that bind it need renewal. The messages it screams need decoding.

The Machine runs hot. It is hot enough to kill a normal human, but the freak does not notice. He hears the rusted gears scream with every rotation. He frees them from their moorings. The screaming does not subside.

The freak sits, and begins to work. The gears must be scoured, the flesh must be sloughed. His fist ribbons into gossamer, chitinous strings that abrase the machinery. His sweat and blood mix with the oil and lubricate the gears. The rhythm of scour, oil, repeat becomes a quiet and mechanical littany in a maelstrom of noise. Its heresy runs down his spine.

He remembers Sarajevo. The profane machines that blackened the sky and the blasphemies they rained down on the followers of the prophet. He remembers the jailers and the librarians and the thing that seeped through the cracks made by the armies of men. Most of all he remembers Ion's face. The look in Ion's eyes. He could not place it then.

There is one gear left. The freak rises, and begins to assess the flesh. He is delicate and precise, relishing each moment. In every moment he feels closer to the promise of Ion, a network of flesh and sinew that cross the earth in warm embrace. If he closes his eyes he can almost feel his kin.

The freak stands alone in the room. He is touching the new, raw flesh of the Machine, waiting for it to speak to him.

The freak looks down at the last gear. In it he sees his kin, beholden to cold metal. A philosophy, a theology of the world. His saviour, struck down.

The freak places the rusted gear back on the Machine. He cannot bring himself to clean it. He cannot afford himself that heresy.

The freak leaves the room and heads back into the permafrost. He sees a huddled figure passing in the distance. One of the others, out of the compound.

The freak remembers the look in Ion's eyes. He knows it now.

It was fear.

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