[物体]
物体
By: ashausesallashausesall
Published on 19 Aug 2023 09:08
评分: -1+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; }

scp-6254-img1.png
项目编号:項目編號:[物体]
等级等級1
收容等级:收容等級:
safe
次要等级:次要等級:
thaumiel
扰动等级:擾動等級:
dark
风险等级:風險等級:
待观察

特殊收容措施:有数量不确定的[物体]正被收容于Site-⌘的特殊特殊收容柜中。对未收容的[物体]个体,我并没有太担心。毕竟,基金会假情报部门会告诉公众[物体]的用途尚不明确,尽管事实上它们明显是用于[原定目的]的。很明显。

依超现实部申请,[物体]已从上个周三开始被重分级为Thaumiel。个体将被Site-⌘人员在必要时用于[原定目的]。

scp-6254-img2.jpg

上图:一个被Site-⌘收容的[物体]。

描述:[物体]是一类小型空心人造物,形状上呈十二面体,主要由铜合金构成,公元2世纪至4世纪期间制造于罗马帝国。很明确的是[物体]是为用于[原定目的]专门创造。

在过去某个不确定时间点,[物体]的柏拉图概念遭遇了一次 语域抽象化。因此,所有现存[物体]无法在细节上被概念化1,其实际应用只能在“[原定目的]”的范围内被描述。[物体]个体在物理上不具有异常,只具有此种抽象化的异常性质。此外,[物体]的存在及其为完成[原定目的]而进行的应用被视为符合共认常态。

更新8.11.2023:Site-⌘人员喜欢在工作中有[物体]!报告表明它能将有效收容的效率增加多达60%。他们等不及要把它用作[原定目的]啦!

什么?还不信?我们加个图来帮你理解。

scp-6254-img3.png2

你看到了?多简单!指向性概念化,使用[物体],达成[原定目的]!我们再给你加几个示例,如果能帮你理解的话。只是因为你是我们最喜欢的研究员。可别告诉别人!


美学:部署[物体]。[物体]构建并装饰了Site-⌘的王座间,大幅增加了它的美学价值。为确认这一点,创立了一个美学部,其员工由蓝色燕尾蝶组成。此后,美学部确认在使用[物体]作为装饰要素后有大幅提升。[物体]达成了[原定目的]。

说服:部署[物体]。勇敢无惧的站点领导Irving Gat向超现实部主席Marcel Sequitur以及监督者议会(没熊)发表了一番振奋又激励的演讲,强调需要增加供应Site-⌘的不可知剂产量。或者是减少,取决于你怎么看了,真的。资金调整得到批准。[物体]达成了[原定目的]。

打击犯罪:部署[物体]。十六(16)台驻站Gat-Hayes语义稳定设备(GHSSD)的自发应用成功避免一个敌对语义危害哥布林神性交换“扒窃未遂”与“扒窃既遂”的柏拉图概念。[物体]达成了[原定目的]。

堕落艺术:部署[物体]。格里高尔·萨姆沙在超现实斯坦的施政减轻了达达主义者(包括剪叶者与编织者)受到的迫害。超现实对外政策利益偏向基金会。[物体]达成了[原定目的]。

硬件:部署[物体]。六百四十万(648000)台无线电脑鼠标通过一个爱因斯坦-罗森桥自发显现在了Site-⌘内第三好的房间中。基金会对芝士及捕鼠陷阱的支出大幅增加以应对此情况,超现实部人员一致认为这是有好处且必须的。[物体]达成了[原定目的]。

怨恨:部署[物体]。人员报告了群星回厌他们的瘆人感。[物体]达成了[原定目的]。

超级英雄学:部署[物体]。神奇的奥米茄人与术士领主Agarnazarth组队保卫超现实,对抗颤动之肺、亵神Ziph军中的伪malidramagiuan,定然中的征服者,愿他的名号永世不被记起。[物体]达成了[原定目的]。

非存在:


特殊特殊特殊特殊:留意。

若你遭遇到有人员持有[物体],不要恐慌。他们是负责任的守法公民,就和你一样。他们只是想要把[物体]用于[原定目的]然后继续过日子。[物体]的概念是稳定的,不倾向于进一步语理劣变。不要恐慌。

若你遭遇到有人员持有[物体],不要恐慌。他们是负责任的守法公民,就和你一样。他们只是想要把[物体]用于[原定目的]然后继续过日子。[物体]的概念是稳定的,不倾向于进一步语理劣变。不要恐慌。

若你遭遇到有人员持有[物体],不要恐慌。他们是负责任的守法公民,就和你一样。他们只是想要把[物体]用于[原定目的]然后继续过日子。[物体]的概念是稳定的,不倾向于进一步语理劣变。不要恐慌。

若你遭遇到有人员持有[物体],不要恐慌。他们是负责任的守法公民,就和你一样。他们只是想要把[物体]用于[原定目的]然后继续过日子。[物体]的概念是稳定的,不倾向于进一步语理劣变。不要恐慌。

若你遭遇到有人员持有[物体],不要恐慌。他们是负责任的守法公民,就和你一样。他们只是想要把[物体]用于[原定目的]然后继续过日子。[物体]的概念是稳定的,不倾向于进一步语理劣变。不要恐慌。

若你遭遇到有人员持有[物体],不要恐慌。他们是负责任的守法公民,就和你一样。他们只是想要把[物体]用于[原定目的]然后继续过日子。[物体]的概念是稳定的,不倾向于进一步语理劣变。不要恐慌。

若你遭遇到有人员持有[物体],不要恐慌。他们是负责任的守法公民,就和你一样。他们只是想要把[物体]用于[原定目的]然后继续过日子。[物体]的概念是稳定的,不倾向于进一步语理劣变。不要恐慌。

若你遭遇到有人员持有[物体],不要恐慌。他们是负责任的守法公民,就和你一样。他们只是想要把[物体]用于[原定目的]然后继续过日子。[物体]的概念是稳定的,不倾向于进一步语理劣变。不要恐慌。

若你遭遇到有人员持有[物体],不要恐慌。他们是负责任的守法公民,就和你一样。他们只是想要把[物体]用于[原定目的]然后继续过日子。[物体]的概念是稳定的,不倾向于进一步语理劣变。不要恐慌。

若你遭遇到有人员持有[物体],不要恐慌。他们是负责任的守法公民,就和你一样。他们只是想要把[物体]用于[原定目的]然后继续过日子。[物体]的概念是稳定的,不倾向于进一步语理劣变。不要恐慌。

若你遭遇到有人员持有[物体],不要恐慌。他们是负责任的守法公民,就和你一样。他们只是想要把[物体]用于[原定目的]然后继续过日子。[物体]的概念是稳定的,不倾向于进一步语理劣变。不要恐慌。

若你遭遇到有人员持有[物体],不要恐慌。他们是负责任的守法公民,就和你一样。他们只是想要把[物体]用于[原定目的]然后继续过日子。[物体]的概念是稳定的,不倾向于进一步语理劣变。不要恐慌。

若你遭遇到有人员持有[物体],不要恐慌。他们是负责任的守法公民,就和你一样。他们只是想要把[物体]用于[原定目的]然后继续过日子。[物体]的概念是稳定的,不倾向于进一步语理劣变。不要恐慌。

若你遭遇到有人员持有[物体],不要恐慌。他们是负责任的守法公民,就和你一样。他们只是想要把[物体]用于[原定目的]然后继续过日子。[物体]的概念是稳定的,不倾向于进一步语理劣变。不要恐慌。

若你遭遇到有人员持有[物体],不要恐慌。他们是负责任的守法公民,就和你一样。他们只是想要把[物体]用于[原定目的]然后继续过日子。[物体]的概念是稳定的,不倾向于进一步语理劣变。不要恐慌。

若你遭遇到有人员持有[物体],不要恐慌。他们是负责任的守法公民,就和你一样。他们只是想要把[物体]用于[原定目的]然后继续过日子。[物体]的概念是稳定的,不倾向于进一步语理劣变。不要恐慌。

若你遭遇到有人员持有[物体],不要恐慌。他们是负责任的守法公民,就和你一样。他们只是想要把[物体]用于[原定目的]然后继续过日子。[物体]的概念是稳定的,不倾向于进一步语理劣变。不要恐慌。
































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