| 恢复自平行宇宙的文档 |
作者: Just_We |
| 发布于 01 Jun 2020 16:07 |
这是什么
我
Croquembouche用在一大堆页面上的一大堆各种各样的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.over与div.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; }
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap);
/* Centered Header Sigma
* [2021 Wikidot Component]
* By Lt Flops (CC BY-SA 3.0)
* Forked from:
* Penumbra Theme by EstrellaYoshte
* Also based on:
* Centered Header BHL by Woedenaz
**/
/* ---- VARS ---- */
:root{
--titleColor: hsl(0, 0%, 95%);
--subtitleColor: hsl(60, 62%, 85%);
--lgurl: url(https://scp-wiki.wdfiles.com/local--files/component%3Acentered-header-sigma-9/logo.svg);
}
/* ---- SITE BANNER ---- */
#header,
div#header{
background-image: none;
}
#header::before{
position: absolute;
width: 100%;
height: 100%;
content: "";
background-image: var(--lgurl);
background-position: center top;
background-repeat: no-repeat;
background-size: auto 9em;
opacity: .33;
}
#header h1,
#header h2{
float: none;
margin-left: 0;
text-align: center;
}
#header h1 span,
#header h2 span{
/* Hide the Existing Text */
display: none;
}
#header h1 a::before,
#header h2::before{
/* Style the New Text */
font-family: "Montserrat", "Arial", sans-serif;
text-shadow: none;
}
#header h1 a::before{
position: relative;
bottom: .15em;
color: var(--titleColor);
font-size: 115%;
font-weight: 700;
}
#header h2::before{
position: relative;
top: .1em;
color: var(--subtitleColor);
font-size: 130%;
font-weight: 600;
}
#header h1 a::before{
/* Set the New Text's Content From Variable */
content: var(--header-title, "SCP基金会");
}
#header h2::before{
content: var(--header-subtitle, "控制 - 收容 - 保护");
}
/* ---- SEARCH ---- */
#search-top-box{
top: 1em;
right: 0;
}
#search-top-box-form input.button{
margin-right: 0;
}
#search-top-box-input,
#search-top-box-input:hover,
#search-top-box-input:focus,
#search-top-box-form input[type=submit],
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus{
border-radius: 0;
box-shadow: none;
font-size: 100%;
}
/* ---- TOP BAR ---- */
#top-bar{
right: 0;
display: flex;
justify-content: center;
}
#top-bar ul li ul{
border-bottom: 1px solid hsl(0, 0%, 40%);
box-shadow: none;
}
/* ---- LOGIN ---- */
#login-status{
top: 1.1em;
right: initial;
color: hsl(0, 0%, 87%);
}
#account-topbutton{
border-color: hsl(0, 0%, 87%);
font-size: 100%;
}
/* ---- PAGE TITLE ---- */
.meta-title,
#page-title{
text-align: center;
}
/* ---- BREADCRUMBS ---- */
.pseudocrumbs,
#breadcrumbs{
text-align: center;
}
/* ---- MOBILE DISPLAY ---- */
@media (max-width: 767px){
#search-top-box{
top: 1.85em;
width: unset;
}
.mobile-top-bar{
position: relative;
left: 0;
display: flex;
justify-content: center;
}
#login-status{
top: 0;
right: 0;
}
#header .printuser{
font-size: 0;
}
#header .printuser img.small{
margin: 0;
transform: translate(6px, 4px);
}
#my-account{
display: none;
}
#account-topbutton{
margin-left: 2px;
}
}
文档在总熵崩溃前不久由E-██████宇宙中恢复。文档中情境被认为是SCP-4800意外中止事件的最后阶段。更大的情境是未知的;在此事件之前E-██████尚不是研究对象。
我在一夜的安睡后醒来听到我的电子闹钟声响,意识到就是今天了!我甩掉我的床罩,匆匆穿上衣服,冲出我的房子。这天是鸟城烘烤比赛的日子,而且我要赢得它!
当我冲向烘烤比赛大楼时,路过一个老太太身边,她告诉我“祝你好运,艾米丽!”我不太了解她,所以继续奔跑的同时只是向后挥了挥。
最终,筋疲力尽,我来到门口了。门上方的牌子用灰色的弯弯字体写着“鸟城烘烤比赛大楼”。当我推开沉重的门进入糖果比赛时,我的羽毛都充满了期待。
我发现自己站在厨房柜台后面,面前摆着各种各样的烘焙原料:面粉、盐、鸡蛋……我环顾四周,看着我的竞争对手——我的朋友们——都以为他们正在这次烘焙销售中比赢我。他们错了!
我抬头望向天花板上用来提醒我们时间的霓虹灯钟。比赛不是根据时间评判的,但它是评委用来给烘焙比赛打分的因素之一。计时器上写着:"-0:20."比赛将在20秒后开始!
虽然没看到他在房间里紧张大叫,但我听到一位解说员告诉我们是时候开始了。我已经把我奶奶著名的松饼配方记在了纤维里。两杯面粉,三个鸡蛋,五撮肉桂。搅拌到看不见肉桂薄片为止。倒进松饼锅,然后煮20分钟。
当我准备我的特色糕饼时,我环顾周围正在烘烤的其它糕点。有曲奇,蛋糕,面包,甜甜圈和百吉饼,都是用面团模制成形的。我是唯一在制作松饼的。我知道这会给我带来优势。
我还没来得及按烤箱上的“定时器”按钮,就听到一声震耳欲聋的尖叫。我转过身来,看见其中一个烘烤者,一个绿羽毛的女子,脸上带着震惊的表情,正处于精神崩溃之中。
“我——我——我——”她结结巴巴地说,“——从没想到会这么快就结束。看窗外!”然后她昏倒了。
我突然敏锐地意识到透过窗户可以看到的黑暗。我停下正在做的事情,喙紧贴在窗户上,凝视着黑暗。我来的时候是早晨;为什么现在是晚上?不过又不是晚上。没有星星,甚至看不见地面,只是纯净的黑暗。就像是我可以够得着去摸它。
我转过身看到一个鹈鹕姑娘,她很早就做好了她的曲奇饼干,正在把它们带到评判间。她的双臂和上半身颤抖着,好像她正在与糖浆搏斗。当她打开门时,我看到了从后面散发出的黑暗,和窗户一样。当她径直走进黑暗时,我听到了她的尖叫声。
已经五个小时了。另外三个参加烘烤比赛的女孩完成了她们的糕点:一个蛋糕,一盘布朗尼,一盘巧克力饼干,看起来很美味。她们三个都站了起来,着了魔似的要拿着她们的糕点到黑暗中赴死。
我的松饼——我的美味大松饼——已经在烤箱里待了五个小时。那段时间,我一直像胎儿一样倚在烤箱旁边,惊慌失措。烘烤者其中之一——一个戴着棒球帽的企鹅女孩——花了很多时间混合配料,正在抱怨她的手臂有多么疼。其它每一位都被困在了这个过程的各个阶段。我们不能闲着。我们只是不能;感觉很不对劲。
已经过去一天了。外面的黑暗丝毫没变,我的松饼可能已经在烤箱里分解了。我强迫自己站起来,走到前门。外面也是一片漆黑。我逃不掉。
突然,黑暗开始涨起来。大家都开始惊慌失措。不过,我一跑回我的烤箱,它又停下来了。看起来像是当我不积极烘烤的时候,情况会变得更糟。
已经两天了。我开始感到胃里的疼痛。企鹅女孩——她的名字叫凯伦——称之为“饥饿”。她告诉我,我们烘烤是为了治愈饥饿。这不只是一场比赛吗?
已经三天了。米娅,那个鹦鹉女孩,乱塞了一些蛋糕混合配料到她的嘴里,说它治好了饥饿。其它也这样做了。我试着把烧坏的松饼残骸放进嘴里,但是锅烧伤了我的手。我不得不拿生面粉来做这个。
我在想,三天前醒来时,我就意识到自己没有再远的记忆。至少,我认为已经过去了三天。那之前发生了什么?
我问过其它烘烤者,她们的记忆也不比我好多少。凯伦问我关于我奶奶的事,就是那位会做松饼的,我居然什么也说不出来。这越来越奇怪了。
已经五天了。米娅竟也不再往饼干上撒糖霜,尖叫着跳进了黑暗中。凯伦说她也想这么做,如果我说我没有考虑过,那就是在撒谎。
那个绿羽毛的女孩开始腐烂了。现在想起来,这似乎很明显。这些都从烘焙销售开始,我想它也会以此结束。我想知道这能否避免。凯伦说这是预先决定的。我问她我是什么意思,她说我们在这个问题上别无选择。
现在,已经七天了。我们都同意走进现在包围我们的黑暗。再见。
值得注意的是,E-██████居住着非异常人类。提及鸟类特征可能与先前的“迁徙”末日情景有关。进一步的关联尚无定论。