What this is
A bunch of miscellaneous CSS 'improvements' that I, Croquembouche, 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; }
- SCP系列
- 故事
- 图书馆
- SCP-CN系列
- SCP国际
- 背景资料
- 指导
- SCP系列
- CN系列 III (CN-2000 - CN-2999)
- CN系列 II (CN-1000 - CN-1999)
- » CN 系列 II 故事
- CN系列 I (CN-001 - CN-999)
- » CN 系列 I 故事
- 搞笑SCP-CN
- 已解明SCP-CN
- 系列 VII (6000 - 6999)
- 系列 VI (5000 - 5999)
- » 系列 VI 故事
- 系列 V (4000 - 4999)
- » 系列 V 故事
- 系列 IV (3000 - 3999)
- » 系列 IV 故事
- 系列 III (2000 - 2999)
- » 系列 III 故事
- 系列 II (1000 - 1999)
- » 系列 II 故事
- 系列 I (001 - 999)
- » 系列 I 故事
- 搞笑SCP
- » 搞笑SCP故事
- 已解明SCP
- » 已解明SCP故事
- SCP国际翻译中心
- 故事
- 图书馆
- 背景资料
- 指导
缘起缘落,缘生缘灭
无论您在哪,愿明天一切都好起来
—— 写 ——
—— 译 ——
云 — 原作者minmin
二重身 — 原作者scka
纯手工缝制 — 原作者EldritchCadence
两兄弚的寓言 — 原作者SunnyClockwork
破损工具 — 原作者weizhong
我们很抱歉 — 原作者DrEverettMann
图案 — 原作者Aelanna
耳 — 原作者Cherry Pict
“一个小小的复仇故事”又名,“Cimmerian博士在Site-19的休息室里用微波炉加热一片开封的美式卡夫芝士两分钟” — 原作者Uncle Nicolini
陌地谷仓 — 原作者Laneous
SunnyClockwork的艺术作品 - SCP系列V, VI & VII — 原作者SunnyClockwork
机遇叩叩 — 原作者tunedtoadeadchannel
音频日志:最后幸存者 — 原作者DrKens
劫路怪匪 — 原作者Doctor Cimmerian
公园漫步 — 原作者MrAnakinSpecter
钻孔 — 原作者Aelanna
大发慈悲 — 原作者Gargus
SCP Café中心页 — 原作者pxdnbluesoul
我们在办公室里养了一株植物
我们称她为花
原创SCP
SCP-CN-1414
+37 … 7
最新评论: isomer-364 于 30 Nov 2019 16:11
最新编辑: Simon Arran 于 11 Sep 2019 03:27
著作信息 作品名称:SCP-CN-1414 文玩人丸 作者:Pimpernel_F_Wagner 该作者的更多作品:作者页在此。 更多 更多 里话及作者杂谈:唔姆。最初的点子来源于几年前的一个梦。也算是我为数不多能记住的梦了。...
标签: euclid scp 人造物品 原创 尸体 强迫性 成瘾性 无定形 活物 触觉影响 认知危害 记忆影响
原创故事
作家之写
+27 … 13
最新评论: Pimpernel_F_Wagner 于 22 Jan 2019 15:25
最新编辑: Pimpernel_F_Wagner 于 05 Aug 2019 02:46
...
标签: 原创 故事
邻家小孩
+67 … 22
最新评论: Pimpernel_F_Wagner 于 01 Mar 2019 14:23
最新编辑: Pimpernel_F_Wagner 于 05 Sep 2019 01:46
...
标签: creepypasta 原创 故事
内向
+46 … 23
最新评论: NicolasL 于 05 Sep 2019 01:14
最新编辑: Pimpernel_F_Wagner 于 05 Sep 2019 01:47
...
标签: creepypasta 原创 故事
蜂舞
+19 … 2
最新评论: Lucky7777777 于 22 Jun 2019 01:43
最新编辑: Pimpernel_F_Wagner 于 05 Sep 2019 01:55
...
标签: creepypasta 原创 故事
关于地下水道及其(可能的)住民
+78 … 12
最新评论: charathedreemurr 于 09 May 2022 03:03
最新编辑: diamond8051 于 27 Mar 2022 09:15
著作信息 作品名称:关于地下水道及其(可能的)住民 作者:Pimpernel_F_Wagner 该作者的更多作品:作者页在此。 更多 更多 里话及作者杂谈:周日晚餐对我的影响很大。这是一个行于虚幻与真实之间的故事。一个故事本身并不算吓人,但当它能够与现实生活中的种种联系在一起时,却总是能让人不寒而栗。...
标签: creepypasta 原创 故事 观谬维基
小寄居蟹
+47 … 4
最新评论: AltAlt 于 09 May 2022 01:08
最新编辑: Shawn Otto 于 02 Aug 2020 10:40
...
标签: creepypasta 原创 故事
原创图书馆页面
至深的婚礼
+26 … 1
最新评论: Pimpernel_F_Wagner 于 19 Feb 2020 04:42
最新编辑: Sekai_s 于 29 Sep 2020 12:34
...
标签: wanderers 原创 苍树与血
翻译故事
云
最新评论: drdiver 于 16 Feb 2021 08:24
最新编辑: Pimpernel_F_Wagner 于 13 Dec 2019 14:50
...
标签: creepypasta 故事
二重身
最新评论: OEOWO3O 于 20 Jun 2019 11:56
最新编辑: Pimpernel_F_Wagner 于 18 May 2019 15:14
当他抬头凝视着天花板,躺在床上,等待入眠时,它出现了。更确切地说,它是在那一刻显现出来的。他们互相注视了一会儿,然后他问道:“你是谁?” 他猜它说话的时候会笑,然后它的确那么做了。他又问了一遍: “你叫什么名字?” 他觉得泰勒这个名字很合适。令人惊讶的是,他一想到这儿,它就回复道“泰勒”。 “你在这干嘛?” 为了找点乐子吗? “为了找点乐子。”...
标签: creepypasta ko 二次翻译 故事
纯手工缝制
最新评论: Pimpernel_F_Wagner 于 27 Jun 2019 13:47
最新编辑: Pimpernel_F_Wagner 于 27 Jun 2019 13:48
...
标签: 故事
两兄弚的寓言
最新评论: Pimpernel_F_Wagner 于 12 Sep 2019 23:49
最新编辑: miumeat 于 12 Mar 2020 13:34

标签: cool之战2 ruiz-duchamp 故事
破损工具
最新评论: Anymon 于 17 Apr 2022 06:49
最新编辑: Pimpernel_F_Wagner 于 19 Jul 2019 05:49
...
标签: 故事
我们很抱歉
最新评论: Kapo_William 于 22 Jul 2019 16:41
最新编辑: Pimpernel_F_Wagner 于 17 Aug 2019 13:00
...
标签: 故事
图案
最新评论: Pimpernel_F_Wagner 于 23 Jul 2019 14:30
最新编辑: Sekai_s 于 07 Feb 2020 03:20
亲爱的妈妈, 从学校向您发来问候,我是伊莱恩。我知道我已经有一段时间没写信了,但是这儿真的很忙,我真的抽不出时间。 我知道,对于我来说迟到很奇怪,但我希望你在身边,这样我就能告诉你这一切有多疯狂。我真的很想念你和家人们,我希望在休息的时候能有时间去看看你。我终于发现了你不久前寄给我的包裹,我真的很感激,因为我喜欢我衣服上的图案。他们在这里卖的东西和咱们家那边卖的几乎完全不一样。...
标签: 2009gears生日竞赛 故事
耳
最新评论: Pimpernel_F_Wagner 于 19 Aug 2019 15:22
最新编辑: Pimpernel_F_Wagner 于 19 Aug 2019 15:25
...
标签: 故事
“一个小小的复仇故事”又名,“Cimmerian博士在Site-19的休息室里用微波炉加热一片开封的美式卡夫芝士两分钟”
最新评论: DawnTang 于 31 Aug 2019 07:21
最新编辑: sclocation 于 15 Oct 2019 06:21
“一个小小的复仇故事”又名,“Cimmerian博士在Site-19的休息室里用微波炉加热一片开封的美式卡夫芝士两分钟” 上午 10:26 一个腼腆的女人打开了等候室的门。她一只手调整着眼镜,另一只手拿着笔记板,快速地读着下一人的名字。 “是Cimmerian先生吗?人力资源案件解决委员会现在要见你。” 一个脸上带着很久以前发生的火灾留下的伤疤的,有点胖乎乎的男人冷笑着站了起来。...
标签: cimmerian博士 合著 故事
陌地谷仓
最新评论: Pimpernel_F_Wagner 于 03 Oct 2019 08:15
最新编辑: Sekai_s 于 20 Sep 2020 02:12
teethbrush 8/22/2019 (Thu) 10:35:01 #82940341 IMG_2077.jpg 我问个奇怪的问题,谁有过什么关于谷仓的奇怪经历吗?...
标签: creepypasta 故事 观谬维基
机遇叩叩
最新评论: Pimpernel_F_Wagner 于 12 Dec 2019 03:43
最新编辑: Sekai_s 于 07 Feb 2020 03:20
...
标签: 2009gears生日竞赛 故事
音频日志:最后幸存者
最新评论: Olympic Logic 于 27 Jan 2020 16:54
最新编辑: Sraosha 于 25 Mar 2020 09:47
[[正在访问Site 23日志文件。]] [[ / 数据损坏 / ]] [[播放搜索到的日期最近的未损坏音频日志。]] [[日志: XC/CC/????-错误: 数据记录损坏]] [[最初登陆者: Kensington, Jacob;2级安保许可]] [[接入点: [ / 数据删除 / ] ]] [[音频日志记录:播放开始。]] [长时间的沉默]...
标签: heiden博士 故事
劫路怪匪
最新评论: Wind Chaser 于 02 Feb 2020 04:15
最新编辑: Sekai_s 于 19 Jan 2021 16:29
啊,由于我看到了万圣节竞赛的中心页,决定花20分钟写点东西,于是便有了这篇文章。非常感谢大河马帮我改进了一下。 差点忘了,图片来源于此: https://commons.wikimedia.org/wiki/File:Applebee%27s_Restaurant.jpg dr-cimmerian-s-personnel-fileDr. Cimmerian的人事档案▸...
标签: cimmerian博士 故事
公园漫步
最新评论: Pimpernel_F_Wagner 于 02 Feb 2020 10:10
最新编辑: Pimpernel_F_Wagner 于 02 Feb 2020 10:09
...
标签: 交换艺术 故事
钻孔
最新评论: Pimpernel_F_Wagner 于 27 Feb 2020 02:30
最新编辑: Pimpernel_F_Wagner 于 27 Feb 2020 02:30
...
标签: 故事
大发慈悲
最新评论: Pimpernel_F_Wagner 于 24 Mar 2020 00:35
最新编辑: Cryer Walker 于 05 Apr 2022 04:04
...
标签: 故事 雕像-最初之作
奇妙小恐龙
最新评论: EatherAC 于 03 Sep 2021 23:44
最新编辑: Pimpernel_F_Wagner 于 03 Sep 2021 13:29
...
标签: wondertainment博士 故事
健康小孩
最新评论: Baby Bat 于 04 Sep 2021 15:10
最新编辑: Pimpernel_F_Wagner 于 04 Sep 2021 15:19
下面的文章是摘录自第232397号条目 家庭录像17.mov 的文字副本节选。 需要家庭录像17的完整条目或家庭录像17的完整文字副本的人员可查阅电子可视化图书馆档案HVAA#0000017部分。 文字日志-232391-17-2: 对象-2323在第232398号条目中被称为“爸爸”,且“丹尼尔”代指录像中出现的对象儿童。 00'34'' -...
标签: 故事
啪嗒
最新评论: Pimpernel_F_Wagner 于 12 Oct 2021 05:17
最新编辑: EatherAC 于 12 Oct 2021 09:39
...
标签: creepypasta 故事
其他翻译
SunnyClockwork的艺术作品 - SCP系列V, VI & VII
最新评论: Dr Fishbone 于 25 Nov 2021 13:03
最新编辑: Esperanza_Cai 于 08 Aug 2021 09:52
SCP Café中心页
最新评论: Archibald1 于 03 Apr 2020 02:46
最新编辑: Pimpernel_F_Wagner 于 02 Apr 2020 17:36
SCP Café所使用的Logo。 项目名称: SCP Café播客 主播:pxdnbluesoul 别名:‘忠情的丈夫1’,‘铲屎官2’,‘作者’[已发现匹配页面],‘古龙水发烧友’,‘闲聊达人’,‘托特纳姆热刺队粉丝’,‘Subreddit版主’ 日程安排: 周更(星期五),偶尔会有额外的内容。 特殊收容措施:由于SCP...
标签: 中心 音频
更多页面