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):
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.
.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; }
☦God has been dead for a long time.☦
沼地で、女のようなモノが横倒しの木のようなモノの上でバランスを取っている。
空の上には行き先しれずの渡り鳥の羽が舞い
湖への降下で、彼らの頭は一時消えてしまう
地平線は変わらず紫影に覆われ、私はすべてを見ることができる。何もかも現実で原物。
何もかも地獄に堕ち、この岩は私のファラデーの籠のように思える。私はもう私すらわからない。
私は、未だ恐れることのできる唯一の存在だろうか？
私は、特異点を待つ唯一の存在かもしれない。そのこと以外はどうでもいい。
ネズミは長い間増え続け、先はもう長くは無い。
年は3053年、私はすべてを見てきた。
終わりを始めよう。
Ancient History
The Information Age
サイト-18の変化
July 28th, 1976
Senescence, Consumption, Persecution
August 14th, 2051 - September 9th, 2077
アンノ・ドミノ
December 1st, 2081
Himinbjörg
February 2nd, 2087
The Last Era
蛇の一手
December 21st, 2090
Another Lost Legacy
September 13th, 2112
The Last Meeting
November 19th, 2117
August, 2119
The Age of Rot
蜷局の締まる強さ
September 18th, 2160
夢への哀しき賛歌
October 10th, 2167
What Lurks In The Dark
All Hallow's Eve, 2313
The Rat's Nest
Nonpareil
Kali Yuga, 30XXXXX
1
T-Minus X
- - - - - - - - -
ラッツネストカノンはLTE-0913-Ex-Machina破壊の影響とそれに追随する出来事をカバーしています。その結果はSCPオブジェクトの創造と増加、そして非常に緩やかな現実の崩壊を引き起こしました。
このユニバースにおいて典型的な財団カノンとはいくつかの異なる面があります。これは大体以下のことについてネタにされる”ドレッドノート”カノンです。
- GOCは神の殺害の結果としての異常現象に責任があります。彼らは、このことを認識しており、必死に物事を修正したいと思っています。
- アドミニストレーターや財団トップレベルの指導者の個々人は彼等自身がアノーマリであり、我々の知るように正常な側の立場にはいません。彼らは異常なオブジェクトを収集し、またそれらの破壊を嫌います。財団職員の大部分はこのことを認識しておらず、彼らがより大きな利益のために働いていると本当に信じています。
- カオスインサージェンシーは創設メンバーが財団の真の性質を認識した後、第二次世界大戦周辺に形成された分派です。 財団の影響により彼らは鬼と化し、追われています。 カオスインサージェンシーは、財団に同情的な世界で生き残るために、時には非道な行いをしなければなりません。
Ancient History: タイムラインのこの部分は主にラッツネストカノンのLTE 0931 Ex Machinaの破壊、それの性質、破壊された理由、また古来のGOCの成り立ちに関連しています。
The Information Age: アノマリーの増加が制御不能になる以前の人類支配下最後の時代。
The Last Era: 人類が存在のために足掻く中間の時代です。他が全く混沌とする間、しかし、いくつかの文明のポケットは比較的居住することができます。Falloutを考えてみてください。
The Age of Rot: 平凡な人間、植物相と動物相が極めて稀になった時代です。規格外の生物とオブジェクトが標準です。
The Rat's Nest: 完全な混乱、発育不全の世界。現実とは私たちのものとは異なっているか、あるいは認識することが出来ません。これは必ずしも「世界の終わり」ではなく、むしろ、私たちが知っている世界の終わりなのです
補遺
「ラッツネスト」にカノンは存在していません。連続しているというわけでもありません。ストーリーの最終的な終わりや始まりはなく、単に書くプラットフォームです。Wikiのようなものです。 カノンに記事を提出するために特別な配慮や許可は必要ありません。
