SCP-CN-2234
评分: +43+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.

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

评分: +43+x

项目编号:項目編號:SCP-CN-2234

等级-等級-

收容等级:收容等級:ESOTERIC 无效化

扰动等级:擾動等級:AMIDA


负责站点負責站點


Site-CN-00

站点主管站點主管


Dr.Roger_F

首席研究员首席研究員


Dr.Lucifer

指派特遣队指派特遣隊


[已編輯]

项目编号:項目編號:SCP-CN-2234

等级-等級-

收容
等级:
收容
等級:
ESOTERIC 无效化

扰动
等级:
擾動
等級:
AMIDA


负责站点負責站點


Site-CN-00

站点主管站點主管


Dr.Roger_F

首席研究员首席研究員


Dr.Lucifer

指派特遣队指派特遣隊


[已編輯]

该文档非文档。

(SCP-CN-2234)非(SCP-CN-2234)

  • 当你彻底理解了上文后,方可查看下文。

·
·
·
·
·
·
·
·
·
·
特殊收容措施:SCP-CN-2234无法被收容。由于SCP-CN-2234被无效化,故无需收容措施。

描述:SCP-CN-2234是一类极其危险的非实体异常,判定为一种概念,可以负载于任何信息载体包括思想内。SCP-CN-2234的转移方式为任何信息载体只要出现任何信息存在(包括声波、光波、电波),都会被该项目所负载,思想只要触及到SCP-CN-2234都可算作该项目来往的媒介。

SCP-CN-2234一旦负载在信息载体中,便会对载体以及信息进行包裹,使载体失去载体性质,信息丧失信息性质,变得不可解读,最终彻底丧失本质,无效化,并且能够通过载体内原有信息转化为新的传播媒介,并根据信息在同时含有该信息的载体间跳转,留下SCP-CN-2234的传播媒介。

  • 希望你没有忽视那两句话,它们很重要。

在该文档正式完成后,SCP-CN-2234负载于该文档,最终使其无效化。推测原因为:该文档由于是上叙事对于SCP-CN-2234的最初记载,故为该项目的源载体,SCP-CN-2234成功使其源载体信息无效化,自身也随之无效化。


大笑话。————Dr.Roger_F

除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License