美丽之物
美丽之物
作者: Wandering MossWandering Moss
发布于 14 Aug 2021 15:44

这是什么

CroquemboucheCroquembouche用在一大堆页面上的一大堆各种各样的CSS“改进”,因为我觉得这样就能使其更容易处理。

该组件做出了很多非常细碎的改动以使得写作体验更加舒服且能够使制作组件/版式更加容易一点(也就是我经常干的事)。它不会对读者来说在视觉上改变页面中的任何东西——这些改动是为作者服务的。

我不期望用了这个组件的文章的翻译版也会用到这个组件,除非那个翻译者也喜欢这个组件而且也想用这个组件之类的。

这个组件可能不会与其它组件或版式冲突,且即使会冲突,也可能不会有什么影响。

用法

在任意维基上:

[[include :scp-wiki:component:croqstyle]]

该组件被设计于与其它组件一同使用,所以-=-是用来隐藏该文档的。在另一个组件内使用时,请确保将该组件放在[[iftags]],这样你的组件的用户就不会强制同样使用 Croq 风格。

相关组件

其它个人自定义组件(只会改变一点点东西):

个人自定义版式(在视觉上有大的变化):

CSS修改

大小合理的脚注

不让脚注达到一百万里那么宽,让你能确实地阅读脚注。

.hovertip { max-width: 400px; }

等宽字体编辑/代码

使编辑文本框内字体等宽,且将所有等宽字文本改为Fira Code,也是个明显很优秀的等宽字字体。

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

电传打字机背景

给<tt>元素加上亮灰色的背景({{文本}}),使得代码片段更为突出。

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

不要大脸

禁用悬停于某人的头像的时候出现的大图片,因为这图片又蠢又真的很烦人,想看大头像版本的话直接点击一下就行了。

.avatar-hover { display: none !important; }

碎裂碎裂

任何在带有nobreak类的div中的文本可以在字母间自动换行。

.nobreak { word-break: break-all; }

代码颜色

将我终端中的代码颜色加为变量。可能我会在什么时候把它改成比如Monokai或者别的更加常见的终端主题,但是现在暂时这还是我的个人主题,是从Tomorrow Night Eighties中衍生而来的。

还有,将.terminal类像[[div class="code terminal"]]一样添加到假代码方块中可以让它有一个有点伪终端样的暗色背景。不能用在[[code]]中,因为Wikidot嵌入了一大堆语法来使其高亮,不用一大堆CSS是改不动的。只能用在非[[code]]的代码片段中。

: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中的任何东西周围画上线。线的颜色是红色的但是遵从CSS变量--debug-colour

你还可以将div.debug-info.overdiv.debug-info.under添加到某个元素中以给调试框加注释——虽然你得确保有留下足够的垂直空间,让注释不会与其上方或下方的东西重叠。

……就像这样!

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

憔悴的男人从他的洞穴中爬出地面。几万年来第一次,他在苍白的皮肤上感受到了阳光的温度。在他瘦骨嶙峋的手指下,他感受到柔软的牧草爱抚着他的双手。而在草地之间,他触碰到了另一些东西。

他抓住了什么东西,然后把它拉出了地面。他抚摸着它,闻着它,舔着它,好奇着这会是什么。 当意识到他拿着什么时,他干裂的嘴唇慢慢绽出一个微笑。

那是一朵百合。

他知道周围是什么,尽管他的眼睛很久以前就停止了工作。一片花海,覆盖着每一寸尘埃,远远延伸到目光之外。一整年里的第一次,随着一声虚弱的笑声,他的肺颤动了,泪水润湿了干裂而灰暗的嘴唇。他知道这意味着什么。

没有一丝怀疑地,他知道,他被救赎了。


在一片飞翔的白鸟之下,一群科学家有些紧张地走动着。他们进入了Keter收容区,手中紧紧攥着自己的钥匙卡。 他们收到了命令,直接由监督者下达的命令。他们不确定他们是不是想放它们出来,但命令就是命令。

他们来到收容室,排着队走入了观察室。 一些人开始祈祷,而另一些只是紧张地微笑。他们中的三个拿出了钥匙,插进面板,然后转动。

当酸开始流走时,一些研究员开始大笑,而另一些突然放声大哭。 当最后一滴酸流尽后,他第二次转动了钥匙。他看着收容室的门,在那扇将它与外界相连的门中,有光开始照进来。 682慢慢从地上爬起,在阳光中醒来。它走出门口,走进了广阔的天地。一些研究员离开观察室,走进了682曾经的牢房,好奇着这条老蜥蜴会做什么。

这只爬行动物环顾四周,然后盯住了头顶美丽的鸟群。一瞬间,研究员们屏住了呼吸,担心这个怪物会跳起把天上的鸽子抓下。 但相反,它向下看去,然后沉入花海,发出一声重重的叹息。它看起来是……

满足的。


在一个没有死亡的世界里……

那是一个星期六的晚上。那不是什么特别的日子,或什么特别的年份。 对许多人来说,那不过是又一年,是在无尽混乱中的又一个十年。

这一切——无边无际的无聊,失去死亡的生命的单调——一切都在花开之时改变了。安德森机器人 让人们多少逃离了这一切,但这? 要知道啊,在24小时后,一切痛苦都将结束?这是上苍的恩赐。

基金会深入研究了他们的记录,长期以来一直把代号为Lily的提案作为一种可能性。他们为此准备的鸽子早已太过衰老,它们的肌肉在百年之前就已萎缩。 派对在基金会的设施中疯狂进行,员工们为将至的死亡而欣喜若狂。

对世界上其他地方来说,情况也是如此。 世界各地都在举行节日,而许多人准备着他们的终结。他们准备好了个人物品,穿上了他们最喜欢的西装,裙子,以及诸如此类的东西。 新闻媒体举办了全国博彩比赛,数百万参与者猜测着他们将如何离开。几个世纪以来,世界第一次感到了幸福,而他们确确实实表现出了这一点。

世界结束了,不在一声呜咽中,而在巨响之中。

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