By: PayroyPayroy
Published on 08 Apr 2022 14:23

평가: +14+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; }

@import url('');
 @import url('');
/* Flopstyle CSS Theme
 * [2020 Wikidot Theme]
 * Created by Lt Flops
 * Select CSS Styles Are Credited Where Necessary
 * -- (CC BY-SA 3.0) --
/* ---- SITE HEADER ---- */
 #header h1 a{
     font-family: "Montserrat", "Arial", "Noto Sans KR", sans-serif;
/* ---- FORMATTING | [SPECIAL] ---- */
 @font-face {
     font-family: "D2Coding";
     src: url('') format('woff');
     font-weight: normal;
     font-style: normal;
     --mono-font: "D2Coding", "Fira Code", "Nanum Gothic Coding", monospace;
/* ---- CUSTOM DIV BLOCKS ---- */
 .journal{ /* ---- Journal Block (Adapted From SCP-4003) ---- */
     font-family: "Architects Daughter", "Nanum Pen Script", cursive;

재단 의사불통학부 공지

본 문서는 의사불통학부의 기록 관리자가 확인하고 검토한 것입니다. 이러한 서술은 변칙 개체의 특성에 기인한 것입니다. 오류는 없습니다.
— 양길환 박사 - 의사불통학부 대한민국 지역사령부


오늘은 SCP-406-KO의 변칙성에 대해 알아보겠습니다.


이고양 연구원
2022.06.23 +이웃추가


안녕하세요! 여러분들의 다정한 연구원 이고양이에요~~

보고서 작성하랴 상사에게 혼나느랴 많이 바쁘지만

오늘도 어김없이 다시 돌아왔답니다!!

요즘따라 기지 내부가 많이 쌀쌀해졌어요~

다들 건강챙기시고 감기 조심해요^0^


오늘은 제목처럼

SCP-406-KO에 대해 알아봐요~~~


SCP-406-KO는 아주 꼬질꼬질한 36개의 곰인형들이에요.

사진은 제가 찍었어요~ 잘 찍었죠?

원래는 더러웠는데 지금은 깨끗해요 ㅎㅎ


인형을 빨래할 땐 과탄산소다를 이용하면 깨끗히 빨래할 수 있어요!

과탄산소다가 없을 땐 그냥 베이킹소다도 괜찮답니다~~


하지만… 전 집에 남아 있는 소다가 없어서

그만 세탁기에 돌려버렸어요ㅜㅜ

하지만 섬유유연제를 쓰니

좋은 냄새가 나서 불행 중 다행~


여기서 잠깐!

피죤은 한국 최초로 섬유유연제를 출시했다고 해요.

정말 신기방기~~


하지만 저는 피죤보단 다우니가

더 잘 되고 냄새도 좋은 것 같아요.


이상으로 SCP-406-KO에 대해 알아보았어요

더 자세한 내용과 특수 격리 절차는

서로이웃 필수~~~


(비밀 댓글입니다)
┕ (비밀 댓글입니다)
(비밀 댓글입니다)
┕(비밀 댓글입니다)
김가딕 격리이사관보: 아니 뭔데

🈲: SCP 재단의 모든 컨텐츠는 15세 미만의 어린이 혹은 청소년이 시청하기에 부적절합니다.
따로 명시하지 않는 한 이 사이트의 모든 콘텐츠는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0 라이선스를 따릅니다.