SCP-CN-2215
评分: +37+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; }

评分: +37+x

{$side-text}

{$upon-text}

项目编号:嗯,让我们从这里说起,项目编号。它通常处于最开头,也是最容易被略过的部分——这是可以理解的,到这里作者几乎还什么都没写呢。它仅仅是一种统一的、通用的编号形式,从过去一直保留到现在。它能说明什么呢?人们从编号列表里挑选了这个空编号,仅此而已。它是整篇档案中如此细微的一部分。

略过此处通常是安全的,读者不会错过什么重要的信息。但某些时候,一些例外让故事从编号就开始讲述,这些文学性的空白因此得以填补。如SCP-整数𝒫SCP-𝕐这样的档案,它们代替编号的奇特代号连同文中的其它描述一起向读者暗示了某种现状。“这里有基金会还不明白的东西,”它们在说,“这里有基金会不能掌握的东西。基金会不能再像往常那样,把我们得意洋洋地锁在编号的仓库里。我们绞住了基金会,让它不得不暂且拍地认输。

于是我们意识到,项目编号本身具有一种对“控制”的内部隐喻;回望173的档案,那个可爱的小雕像,我们或许能够更好地体会它。173。这个数字意味着雕像不是基金会收容的唯一一个,也不会是最后一个。当我们生平第一次阅读173的档案,我们还不知道它是什么——这才读到短短的第一行呢。而基金会此时就告诉我,也告诉了所有人:我们已经为它编号了。我们不仅要为它编号,总有一天,我们要为它们所有编号。我甚至想象得出档案背后的一位研究员或博士的形象,他脸上的神情正是谦卑而自豪的。

我想,书写173档案的作者恐怕不会想到文学——那是基金会还无暇顾及细枝末节的文字工作的时代,他仅仅出于实用性的考量去敲定格式,然后写下了基金会诞生以来的第一份项目档案。然而,即使基金会绝不会承认,艺术家仍能够以自身的敏锐察觉到这些档案之中潜藏着美学价值。事实上,基金会长久以来如此大量地使用并非寻常的非线性结构叙事,以至于它们的作者常常将这一点忽视。这方面我将在特殊收容措施的部分继续阐述。

项目等级:我不得不承认,反大麻小子对基金会的嘲弄不无道理。Safe,很简单,容易理解。接下来突然是——EuclidKeter?难道欧几里得犹太教对一向以严谨和专业著称的基金会有什么特殊意义?当然,这是一个机密组织内部的机密分级,它不会旨在方便他人理解。然而,比起常见的数字或颜色分级,这些名称还是过于特殊了。我无法想象它们仍然出于实用性的考量,而不是某种书呆子的恶趣味。

然而,无论它们再怎么古怪——甚至滑稽——这仍然是一个由庞大的机密组织制定的分级制。它或许不是绝对实用性的,但它是实用主义(Pragmatism)的。Euclid和平面几何有关吗?或许当初想出这个分级的时候,它隐含了某些模糊的意义;但如今,在基金会的语境下,它已经完完全全成为了一个单纯的名称。基金会毫不避讳地使用那些源于各种宗教或神话的词语。例如上文提到的“Keter”出自犹太教的卡巴拉概念,是生命之树的最高质点(Sephirah),原意为“冠冕”;而“Thaumiel”、另一个基金会的项目等级,则出自经由后世完善的“邪恶之树”(The Qliphoth),是一对永恒地矛盾与斗争的双子神——正与象征神的整合统一的“Keter”相对。值得玩味的是,“Thaumiel”代号的含义是某样东西“为基金会用于收容或抵制其它项目或异常现象的异常”;换句话来说,“Thaumiel”是基金会手中的武器。而他们将这武器归于恶魔撒旦,归于最邪恶的“不信神”之罪。

基金会的项目等级——与直觉相悖——并不意味着某样东西的危险程度,而是代表它被基金会收容起来的难度。基金会通常不会像GOC或UIU之类的组织那样,用分级估量危险性。在此处,基金会再次露出了那副倨傲的表情,那是每一个基金会人用“核弹是Safe”解释项目等级时的表情:基金会无惧于危险,并终将控制它们,收容它们,保护无辜的人们。这就是基金会的信条,他们自豪的源泉;无论与神还是恶魔为伍,都于他们的信念无损。这也就是为什么他们对用词毫不避讳——为了应战,他们愿意承认神和恶魔的存在。这是基金会与GOC一处显然的不同,因为后者不愿承认,只想将其杀干抹净。

特殊收容措施:S,C和P。“SCP”由此而得名,不幸的是,这也是第二容易被略过的部分。除了那个不得不写它的人,似乎谁也不会对它过多在意;而一旦有人在这里犯了错,就要受到严厉的批评。此处需要的是一份基于现实情况的拟定方案。我们知道,这样的东西不会具备很多可读性。它常常枯燥乏味,因其诞生在那深夜仍被迫工作的研究员的桌上,且常常和咖啡摆在一起。他焦头烂额,只为别被找出遗漏。办公室只剩一盏晚灯,他手边的纸上已经满是那些他和上司都心知肚明,但按照章程必须要写下的措施。他付出如此努力,只为能开始描述他的项目。

对那些已经坐立不安,忍不住想要反驳的基金会人:我无意在此否定“特殊收容措施”的必要性。我只是对它的文学性更感兴趣,如前文所提到的,它呈现一种非线性叙事形式。让我们读一读SCP-1916,关于老Wondertainment的月亮石的档案:

特殊收容措施:所有已知的SCP-1916实体被储存在Site-85的安全仓库的一个密封箱内。突出的标志将被放置在箱子上和内部以表明SCP-1916是非食用的。机动特遣队Xi-1964“斯拉格沃斯的糖果”将监视糖果的经销商和供应商并没收所有在流通中的SCP-1916实体。

所有SCP-1916的测试将由植入了皮下追踪装置的D级人员来进行。户外测试将授权在毗邻Site 85的遥控设施上进行;若发生受影响的D级人员突破收容的情况,授权使用地对空武器摧毁该测试者。直到对实验1916-6-1结果的完成调查完成,所有对SCP-1916-6的测试将是禁止的。

注意:到此为止,我们还对这个所谓“SCP1916”一无所知。然而到了“特殊收容措施”,话锋一转,我们已经在讨论实验1916-11916-6了。真是好一大步啊。按照常理,这部分似乎应当放在“描述”之后,甚至应该放在“附录”之后的。直接的结果就是,在阅读伊始,读者就要被扯入一段总结性的陈述,甚至还对于这里在陈述什么不甚明了——是的,这是典型的直入本题in midias res)。

当艺术作品在使用这种技巧时,通常会选用一段令人兴奋的、戏剧性的情节作为开场,以期一开始就抓住读者的心。可惜的是,我们的基金会并没有这种需求。“典型的基金会人通常有着令人绝望的烂品味”,此言非虚。他们的建筑对裸露的混凝土和钢铁毫不掩饰,走廊和实验室里也断然不会有时尚的壁纸和地毯。这一点在此处的体现,就是“收容措施”部分的布局。

“非线性叙事?”基金会说。“是啊,艺术家,你当然会得出这样的结论,只可惜我们对此并不在乎。”期待得到如《伊利亚特》(Iliad)或《奥德赛》(Odyssey)一般阅读体验的读者通常会失望的,因为这里除了马上要在“描述”部分解答的谜团之外,几乎什么都没有。它,仅仅对基金会而言才重要。基金会有专人会仔细阅读并执行这份枯燥乏味的方案,这是他们的工作;而可怜的读者被迫读它,只因为害怕自己错过什么,或出于对文学的尊重。当然,如果你是第一次,你可以从收容措施中了解基金会做了什么,以及基金会会如何做。然而,当你已经相当熟悉基金会的做法之后,你总会忍不住感到厌烦的。它通常不会提供比下文的描述部分更多的信息,而且——绝大部分情况——这里没有什么新闻。就连基金会自己都会觉得腻烦,常常将档案中对收容措施的描述尽可能缩减,只留短短几句。但他们还是会做出完整版本的收容方案——相信我,那叠文件是一场文学性的灾难。有时不只是比喻义

描述:故事,神圣而伟大的冒险。最后我们来到了项目描述,这是核心区域,也是大多数人最关注的部分。现在,我们可以将自己置身事外,坐在沙发上欣赏那些诡异的物件和奇妙的角色。有时,我们也会面对恶化的事态和人们的生死。或许残忍——然而体验这一切正是作为读者的特权。

如我所说,基金会里没有作家,只有一群书呆子。然而也如我所说,这些科学家对自己的异常管理工作充满了热情。他们相信自己正投身于有价值的工作,倾注心血;而无论是否出于本意,艺术的种子也就在此萌发。这种子常常超乎人想象的顽强,它不在意土壤的贫瘠,因其所需的仅仅是爱。精练、简洁的行文不只符合“项目描述”的要求,也符合文学的要求;详实的补充材料不止完善了档案,也使艺术形象更加丰富立体。艺术已在基金会的笔下生长,虽然他们仍浑然不觉。

用简练的科学家笔触描述光怪陆离的境况正是基金会的拿手好戏。无数档案所构成的,那黑暗混沌的秘密世界与专业冷静的研究机构无数次交锋的图景,为基金会吸引了众多的忠实拥趸。我想,基金会一定对这情况百思不得其解,他们精密的科学脑袋从未准备好思考艺术世界。他们的应对方式过于粗暴——令人遗憾,而且就结果来看收效甚微。过激的反应反而令他们自己变成笑柄。

基金会掌握着无数的收容物,它们来自世界各地。其中不只有千奇百怪的诡异异常,还有各色组织的研究结晶,我与我的同事们的作品也常常被他们收缴。他们对这些东西进行大量的研究。当然,通常不包括艺术分析——但不妨碍它们是足够优秀的创作素材。在一名艺术家的眼中,基金会很难不像是美术馆。所以,对于人们竟然热爱他们的“收容”,基金会实在不必如此吃惊的。项目编号等级收容措施作为引子,而描述则开始讲述一个引人入胜的故事。基金会遇到了什么?一种食人的怪物、还是某个四条手臂的人?有时,基金会要面对一栋发生怪事的房子,我们会跟随探索记录的脚步解开谜团;而有时,事态会滑入荒诞滑稽的抽象领域,我们只能在基金会晦涩的词语间跋涉。无论是否出于本意,基金会都为人们带来了文学上的享受,它别具一格的写作方式将一股清风吹进了文学界之中。以我的立场提出建议并不合适,但基金会或许应当接纳这一切,而不是无穷无尽的保密和审查。有人喜欢小雕像,和那个带着鸟嘴面具的家伙!考虑到它们做过什么事、杀过多少人,这似乎古怪极了——但,艺术家,正是一群怪胎。

附录:最后,我仍知道有种最特殊的情况:基金会,由于某种原因,连最基本的档案格式都无法维持,就像本文中正在发生的这样。基金会当然不会喜欢这种不能掌控的感觉,但正如我刚刚所说的,有时要学会放轻松。

它的异常性质(以基金会的话来说)即是:只有以本文所呈的形式进行描述,对于本文的描述才可能存在。一个简单的嵌套,经典的小游戏,把2变成1。我希望基金会仅仅把这当作一个老人絮絮叨叨的小玩笑,你知道,与调皮的时间女郎相处太久,人也会变得喜欢偶尔捉弄别人。在写就这篇文章之时,我不由得回忆起曾经我还是Clipper的那段时光。

—— The Critic

{$under-text}

{$side-text}


除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License