这是什么
我
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;
}
}
他在梦中继续坠落。
气泡从他的口中飘出,逐渐占据了他的整个视野。他尝试用手将这些气泡移开,而它们却只是从他的手指间流过。
慢慢地。
周边的颜色越来越深了,也许是因为光亮已经无法照射到海下如此之深了吧。
坠落。
他突然不再感到水带来的浮力,而周围也变成了浅蓝色,气泡也消失了。随即,他坠落的速度开始变快。
越来越快。
随着“扑通”一声,他落进了水里。然后气泡开始从他的口中飘出。
7:20
“哔哔哔哔,哔哔哔哔,哔哔哔哔。”
闹铃声把他从梦中拖回现实。他迷糊地摸向手机,关掉了闹铃,然后他起身,下床,伸了个懒腰。
8:00
是出门的时间了。
家离公司不算很远,坐地铁过去只要半个多小时。
8:38
和往常一样,又是坐办公室的一天。
有时候他也会觉得烦闷,但每次想到他自己不用加班,又觉得没什么了。
17:45
今日是周五,而且他一直都有双休——又到了休息的时候了。
真是平静的生活。
19:05
作为一个仓鼠党,他的冰箱和橱柜里总是摆着很多食材。
而懒得做饭的时候,他会拿出一大堆罐头来食用。特别是这样的休息日——他要用大把时间来打游戏,不想花时间来做饭。
1:32
爽玩几小时游戏。
困了。
睡觉。
7:27
“哔哔哔哔,哔哔哔哔,哔哔哔哔。”
闹铃声把他从梦中拖回现实。他迷糊地摸向手机,关掉了闹铃,然后他起身,下床,伸了个懒腰。
8:08
是出门的时间了。
家离公司不算很远,坐地铁过去只要半个多小时。
8:46
和往常一样,又是坐办公室的一天。
有时候他也会觉得烦闷,但每次想到他自己不用加班,又觉得没什么了。
17:48
今日是周五,又到了休息的时候了。
他今天有种时间过得比较快的感觉,也许是工作比较认真,忘记了时间吧。
不对,不如说是摸鱼太多才忘记了时间。
19:29
作为一个仓鼠党,他的冰箱和橱柜里总是摆着很多食材。
而懒得做饭的时候,他会拿出一大堆罐头来食用。特别是这样的休息日——他要用大把时间来打游戏,不想花时间来做饭。
1:33
爽玩几小时游戏。
困了。
睡觉。
7:56
“哔哔哔哔,哔哔哔哔,哔哔哔哔。”
闹铃声把他从梦中拖回现实。他迷糊地摸向手机,然后心里产生一丝疑惑。
他总觉得他会在更早的时候起床才对。
但转念一想,他从不修改自己的闹钟。哦——是睡糊涂了。
8:16
是出门的时间了。
家离公司不算很远,坐地铁过去只要半个多小时。
9:32
只要半个多小时吗?
他感觉……有些不对。
18:06
他一整天都忧心忡忡的,完全没有在工作。
19:48
他今天无心做饭。
他吃了些罐头。
他总觉得他昨天已经吃过这些罐头了。
1:34
他在床上辗转反复一直到现在。
被心情压制的困意终于打破牢笼。
睡觉。
8:01
“哔哔哔哔,哔哔哔哔,哔哔哔哔。”
闹铃声把他从梦中拖回现实。他猛然苏醒。
他今天想起了前两天发生的事。
8:24
在纠结之中,他还是决定去上班。
是的,世界已经让他感到陌生,但然后呢?
他不敢打包票说自己不上班就能恢复正常,如果不上班反而更糟了呢?
9:05
今天会是坐办公室的一天。
也会是在纠结中度过的一天。
18:24
今日是周五,昨日也是周五。
他现在只希望明日不要再是周五。
19:10
在意识到他实际上已经连吃了三天罐头以后,他对继续食用罐头是抗拒的。
但连班都忍着上完了,要是是因为不吃罐头导致出更多问题,那班不就白上了吗?
1:35
他躺在床上,思考着将来。他的脑中好像有两个小人在争论,一个小人认为以后还会回到正常生活,而另一个认为余生都要这么过下去了。
而到了这个特定的时间后,他自动开始了睡眠。
7:20
“哔哔哔哔,哔哔哔哔,哔哔哔哔。”
闹铃声把他从梦中拖回现实。他拿起手机,看向今日的命运。
19 Mar 2026 14:07,周一,7:20。15 JUNE pm04:04
15 JUNE pm04:0419 Mar 2026 14:07,周一,7:20。
他大喜过望。可是周一和周五真的有区别吗?
8:00
在一开始的喜悦过后,他冷静下来。他想,也许异常还会继续呢?他还是不要高兴太早比较好,免得变成乐极生悲的景象。
现在,到了出门的时间了。
8:38
他在正常的时间段到达了公司。
他开始工作。
17:45
今日是周一,不是那些异常的周五。再加上一整个白天都没有什么异常,他觉得他大概是回到正常的日子了,至少也是离异常远了些。
真是太好了。是吗?
19:05
他终于做了一顿饭。
盐有点放多了,但他今天不在意这一点点小问题。
他很开心。为了好不容易能正常吃饭开心,也为了回到正常的日子而开心。
1:32
今天的时间没出什么问题。真的吗?
他躺在床上,满心期待着明天——正常的明天。
结果因为太兴奋,他到了这个时间才睡着。
“咔哒。”
于是,他在梦中继续坠落。
请按如下方式引用此页:
更多详情请参阅授权指南。
文件名:StockSnap_XVXG899NFJ.jpg
图像作者:Jeremy Bishop
授权协议:CC0
来源链接:StockSnap
文件名:StockSnap_2Y1ODPFSBT.jpg
图像作者:Jeremy Bishop
授权协议:CC0
来源链接:StockSnap