SCP-5810
SCP-5810
By: Esperanza_CaiEsperanza_Cai
Published on 14 Mar 2021 16:01
评分: +6+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; }
/* 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;
}
 
@media (min-width: 768px) {
 
    #top-bar .mobile-top-bar {
        display: block;
    }
 
    #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: -20em;
        width: 17.75em;
        height: 100%;
        margin: 0;
        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;
    }
    }
}



启动OSCP引导顺序

欢迎,_____



你猛然惊醒,睁开眼睛,握紧的拳头抵在胸前。

……

你还坐在你的椅子上。你皱着眉,松开了扣着掌心的指甲。

我一个人吗?

老旧的终端机上灯光大盛,光标跳动着。

项目编号:


不是一个人。

你缩起身,想让自己看起来小一点——出于习惯。你切出显示设置,调低了屏幕亮度。

你脑海中回响过刻薄的内心独白。一遍、一遍、又一遍。它们是你的话,这是当然,但它们感觉很……不完美。你的突触发出信号,想弄清这些噪音的含义。

项目编号:SCP-5810


你强迫自己回忆。

收容等级:Keter(未收容)


你用舌尖抵住门牙后面那个熟悉的角落,挤压着。

特殊收容措施:在疑似SCP-5810的实体出现时,已有若干推定的临时躲避方式。目前为止,最一致的方法为避免思考有关SCP-5810的想法。这一方法仍具有效力,前提是SCP-5810-A可以通过重申自身信念等方式分散注意力,抑制恐惧或不安全感


你用颤抖的手指把一缕零散的头发拢到左耳后。

SCP-5810位于研究及居住复合区Area-75;在SCP-5810得到SCP-5810-A的隔离之前,无法认定它已收容。


胆汁涌上了你的喉咙。你吞下它,浑身颤抖。你继续。

描述:SCP-5810为


有什么在嘎吱作响。在哪里——在附近的工作区?在通往走廊的门口?还是说它不只是嘎吱声——就在你后面?

你的血管冻结了。你感到恐慌。你向前倒下,在工作站下面缩成一团。大量的负面想法涌上脑海。

你为什么要来这里?

真可悲啊。

面对世界吧。

你本来可以结束一切的。

你为什么要浪费所有人的时间?



在一阵短暂的相对寂静之后,恐慌逐渐褪去。是暖通空调在打开,是吗?一定是的——你这么说服了自己。

起来。

描述:SCP-5810为一II型无定形体,目前占据研究区Area-75。


你透过空荡的房间望向边上的窗户,浓稠的夜色让你很难看清远处。大楼里的灯全都熄灭了,只剩大厅里的一排排紧急灯还亮着。你孑然一身。

……不,我不是。我不是一个人。

你集中注意。你深吸一口气,吸入一片尘土,几乎让你窒息。你泪眼朦胧地瞥向屏幕。

尚不存在对SCP-5810的完整描述;所有已知信息都是间接性由经历者转述的。SCP-5810是一个伺机而动的捕食者,在日落和日出之间跟踪预期的猎物,一个捕食周期在三至四周之间,直到捕食的最后几天才会显示出完整的身形。推测这些特性是


你颤栗着,从胸膛深处呼出一口气。


你试着组织接下来的言词,向后靠到椅背上。


闲置的终端运行了模因危害接种检查。


你在黑暗中多久了?

SCP-5810的受害者(编为SCP-5810-A)都会经受轻微焦虑、偏执思想、偶发到多发的恐慌发作,一些案例中还会产生幻觉和妄想。


你这么害怕多久了?

当前未知这是否是(1)对SCP-5810的反应,(2)它捕食期间出现的一系列附带事件,或(3)它捕食猎物的特性。


它追了你多久了?那是……从你第一次转来做长期研究的时候——来填补空位的时候。

你不记得自己是怎么到这里的,但你最后记得的是你的床。你躺在那里,近乎瘫痪、独身一人,这是连续第六天。你的衬衫被汗水浸湿,贴在背上。在你面前的每一个夜晚,站点看起来都更加空荡,直到你感觉是自己是这里仅剩的最后一人。

今夜,角落里的阴影似乎比以往更盛。

SCP-5810以自身存在的意识为食;随着对实体认知的进展,SCP-5810-A实例将感受到越来越强烈的恐惧和物理隔离感。


你没有看。你分散了自己的注意力;你打开自己的个人存储,寻找着你第一次感觉全然孤独时拍下的照片。












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