热猫
评分: +41+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; }



评分: +41+x

热猫它总是踮着脚尖走,热猫它孤零零地睡在空客厅的一张小床上。它是个孤独的人,总在想脚步应该落在哪个点,它找不到对应自己的位置。

在那个夏天。

热猫遇见了猫——就像往常一样,它裹着被子蜷缩在小床的角落,面对那扇小窗,盯着光亮的小长方块,它在想。想一个踮脚走路的人,怎么一步步落到家外的青砖路上。

这是自然地,它对自己说,在一块大砖宽阔的表面上找到对应自己的小点是件难事。

它在想着,猫就从窄窗外轻轻地跃过,又飘出它的视野。在一个刹那,如同冬天,热猫反复念叨的那句话:“猫扭头瞥见了我。”

热猫甩开被子,从床上跳下来。猫又出现在窄窗中,它走在窗外挂的晾衣绳上,长尾巴对着热猫左摇右摆,然后它跳下去,在天台的边缘行走,每一步都落得均衡。热猫在青砖路上的脚步,开始对应似地与猫一齐举落。但是,猫要走远了,它像个小黑点,一点点消融在窄窗的白热里。

于是热猫追上去,伸长手臂,绷直了指尖要去触碰那个确切的黑点。但它溜掉了。猫的长尾巴一甩,从指尖滑走了。热猫探出窄窗,上半身悬在窗外,楼下就是那条宽阔的青砖路。

那时正是盛夏,骄阳似火,阳光是闪亮的,地面却氤氲着暑热。猫在灰色的小城间跳跃,在天台、屋檐和房顶留下潮湿的脚印,它汗津津的,全身毛发蓬起,挥洒的汗让它在空中闪烁,当它落下,蒸腾起的热气又将它包围。

热猫无助地看着猫向远方的太阳离去,看它在裸露的屋脊间闪来闪去。阳光刺的热猫几乎睁不开眼,它感到第一次,夏日是如此紧地贴着他。

那天以后,热猫高烧不止。最初它在床上惊厥,做着游荡的恶梦。几天以后,它好似在梦里跑的精疲力尽了,开始不停地发汗,它用被子把自己包起来,里面嘶嘶冒着热汗的蒸气。而它的梦也来到了一片黑灰色的群山,那是个寒冷的北部,当热猫呼喊时只能听到回音,它不知道那些声音到了山间的哪些地方,又从哪里回到它的身边,它们返回时夹杂的风,让热猫感到惊慌与孤独。某天夜晚,热猫忽然从床上跳起来,嘴里吐出大口大口的开水。它开始把自己身体的一切体液往旁边的墙上涂抹,直到那面墙散发出气味,并有着灼人的温度,它像个狂乱的造物主,在创造一个小小的自我世界。当世界完成后,那面墙上的气味给了热猫安全的氛围,它又沉沉地睡去,陷入长梦中。就在那时,群山间的声音变得清晰,热猫能听到它们打在岩壁上闷重的响声,它们似乎在山尖上找到了落脚点,得以翻越群山。声音返回的时间一次又比一次长……然后,热猫的父母来了。他们偶然路过客厅,闻到了难闻的气味。那时热猫正像一节肋骨似地贴在墙上睡觉。他们认定热猫快要完蛋了,于是连夜坐公共汽车把它送进了大医院。热猫被送来时昏迷不醒浑身滚烫,连骨头都是热的,医生都说它是一滩烂泥。于是热猫的父母跑走了,他们觉得热猫肯定会死。

热猫咬着牙,抿着嘴唇,死闭着双眼在大医院躺了五天。它裹着热气,小心翼翼地踏着一块块碎石,像一条长柳枝在山缝间摇摆。它一点点走出了群山,向着地平线尽头的家乡走去。

第六天,热猫睁开了眼,离开医院,坐上回家的公共汽车。它在车上从很远的地方就望见了那座暖阳下的小城。它觉得一切都很好,于是中途它就下车,趟入环绕家乡的小河。太阳把河水晒得热乎乎的,融进它僵硬的身体。那时,猫又与它相遇了,是很多只猫,它们竖着长尾巴,很笃定似地在河岸上行走。又跃上小城的天空,轻轻点过屋顶,在日光下翻飞。

看着猫,热猫默默地流泪,小城在泪水中变得朦胧。它走出河水,走进小城的街道,脚跟贴着地面,青砖在脚下变得很软,好像只是微微挪动,又好像一步迈到小城另一头,它伫立在人群中,但又好像在他们间流动。它与每个陌生的、过路的人相互摩挲,他们都融化了。它与如同素不相识的父母对话,他们也都融化了。

热猫站定在阳光下,他觉得一切都很好……

在那个夏天。

然后是秋天,树叶摇摇欲坠,冷雨时常不期而至。

然后是冬天,寒风呼啸,让小城在飘落的大雪中瑟瑟发抖。

冷峻的秋冬掠走了热猫的热量。最初它还幻想,想着猫在房屋间蹦跳,奔向小城的尽头,面对夏末最后的太阳一跃而下。但它很快不再去想了。冬天的青砖又硬又滑,选择一个点变得愈发艰难,不间断的恐慌冲刷掉多余的想法。它不得不把脚踮的更高,不得不更加慎重自己的脚尖该在何时落下……热猫找不到自己在这个严酷季节的位置,它好像被抛在小城中苟活。

如果你到热猫的小城中去,你会看到它靠着墙艰难行走,偶尔它会抬头看向高远的太阳,只是不会再去想猫。

四季轮回如此残酷,既短瞬又漫长。

这就是热猫的悲剧。它应该死去,躺在木盒子里,身边填塞满夏日的温暖,最后在四个角打上四颗硬钉子。

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