ツィツフズ・ヘル ハブ

ツィツフズ・ヘル ハブ
Byㅤ Dr_Kasugai
Published on 23 Jul 2022 06:30

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;
    }
    }
}

ツィツフズ・ヘル ハブ

by Zygard

カノン所属作品 (年代順)

---

2000 - 2020

• SCP-PL-289 "Wielowymiarowe Rozwiązanie Problemu Zakupów w Biedronce" — もっと楽に暮らしたいという欲求は、財団を袋小路へ導いた。 — by Zygard
• Chaos Kontrolowany — 悪魔の辿り着かぬところに、彼は混沌カオスを齎す。 — by Zygard
• Projekt aplikacji — Malphas — マルファスはお客様に合わせて設計されたホームヘルパー、アシスタント、セラピストです。 — by Zygard
• Zlecenie MEF-2839 — “アドラメレク”速射ライフルは、お客様のニーズに合わせて製造しております。 — by Zygard and EvilAngel413
• Zimno Jak W Piekle — 民間の南極探査隊はそこにあるべきでないものと総遇する。 — by Zygard
• SCP-PL-139 "Mięsny Rój" — 施設の建造中に1m×1mの肉のキューブがあんな問題を引き起こすなんて、一体誰が考える？ — by Zygard
  • Wiedźmy — by Zygard
• SCP-PL-189 "Demon Senny" — ハンターは犠牲となったのだ。 — by Zygard

このカノンは何？

『ツィツフズ・ヘル』 Piekło Cycówは、我々の次元とは障壁で隔てられている、悪魔次元の存在に関するカノンです。偶然にも、この障壁は辺境のツィツフ市¹で最も薄くなっています。市内でアノマリーの発生が相次いだことを受けて、財団はすぐに市全域を確保、Nx-79“ツィツフ市”と命名し、市を外の文明から完全に切り離しました。サイトPL-79がネクサス全域を見張り、悪魔次元に関するアノマリーを調査するべく設立されました。

しかし、その存在を知っている組織は財団だけではありませんでした。ツィツフ村の森にはハンター・インダストリーズ社の兵器工場と本部が存在しています。財団が悪魔実体の研究を行っているのに対し、彼らは技術開発と兵器製造に悪魔を利用します。彼らは複数の研究所や工場を、我々と悪魔の次元双方に構えています。

人物、場所、要注意団体、用語

人物

---

• アントニ・グズミフィ管理官 (Director Antoni Grzmichuj) — 2003〜2010年のサイトPL-79管理官。財団にとって不利な契約をハンター・インダストリーズと結んだ際の署名責任者であったことから、法務部門の郵便室に左遷された。監督官の立場に誇りを抱いているため、かつての立場を取り戻し、自分が単なる無能ではないと思いたがっている。

• ブリジダ・ヴィシュニエフスカ (Brygida Wiśniewska) — サイトPL-79の財団エージェント 兼 監査官 インクイジター。彼女の働きで、アントニ・グズミフィはサイト管理官でなくなった。断固とした性格の自信家で、歯に衣を着せない人物。

• カミル・シュトル管理官 (Director Kamil Szczur) — グズミフィ後任のサイトPL-79管理官。若く自信ある男性で、自身の価値を証明したがっている。前任者の問題解決に取り組み、ハンター・インダストリーズとの契約による妨害をかいくぐろうとする。

• コンスタンティン・ヤコフスキ博士 (Dr. Konstantyn Jackowski) — 悪魔部門長。一見無能で、そのルーズさから職位にそぐわないように見える。だが実際は、悪魔存在と悪魔次元に関して財団最高峰の知識を誇る人材である。長年財団で働く奇跡術師でもあるが、悪魔学ほど深く関わっているわけではない。ウィスキー愛飲者。

• アダム・ハンター (Adam Hunter) — ハンター・インダストリーズの2人の経営者の片割れ。主に外部の人間と社の契約を結ぶ役割に就いている。穏やかでプロフェッショナルな、白髪に白服の男。目を合わせた者に強い暗示をかける異能を持つ。

場所

---

• 悪魔次元 — 障壁によって隔てられた別次元で、我々の世界の悪魔版。悪魔存在が居住しており、知的で文明を築いているものと、知能の無い怪物がいる。景観の特徴は、白く、些か血を浴びたかのような菌類の構造物。

• Nx-79 “ツィツフ市” — ツィツフ市の全域が、DunwichクラスのNx-79 “ツィツフ市”に分類されている。Nx-79は我々の次元と悪魔次元を隔てる障壁が最も薄い場所である。Nx-79地域で自殺した人物は、ツィツフ市で死んだ際と同じ状態で再出現する。ただし蘇る場所は悪魔次元であり、大量の悪魔実体がいるために我々の次元より遥かに危険である。

• サイトPL-79 — ツィツフ村に設立された財団サイトで、Nx-79全域のアノマリーならびに悪魔次元関連存在の確保を担う。また、悪魔部門の本部でもある。

要注意団体

---

• ハンター・インダストリーズ — アマンダ・ハンターとアダム・ハンターの双子により創設された会社。ハンター・インダストリーズの本部はツィツフ村に位置する。社自体は悪魔存在・悪魔次元関連の兵器・技術の研究・開発を行っている。複数の研究所・工場を我々の現実と悪魔次元の双方に保有している。

用語

---

• EZAWエネルギー — 悪魔実体から得られる異常なエネルギー。ハンター・インダストリーズの技術・兵器に使用されている。

• 悪魔実体 — 悪魔次元由来の存在の名称。A〜Eの文字で分類されており、この分類法は財団とハンター・インダストリーズの双方が使用している。階級が高いほど、強い力と高い知性を有する。クラスE悪魔実体は貧弱かつ無知性である。クラスD存在は動物に似る。危険かつ強力だが、本能のままに動く。クラスC実体は通常発話ないしは他の手段でコミュニケーションを取ることができ、クラスD実体より強いとは限らない一方、通常はそれよりも賢い。クラスB悪魔実体は高位悪魔であり、悪魔次元の特定箇所で統治権を行使する。クラスA悪魔実体は1体が知られているが、彼についてのデータは機密事項である。

このカノンと他のカノンの関係

このカノンと共存できるカノン

---

• 潜伏治療 — 『潜伏治療』はかなり緩いカノンであるため、互いの設定は衝突しません。

• 雑草 — 『雑草』はかなり緩いカノンであるため、互いの設定は衝突しません。

• 罪団 — カノン構造が解釈に大きく左右されるものであるため、『罪団』の出来事はここでも正規設定となり得ます。

• 黒塗りの空 — 『黒塗りの空』は『ツィツフズ・ヘル』の正規設定であり、その逆もまた然りです。

• 120の記録書庫より, ノー・リターンならびにメタファウンデーション²所属カノン — メタファウンデーション所属カノンに言及することがあるかもしれません。『ツィツフズ・ヘル』の記事と直接矛盾しない限り、関連する出来事は正規設定と見做されます。

このカノンと共存できないカノン

---

• 機界紛争 — かなり多くの点が異なります。

年表

2003年 — アントニ・グズミフィがサイトPL-79の管理官になる。
2010年 — SCP-PL-189がサイトPL-79の管轄区に出現。
2011年 グズミフィ管理官が降格され、カミル・シュトルが新たなサイト管理官となる。
2013年 — 偶然にも、ハンター・インダストリー制作の悪魔アプリが一般に公開されてしまう。
2014年 — 悪魔実体の問題により、ハンター・インダストリーズの兵器をA.R.G.U.S.株式会社に発送するのが遅れている。
2017年 — 建設中のサイトPL-48でセキュリティ違反が発生し、建設が大きく遅れる。
2019年3月 — ツィツフ村での謎の儀式により、サイトPL-48のSCP-PL-139の振る舞いに大きな変化が生じる。
2019年6月 — 奇跡術儀式の犠牲となったクラスC悪魔実体がサイトPL-49に収容される。

ここで何か書いてみたくなりましたか？

『ツィツフズ・ヘル』は悪魔、文明からの市全域の隔絶、悪魔存在を私利私欲のため利用する企業、それらを理解しようとする財団についてのカノンです。これだけ知っておけば十分でしょう。詳細を知りたければ、試しに記事を読んでみるか、あるいはカノン監督 (Zygard) までWikidotかDiscord (なるべくDiscord) でご質問ください。

質問コーナー

---

どんな人がこのカノンに参加できますか？
— 誰でも！

あの、このカノンで記事を書きたいんですけど、私のだと出来事がちょっと違っていて、他の記事とちょっと矛盾するんです。でもこの記事がクールなのは間違いないんですよ。
— OK、ただその作品は他の作品からは正式設定とは見なされません。

複砲マルチカノンドリフトがしたい。このカノンを使ったうえで他のカノンも採用した作品が書きたいんです。
— 設定等がちゃんと揃っていて、まず私に査読させてくれるなら、素敵ですね。

このカノン専用のCSSテーマはありますか？
— 今のところないですが、ハンター・インダストリーズのフォーマットには、Basaltをダークモードでヘッダーを変えて使うのをお勧めします。注文MEF-2839で見れるような感じです。他の記事には、Flopstyle: DARKをちょっと変えて使うか、あるいは単にJakstyleをBlack Highlighterと併用したりして使うといいでしょう。

テーマ

角括弧がある場所にはもう一個角括弧を足すのを忘れないでください。ボブ・ロスが言ったように、誰にだって友達が必要ですからね。

ハンター・インダストリーの記事用

[include :scp-wiki:theme:basalt darkmode=a]
[module CSS]
:root{
—logo: url(http://scp-jp-storage.wdfiles.com/local--files/file%3A3995762-92-6txe/hunterindustrieslogo);
—title: "Hunter Industries";
—subtitle: "僕等の製品に心を開いて";
}
#side-bar {
margin: 0;
}
[/module]

Flopstyle Dark (このハブで使われているやつ)³⁴

[include :scp-wiki:theme:flopstyle-dark]
[module CSS]
@import url('https://fonts.googleapis.com/css2?family=Zen+Antique&display=swap');

:root{
/* — COLORS — */
—accentColor: #8f180d;
—accentColorLite: #8f180d;
—hue: 0deg;
/* — TITLES — */
—header-title: "ツィツフズ・ヘル";
—header-subtitle: "悪魔がおやすみを告げ、犬が尻で吠える場所";
—titleColor: title_colour;
—subtitleColor: white;
/* — LOGO — */
—lgurl: url(http://scp-jp-storage.wdfiles.com/local--files/file%3A3995762-101-gczt/cycowlogo.png);
/* — STATIC COLORS — */
—textColor: hsl(212, 3%, 75%);
—bgColor: #1f0101;
—fgColor: #000000;
/* — FONTS — */
—header-font: 'Zen Antique', serif;

}
#extra-div-1{
filter: opacity(15%);
}

.meta-title{
font-size: 1.55rem;
font-weight: bold;
}

#top-bar .open-menu a{
color: var(—accentColor) !important;
background: var(--fgColor) !important;
border: thin solid var(--accentColor) !important;
border-radius: 0;
box-shadow: none;
}
#top-bar .open-menu a:hover{
padding: 0;

color: var(--fgColor) !important;
background: var(--accentColor) !important;
}
[/module]

Jakstyle

[include :scp-wiki:theme:black-highlighter-theme]
[include :scp-wiki:theme:jakstyle]

まだ質問があります！
— SCPポーランド語支部のDiscordかWikiから質問してください。

海外の方へ

海外の方へ

---

このカノンの名前はなんで『ツィツフズ・ヘル』って言うんですか？
— このカノンの出来事は、主にツィツフ村とその周辺を舞台にしています。ツィツフ村は実在する場所です。

……ポーランド語以外の支部に所属しているのですが、このカノンで書いても大丈夫ですか？
— ええ、大丈夫ですよ！ まずは私に連絡し、その後あなたの支部で作品を公開し、INTに翻訳してください。そうすれば私や他の人がポーランド語に翻訳できますからね。

Footnotes

1. 訳注: 原文はGmina Cyców。Gmina (グミナ) とはポーランドの基本行政区分で、立ち位置としては日本の市町村に近い。ツィツフ市はいくつかのより小さな村が集まってできているが、その中に市の名の由来となった村、ツィツフ村がある。

2. 訳注: 主にENで2022年辺りから一部有志が進めている、複数のカノンを統合させて巨大なメガカノンを構築するプロジェクト。先述した2カノンの他、『オンガード43』や『S & Cプラスチック』などがここに所属している。

3. 訳注: 元ページのデザイン更新時にこの部分は更新を忘れられており、旧デザインのままになっている。そのため、訳者判断で独自に新版に更新している。

4. 訳注: 「犬が尻で吠える場所」 (Gdzie psy dupami szczekają) は、辺境の地を指すポーランド語の下品な慣用句。