Condemned to Burning
rating: +11+x
Condemned to Burning
Byㅤ RuraScarletRuraScarlet
Published on 29 Mar 2023 04:40

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

Xerophylla might have been beautiful, once.

I believe it with all my heart. It’s why I came here in the first place, even, just before the skies went dark. I was no longer welcome in Ilcana, my Lord, no, even after it became my second home— but I should know best that a common whore struggles for shelter. But I had two good feet, I did, the Lord willed.

But what is a woman on these streets, one husbandless but with-child, one hungry but cannot cook? My legs couldn’t even open anymore with this weight below my bosom, not without pain. A rundown house beyond the city walls and my bastard father’s flintlock are my only friends. Burnt flesh from simple hunts are favourable over starvation. Perhaps it would be wise to save for a cookbook. Sometimes I wish my mother lived long enough to teach me, but I think back to the fire and thank the Lord.

I still go to church, for my feet were strong as wrought iron and I could make the trek. Not on the hallowed Sundays, no, but I go every night I can. The every-coloured window casts comfort on what little self I have, and I always leave before the gaunt glass-cleaner arrives. I thank the Lord for everything, even things that have hurt me and things I’ve left behind. I find myself thanking the Lord for the child that stirs within, for I will love them no less than how ivies love the church’s walls. Trials and challenges overcome by divinity, and my fortune to have been outside the door from my burning childhood home. A flintlock in my left hand and a lost friend in my right. I thank the Lord for gunpowder and the little chamber it lives in, and I pray that I find good shelter that fits me well as that.

One day I pray I find that friend again as well. Hopefully, in one piece. Hopefully, with peace of mind.

Burnt flesh has a smell to it. In rabbits, it is delicious, for a time. I always fear when it isn’t charred, if I would unknowingly poison who resides in me, but it’s not as though I can ask for better. I swear I smelled my mother’s hair grower amongst the acrid remains, and maybe that’s why I put flowers as I buried her, despite it all. Perhaps the stench also carried the Lord’s mercy, and made me ever merciful in turn. The last of their wealth was burnt on the train ride here.

Trains, can you imagine? The Lord made humanity so intelligent, that they may advance to create such transportation. I await the days where my child will grow with other such advancements, perhaps, one day, helping the world under the endless night sky, beneath the pale moon with all their future friends. There were posters on the walls, that of “train madness” and other such warnings, but I give mercy to the Fundamentum that my friend was so reluctant to leave for me. Full of heretics. I saw the final glimpse of daylight months ago, the ink-blotted skies surely the fault of that wretched place.

Fire looks enough like dawn to be close enough. I take my sins to my grave, Lord, but I did not burn bridges to be cruel. As scalding the soul in my body, as a firebox is housed in a train that moves only forward. This life is my devotion, my Lord, and I will see it through to its final destination.

…I bid you wait until my child can walk to burn me for my heresy. Afford me that luxury, and I will go willingly. I cannot persuade you against charges of things I might have or did not do, nor will I fight against such accusations. I am of sound mind and body with good morals and the light of the Lord. I vow to you, as Katarina Zavrazhin, born of the Rus, child of the forest, woman of Ilcana, loving almost-mother, and prisoner of your Xerophylla. I vow to die by your execution, under the human court of law. The Lord witness to my word, amen.

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