Stained Glass
Stained Glass
Byㅤ Fish^12Fish^12
Published on 07 Jun 2022 00:33
rating: +35+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: +35+x


glass.png

"Good tidings, stranger."

A mummified man, wrapped in the rotting remains of a nursing gown, spoke to Mr. Filia. The sudden break in silence startles him, and he reaches for his sabre, before deciding otherwise.

It seems that the other man had been slumped against a pew, in a position not unlike death. His eyes were glassy, nearly doll-like in composition, and horrendously sallow. He was shriveled, his skin simultaneously tight across his bones and drooping, like drying sheets on a clothesline. He was so convincing that Mr. Filia had simply walked past him.

"Do you like it?"

Mr. Filia looks back up at the stained glass window, its opulence almost offensive. Time slows down as he begins to ponder the manhours dedicated to it, how much life this art must have secreted away. He nods.

"Good. Good."

His voice was hoarse, rattling about his chest with worrying sickness. Suddenly, he coughs violently, bleeding phlegm in a shotgun blast. Clawing at his heart, he breathes with the intensity of a last breath, clutching desperately.

The old man's head droops, and he leans over to the side, body first. His shoulder hits the ground, the hollow crack of bone on stone echoing, paired with a disturbing stillness.

This time, he's truly dead.


death.png

It was Mr. Filia's job to follow death.

Doing so led him to the outskirts of the world, where ash and dust lay thick on the achievements of mankind. Where the earth has retaken the path, smelling of mildew and overgrowth. Where there are travelers but no merchants.

Today was a quiet day. He found that churches did deign peace. The ennui of travel gives way to dogma, and he begins to see memories of Sunday mass, rows of people with their hands folded, echoing the children's choir, led by a stoic shepherd.

He thinks. There is no better place to die than in a church.

Of course, he still had a job to do. Man cannot rely on God to do all our work. We must earn our pay, our food, as all powerful as He may be. Mr. Filia must prepare the body, among other things.

Mr. Filia takes out a tiny bottle, a concoction of holy water, silver, and a selection of choice metals. When he originally mixed this viand, he kept some measure of trepidation, unsure if such a convenient item would work. A brief test sundered a piece of vampire skin, curdled rotting flesh, and burned werewolf fur. He reveled in the results.

He carefully balances the bottle over the old man's skull, aiming at an indent where the liquid may rest. The drop seeps into his visage, leaving behind a small deposit of salts. No reaction. Amazingly enough, he was entirely human. He wonders how he survived so long alone.

Suppressing discomfit, he picks up the corpse and finds that it is disproportionately light, a sign of malnutrition or disease. He carries him to the Lord's Altar. God knows my duties, and it is only appropriate to help my fellow brother.

How has this one died?


truth.png

The ceremonial knife slides over the sternum, pulling back skin with the steadiness of a blooming flower. Confidence is key in post mortem affairs, and Mr. Filia was used to peeling back the layers. With unrestricted view of the rib cage, he firmly grips the largest bones and squeezes inwards, snapping the brittle marrow. He removes the bones from the body, a latticework of osteology.

First, the lungs.

Blackened. Shriveled. Chalky.

A result of working in the mines. Surprising, given his current stature. Excessive coal inhalation must have crippled his vitality. Curiously, it is uncommon for miners to suffer from this condition. Many more die from collapses, immolation from lit coal dust, even the occasional dormant monster.

The hands.

Out of the corner of his eye, he notices a discrepancy, a certain softness. The old man's hands are smooth, uncalloused, an oddity, given his previous occupation. He touches his palm, and finds no fingerprints. The skin feels like sandpaper, leveled, as featureless as a blank slate.

Interesting. Why?

Instinctually, he pinches the skin and smells the residuum, and a connection is made. It's faintly reminiscent of antiseptic.


glass2.png

As he suspected. A felt cloth, made from the pelt of a sheep. Lukewarm water in a brass pot. A variety of rare herbs and fragrant oils. A wooden tub, hidden in the corner of the church, tucked away underneath a set of scaffolding.

The old man had been cleaning the stained glass windows.

From how well trodden the area was, it seems he never stopped, taking apart each window piece by piece, taking painstaking care never to damage the glass. It would be folly to question his motivations, only that he has earned the right to reside in heaven with God. But perhaps that was never his goal to begin with.

Mr. Filia hoped it was out of selfless obligation.

With the man buried and gravestone placed, Mr. Filia took one last look at the church, admiring the stained glass windows, and traveled west, in the direction of the setting moon.


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