Waltzing on Air
Waltzing on Air
Byㅤ Fish^12Fish^12
Published on 23 Aug 2022 23:58

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

PRESeNT DAY


A list of things to come.

A staff of mahogany petrified, hewn from the corpse of a limb borrowed from the Iberia's Botanic Gardens, owned by the Grand Constable of Preservation. A debt from a friend, one that could withstand a sum of aetheric strain.

A silken coat, darkened with coal dust and soot. The length was long enough to trip her, a design oversight that was gracefully subverted with a bold pleasure for levitation.

A conical hat, hand sewn over the course of thirty minutes. It was nothing special. Of course, it was always the little things that meant the world to everyone else. Indicative of evil rituals, of sinful bribery, sexual deviancy and satanism.

The triad of a name she kept, in safe harbor, WITcH.



A CYcLe aGO


A hope that remains yet unanswered.

She sighs by candlelight, and dispels its flame. The thick curtain of darkness recedes and her eyes flex catlike, she can begin picking apart the outlines of her fellow sisters, a sisterhood forged in orphanage, and then sent off to a nunnery. Gentle snoring reminds her of the pious, respectful faithful, all of them strangers in her holism.

I need sleep.

Yes, God demands it.

So why can't I sleep?

She wraps her blanket tighter around herself, curling up in the light of the moon. It is but a pitiful comfort, irritating against her bare, pale skin. Still, she pulls in tighter, hoping the texture could put the mind off such inconsequential matters. She is a child of God. No less. No more.

She worms her way deeper into the cloth, deeper into the bed. She mumbles a lullaby, most of the words empty, mimicking distant, foreign tones. She forces a recollection, a choral ether of the bosom of a never-was mother, comforting a wailing babe mid-service. The face forgotten, time immemorial.


Shiff.


Another sound beggars attention, providing her involuntary vigilance an imprudent absolution. An unusually soft, almost imperceptible thrashing of cloth against iron and blasted concrete. Coming from above, outside the window. Outside?


Clack.


She flips the blanket off and stands on the headrest of the bed, just high enough to peek between the ironwork of the vaulted windows. She steadies herself on the cold bars, and spots an imprint against the simple clefted rooftops. Blackened, barely perceptible, it blurred across rooftops, like a cat pouncing upon a strand of cattail.


Shiff.

Clack.


Almost comforting. The little moth would billow at landing, like a bubble in dark wine, before bursting, returning to morning glory like fashion, streaking against the night sky once more.


Shiff.

Clack.


Shiff.

Clack.


It vaguely occurs to her that maybe she shouldn't be standing, as her blood slows to a crawl. She lets go of one of the bars to stifle a yawn.


Shiff.

Clack.

Shiff.

Clack.


She falls back onto bed, wishing for it to never end.


Shiff.

KRRASCH🗲






































Shup.

Shiff.















Crack.


The echo of a footstep on brick, cut short by the ledge, too much like the overhang just outside, too close for happenstance.

Among the breathing of her sisters, another whittled its way into the darkness, controlled, this time deeper, foreign.

As if to prevent enumeration, she stops breathing, stops moving, hoping her heart stops beating. One more, one less.

She shuts her eyes tight.






























Neophyte, come out.















You are safe in there. No harm in looking.

No one stirred. The voice trembles, harmonizing with itself, deafening, crashing, and yet not one noticed its presence. Not one, except for the child it was intended for. A parcel with one name.

Witch! Hellfire! Temptation!

Magic.















Fairer thee, it is past bedtime.

Wait.

Hellfire!












Determination.

Are you a witch?





























How many cycles have you weathered?

I… don't know.

Well, how spritely you are. Could I have a gander?















Shuffling. Creaking.

She slowly gets up, nervously silent, her ears turning red from phantom embarrassment. She pokes her head out, this time steadying herself on the ledge, shying away. Her eyes adjust to the moonlit outline, a flowing, effervescent shadow, unknown in heft.

A half cup angled back, a conical hat, blended perfectly with the robes, revealing a pale teardrop face. Carven limestone, the visage almost mask like in symmetry, the lips are pursed, puffed in precious novelty, shaded in peach tones. And almost imperceptibly, half obscured by the flippant curves of cloth, the eyes seem to sparkle with infinite depth, an impermanence of matter.

The witch bends down, crouching forward to take a better look at her.

Lovely little thing. Are you afraid?

She slowly shakes her head, stunned.







How reserved. A quality ever desirable in our line.

Reject!

I'm not a witch.

The witch tilts her head, resting it against the pillar. Her smile twists wistful, teasing, hinting at a wisdom of something more, a puzzling, archaic piece of bait swayed pendulously before the ego.









Might I trouble your egress?

Witches can't enter churches.

How could I forget? Nay, trespassing is untoward of me. I must have an invitation.

But…





Might I suggest an alternative?









Don't entertain it.

Like what?

There is a shuffling in her robes, like hollow wood cracking, a static crunch of phosphor, all clamorous oddities, crowned with the unveiling of a hand. It reaches out, half penny sticks of chalk, translucent nails unblemished, unscratched, yet exalted and sovereign. It lays beyond the bars, unclenched, cupped. In clear reach.

Will you entrust yourself?




You would consider it?

Judas!

Ungrateful, petulant, child!




How dare — !

As she reaches out, the brick and metal begins to pull away, stripped of all physicality. Like the bloom after a stone thrown into a lake, frozen in space, they form a portal where wall used to be, framing the witch. Hand still in hand, a support for her to step off, first on stray bricks, and stopping.

She stares at the drop, and then back up at the witch, who nods at her.

And like a waltz, the witch gently offers her other hand, taking whimsical, levity steps. One arm held above her head, the other suspended by her side, step, step, step, to the tune of an orchestral pneuma. She watches her nightdress masquerade as a cloud, lithely swaying as the witch guides her forward.

Step, step, step.

She holds her breath, gasping on occasion, a stray giggle escaping her personage. The exhilaration of defiance and success, so above that she can spot the gatherings of crows and ravens, watching from below, idle, hidden from the dimmed lamplights, an entire world unbeknownst to her.

The dance escorts the two over the bakery, the inn, the town hall. An arc tracing the courtyard, in full view of everything the tiny town had to offer. The many crooked alleyways, the canals and bridges, all the forgotten wells and walls. And finally, back to the monastery, this time resting on the grand bell tower, above all else.




















Breathless.




Are you fatigued?

Yes.

Amour propre, it was your magic, dear.

Oh.



















What will happen to me?















You are so much like yourself. I know of only one path, for such a special demoiselle. Do you have scholarly ambitions, perhaps to become a witch?















Will you take me?

You would venerate me.

Okay.






















Your name?

Hecate.

How felicitous!















































Are you sure?

As sure as the moon in the heavens.






























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