| drk:magahub |
|---|
| Byㅤ |
| Published on 06 Jun 2022 18:27 |
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.
…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; }
禍ノ宮異談マガノミヤ イダン
『禍ノ宮異談』は、異常領域「禍ノ宮」を取り巻く日本全国の怪異談について語るカノンです。禍ノ宮は多種多様なわざわい、あやかし、あるいは到底人間には理解不能な有象無象で溢れかえった空間であり、そこからは度々、敵対的な怪異が我々の世界に漏れ出してきます。
財団は最近、禍ノ宮について僅かながらに情報を掴みました。しかし、事態は財団が知るよりも古く深刻なものでした──。
神話
遥か昔、2柱の神の間に産まれた第一子は不完全なものでした。手も足もバラバラな、無数の肉塊として生まれてきた“それ”を、神々は下の世界へ投棄しました。赤子の肉片は、古代の日本列島の各地へと降り注ぎ、落下した土地で緩やかに腐敗していきました。そして最終的に、破片は土地と一体化し、大地そのものに神性が宿ります。
これらの土地──聖地というには余りに悍しいので、ここでは禍地と呼ぶことにしましょう──のうち、大きなものがいくつかありましたが、その中でも特に最大のものが、九州地方のどこかにあったとされています。後にこの土地は神と共存する人々によって栄えたものの、彼らは朝廷に帰依せず、やがては滅ぼされます。
しかし、当時のいくつかの文献は、この土地が実際には滅んでおらず、異次元へと転移した可能性を示唆しています。そして実際、この土地は神界と人界の狭間の次元に浮かび、今日まで存続していました。
禍ノ宮
朝廷側から呼ばれた名称です。当時、実際にその土地に住んでいた人々が、そこをなんと呼んでいたのかはわかりません。
禍ノ宮は現在、異次元上に存在していますが、しばしば基底次元と“重なり”ます。基本的に、この重複は禍地において発生し、その時期は同地における怪事件の発生件数が急激に増加することとなります。しばらくすると重なりは解けますが、時折侵食を受けて重なったままになってしまったり、あるいは完全に禍ノ宮側に飲み込まれて現実世界から姿を消してしまう場合もあります。
現在、禍ノ宮の景観は乱雑です。中心部には消失当時の村落跡地が残っていますが、既に住民は人間ではなくなっています。周囲には取り込まれた、ないしは重複状態にある最近の建造物が入り乱れて存在していることが確認できます。禍ノ宮に昼夜はありません──常に血のように赤黒い空だけが頭上を覆っています。
禍ノ宮は重複領域を介して現実世界と行来することが可能です。儀式を介して人為的に重複領域を形成することも可能ですが、空間自体の侵食性、ならびに原住怪異の存在から、接続には高い危険性を伴います。決して生半可な気持ちでアクセスすべきではありません。
怪異
禍ノ宮に住まう怪異たちです。基本的に、彼らは人類に対し敵対的、ないしは無関心です。多種多様な個体が存在していることがわかっていますが、分類することに意味があるかもわかりません。
彼らは重複領域を介して基底現実に出現し、その遭遇例はインターネットなどで怪異談として閲覧することが可能です。彼らの一部または全部は、かつて人間であったようです。
久恩の会
古くから日陰で存在してきた宗教集団です。彼らは堕ちた子の神を崇拝しており、禍ノ宮に各禍地を奉上していくことで、神が本来の姿に近づいていくと考えています。神が“真っ当な神”のステージに達した暁には、神が神界に上昇する際に、自身たちもともに連れられていくことになると信仰しています。
久怨株式会社
主にホラードキュメンタリーなどを制作していた、小さな企業です。ある年、禍ノ宮の重複領域で撮影を行ったことで会社全体が怪異の影響を受け、数々の怪現象に巻き込まれた末に、上層部全員が異様な状況で失踪したことで終焉を迎えました。同社に関連するいくつかの物品は、SCPオブジェクトとして財団に収容されています。