SCP-3309
SCP-3309
By: SraoshaSraosha
Published on 17 Sep 2018 09:34

评分: +111+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; }

SCP-3309

SCP系列 4 » SCP-3309

来自基金会记录与信息安全管理部的通知


您将要阅读的文件“SCP-3309”描述了一个与多个子叙事层交织在一起的不可预测的叙事异常。因本文件包含了一些内嵌式叙述危害1 ,需接种叙述性疫苗。未接种对抗此种异常的疫苗的人员可能会经历一场叙述改写事件。

你确定要继续吗?

叙述性接种散播。

我们不会化为泡影,除非为时已晚。

直到我们消散、消散,深入骨髓。最后,已经没有什么还可以消散了。这就是遗忘。回忆、希望、梦想;我们全都被遗忘了。我们怎么能知道人们拥有这些记忆、这些希望和这些梦想呢?如果一开始就什么都没有,谁又能遗忘我们呢?我们会从别人的脑海中消失,但不会从自己的脑海中消失。我们和它一起生活,直到我们不能再活下去。直到我们忘记有何种方式可以让我们生活在平和中。然后,这就是我们化为泡影的时候。

消散,终成泡影。

接种完成!你可以继续了。

项目编号:SCP-3309

项目等级:Keter

特殊收容措施:所有被SCP-3309异常影响的文档都将以转述格式保存,并保存在RAISA的存档数据库中。在收容一名实例后,分配负责受影响项目的所有人员都必须接受记忆消除处理,并转移到不相关的计划。


描述:SCP-3309是一种已编目异常自发消失的现象。受SCP-3309影响的项目包括异常对象、实体、位置和概念结构。受这种现象影响的异常现象似乎缺乏因果关系;SCP-3309的活动由来源未知的一份笔记(指定为SCP-3309-1)以表示。

在异常消失前24至36小时,SCP-3309-1会出现在项目文档的末尾。经历SCP-3309的文档将从所有已知的文件系统中清除,包括受保护的Site-01和RAISA档案。自此之后,异常本身就会被有效地无效化,或者消失。

SCP-3309-1的内容如下:

如果你不是该作者又想重写该文章,可在此帖回复申请。请先取得作者的同意。

SCP-3309也影响为消失的文档创建的备份。SCP-3309还影响遭遇过SCP-3309的异常项目的文档;大约71%的消失文档与其他不受影响的异常相联系。这导致基金会异常收容网络的削弱,可能升级为一场ADK级“异常全面失稳”情景。



附录材料


I.伦理委员会审裁处


II.计划:锥形长矛


III. [ ]


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