| 余烬 |
作者  Hg-lab |
| 发布于 04 Jul 2022 07:09 |
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; }
余烬
曾名为马格纳斯·金斯洛的男人坐在静穆的白桦林中，火堆笼下明暗交织的阴影，看着另一个世界缓缓走向死亡。
他拥有过许多头衔和名号：炼金术士、奥术师、奇术师，随岁月流逝成为了群星之月。他是知识的掮客，带着日积月累的深厚学识辗转东西南北，提供交换。在奥术市场的窃窃私语中，他买下疯子和先知的谵言，他们的目光落入存在中永恒的裂缝，看到了什么是，什么不是。博引加推测，他不断拼凑出答案解决紧随其后的问题。
他寻求知识，将思想的实质纳入自我，从墨汁中提炼意义。他将残余之物塞进炉膛，生起火来抵御寒夜的侵袭。
近期收购的成果安然无恙，精致的羊皮纸面没有磨损或烧痕，这是一种节俭，而非慷慨。
所有即将到来的夜晚都是黑暗，每一种思想的消逝都有人在燃烧。
他也尝过交易的败果，这一行当充斥着贪婪之手和垂涎之心；他对那些背信弃义、恶意压价、弄虚作假和混淆视听的勾当早有预料；要领先一步，穿越这些不幸的洪流，这是一场试炼——他提醒自己。他珍视这场试炼，这是赋与他的目的。当他在血泊中奄奄一息，是它注入了他冰冻、破碎的躯体。这个目的拯救了他——它已生根发芽，用黄金矿石修补了他四分五裂的肉体和灵魂。
它在内心共鸣，带着潜能和力量、要求和决心：阻止结局，或至少，记录下那些因它而逝的人。
此时此刻，它再度找到了他。这次是因他而起。
他低估了他们的雄心壮志，低估了他们落成巴别塔的坚定不移。如果早有预料，他绝不会提供如愿的办法；不是为了知识令他们付出的代价，也不是为了世界。
他坐在逐渐逼近的黑暗中，聆听恶神明确无误的宣言——死亡的呼号——在他和无数人脑海中回响：
上帝已死，
上帝是复仇者。
因逝者长存，
故上帝已死。
他叹了口气，站起身，跺灭了炉火，隐没在夜色如妒的怀抱中。黑暗更便于行事。
男人集中意志。他的双手向内转动，握住意念和决心，合为一道利刃。这把熟悉的虚幻之刀由思想和目的所打造，比希望更精良，在大胆细心的掌控中，能够分开原子，遁入虚空。
他挥刀，刀锋刺破夜幕，斩入虚空，切开潜伏之物鲜血淋漓的下腹，而后挺刀而出。裂痕化为形式，“彼方”遁入"此处"，物质泼洒，涌入可怖的虚无，连通迥异的世界：以刀为桥，贯通虚实。如果他愿意，这将是一场逃避。
但他会回来，回到这个该死的世界。他对环绕的重重树影许下承诺，相信它们会为之作证。
他不会让他们走向命定的结局，不会让他们迷失于永夜，不会让他们成为负伤神祇怒火的牺牲品。
而他却无法独行。
他穿了过去，走出至暗之夜，步入耀眼的日光灯下。
SITE-73 安保录像
前言：以下记录描述了28/04/2021的安全泄露，及随后的 SCP-529 失窃事件。
该录像由位于 Hannah Montaire 博士办公室内和附近走廊的站内监控拍摄。
03:42： Dr. Montaire在办公室内整理文件，SCP-529坐在窗台上，拍打着悬挂的猫玩具，这是特殊收容措施所许可的行为。
03:45： Dr. Montaire办公室外的空间发生扭曲，起初并没有被她察觉。扭曲范围扩大，在走廊上形成孔径，仅有面向上述办公室的一侧能够观察到。孔径以外的区域开始聚焦变暗，难以确定特定形状。
03:46： 一名沾满泥污，衣着过时的人型实体，穿过孔径出现在基金会设施中，斗篷和拉起的兜帽遮住了一部分面孔。他敲响了Dr. Montaire办公室的门，记录到以下对话：
Dr. Montaire：我——哦，你是谁？
未知来人：毋需惊惶，没想到她还有人作陪。小家伙，你在哪里？是时候动身了。
Dr. Montaire启动桌底的紧急按钮，站点安保人员被派往她所在位置。
Dr. Montaire：我不知道发生了什么事，但何不坐坐呢？我想我们能够解决这件事。
未知来人：恐怕不行，我的时间不多。啊，你在这，我亲爱的。来吧，我们得离开了。
SCP-529：喵呜。
未知来人：喔，她似乎有些喜欢你，貌似我做了个正确的决定。现在跟我走吧，小家伙。
03:48： SCP-529跳下窗台，朝来人走去，蹭着他的腿。来人弯腰抱起SCP-529，搂进臂弯，离开了办公室。出现在拐角的站点安保人员要求此人停下脚步，其中一名在他前进时用电击枪开火：子弹在距他几英尺处盘旋，他带着SCP-529步入洞中，洞口随之闭合。
