墓場の魔女ヴァネッサの物語
墓場の魔女ヴァネッサの物語
Byㅤ Dr_KasugaiDr_Kasugai
Published on 21 Jun 2022 17:26
評価: 0+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;
    }
    }
}

評価: 0+x

墓場の魔女ヴァネッサの物語
The Tale of Vanessa, Witch of the Cemetery

旅人は墓地の錆びついた金属の門に近づいた。普段門の近くに吊り下げられている瓦斯灯は粉々になっており、満月の鮮血めいた紅い光だけが道を照らしている。

The Traveler approached the rusted metal gate of the cemetery. The gas lights usually hanging near the gate had shattered, leaving only the blood red light of the full moon to light their way.

何故旅人はここにいるのか? 旅人はこの疑問について思惟していた。何故この死にゆく世界を彷徨うのか? お前は何を求めているのか? 答えのない疑問が次々浮き上がる。だが旅人は進み続けた。何故なら、旅人には感じられたのだ。何かが……誰かが呼んでいると。まるで誰か高位の人間に導かれるかのように。

Why were they here? The Traveler pondered this question. Why wander across this dying world? What are you searching for? Questions which they had no answers to. But the Traveler kept moving, because they could feel it. The calling of something… someone. As if someone higher was guiding them.

道に沿ってゆっくりと、旅人は墓地を通っていく。過ぎ去った各墓石には、白く光る花を咲かせた蔦が巻き付いていた。墓地にあるのは死者とその追憶だけだというのに、旅人には微かな鼻歌が先から聞こえた。

Creeping along the path, The Traveler moved through the graveyard. Each headstone passed was covered by vines, blooming luminescent white flowers. Despite the graveyard only being inhabited by the dead and their memories, The Traveler heard a faint humming ahead.

出処にまで近づくと、旅人はメロディを奏でているのが一体何なのかを見ることができた。フードを被った女性が墓石の前に跪いて、静かにひとり鼻歌を歌っていた。きめ細かな白いシーツに身を包んだその女性は、血に濡れた生地で顔を覆い、

Coming closer to the source of it, The Traveler could see what that melodic sound was truly coming from. A hooded woman was kneeling by a gravestone, humming serenely to herself. Cloaked in delicate white sheets, with a face marred by a blood soaked cloth, the woman reached out a single pale, bony hand, and gently touched the grave.

Vines quickly shot up from the ground, wrapping around the gravestone, the glowing white flowers that sprouted from them began to bloom. The woman bowed her head, sitting in silence for a moment before moving to the next grave.

The humming continued.

The Traveler approached the woman. They were sure that the woman noticed them, but she showed no ill intent. Rather, she greeted the Traveler with a piercing gaze, despite the cloth, before turning back to her task.

“Excuse me.” The Traveler says.

Silence. Then, a quiet, frail voice.

“A wanderer? In these parts?” She asked, seemingly eyeing The Traveler.

Placing their weapon on the ground next to them, The Traveler sat down near the woman. “Places like these are dangerous. Crawling with the undead.” They said.

“…I doubt that will be a problem.” Placing a hand on the gravestone, the woman bloomed even more vines and flowers, seemingly from her own palm. The flowers were soft and delicate — A stray breeze could blow the petals off. And yet, those flowers grew on vines covered in thorns. As the woman bowed her head, she spoke quietly. “They do not wish to walk again.”

Turning to the Traveler, she gives a tight smile.

“Who are you, wanderer?”

“Nameless.” The Traveler replies. “Who might you be?”

“Vanessa. I hail from central Xerophylla.”

The Traveler pauses. This site was quite a journey away from the city's center. They turn towards her.

“Why are you here?” The Traveler asks.

“I am simply paying my respects.” Vanessa says quietly, a touch of sadness flavoring her voice.

She stands, brushing off the dirt and dust from her clothes. she gestured toward the gravestone by her feet, "JACOB LEONHARDT" was engraved on it.

"This man, Mister Leonhardt, was a man from Ilcana, a short walk north from here. He died many decades ago… along with his family, his wife and two daughters." She paused for a moment, tilting her head down in thought. "People like Mister Leonhardt and his family don't have anyone left alive to remember them, not after the war."

Vanessa turned to face The Traveler. "Were you there, Wanderer? During the first Arcane War?”

“I’m not familiar.” The Traveler said.

“It was many decades ago. Xerophylla was at war with the northerners in Ilcana. There was an idea, to… contain Witches. To use their knowledge and skill with arcana to win the war against the north. Young witches were taken from their families, and trained in Xerophylla’s armies. They were stationed on the frontlines along with soldiers.”

Another pause. Vanessa took a deep breath before she continued.

“I was… one of them. The first child of the Witch queen Saralynn and Xerophylla’s strongest."

Vanessa walked towards a nearby grave, gently resting her hand on the headstone.

"The war lasted only three nights, the shortest war in history. The northerners were outnumbered and outmatched. Xerophylla moved in on the capital, leaving only destruction and death behind us."

She turns to face The Traveler. "This… massacre… it didn't sit well with any of us. Not the Witches, not the soldiers. But we pushed on, all the way to Ilcana's capital."

“During the siege of the capital city, I learned something. I saw a small child, holding onto what was left of his deceased mother, his eyes full of tears. I saw a mother desperately trying to protect her children. I saw families embracing each other in their final moments, accepting their fate.”

Vanessa slides her hand across the top of the grave, a solemn expression crossing her face.

“The northerners weren’t evil. They weren’t heartless demons like our leaders had told us.”

Vines shot up from the earth, the white flowers covered the grave.

“They had families, they had friends, they felt joy, they felt sadness, they knew empathy. They were human." She said, her voice breaking. "Our leaders had told us that we were the light that held off the darkness. The ones who protected those who couldn't protect themselves. It was a lie. All of it."

"I've killed thousands, all for a lie."

Vanessa pointed to the glowing white flowers on the graves.

“This is where all of those people were buried. All of the innocent people I’ve killed. The flowers I grow here will allow their spirits to pass on in peace, even after the final sunset.”

As Vanessa walked towards the next grave, she suddenly stumbled, then tilted, falling to the ground.

“Are you alright?” The Traveler said, rushing to help her.

Vanessa’s cloak opened, revealing her body. She was thin, she clearly hadn’t eaten in days.

“I’m fine, wanderer, I-”

She coughed, blood spilled on her white clothes.

“I can find help, I know someone who can heal you. If you need food I can-”

She interrupted, “There’s no need, Wanderer. This is my punishment.”

Vanessa reached out to The Traveler, a white flower blossomed in the palm of her hand.

“I will not last much longer. Please, place this flower on that grave. Let them pass on.”

The Traveler took the flower, placing it on the grave. They looked around the cemetery, each and every grave was glowing a bright white light.

The flower that they had placed glowed with that same white light.

“Wanderer.” Vanessa whispered. She looked up.

“All I ask is to see the stars… one last time.”

She was too weak to move, The Traveler lifted the blood stained cloth from her eyes, Her eyes glowed with a bright blue light. She gazed at the millions of stars in the night sky, a view she hadn’t seen in many years.

As her eyes slowly shut, Vanessa smiled.



特に明記しない限り、このページのコンテンツは次のライセンスの下にあります: Creative Commons Attribution-ShareAlike 3.0 License