| 他走了一里扭曲的路 |
作者  Hg-lab |
| 发布于 29 Aug 2022 13:07 |
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; }
/* 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;
pointer-events: auto;
}
@media not all and (max-width: 767px) {
#top-bar .mobile-top-bar {
display: block;
pointer-events: none;
}
#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: -18rem;
width: 15.25rem;
height: 100%;
margin: 0;
overflow-x: hidden;
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;
}
}
}
一段落差和一截短绳将我拖出昏沉。深红色的麻袋朝头顶笼去时，我感到一种平静。人群熙攘着向我指责，大部分是真的，但现在似乎安静了一些。
“掠尸者。” “地下小偷。” “盗墓贼。”
为了追求科学，这并不重要。雅斯伯勒学院的一个条目上写着“西梅瑞安先生 - 65”。没有一个人关心这六十五具尸体对促进科学事业所做的贡献超过了我一生中的任何成就。
不久的将来，那些叫嚷的人们会因我的知识获救。我站在那里，在红宝石般的月光下，因那种宽慰而略感心安。
垫脚应声而溃，绳索绷紧，咔嚓一声，一瞬的疼痛，然后就什么也没有了。此地又宣告多了一个牺牲品。
但，德兹蒙德城鲜少放弃任何有价值之物。
意识闪回数次，痛苦超乎想象，然后再度归于沉寂。我陷入一场恐惧和惊奇的幻景，挣扎着呼吸了一会儿。我能看到一些模糊的面孔在看着我，继而消失，一遍又一遍地陷入昏沉。
在意识清明的瞬间，我拟想这是对我罪恶一生的惩罚。
然后我从昏沉中醒来，周围夜色沉沉。我被绑在桌子上高高升到滂沱大雨之中。我能感到一股电流通过我的身体。闪电在我挣脱束缚时再度击中了我，发出焦肉、甲醛和电离的恶臭。但我还活着，我十分强大。
冷静。这双手不属于我，我的眼镜不翼而飞，而视野依然清晰。这不是我的眼睛，但我确信这是我的思想。
我从高台上跳下。从将近八十英尺的地方摔了下来，碎裂的却是鹅卵石而不是我的骨头。夜里没人追我，但我还是迈开腿狂奔，直到身处一条完全陌生的巷子，雨慢慢停了。
在地上一滩浑浊的血水中，我第一次看到了自己的倒影。一道巨大的疤痕从我的头皮开始贯穿鼻梁，一路延伸到脖子。左脸的皮肤比其他部位要浅一些，一只血红的眼睛回望着我；另一只眼睛是淡褐色的，同样难以辨认，但至少不那么奇怪了。
我撕扯着胸前宽松的束腰外衣，一片片剥落下来，很快就看到了自己的皮肤，所有地方都纵横爬满缝线和伤疤。
我靠在一旁的建筑上哭了起来。在另一头并没有巨大的惩罚或奖励，只有遗忘。我所感受到的痛苦完全属于人类。那些科学家们想把我拼凑起来。想到这里，我看见一个男人面带笑容走进了小巷。
我必然是那种容易被扒手盯上的人。这个人信心十足地拿着刀，双手饱经练习，我曾在战壕里和这样的人交过招。
但西梅利安因身体太弱而未能参加战争。
啊，我就说呢。这不完全是我的思想。
那个扒手开始向我走来。我站起来，看着他，在他对我上下打量时，我能看到他眼中蕴含的恐惧。他还没来得及掂量自己的错误，我已经闪电般出手。他的头撞在砖墙上，水花四溅
低头一看，他的刀刺进了我的身体。就在别人的胸腔下，在别人的心脏里。足以致命的一刀。我拔出了它。
我希望自己在卵石路上流血而死，但唯一的血从我面前之人身上涌出，他贴着墙，慢慢滑下，瘫倒在地。
伤口顿时愈合，伤疤还在，但心脏上的洞被封住了。
我考虑了一会儿，然后把那人扛在肩上，穿过屋顶向雅斯伯勒走去。学院高价收下了那个扒手的尸身，给我记下了新的一笔。“组装人”，医生这样叫我。我相信那是一个玩笑，但没有多加评说，让它过去了；我甚至说服了她借给我一张床和一些衣服过夜。
第二天早上哨声响起的时候，我回到了现实世界。我的工资够付一顿饭的钱，雅斯伯勒的好医生甚至秘密地把钟楼里的房间租给了我。这房子不是她租的，但也没有别人。我悄无声息地来了又走。
好奇心带我回到了我被造出来的地方，但那栋楼已成了灰烬，主人的名字也没能公布。也许这是我对自己想象中的怠慢的忏悔。也许是一个朋友将我从死神手中拉了回来。
也许我永远不会知道是谁造就了这一切，以及为什么。
现在我在雅斯伯勒的钟楼上歇息，一只笨重的黑钟是我永恒的伴侣。它的表面布满蛛网般的裂纹，有人把它拼了起来，但它再也无法发出声响，那于我正合适。
这位好医生告诉我学院发生了一系列谋杀：夜行生物或别的什么怪物在凌晨时分将人们撕成了碎片。
扒手的钱用来支付账单，偶尔的盗墓能买到食物，但一具真正的吸血鬼尸体能卖出多少钱？还是说狼人？
我想，今夜是猎杀怪物的时候了。
