評価: 0+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; }
評価: 0+x


コンテストを運営したいと思ったことはありますか? 今ここで、できますよ。あー、これまでもできましたが。いつでもだれでもコンテストハブは投稿できます。それを明確に妨げるルールは存在しません。私にわかる範囲では、コンテストハブに関するルールが書かれた成文のポリシーページは存在しません。調査する時間はそんなにないんですよ。

ですが、私には法的に1、まずCommunity Outreach Teamに知らされずにいわば非公式のコンテストが運営されるべきではないと通告する義務があります。2このチームは承認なしにコンテストが運営されないことを本当に望んでいるでしょう。チームがあなたを止めることはないでしょうが、あなたが本気の良質なコンテストを運営するためにしたいであろうことの多くは彼らのアシスタンスや監督なしにはできないでしょう。


ちょっと、嘘はつかないでくださいよ。あなたがそうしたことは知っています。ちょうど今あなたのwikidotユーザーのhistoryをよーく見てるんですよ。 ミームコン? マジ? あー、それが何かいいことにつながりそうだったんですけどね。3


1. 2023年1月6日12:01 AM EST4から2023年1月12日11:59 PM ESTの間に、以下の条件を満たすページをSCP Wikiに投稿する。

  • コンテスト タグの要件を満たし、
  • 2023年1月20日12:01 AM EST時点で残存している。

2. コンテストのコンテストの性質につき、残念ながらアートのエントリーは許可されません。ええと、視覚芸術だけじゃなく──どんなアートも一切ダメです。あなたのエントリーは芸術的なものを含んではなりません。まあ、あなたのエントリーはアートコンテストであっても大丈夫です。グッドだね! ああそう、エントリーには テーマ ページも コンポーネント ページもダメです。混乱させてしまい申し訳ありません。


投稿開始: 2023年1月6日12:01 AM EST
投稿終了: 2023年1月12日11:59 PM EST
結果確定: 2023年1月20日12:01 AM EST
イエス・キリストの本当の誕生日: 6 Anno Domini5 4月6日1:00 AM IST6多分




1. 結果確定時で最高評価のコンテストのコンテストのエントリーが優勝します。(視覚)芸術のコンテストのエントリーは別カテゴリーで勝者が分けられます。これは、視覚芸術は他全ての芸術形態とは根本的に異なっており、他と比較できないためです。ただ、芸術でないコンテストは全て同じカテゴリーになりますがね。

2. 以下の声明をエントリーの上部、評価モジュール直下に置かなければなりません。

私、<ログインしていないユーザー>は、Placeholder McDによるコンテストのコンテストはジョークページで、感情を害する、損害を与える、問題を引き起こす、あるいはスポーツマンシップにのっとらない意図をもって作成されたものではないことを十分に承知しています。私は、Placeholder McDは私がCommunity Outreach Teamに相談せずにコンテストハブを投稿することをやめるよう強く言っていたことを認めています。私は、コンテストのコンテストの内容は純粋に風刺的なものであり、真剣に、もしくは自分事として受け止められるべきではないことを理解しています。その内容の指示には従うべきではなく、私は読解力に富んでいるためそのことを知っています。この声明を私のページ上部にコピーすることで、私は、以下に続くものは完全に私の落ち度であり、Placeholder McDは私の行動に一切責任を持たないことを了承しています。



3. あなたのコンテストのコンテストのエントリーを編集することは許可されていますが、それを完全に置き換えることは禁止されています。同様にあなたのコンテストのコンテストのエントリーに段落を追加及び削除することは許可されていますが、最終的にはあなたのコンテストのコンテストのエントリーの中心的なアイデアは同じままである必要があります。これは同時に、投稿時のあなたのコンテストのコンテストのエントリーの完全な置き換え、又は上書きとなりうる編集の禁止を意味します。あなたがあなたのコンテストのコンテストのエントリーのアップデートや過去のコンテストに見られるような編集を予定しているならば、投稿期間終了までにアップデートについての完全かつ細部まで徹底したアウトラインをコンテストのコンテスト運営者へ提示して下さい。これは、コンテストのコンテスト競技者コンテスタントが自由にクリエイティビティを発揮してそのコンテストのコンテストのエントリーを制作できるようにすると同時に、コンテストのコンテスト競技者コンテスタントが投稿期間終了後にそのコンテストのコンテストのエントリー制作の"追加時間"を得る可能性を妨げることを目的としたものです。編集がこれらの条件に違反するか不明な場合は、以下のフローチャートを参考にして下さい。

4. 投票総数を増やしたり、競争相手の投票数を減少させたりするために否定的や異常な行動を行った競技者コンテスタントは、ボーナスポイントが与えられます。

5. コンテストのコンテストについて何か疑問があったなら、ご自由に我が代理人の1人、HarryBlankHarryBlankLirynLirynRallistonRallistonにメッセージをしてください。彼らはコンテストのコンテスト運営者マーシャルです。

6. コンテスト運営者マーシャルであることについて何か疑問があったなら、ご自由にCommunity Outreach Teamにメッセージしてください。彼らはコンテストのコンテスト運営者マーシャル運営者マーシャルです。

7. あなたがコンテストのコンテスト運営者マーシャル運営者マーシャルの見解をコンテストしようとする競技者コンテスタントなら、ご自由にコンテストマーシュマロウにコンタクトしてください。


このページはコールドポストコンのエントリーであるため、このページをCommunity Outreachに査読してもらうことができず、そのため、コンテストのコンテストに先立って contestcontest タグを作る手配ができませんでした。なのであなたのエントリーは普通の古き良き コンテスト タグを得るのに必要なことだけをしてください。

特定の日付の間に作られたコンテストページのみをターゲットにするListpagesが私には使えないので、私がこのページを編集するまでエントリーはここにはリストされません。そしてこのページの編集はコールドポストコンが終了するまで許可されていません。なので、コールドポストコンの投票期間の終了とコンテストのコンテストの投稿期間の終了の間の1月12日に、全てのコンテストのコンテストのエントリーをこのページに反映するアップデートをします! 現在このページにあるエントリーは、そのときまであなたを楽しませるためのプレースホルダー7です。

このページで皆の時間を無駄にする準備のためにコンテストのコンテストハブバナー画像を作ったPlaceholder McDPlaceholder McDに深い感謝を。私がこれを本当にコンテストにできるかどうかであなたを悩ませたstormbreathstormbreathModulumModulumNaepicNaepicWhiteGuardWhiteGuard、他公式スタッフサーバーディスコードのメンバーたちに深い謝罪を。本当に、本当にごめんなさい。これはジョークのtaleページです。これはジョークのtaleページです。どうかお願いします、私の完璧な記録をこのページに基づいたDiscスレッドで汚さないでください。よろしく、そしておやすみ。

評価: 0+x
特に明記しない限り、このページのコンテンツは次のライセンスの下にあります: Creative Commons Attribution-ShareAlike 3.0 License