Byㅤ C-DivesC-Dives
Published on 01 Jan 2023 08:14
評価: +16+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(';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: */
#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;
    @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;

評価: +16+x


アイテム番号: SCP-6751





特別収容プロトコル: SCP-6751は存在しないので、収容は不要です。.Kušum: アイテムの収容は無期限に放棄されています。

説明: SCP-6751はカナダのビクトリアに位置する、存在しない2階建ての住宅です。知覚及び物理的な相互作用が可能であるにも拘らず、徹底的な試験.ソナー解析、赤外線解析、熱画像解析、電磁波解析、奇跡術解析、ヒューム値解析を含みますが、それらのみに限られません。によって、SCP-6751は現実には存在しないと断定されました。公文書の記録は、SCP-6751が“ラクーナ建設・修理社”によって2007年に建造されたことを示しますが、その他の情報はまだ発見されていません。

SCP-6751には現在、ジョン・ドームという38歳の男性、以下SCP-6751-Aが居住しています。ドームは2012年、一般的なビクトリア市民の経歴を取材しているジャーナリストを装ったエージェント N・ネスシオによってインタビューされました。ネスシオの秘匿ボディカメラの構造上の欠陥が原因で、このインタビューの映像の大部分と全ての関連メタデータは、深刻なデータ破損を被り、閲覧不能になっています。以下の記録は復元されたごく僅かな映像・音声から成っています。





SCP-6751-A: —み始めて… 7年ぐらいかな。親父が死んだ時に相続した。

ネスシオ: ご愁傷様です。

SCP-6751-A: [笑う] 気にすんな。正真正銘のクソ親父だった。俺の [指でエアクオートの身振りをする] “ライフスタイル面の選択には賛成できない”って理由で、16歳の俺を家から追い出しやがったんだ。

SCP-6751-A: 俺が家を相続できたのは、親父に遺言状を書く暇が無くて、何を望んでいたかを誰も知らなかったからだよ。俺は親父の持ち物をあらかた捨て—


ネスシオ: —れは全部あなたが描いたんですか?

SCP-6751-A: ああ。俺は昔から少しばかり天文学オタクでな。将来は宇宙飛行士になると信じてたタイプのガキだった。望遠鏡なんかも自分で買い揃えた。

SCP-6751-A: 何しろ、ここの光害は年々酷くなる一方だ。だから、自分で星を作ろうと思った。

ネスシオ: 綺麗ですよ。

SCP-6751-A: ありがとよ — でもこんなもんはまだまだ序の口さ。こいつを見てくれ。


ネスシオ: [呆気にとられた声] なんてこった。





SCP-6751-A: —星座ってやつがさ。人間はこの何もない空とちっぽけな光の粒を見て、そこに意味を持たせるんだ。俺はいつもその考えに引き込まれちまう。

ネスシオ: 星座を描いたことはありますか?

SCP-6751-A: そこが良いんだ — 描く必要がない。もう既にそこにある。ほらな?




ネスシオ: —んでしょう?

SCP-6751-A: [振り向かずに身振りで閉じたドアを指す] 屋根裏への階段だよ。

ネスシオ: [合間] 屋根裏部屋がある?

SCP-6751-A: ああ。でも… ガキの頃から入ってない。

ネスシオ: 危険なんですか?

SCP-6751-A: そうじゃないけどよ。 [SCP-6751-Aは言葉を切り、身じろぎする] 俺を追い出した時、親父は俺が置いていく物を全部焼き捨ててやると言った。もしそれが嘘だったら — もし物置に俺の私物をしまっていたら…


SCP-6751-A: うん。大した意味はないと思う。でも何かを意味するはずだ。

SCP-6751-A: その疑問は解けないままにしておきたい。俺はもう、俺の知っている親父と折り合いを—













[木材の軋みを伴なう足音。足音の源 (SCP-6751-Aと推定される) は息を切らしているらしく、次第にはっきり呼吸が聞こえるようになる。]

SCP-6751-A: ガキの頃は暗闇が怖かった。知ってたか? 俺は大学半ばまで常夜灯を点けて寝てたんだ。


SCP-6751-A: ああ、そんなタイプに見えないのは分かってる。でも本当さ。暗闇にはどこか、いつも俺の想像力を掻き立てるものがある。そこには何も無いと分かっている時でさえ、光の無い場所に何があるか考えるのを止められないんだよ。


SCP-6751-A: でもそれが本質なんだろう? 何も無い。


SCP-6751-A: 掌を目に押し付けると、色の点滅が見える。形。音。俺たちはそこに意味を持たせなければ無を想像できない。星座無しでは星々の間の途方もない距離を思い描くことはできない。そんなことは不可能だ。




SCP-6751-A: あんたの言う通りかもしれない。







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