The Road To Arcana
The Road To Arcana
Byㅤ LORDXVNVLORDXVNV
Published on 22 Nov 2022 02:53
rating: +25+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; }
/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
#top-bar .open-menu a {
        position: fixed;
        top: 0.5em;
        left: 0.5em;
        z-index: 5;
        font-family: 'Nanum Gothic', san-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 0.9em;
        text-align: center;
        border: 0.2em solid #888;
        background-color: #fff;
        border-radius: 3em;
        color: #888;
}
 
@media (min-width: 768px) {
 
    #top-bar .mobile-top-bar {
        display: block;
    }
 
    #top-bar .mobile-top-bar li {
        display: none;
    }
 
    #main-content {
        max-width: 708px;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }
 
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -20em;
        width: 17.75em;
        height: 100%;
        margin: 0;
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.4s ease-in-out;
 
        scrollbar-width: thin;
    }
 
    #side-bar:target {
        left: 0;
    }
    #side-bar:focus-within:not(:target) {
        left: 0;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin-left: 19.75em;
        opacity: 0;
        z-index: -1;
        visibility: visible;
    }
    #side-bar:not(:target) .close-menu { display: none; }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
 
    /* FIREFOX-SPECIFIC COMPATIBILITY METHOD */
    @supports (-moz-appearance:none) {
    #top-bar .open-menu a {
        pointer-events: none;
    }
    #side-bar:not(:target) .close-menu {
        display: block;
        pointer-events: none;
        user-select: none;
    }
 
    /* This pseudo-element is meant to overlay the regular sidebar button
    so the fixed positioning (top, left, right and/or bottom) has to match */
 
    #side-bar .close-menu::before {
        content: "";
        position: fixed;
        z-index: 5;
        display: block;
 
        top: 0.5em;
        left: 0.5em;
 
        border: 0.2em solid transparent;
        width: 30px;
        height: 30px;
        font-size: 30px;
        line-height: 0.9em;
 
        pointer-events: all;
        cursor: pointer;
    }
    #side-bar:focus-within {
        left: 0;
    }
    #side-bar:focus-within .close-menu::before {
        pointer-events: none;
    }
    }
}

rating: +25+x

Dramatis Personae

Our UNNAMED NARRATOR, abandoned to the Fundamentum at the tender age of seven years, now eleven and on his way to the Arcana Institute of Xerophylla to become a Phlegm Trooper and fight the hordes of Darkest Evropa

FRIAR ALTO CLEF, caretaker of SCP-6248 and our NARRATOR. Plays the Ukulele. Introduced our hero to Jesus Christ. May have a deeper relationship with Jesus than it seems at first…

The Story So Far:

Our henceforth unnamed narrator is abandoned at Holy Site-6248 and adopted by the kindly Friar Alto Clef, who raises him in the ways of the Fundamentum but also in the forbidden lore of Jesus Christ...

country_road.jpg

The Open Road.

Far sooner than I could imagine, I found myself on a grand journey that went to the heart of Xerophylla, where the Arcana Institute and its wonders awaited.

The draft-beasts, long blind, huffed noisily, the high-pitched pings of their echosneezes mingling with their rough exhalations. In the endless dark of Xerophylla, I often wondered why they had gone blind, while we humans had not.

The Friar himself was escorting me, and we ferried a grand cargo of Muriatized Yvithphlegm, treated so that it was solid and might store. Though all the foundlings at the Yvithfont were to become Phlegm Troopers, the Arcana Institute welcomed many families into its ranks, many of whom had been drinking of the Phlegm for generations. It would not be proper, after all, to deprive them of the Holy Phlegm while they were studying for the glory and service of Xerophylla and the Fundamentum. So we brought with us two tonnes worth.

For the first time since my seventh year, a night passed in which I did not drink Yvithphlegm.


We followed the spidery roads, alone at first, but slowly the pants of our twin draftbeasts were joined by others, one set of echo pings. Soon we were part of a grand caravan, all students traveling to the Arcana Institute.

On occasion, we broke out in song, and raised our voices merrily. Our voices echoed across the darkened lands of Xerophylla. If there were any bandits, they must have heard, but only fools would challenge the might of the Arcana Institute.

And the world was full of fools.

We traveled for many, many meals. Our beasts were slow. Those of Blood or Choler could, in theory, power their flying Artifices, travel to the Institute in their mystical airships, but we were not so wealthy or as powerful, and it was, in a sense, tradition for first-years to make the long journey by caravan or foot, whichever they could. After all, we were supposed to journey into mystery in our state of ritualized ignorance.


I shared many meals with the companions we gathered.

On one occasion, I was eating Muriatized Yvithphlegm by the fire, a short distance from the Friar, when a pale girl about my age, her hair as red as the flame, approached me.

"What's that?" she said, pointing at my holy phlegmbrick.

I told her of my sacred nectar, the liquid I had imbibed every day for the past four years. She wrinkled her nose.

"That sounds kind of gross," she said.

"Well, who are you to call Ch— Yvithmilk gross?" I said in indignation. I had stopped myself from uttering that heretical name, Christ, in her presence.

"I'm Li," she said, crossing her legs and sitting in the moss next to me. "Wanna see some Arcana?"

"We're not supposed to hold any Arcana yet," I said. This, of course, was a half-truth, which Friar Clef had taught me. He had also taught me some Arcana, necessitating him also teaching me how to lie.

She snorted. "I come from a big family of Arcanists," she said. "Of course I know some Arcana. I've known all my life just where I'm going to go, in the Institute."

She didn't seem likely to let up in the slightest, so I let her keep talking.

"I'll be a Blood Talker, of course," she said, completely confidently. "My whole family is like this, as you can tell, and of course we're quite happy with our businesses and our lives, but there's really a certain joy in figuring out how people work, isn't there?"

I didn't know all that much about the Social Fire, and how it differed from the Burning Hollow. I said as much.

"Well, I wouldn't expect so much from a Phlegm Drinker," she said, with a complete and total lack of any tonal indicators of derision. "You're to be dumb muscle, after all — once you leave the Institute it's to Darkest Evropa with you, isn't it? To fight and die for the safety of Xerophylla. But enough about your fate. The Social Fire is of the contagion between humans. Blood is life, after all, isn't it? Blood is life and time and connection. As water turns hot in our veins, the social fire turns words into meaning to bind humans together. We're speakers, you see. Speakers and speechmakers. And I'll be rather good at it."

I had wondered, perhaps, if those of the Blood Class were predisposed to become vampires.

She looked at me with abject disgust that quickly morphed to condescending pity. "Well of course no one would tell you the truth about that, now would they? Vampires are leeches. They drink of blood because they cannot maintain the Social Fire on their own. That's true no matter what variety of vampire they might be."

She stood up. "It was certainly nice speaking with you. I realized I never got your name."

My name. "James," I said.

"Have you no surname?" she asked, one red eyebrow raised.

"If I had a surname, I no longer want it," I said, surprising myself. My family had abandoned me; I belonged to the Fundamentum now.

"Very well, James No-Name," she said. "It was very nice meeting you."


We traveled onwards. I would catch glimpses of her, once in a while, and at every meal she would approach a different stranger as she had me. She would needle them with her probing questions, speak at length about herself, and then tell them their conversation had been pleasant.

I realized, after a time, that what she said about the Social Fire changed with time. The large strokes remained similar, but the details that she chose to share varied. At one point, she even said that the Social Fire was a rotting disease in the bones of our language, and if she so spoke the correct words, she could cause her enemies to burst into flame.

The person she was speaking to, however, looked at her rather sallowly, and said that he could do that from a distance without ever having to speak to an inferior. She had departed him rather quickly after that.

I watched that other for a short bit at that meal. He was staring into the fire intently, twitching his fingers as he did so, as if he could bend the flames. I saw smirks of elation cross his face when the fire jumped and sparked, which seemed foolish to me. It was only coincidence, after all.

I realized that at some point that he had stopped staring at the fire and was instead staring at me. I made to approach.

"Well?" he said. "What is it that you want? Are you with… with that absolute sparrow?"

I did not understand the metaphor, but I knew him to be talking of Li.

"Mere curiosity," I said. "Did you truly think you could bend the fire?"

He sneered at me. "So you're here to doubt me as well, is that it, then? What rubbish. I should have insisted on traveling with Father to the Institute, instead of having to sojourn with the rabble."

He seemed rather full of himself. I was accustomed to the type, having seen many among the pilgrims to the Phelgmfont. They believed that because they were wealthy, they were of greater natural stature than I. I did not like this kind of person.

They all had a common weakness, however.

"Who are you?" I asked.

He glared at me hatefully. "I am Ashewort Nowak," he said. "Son of Damian. Of the Ancient and Noble Bloodline of Nowak."

"I'm afraid, your highness," I said, deliberately using the wrong form of address, "that I have no clue what you mean."

"I hate you peasants!" he practically spat. "I hate this, and I hate you, and I hate going unwashed! I hate how your ridiculous Phlegmbricks smell, and how you seem to think yourself my equal, and how you— how you— "

He did not seem able to continue, and he gazed rather intently into the burning fire.

"Are you alright?" I asked, walking to approach him.

"Don't touch me," he said, shoving me. I stumbled, roughly, and fell to the ground.

I pushed myself to my knees, shaking something fierce, but felt a painful warmth at my ankle. The hem of my cloak had fallen into the flames, and the mothsilk was igniting.

I looked frantically around for some water, my mind numbed by the pain, and I could see none. I could feel the Yvithphlegm saturating my muscles boiling and curdling, clenching about my muscles and bones, the holy strength they gave me becoming cruel vises upon me. I could feel that intense pain, that suffering, that agony, radiating up my leg as the fires consumed more and more of my cloak.

Ashewort looked around in a panic. "I didn't mean— I didn't," he said, as helpless as I was to find water.

"Stop it," he said pleadingly, though whether to me or the fire I was not sure. "You don't have my permission to do this. You don't have my permission to die."

The fire felt like it was consuming my entire lower half, and soon I would be entirely ablaze. I wondered where the Friar was, what bad luck I was undergoing, such that he could not save me with some miracle pulled out of his back pocket. Doubtless he was playing his ukelele and drinking frivolously, trusting me to stay safe.

"I said STOP!" Ashewort shouted, and suddenly the world around me became silent.

I opened my mouth to speak, and found that I could not; I tried to draw breath, and choked on nothing. I looked at Ashewort, who had raised his arms and clenched his fists, and who seemed as surprised as I was.

The fire had suffocated, deprived of air to burn.

He relaxed his arms, and as soon as he did so, a boom echoed through our camp as the air rushed back around me, buffeting me from all sides and straining my ears. The torches near us blew out, but the campfire stayed alight.

My clothes were burned, though I had replacements.

"Now look what you made me do," Ashewort said whinily. "I never want to see you again."

He turned his nose up and marched off into the night.


When I returned to our cart, I asked the Friar why he had not been watching, and why he had been so willing to let me risk myself. He scoffed.

"You would have lived long enough for someone to see you and douse you," he said. Then he handled me a carafe of Yvithphlegm. "Drink up."

I drank, deeply. Then I asked him about Ashewort Nowak.

He got a distant look in his eye.

"The power of the Burning Hollow," he said, "Even I do not fully understand that sacred flame."

I frowned. "Is the Social Fire not… fire?"

He chuckled. "The Social Fire is oft a metaphor. But the Burning Hollow… its power is something else. Something arcane. Those who handle this power are brilliant. Ambitious. Decisive. Yet often rash. They burn the world from inside and out, it's said. And once they're done, all that's left—"

"Is hollow," I said.

He nodded sagely.


I had many encounters of this type in that fateful first journey, but only one other sticks out to me.

Again, I sat at the fire, and a girl stood near me.

I glanced at her.

She looked oddly ethereal for a Xerophyllan. Her black hair was bound tightly in a bun by some mysterious material, and her skin was almost olive in tone, despite the eternal night. She seemed a few years older than me, though by how much I could not tell — she was younger than any of our guardians, but to one as young as me, she may well have been an adult.

She noticed me staring.

"I'm Allison," she said.

"James," I said.

"James… what?" she said. "Do you have a surname, James?"

I told her what I had told Li.

"The name you abandoned — it didn't happen to be Talloran, did it?" she asked. I was unsure why she would care, but I affirmed that it had not, which seemed to be of great relief to her. Then, as was customary, I asked her of her duties to Xerophylla and the Fundamentum and fate.

"My… father," she said. "He is a professor in the Arcana Institute. I, of course, was…"

She seemed hesitant to continue. I surmised she was expected to follow in his footsteps, and that she was going to the Arcana Institute as an apprentice to him.

"And what Class are you in?" I asked. She seemed old enough to have been present for many years.

"Bile," she said, rather melancholically. "Like… him."

I had frankly no idea what the Bile Class was, or what their special talents might be. There was great variation in our powers and potencies. The Burning Hollow could command air and flame, the Social Fire could impart power to words, yet the Cold Reservation only made us stronger and more resolute. There was a great asymmetry in our abilities, and I genuinely wondered what the power of Bile was.

"Our minds," she said, gloomily, once I asked. "The thinking goes that since we go outside less often — ridiculous as it is — and because we make merry so much less, we can withdraw into the depths of our own thoughts."

I was bewildered. The power of the Sorrow Fall was just the power of thought?

She chuckled. "Never underestimate the importance of having a plan."

Our journey continued until we came to the Great Spyres, upon which the Arcana Institute stood.



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