釣魚評議会: より大きな魚
釣魚評議会: より大きな魚
Byㅤ WitheriteWitherite
Published on 18 Jun 2022 06:38
rating: +6+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.


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


rating: +6+x






このため、彼は目の前にいる若い男性 — 異常伝達・関係部門のシャルル・コーエンと名乗っていた — の依頼に危機感を抱いていた。



「ええとですね、技術的にはその通りです — ですが理由を考えてみてください。SCP-5597担当の人に連絡を取ったのですが、この動物は職員の予想していた方法ではしゃべっていないようなんですよ。あれが出している音は、ええと我々の一番の推測では、クジラがロシア語を話すのに最も近い音なんです。速度を落としてピッチを上げるソフトウェアを作るのは簡単です — マイクとスピーカーを使ってそのプロセスを逆にすることも簡単です — しかし、なんといってもあれの言っていることを実際に理解できる人が必要なんです。そしてそれがあなたなんですよ!」シャルルはほほ笑み、主張を一対のガンフィンガーで強調しながら答えた。

ヘンリーはその男性を叱りかけたが、ターシャ・レベデフとした約束の記憶が戻ってきた。彼は、財団を代表して、彼女とその子どもたちの世話をすることを約束していたのだ。いまだに彼女たちのトロントでの暮らしぶりについて最新情報を受けていた。誰に聞いても、彼女たちは21世紀のカナダ文化にとてもよく溶け込んでいた — 特に子どもたちがそうであったが、子どもは往々にして適応できるものだ。









「えっ、」彼は反応し、一瞬腹の中に焼べられた不安な感覚を忘れた。「我々の理解する限りでは、第2次世界大戦の間にあるロシア人の家族が避難した。母親とその子どもたちだ。その家族はある集団となんとか取引をして、その集団が数頭のクジラの体内に家族をひそかに詰めて、そのクジラは少し前に海岸に漂着した。我々はどうやって時間が調整されたのかわかっていない。家族は全員ショックを受けていて、私だけが唯一彼らと話せた — 彼らは今つつがなくやっているよ!」彼は心底幸せそうに付け加えた。


「あれは — 彼は家族のガイドで、母親の最年長の息子だった。避難のもう一つの犠牲で、私は —」告白の重みが彼にのしかかる前に、ヘンリーはバランスを崩された。彼らは出航し、固い地面ははるか遠くに消えていき、彼は小さな嗚咽をのど元に抑えた。

最終的に、冷や汗をかいて椅子のひじ掛けを握っていたヘンリーは、小さな雑談に注意を向けられるほどにはリラックスした — サラとエマはシャルルに釣りの話をしていた — とはいえ、ほとんど聞き取ることはできなかった。「トラッカーによれば奴の上にいるらしい」グレッグが船室から声を張り上げると、ヘンリーは向き直り、巨体が船のそばで水面からブリーチするのをすんでのところで見ることができた。彼は何を見たか理解するのに少し時間がかかった。水の爆発のようなものから、巨大な青灰色の体は急上昇し、驚くべき機動性をもって空中で回転し — 巨大な、表情豊かでほとんど人のような目が彼の視界を捕らえ — そしてその生き物は波に突入し、船と乗組員に細かい霧を撒いた。そして、静寂があった。


音は最初こそ別世界のもののようで、低くリズミカルな、遅く意味ありげのものだった。しかし、シャルルがダイアルを調整すると、声が現れた — 識別できる、奇妙にもよく知った反響で、彼は驚いた。

もしもし? もしもし?


こんにちは! 聞こえるぞ。君は聞こえるか?


聞こえてる! 聞こえてる! こんにちは、こんにちは! すごい長かった!




ピョートル、なんで — どうやって? お母さん! し、知ってる? お母さんは大丈夫なの! それと妹たちは、コスティア、イリナ、カーチャは — 無事でいる?


彼らに会ったんだ、ピョートル。彼女は — ターシャは、君をどれほど誇りに思っているか知って欲しいと言っていた。君は家族を安全にしたんだ、ピョートル、彼らは全員もう安全だ。


家族と話せる? お願い。



時間がゆっくりと、しかし素早く過ぎていった。イワノン博士はピョートルに、彼の状態についてのシャルルの質問、財団が彼を他の人と離さなければならなかった理由、財団の組織がどのように彼を世話するかについての説明 — それと地域の海洋生物に関するサラの質問を — 中継した。彼は、たとえ何が起きているのか、あるいはこの人たちが何者なのかピョートルが完全にはわかっていなかったとしても、この生き物が会話に感謝しているとわかった。帰る前に、彼はクジラに保証した — かつて人だったクジラに、彼は帰ってくると、誰も君を見捨てないと約束した。






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