SCP-3309
SCP-3309
By: evilplantevilplant
Published on 18 Dec 2018 16:57
評価: +187+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;
    }
    }
}

評価: +187+x

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の影響下にある文書は、保護サイト-01やRAISAアーカイブを含む既知のすべてのファイルシステムから抹消されます。その後、そのアノマリーは効果的に無力化、もしくは完全に消滅します。

SCP-3309-1の内容は次のとおりです:

あなたがこの記事の著者ではなく、この記事を改稿したいという場合は、この投稿に返信してこの記事を改稿する機会を求めることができます。著者の許可を得てください。

SCP-3309は消失した文書用に作成されたバックアップに影響します。SCP-3309は、SCP-3309と接触するアノマリーの文書にも影響を及ぼします。消失した文書の約71%が他の影響を受けていないアノマリーに関連しています。これにより、財団のアノマリーの収容ネットワークが弱体化し、潜在的にADK-クラス全異常存在不安定化シナリオに飛躍する可能性があります。



補遺資料


I. 倫理委員会裁判所


II. プロジェクト・テーパードスピア


III. [ ]

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