SCP-6875
評価: +13+x
blank.png
SCP-6875
Byㅤ DirStarFishDirStarFish
Published on 28 Aug 2022 16:37
評価: +13+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;
    }
    }
}

diablo.jpg

PALEOLITHIC THUMBNAIL OOGA CHAKA

SCP-6875

アイテム番号:SCP-6875 レベル5/6875
収容クラス:SAFE top-secret

撹乱クラス: vlam


特別収容プロトコル


SCP-6845へと通じるメインエントランスは封鎖されています。5/GENERALクリアランス職員もしくは他の権限を保持する人物はSCP-6875に入場可能です。SCP-6875への侵入を試みた人物は誰であれ拘留され、取り調べが行われます。


説明


diablo.jpg

SCP-6875のエントランス付近の壁面にて発見された壁画。

SCP-6875はベラルーシ北部、ヴィーツェプスク州ミョールィの町の近郊に位置する洞窟です。道具と洞窟壁画の存在からは、約10万年前におけるSCP-6875での初期人類の居住が示唆されます。

SCP-6875の奥部の複数箇所では重い巨岩を障壁として用いた小部屋が設けられています。これら岩塊の多くは破壊されているか、力づくで撤去されています。これら石室に関する調査からは、部屋が初期の人類により異常物品用仮設収容室として建設された事が示唆されます。経年劣化と当該遺跡の管理の不備が原因で、収容室の建設目的であった遺物の多くは失われています。しかしながら、収容室外の入り口の粗雑な壁画からは室内に収められていたと思われるアノマリーについて一定の知見が得られます。


補遺.6875.1

収容アノマリー


以下は室外で発見された壁画あるいは収容室内に施された改装箇所も含めた上での、SCP-6875にて収容されていた既知のアノマリーのリストの抜粋です。SCP-6875のアノマリーの完全な一覧へのアクセスには申請が必要です。

指定区分 説明 室内の改装箇所 壁画
SCP-6875-Auroch 一頭のBos primigenius (オーロックス)の白骨化した死骸が室内で発見された。骨の殆んどに蔓が巻き付いており、骨格の大部分の損傷と散逸を防いでいた。骨格の分析からは死亡時期が20世紀初頭のどこかの時点となっており、同種の中での最後の存命の個体の死骸と見なせられる。分析からは他にもオーロックスが死亡時点で10万歳を遥かに上回っていたと判明しており、異常な程に引き延ばされた寿命を有していた事を示している。 収容室への小型シュートがメインエントランスの脇に掘られ、恐らく石造扉を外さずとも室内に食べ物や水が入る仕組みになっていた。   室外の壁画では、人間の集団が両方の角から光線を発している大型のオーロックスを崇拝している光景が映し出されている。
SCP-6875-Maker 収容室内には地上へと通じる大穴が広がっている。穴に関する調査からは外部からの鈍力で生じた事が示唆される。収容室の床には子供向けの人形や玩具が散乱している。部屋の端には未完成の玩具や擦り切れた道具が載った、小さな急ごしらえの木造テーブルが置かれている。人形の中には草が編み込まれているものもあり、これらは時折活性化し、起き上がって周囲で踊った後に再度不活性化する。 N/A 口ひげを生やした男がテーブルにて作業に取り組んでおり、その周囲では人形が踊っている場面が描かれている。
SCP-6875-Mesozoic 財団による発見に先立ち、収容室の岩塊は一回り小さな岩片により封鎖されていた。扉の撤去後、室内にて一頭のノタテッサラエラプトル(Notatesseraeraptor)の生きた個体が発見される。当該個体は居合わせた財団職員に襲いかかった後で銃撃された。攻撃から緩慢に再生していく光景が目撃されると、現場の職員は即座に移動収容室へと運び込み、十分な収容を実施可能な現地の財団施設まで移送した。 扉の隣に観測窓が掘り込まれている。 恐らくはSCP-6874-Mesozoicに当たる一頭の獣脚類恐竜が槍を装備した約50名の人間に包囲されている場面が描かれている。
SCP-6875-Machine 部分的に熔融した鋼鉄とタングステンの塊が収容室の隅に鎮座しており、隣には現生人類の白骨死体がある。白骨死体は時間異常部門所属の"マシュー・リーズ博士"と身元を示す名札が付いた財団の白衣に身を包んでいる。 財団により雇用された人物で当該氏名の人物は現在誰も所属しておらず、過去においても同様である。 N/A 白衣を纏った一人の人物が輝く箱より出現している光景が確認できる。3人の男性と女性から成る集団が背後から箱に近づいている。別の人物が箱から逃げ出していく場面が描かれている。
SCP-6875-Fire 石炭と木炭が室内に散乱しており、壁の大部分は煤と焼け跡で覆われている。炭化していない木塊が隅に置かれている。 収容室の天井一面が地上へと通じる小さな穴だらけになっている。 燃え上がる炎で村が焼け落ち、人々が逃げていく場面が描かれている。


補遺.6875.2

更なる実地踏査


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