| 花窗玻璃 |
作者  Hg-lab |
| 发布于 22 Jun 2022 12:03 |
What this is
A bunch of miscellaneous CSS 'improvements' that I, 
Croquembouche, 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.
.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; }
| 花窗玻璃 |
作者  Fish^12 |
| 发布于 2022 年 06 月 07 日 |
-
Info
有关上帝的某件事
作者： Fish^12
Bloodborne canon when muffins. muffins. hello? muffins.
“一路顺风，陌生人。”
一具干尸，身裹一件腐烂的护士袍，对Mr. Filia如此说道。突然被打破的宁静使他吃了一惊，伸手去够自己的军刀，旋即打消了这个主意。
那人背靠教堂长椅瘫坐着，像是死了。他的双眼呆滞无神，蜡黄得可怕，几如人偶一般；身体萎缩，松弛的皮肤紧贴骨头，像一片片干在晾衣绳上的被单。如此真实的模样差一点令Mr. Filia与他擦身而过。
“喜欢它吗？”
Mr. Filia转头望向花窗玻璃，富丽堂皇得令人生厌。时间在他思考其中蕴含的人力物力时放缓了流动，这件艺术品究竟隐没了多少生命？他点了点头。
“很好，很好。”
他的声音嘶哑，胸腔因顽疾而咯咯作响。突然间，他猛烈咳嗽起来，硌出的痰和着血。他抓住心脏，死死地攥紧，行将断气般急促地呼吸。
老人的头垂落下来，身体斜向一侧，肩膀撞上了地面，骨头爆裂的声音空洞地回荡开来，伴随着令人不安的寂静。
此刻，他才真正死去。
Mr. Filia的工作是追逐死亡。
这份职责将他带到了世界的边缘，灰土和积尘在此将人类的丰功伟业厚厚地掩埋。在这里，大地重返原路，霉烂和杂草的气息充斥鼻腔。在这里，只有旅客，而没有商人。
这天风平浪静，他发现教堂的确是崇尚和平的。旅程的倦怠让位给了教条，他开始回想周日的弥撒，一排排人双手合十，在一位禁欲的牧师引领下，与孩子们的唱诗班相互应和。
他想。 没有什么比在死在教堂里更好的地方了。
…
自然，他还有公务在身。上帝不能一手操办所有事，我们必须自食其力，自给自足，像上帝一样无所不能。Mr. Filia必须拾掇尸体，还有其他事要办。
Mr. Filia取出一只小瓶子，装着圣水、银和精选金属的混合物。起初把几样东西混在一起的时候，他有点忐忑，不确定这种省事的玩艺是否有用。经过简单的测试，它撕开了吸血鬼的皮肤，凝固腐烂的肉体，烧焦了狼人的皮毛。他对此感到满意。
他小心将瓶子在老人的颅骨上端稳，对准一道可能蓄住液体的凹痕。液滴渗入面庞，留下一层薄薄的盐，没有反应。他惊讶于对方是个彻底的人类，不知道是如何孤苦伶仃生存这样久的。
按下内心的不安，他抬起尸体，发现轻得不像话，这是营养不良的症状。他随后将其带到了主的祭坛。 上帝知晓我的职责，唯有如此，才能拯救我的同胞。
这人是怎么死的？
礼刀划过胸骨，褪去皮肤，平稳如绽放的花朵。信心是验尸工作的关键，而Mr. Filia惯于抽丝剥茧。他目光无阻地观察整个胸腔，抓牢最大的骨头往内挤压，将松脆的骨髓掰断。他把骨头取离尸体，像骨科的栅格一样。
首先，是肺。
发黑。干瘪。石化。
矿下工作的结果。鉴于他的身体状况，这很令人惊讶。一定是过量吸入的煤灰蚕食了他的生命力，这在矿工中并不罕见。更多人死于矿洞塌方、煤灰焚烧、甚至是蛰伏怪物的袭击。
双手。
从眼角的余光中，他注意到了一种迥然不同，是一种柔和的感觉。老人的双手十分光滑，没有老茧，对他的职业来说有点奇怪。他抚摸着这对手掌，找不到指纹。皮肤摸起来像砂纸般平整，白板一般毫无特征。
有趣。但为什么？
他本能地捏起皮肤闻了闻，疑虑迎刃而解。有残留物的味道，像是防腐剂。
正如他所料。一件羊皮制成的毡衣、用黄铜锅温着的水、各种珍稀药草和香油、一只木制浴盆。这些东西都隐藏在教堂的角落，塞在一组脚手架下。
这名老者曾是擦洗花窗玻璃的人。
从这片区域的踩踏程度来看，似乎他从未停止劳作。他把每扇窗户一块块拆开，战战兢兢，生怕一块玻璃受到损坏。这动机也许是愚蠢的，除非他已挣得了与上帝为邻的资格。但这也许从来不是他的初心。
Mr. Filia愿此举出于无私的义务。
葬下男人，安上墓碑，Mr. Filia向教堂落下最后一瞥，端详着那一扇扇花窗玻璃，然后西行而去，朝着月亮落下的方向。
页面版本: 10, 最后编辑于: 07 Jan 2023 17:21
.jpg){kind=link}
