SCP-7991
SCP-7991
By: izumi_sngwizumi_sngw
Published on 08 Oct 2022 16:00
評価: +15+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;
    }
    }
}

SCP-7991

評価: +15+x
thumbnail.jpg

Thumbnail

アイテム番号: SCP-7991

オブジェクトクラス: Keter

特別収容プロトコル: SCP-7991の影響を受けた世帯を財団の管理下に置くため、機動部隊プサイ-7 ("リフォーム屋")が、現地の監視エージェント及び財団のフロント企業とともに任務にあたっています。影響を受けた人物に対し、CRI1のスコアが10点中5.8点以上の職員による尋問を行ってください。

画像 7991-0324
chair.jpg
████ ██████氏 (49)が最後にいた場所。アメリカ合衆国、 ████
撮影 — 09/08/29

SCP-7991の影響を受けた人物の消失に対応するため、必要に応じて隠蔽プロトコルを実施してください。

説明: SCP-7991は、長期間一人で自宅にいる人物に影響を及ぼす、自然発生的かつ現在のところ予測が不可能なイベントです。予測不可能な状況にもかかわらず、影響を受けた人物は当現象の持続のために一人の状態を継続します2。影響を受ける人物のパターン及び関連性は特定されていないものの、高いストレスに晒されている都市部の人物が主に影響を受けているとみられています。

SCP-7991の影響を受けると、対象は日課を済ませ、寝室に戻ります。その後、対象は座るのに適した物体を室内の窓のそばに移動させてそこに座り、物憂げながらもリラックスした表情でその日の残りを過ごします。

SCP-7991期間中、対象の周辺は悪天候にならず、ほとんどのケースで晴天及び曇天となります。

時が経つにつれて、対象は周囲の人物の声を知覚する能力を喪失します。しかし、この変化に対して対象が苦痛を覚える様子は見られません。加えて、対象は自然の音を好むようになり、声以外の刺激に対して非常に敏感になります。

SCP-7991の影響を受けた人物は意味を持った会話をすることが不可能になり、会話を試みるとほとんどのケースで混乱した様子を見せます。話しかけられていることに気が付くと、対象は目に見えて緊張した様子で、周囲や会話を始めた人物、座った場所にある窓を一瞥します。数秒後、対象は落ち着きを取り戻し、微笑んで、会話を始めた人物を丁重にあしらい、再び窓の外に振り返ります。

翌朝、SCP-7991の開始と同時にイリディセント・イベントが発生します。以下は、SCP-7991の影響を受けた対象(プライバシーに配慮し「ジェーン」3と呼称)に発生したイリディセント・イベントを記録した転写です。

[ 記録開始 ]

[早朝、ジェーンは窓の外を眺めている。]

[彼女は椅子にもたれかかり、頭を傾け、遠くをゆっくりと流れる雲の塊を目で追っている。その雲は太陽を覆い、雲間からは光の筋が幾本か注いでいる。]

[彼女はひたすら雲を見ている。彼女の関心が裏庭にある大きな樫の影にゆっくりと移る。吹き抜ける穏やかな風に古い枝が揺れ、葉擦れの音がする中、軋んでいる。]

[庭の池から跳び上がってきたカエルが、木の根元に向かって跳んでいき、その陰に隠れる。庭で鳴く数匹のコオロギと、木の枝の上にとまって鳴く2羽の黄色いウグイスと共にゲロゲロと鳴く。]

画像 7991-0316
rainbow.jpg
消失前、当現象によって構成された虹
撮影 — 09/08/29

[穏やかな雨が降り始める。ジェーンは頭を上げ、薄灰色の雲を見上げる。]

[しばらくの間、霧雨が続く。ウグイスが羽を膨らましながら、さえずりを続ける。穏やかな雨の降りしきる雰囲気と調和したウグイスのさえずりを聞きながら、ジェーンはあくびをする。]

[小さな虹が遠くに出現する。虹は徐々に鮮やかさを増し、雲の中にそびえたつ。ジェーンは虹に向けて視線を上げる。彼女は興味深げに虹を眺め、夢中になっている。]

[水の跳ねる音が庭から聞こえる。カエルが池に飛び込んだ音である。1つに減ったコオロギの鳴き声が、鳥のさえずりとともに静かに響いている。]

[ジェーンは微笑む。]

[椅子にもたれかかり、彼女は息を吐いて目を閉じる。彼女の胸はリズミカルに上下を繰り返す。所々剥げた壁に掛けられた時計から響く単調な音と雨音を聞きながら、彼女は深い眠りに落ちる。]

[雲が途切れ、太陽があらわれる。陽光がゆっくりと窓から差し込み、ゆったりと寝ているジェーンに降り注ぐ。時間が経つごとに、黄金色に輝く光の筋は強さと明るさを増し、ジェーンのそばを漂う埃にゆっくりと反射している。]

[程なくして映像が見えなくなる。最後に視認できる映像は、穏やかに微笑むジェーンの顔である。]

[光が弱まる。雲が再び太陽を覆い始め、光の筋は徐々に小さくなる。]

[誰も座っていない椅子が現れる。]

[ 記録終了 ]

記録された全てのイリディセント・イベントにおいて、対象は必ず姿を消します。

隠蔽プロセスから予想されるよりも早く、対象の近親者が深い悲しみにくれる時期を乗り越え、気持ちの整理がつき、通常の生活に戻る様子が観測されている点は注目に値します。その後、数か月が経過すると、対象の近親者は対象のことを完全に忘却します。


評価: +15+x
特に指定がない限り、このサイトのすべてのコンテンツはクリエイティブ・コモンズ 表示 - 継承3.0ライセンス の元で利用可能です。