收容一种
评分: +39+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; }



评分: +39+x

我开着绿色轿车行驶在小路上,周围很黑都是杂草和沟渠。我开了远光灯,但前路十分含混。我认真地开车,在一个昏昏欲睡的深夜。

路人。

出现在远光灯最远端,站在路边,背对着我,开着手电筒打电话。他的肩膀很宽,又高又瘦,黑色的长制服在身上绷得很紧。

我把车开过去,停在他旁边。

他转过来眯着眼瞥了我一下,又转回去。远光灯把黑制服照的惨白。地上拖出他狭长的影子,一直刺入路旁的黑暗里。他还在听电话。

我关了远光灯,探出车窗,友好地对他说:“您好。”

他猛地转身,手电筒一下闪进眼里,刺眼的光晃白了我。我抬手挡住光线。

“今晚夜色可真浓哦!”

我再睁开眼,他已经挂了电话,边说着,走过来,拉开车门,钻进后座。

他坐在那,一只手插在兜里,另一只手放在鼻子上,尖瘦的手指不停搓着鹰钩鼻。他的口袋透出暖红的光,手电筒忘记关了。

“有股很浓的味道,您闻到了吗?”我转头问。他慢慢倾身到我旁边,吊梢眼挣着,从盖住鼻子的手指上面看我,眼珠黑色的,很小一颗。

“抱歉了。您瞧,我在吃糖。”他一字一顿地回,然后头仰过去,给我展示长长的脖子,嘴里发出咬碎糖块的声音,喉结上下滚动。他脖子向后扭动,头翻回去,嘴像磨盘一样还在响亮地嚼糖块。

他冲我点点头,抱起胳膊坐回后座。

我发动汽车,重新打开远光灯,继续向前开。我的眼中盈满了泪水,我想它们肿起来了,前面的小路依旧很含混。

不久,他不再嚼糖块了。他问我:“您是路老师吗?”

我说我是。他接着又问我,为什么这样的深夜会开车走小路。

我回答:“我一直这样开,走这样昏昏欲睡的小路。”

“要我说,”他总结似地,“您开得麻木了。在一个深夜的,一条偏僻小路上。”

的确如此。

他伸手摸进发光的口袋,我从后视镜瞥见他的动作。

然后刺眼的灯光一闪而过,我盈满的泪水,从肿胀的眼睛里飞溅而出,喷射到挡风玻璃上,玻璃开始嘶嘶融化。冷风窜进车里,发出啸叫声,淹没了我的声音。他从后座站起来,弯着腰,手还插在发亮的口袋里,手机被甩到一边,灯光向上打。后视镜里,他变成模糊不清的一团,影子渐渐占据整个车顶,猛地朝我扑来。

他从发光的口袋里掏出的是一把刀,一把发热的刀,从椅背插入我头皮时是热乎乎的。

我尖叫起来,双手离开方向盘。他把刀一扭转,削掉一对毛茸茸的短耳朵,一直向左划,卡到犄角旁边。我的蹄子踹向油门,踩到底,声音好像撕破我的嗓子,肆无忌惮和呼啸一起在车内宣泄,风刮地越来越急,车在路上失控狂飙。我浑身血液都逆着重力漂浮。

这时他咆哮着,拔出刀子,隔着座椅发疯似地捅我的后背。他喊着:“快让车停!刹车!踩刹车!停下来!”我的一条腿抽搐了一下,踩住刹车——血液腾空而起在车内喷薄成血雾。我从座椅猛地弹起,撞向引擎盖。

我的角插在玻璃上。

他从后座走下来,拎着刀和我的耳朵。他把我拖下来,手电筒冲着我的眼睛晃。我感觉白光像潮水,从眼底涌上来又退去。他说:“路老师,您很狼狈,流了很多血。一只角也断了。”

“哦,我知道。我浑身湿漉漉的。”

“就像……就像是,落水了。”

“落水的小动物……我还没有到淹死的程度。”

他点点头,黑制服还在他的身上绷得很紧。他说:“您每晚都在这么浓重的夜色中开车,为什么?”

我感到很困惑,我躺在地上,背上的刀伤烧灼起来,他捅穿了我的符文。

“你觉得怎么?你觉得怎么?嗯,”他俯下身,拿手电筒冲我眼睛乱晃。他喘息着;“他们给我打了电话,你觉得怎么?路老师怎么啦?我知道什么啦?”

他蹲下来,捅我的肚子。他扎中了,东西开始在我的肚子里蠕动,我想呕吐,嘴里有奶油蛋糕的味道。

“什么东西,您知道吗?”我想偏过头,但鹿角阻碍了我,我扭不过去脖子,“每天晚上,定时,有规律的,我开着……就是这辆绿色的车,慢慢地在路上开……”

他抄起刀,割下我的嘴唇,和耳朵甩在一起。然后狠狠往我头上一踢,踢碎了那只断掉的鹿角。他再次蹲下来,用小黑眼珠子盯着我说:“您沉浸在什么样的世界里呢,路老师。为什么呢?为什么你开着绿色的车,走在黑色的道上,身上闪着亮蓝色符文,坦然处之。是一个又一个夜晚,这些阴影一样的杂草,给你一种永恒的感觉吗。”

他伸手从路边拔起一把草,插进我的眼珠。它们又小又韧,栽进我的视神经,我想象到草生长的感觉,密密麻麻,从虹膜突出去,在夜色里被刺骨的风吹拂。我开着车,轮胎从草上碾过去,我就像是躺在地上,仰望天空。绿色的车我驾驶着行驶在这条路上,向来如此,但这一次,它轧过我的脸。

于是,我就说了。

“我今晚吃了个婴儿。狠狠把她撕扯开。她或许不算婴儿,已经足够大了,他和他的父母这样生活好几年,她养在家里,我找到她的时候还在睡觉,在路旁边的一栋屋子 ,就像每个夜晚他们做的,洗漱,上床,睡觉,做梦。然后我走进去,我活活把她吃死的,真的是吃死的,最后一口以前她还活着的。她先被我横挂在角上,身上有个洞,一直流亮晶晶的血,我就一口一口舔。最开始,她就死了一样,那么软,烂泥,我摆弄来摆弄去,先吃了胳膊、腿和下巴。”我伸出带倒刺的长舌头给他看,“之后,我给她脸皮刮下来。我把她塞进嘴,咬——突然,她大叫起来,我意识到我正在吃一个婴儿,哦,她还没死哦。我赶紧咬掉她的头。”

他点点头。拿刀划开我的肚子,我全身颠动。那些肚子里的胳膊和手臂露了出来,指向天空,它们把我的肚子塞得很满。

“路老师,为什么你会觉得,事情还会一成不变呢?”他问,他看到了我四肢的奇术符文在闪动。

“被你的光闪到,我就应该注意:夜色已经不那么浓郁了。但我没有。”我冲他笑,“现在,我在流血。”

剖开的腹部,红色的鲜血正喷涌而出,胳膊和手臂在不停扭动。还有婴儿不间断地哭声,那个东西在我身子里爬。

没有等到我四肢上的符文变成赤红色,他立刻切掉了我的胳膊和腿,把角拔了出来。他挖掉我的眼珠。

我的腹腔也变得空空如也,他一根根掰碎肋骨,用刀在躯体上剜出坑洞。把手伸进我的肚子,去拽那个东西。他拉住了,最开始露出小小的脚,在半空乱挥。他停了一下,大口大口地喘息,然后是一截肉胳膊,连着一颗头。那个东西脸上有黑色的三个点,在上面不停翕张。

鲜红色的婴儿热气腾腾,身上浇着血。

他抱着那个东西在我身前,我看不见了,眼前都是红色的光不停闪烁,那是血一波又一波涌上来。

刀又在割我,把我像杂草一样割碎。割成一条条胡须。

几个小时后,我被装进标注“SKIP”的裹尸袋,用绳子捆紧。

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