SCP-7009

SCP-7009
By: Witherite
Published on 28 Jul 2022 02:38

What this is

A bunch of miscellaneous CSS 'improvements' that I, Croquembouche, 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):

• RSO Component — Rounderhouse

Personal styling themes (which are visual overhauls):

• Magnus Web Format — DrMagnus
• Flopstyle CSS — Lt Flops
• Blankstyle CSS — HarryBlank
• Placestyle CSS — Placeholder McD
• Jakstyle — JakdragonX

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;
        pointer-events: auto;
}
 
@media not all and (max-width: 767px) {
 
    #top-bar .mobile-top-bar {
        display: block;
        pointer-events: none;
    }
 
    #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: -18rem;
        width: 15.25rem;
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        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;
    }
    }
}

▷ コードを表示 ◁

@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap);
 
/* Centered Header Sigma-9
 * [2021 Wikidot Component]
 * By Lt Flops (CC BY-SA 3.0)
 * Forked from:
   * Penumbra Theme by EstrellaYoshte
 * Also based on:
   * Centered Header BHL by Woedenaz
**/
 
/* ---- VARS ---- */
 :root{
     --titleColor: hsl(0, 0%, 95%);
     --subtitleColor: hsl(60, 62%, 85%);
     --lgurl: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A7522555-167-g69b/logo.svg");
}
 
/* ---- SITE BANNER ---- */
 #header,
 div#header{
     background-image: none;
}
 
 #header::before{
     position: absolute;
     width: 100%;
     height: 100%;
     content: "";
 
     background-image: var(--lgurl);
     background-position: center top;
     background-repeat: no-repeat;
     background-size: auto 10.55em;
     opacity: .33;
}
 
 #header h1,
 #header h2{
     float: none;
     margin-left: 0;
 
     text-align: center;
}
 
 #header h1 span,
 #header h2 span{
   /* Hide the Existing Text */
     display: none;
}
 
 #header h1 a::before,
 #header h2::before{
   /* Style the New Text */
     font-family: "Montserrat", "Arial", sans-serif;
     text-shadow: none;
}
 
 #header h1 a::before{
     position: relative;
     bottom: .15em;
 
     color: var(--titleColor);
 
     font-size: 115%;
     font-weight: 700;
}
 
 #header h2::before{
     position: relative;
     top: .1em;
 
     color: var(--subtitleColor);
 
     font-size: 130%;
     font-weight: 600;
}
 
 #header h1 a::before{
   /* Set the New Text's Content From Variable */
     content: var(--header-title, "SCP財団");
}
 
 #header h2::before{
     content: var(--header-subtitle, "確保 - 収容 - 保護");
}
 
/* ---- SEARCH ---- */
 #search-top-box{
     top: 1em;
     right: 0;
}
 
 #search-top-box-form input.button{
     margin-right: 0;
}
 
 #search-top-box-input,
 #search-top-box-input:hover,
 #search-top-box-input:focus,
 #search-top-box-form input[type=submit],
 #search-top-box-form input[type=submit]:hover,
 #search-top-box-form input[type=submit]:focus{
     border-radius: 0;
     box-shadow: none;
 
     font-size: 100%;
}
 
/* ---- TOP BAR ---- */
 #top-bar{
     right: 0;
     display: flex;
     justify-content: center;
}
 
 #top-bar ul li ul{
     border-bottom: 1px solid hsl(0, 0%, 40%);
     box-shadow: none;
}
 
/* ---- LOGIN ---- */
 #login-status{
     top: 1.1em;
     right: initial;
 
     color: hsl(0, 0%, 87%);
}
 
 #account-topbutton{
     border-color: hsl(0, 0%, 87%);
 
     font-size: 100%;
}
 
/* ---- PAGE TITLE ---- */
 .meta-title,
 #page-title{
     text-align: center;
}
 
/* ---- BREADCRUMBS ---- */
 .pseudocrumbs,
 #breadcrumbs{
     text-align: center;
}
 
/* ---- MOBILE DISPLAY ---- */
 @media (max-width: 767px){
     #search-top-box{
          top: 1.85em;
          width: unset;
    }
 
     .mobile-top-bar{
          position: relative;
          left: 0;
          display: flex;
          justify-content: center;
    }
 
     #login-status{
          top: 0;
          right: 0;
    }
 
     #header .printuser{
          font-size: 0;
    }
 
     #header .printuser img.small{
          margin: 0;
 
          transform: translate(6px, 4px);
    }
 
     #my-account{
          display: none;
    }
 
     #account-topbutton{
          margin-left: 2px;
    }
}

 

SCP-7009 — すべての道はローマに通ずAll Roads Lead To Rome

---

▸ この著者の他の作品 ◂

---

翻訳:

F.A.Q.

SCP-7009

カノンハブ » アド・アストラ・ペル・アスペラ－ハブ » SCP-7009

キュリオシティ火星探査車が発見したSCP-7009-018

アイテム番号: SCP-7009

オブジェクトクラス: Euclid N/A

特別収容プロトコル: I/OミネルヴァMINERVAはインターネットや報道機関を監視し、新たに発見されたSCP-7009実例に関係するキーワードを探します。それらは必要に応じて隠蔽もしくは信用失墜させます。
更新: ヴェールの崩壊に続き、SCP-7009の収容は終了しました。北京異常科学研究所と協力して研究は継続されます。

説明: SCP-7009は古代ローマに関連する普遍的な確率的現象です。

SCP-7009実例	説明
SCP-7009-004	ランダムテキスト生成器が『アエネーイス』.ローマの詩人プーブリウス・ウェルギリウス・マロー著作の叙事詩。を完全に生成した個々の31件の事件の総称。精査では、いかなる奇跡術的あるいはオントキネシス的活動も関係していないことが示される。
SCP-7009-018	火星で発見されたローマの劇場ドゥッガ.チュニジアのベジャ県だった場所に存在する古代の劇場。2025年まで年に1度のドゥッガ国際フェスティバルの会場であったが、2025年に局地的レテ・イベントによりイベントの組織が不可能になった。の3分の2のレプリカ。周囲の岩石が浸食されたことで自然に形成されたものと思われる。いかなる奇跡術的あるいはオントキネシス的活動も検知されなかった。
SCP-7009-095	冥王星の地表で発見された『ヴェッレトリのサルコファガス』.紀元140-150年の華美に彫刻された古代ローマ様式のサルコファガス（石棺）。の形状をした隕石。分析により、冥王星の地表との衝突で隕石が損傷し現在の形状になったことが示唆されている。いかなる奇跡術的あるいはオントキネシス的活動も検知されなかった。
SCP-7009-146	リングワ・フェーマLingua Phehma。.外骨格の関節部からガスを放出することでコミュニケーションする異星人種である、フェーマトPhehmatの主要な言語。フェーマトのコミュニケーション手段は大幅に異なるものの、リングワ・フェーマの書式は機能的には古典ラテン語と区別できない。
SCP-7009-264	惑星TRAPPIST-1e上にある4.3 km x 0.9 kmの古代ローマ様式の戦勝記念柱。以前は極度の地震活動にさらされていた山であったように思われる。
SCP-7009-338	くじら座オミクロン星。.太陽からおよそ200-400光年離れた赤色巨星の脈動変光星。地球の星座であるくじら座の一部。光度の不規則的な変化は、数世紀かけて観測されるとモールスコードとして読み取れ、「来た 見た 勝った」に翻訳される。
SCP-7009-509	惑星ケプラー753bにかつて存在した、活動的なサンゴの種によって築かれた異星人の文明。その文化や大半の知られている歴史は、古代ローマのそれとほぼ同一である。ケプラー753bはおよそ12億年前に最大のスーパーボルケーノが噴火した際にXKクラス世界終焉シナリオを被った。それ以来惑星地表の83.1%を覆っている火山灰の厚い層のためにのみ、ケプラー753b上の生命の証拠は存在している。

SCP-7009は「収斂可能性」の一形態であるように思われます。収斂進化が無関係の種が類似した結果に至る発達的な現象であるように、収斂可能性は類似しない原因から同一の結果が起こる因果的な現象です。

私は子どものときから、宇宙を理解しようとすることに夢中だった。ヴェールがはがされた直後に思春期を迎えると、その後のアノマリーに対する文化的熱狂にのめり込みながら成長していった。後になって考えれば、これは必然的だった— 11歳の少女になって魔法は本当だったと学ぶ？ 起きているときはずっとそれに魅了されていた。どうして魅了されないことがあろうか？

若い私の心には、財団の覆いの向こう側を覗き込んで、世界は解明も説明すらもできないもので満ちていると発見するのは、魅惑的でもあり恐ろしくもあった。白昼夢であり、逃れられない悪夢だった。自分を引き離すことはできなかった。学べば学ぶほど、私がいかに何も知らないのかさらに理解することになった。

北京異常科学研究所で在職を始めたとき、この実存的な恐怖からの救いをカオス理論の中から見出すようになった。世界は予測できず不可解なまでに奇妙なのはその通りでも、それでも全ては基本的な法則の複雑なシステムのもと動いているのだ。熱力学第2法則を考えてみると、何があったとしても、少なくとも誰もが宇宙は常にエネルギーのより低い状態に向かって進んでいると確信できる。エントロピーはその絶対的な確実性の中で、一種の暗澹たる安心を与えてくれる。

SCP-7009を研究するようになったとき、こういった哲学的な不安は決して心から離れていたわけではなかった。再び、私は意味をなさない宇宙に直面した。SCP-7009はある程度の現実改変がなければあり得るはずがなかった— しかし私たちがどこで発見しても、ヒュームレベルは安定したままだった。奇跡術やオントキネシスの活動の痕跡は決して発見されなかった。

SCP-7009は単なる偶然の産物に過ぎない— しかし「偶然」は実際には存在しない。カオスは計り知れないほど複雑な法則の結果だ。そして、全くあり得ないものの深淵を覗き込んでいるとき、私は自分の古い信念を改めていることに気が付いた。

宇宙は常にエネルギーのより低い状態に向かって進んでいる。全ての道はローマに通ず。

—修 晃シュウ・フアン博士