HUMBLE.
评分: +35+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; }



评分: +35+x

Ldot主管:无论你是谁,当你在年宴时来到站点礼堂,都很难猜测他们会做些什么。你能想象在录入文档的剩余时间,在地下室的夹缝和墓地小棚屋里他们会捣鼓出什么东西来?

笑声。

Ldot主管:嗯,起码实话实说,我是说:你懂我意思,我走进来的时候,我一无所知。

站点礼堂的舞台上,唯一的灯光照在舞台中央,一把疙疙瘩瘩的黑色大木椅。

在许多年前,建成站点的第一摞砖就压在这把椅子上,那时它还是红漆的颜色,被一名异学会的官员从中原的古墓掘出,又带到西南的沙漠中。从它被刻上“CN分部资产”的标记起,无数的东西摆上椅面又撤掉。那些仍被人记忆的,比如:中国分部第一个在录异常,一大坨具有腐蚀性的鼻涕,之后几根坏掉的钢筋做的降魔杵一直扎着它的四条腿,以及一大堆碎牙齿和长着半个人脸的羊屁股。还有那位半死不活的站长。

Ldot主管:总之让我们从一些确定的事情讲起吧——对,没错,我忘了,我忘了这事了。我们有太多东西可以讲了,呃,那根上吊用的缆线,大家会想他们把自己勒死会影响到机密文档的几个字输入,从而导致北极圈人类全灭吗?哈哈。没有,我听说它用了十三年。不过说真的,会吗?

稀稀拉拉的笑声。

Ldot主管:这真的很糟糕吗?换个东西吧,研究研究这把椅子,对,看到了?这把椅子,会让大家都回想起那位站长,我不是说名字,而是说他的事——持续了一整个月的招魂。我们夹在管道间敲敲键盘,喝点咖啡。这个椅子上面的东西就在隔壁随时随刻嚎哭起来。就像有个新人去上厕所的时候突然大叫:‘我操,尿坑在叫!’那时真穷啊,站点就是个堆满了管道的水泥罐头,在哪个楼层都像是地下室,照明也不好。所有东西都很紧凑,高危收容区旁边就是宿舍。老生常谈了,我也走过那条连接走廊:一直滴水,乱七八糟的线路和老鼠尸体,还会感觉有胳膊蹭你……不过,还是来说那把椅子吧。从招魂以后,我们获得了半数腐尸一样的员工,流着黄脓半死不活,站点一整年都在腐烂,墙壁上全是黑霉斑。我们停下所有工作,每天就往墙上和地下室那些人身上浇碘酒。有个人宁愿每天一早就钻到地面上,在沙子里什么都不干站一整天,也不愿意在站点待着。有天他出去,迎着沙尘暴点烟,烟潮的根本打不着。他一口气跑下来,跑回工位上,一字一顿地对我说:‘这件事太异常了。’然后,转头就跑。转头就跑哇,一直跑,跑到死在沙漠里。其实他是绕着站点跑了一圈又一圈。等沙尘暴停了,安保找到他的时候,他跪在站点大门前,烟刚烧了个头。我当时拿过来抽了口,呸,一股霉味。说起来,是的,就是因为那时有政府的督导,我才从波罗的海转过来……

一个年轻研究员推着轮椅从舞台幕布后出来,他在舞台边缘停了一下,向后打了个手势。然后推着轮椅走向大木椅。轮椅上放着洪先生,他的头上扣着个黑色的柳筐。

Ldot主管:……让我们还是说回来那把椅子和那位站长,不过我得提醒一下,这些故事都是洪先生告诉我的,他可是当时唯一的幸存者。

年轻研究员走到灯光下,他把轮椅推到大木椅前,把它转过来,正对着台下。

掌声。

洪先生像一颗发灰毛的椭圆土豆,四肢软塌塌的萎缩在青色的躯干上,手掌和脚婴儿一样又小又皱,像是四个蠕动不停地灰色肉瘤。年轻研究员站在他身后伸手摘下来扣在头上的黑色柳筐,把它放到大木椅上。他瞥了一眼洪先生,捂着嘴干呕起来,然后弯着腰小跑回幕布后。从后台传出来几个大饱嗝的响声。

笑声。

Ldot主管:洪先生!

洪先生的头被两个突出的鲜红大血肿替代了,较大的那个上面长着洪先生紧凑的五官。小的那个可以看到缠结的粗大血管在一直跳动,上面还缝着乱七八糟的纱布。洪先生在轮椅上晃动了下,然后扯开嘴笑了几声。

Ldot主管:每次年末的年宴我们都会见到洪先生,我和它一起过了究竟有多少次年宴……说真的,记不清了。不过我想那次还是很令人难忘的,就是政府督导的那次,招魂之后不久。当时这把大椅子就放在礼堂的后台,上面放着那位半死不活的站长,身上吊着许多盐水罐子。说真的,我个人希望他是能出现在年宴上的,不过我们不能让半张烂了的脸毁了中国分部的开始……这一切,真的非常艰难。

掌声。

Ldot主管:你还记得当时的情形吗?那些纪念,哦,年宴上总要纪念,纪念让我们感觉仍然活着。或许就是这个原因,在紧凑的日子过去以后,礼堂修建在地面,四面透风,沙砾可以刮到我的脸上。

洪先生不停扭动身体,咿咿呀呀地呻吟起来。舞台的照明突然全部打开,洪先生发出一声锐利的尖叫。

Ldot主管:所以,我还会记得,当把那位站长从后台拉出来,他变成了一滩黑泥。那之后,椅子就变成了黑色。

热烈的掌声。

后台跑出一群舞者,穿着紧身的基金会白色制服,手中挥舞黑色柳枝编成的十字架。

热烈的掌声。

Ldot主管:洪先生,当椅子结出一个个黑色疙瘩时,你把它们剥开,摘下来一个个黑色十字架,把它们挂在地下室同事们的床头。观众们你们记得吗,他说:用碘酒淋他们身体的时候,那些十字架会抵御痛苦。他说这话的时候相当笃定,不过后来他告诉我,他其实没有考虑到真实情况。他说那时日子紧凑哇,比如只能用碘酒来救人,我们的礼堂和墓地紧巴巴地凑在一起,所有人一到冬天就躲到高危收容区里去御寒……又落后又可怕。我看着你一天天被摧残,最后沦落到这种境地,我们把你收集的黑色十字架挂在站点角角落落,用以纪念,也作为我们的护符。洪先生,每次年宴我们都会怀念。

舞者们层叠围绕着大木椅蹒跚行走,用弯折姿势连成一个圆环,把手中的十字架抛进木椅中,他们像一条锁链在空中慢慢飘荡,所有人都有节奏地晃动着。

热烈的掌声。

紧身白色制服的扣子一个个崩开,衣摆上下翻飞,发出翅膀破空的声音。大木椅淹没在这些舞动的漩涡中。台下不断传来欢呼声,有和舞者穿着相同制服的观众爬上舞台加入他们。黑色的柳枝十字架从上方被扔进白色漩涡的中心。

Ldot主管:这就是年宴的节目,真抱歉让大家听了这么久的陈词滥调。享受吧,各位。

欢呼。

Ldot从幕布后走出来,在上台通道的台阶上坐下来,背对着人群。他注视了一会黑暗的观众席,然后站起身走上舞台,晃动着身体在舞台上缓缓滑行。

他绕过舞动的人群,来到洪先生的轮椅前,伸手把洪先生抱起来,他低下头,说:“一切都不一样了,洪。年宴不一样了。我们开年宴,接下来的一年大家都干劲十足。”,他把洪先生高高举起,透过灯光,黄色粘稠的血液在他两个血肿下鼓动着,“每一年,年宴都不同,而每一年大家都会恢复生机。火焰燃烧过后,每一年……”

Ldot把洪先生举到舞台灯光外,松开了手。洪先生坠入黑暗中,然后是闷响。Ldot转过身,点起一根烟,身后响起凄厉的,婴儿般的嚎哭。

舞者们停下来。

“我们不再是紧巴巴地了,我们还有订书器可以缝合伤口,坟墓变成了太平间。我们不用手写那些信件去欺骗十八年前死人的家属,我们买了一台专门的电脑写邮件,这样不会因为食堂经费被拿去支付一笔延迟抚恤金而饿上一整个月。就是这样,洪先生。”

“唯一不足的是,那些故事,椅子变成黑色,那些放在地下室腐烂的东西。你们喜欢在年宴点火前和我一遍遍重复这些故事,呃,就像母亲用故事教小孩学说话那样教我中文。我总会记住那些。”

舞者们跑起来。他们惊慌失措,面部无声地恐慌着,退潮一样混杂而有序地钻进幕布后。舞台像大鼓一样通通地闷震。

Ldot跟着人群的尾流,他径直走向大木椅,跪在它的前面,扒开上面堆积的黑色十字架,拿出那个柳筐,扣在自己头上,又把细长,扭曲的黑色十字架插在上面。然后站起身,弯下腰,一根一根,拾起散落在周围的黑色十字架。

照明一盏盏的灭了。他缓缓地捡,为人入殓一样缄默。当他拾起大木椅前的最后一支十字架,所有灯都熄灭了。于是,他转身在大木椅上坐下,四周一片黑暗,只有烟头一点点的火星。Ldot坐在那里,在黑暗中,一支一支,细致地把黑色十字架插到筐上,直到他的脑袋像是被尖刺贯穿一样扎满了细长、扭曲的柳枝。

Ldot把手搁在膝盖上,停下来,平静地凝视着敞开的礼堂大门。此刻夜风夹杂着粗粝的沙子从外面灌进来。烟头微弱的光亮显得无比脆弱。他摘下最后一点烟屁股,把火星扔进黑色的柳筐中,赤红色的火焰一下子腾起,在他头顶上空飞扬。

Ldot站起来,火舌在他的耳边呼哧呼哧地粗喘,他感到血液被点燃了,于是摆开腿奔跑起来,从舞台上一跃而下。火光拖着长长的尾迹,照亮了观众席的空寂。他跑向敞开的大门,头顶着火焰,奔入黑暗而模糊的沙漠。

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