hoah2333的工作室
评分: +60+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; }

该账号封禁中


评分: +60+x

个人沙盒,欢迎参观。
翻一翻甚至能看到加入网站!
标题
电子游戏竞赛 中心页
Cytus III -『Foundation』
网络已死,我却新生
SCPLive!基金会偶像祭:群星闪耀!第一章:「团结」与开始(剧情一览)
长夜孤舟
D-FireKeeper
锈湖的光辉之日即将来临
罗德岛特别入驻干员-长矛突击队(Spear Cross Protections)负责人-黑月-档案数据
龙游县 站务事态日志
The Theory of Soul ~ 堇色梦落
SCP/BSAA线下专题座谈会——21世纪的生物兵器
环海余生
逆转项目文件:SCP-CN-X143-0 - 超形上学奇案之……怪盗八咫乌!
楔子
欲火焚体,灵念飞升
月阙
404小队的基金会一日游
来自自然的色彩
所以基金会解散了?
双人游戏《Butterflies Elysium,蝴蝶的处决记录》
ad astra per aspera
双人游戏《Clam Elysium,极乐蛤蜊汤》
夜泉 第三季 新年特典
跨叙事域特别行动,但是猫猫(以及?)
黃昏諸神大戰 - 魔法師與魔術師的邂逅(上)
Ringed Genesis——仅属于三位少女的旅途
两个世界的交互·尸眠
《极乐艾斯西皮》思维阁指引
跨叙事域特别行动:“狩之极意”
“统一”基金会在非统一魔法世界
置物包
直到他看见了明天
...of Library of Library of Library of Library of Library of Library of Library...
卢锡安协众赴比港,基金会初遇蚀魂夜
七年
苍白新生
意识链接:石油醚、天启、灵魂层析与黑玛门尼
莫奇沃特中心页
噢,你能否给我最后一个吻?
Doki Doki~安德的心跳大冒险⭐️
游戏,刺杀以及猜忌
日月前前事〔第一卷〕
秘所思的迷宫花园·其一
SCP基金会×少女乐团派对绝赞联动现已开放!!
两个世界的交互·形如生者
闹市一隅
瓦尔普吉斯之夜·序
跨叙事域特别行动,但是恐暴龙
冲破黎明
实验记录BC16842/爱乐幼儿园纵火案犯罪嫌疑人的辩护律师会见录音
千重迷梦,循死求生
生死长夜,凛冽火光
KTE-0369-Electronic-Forerunner
血肉于此混凝
序章 站点前奏
对于POI-2739废弃据点的调查
巨大的漂亮东西
铁路上,但是基金会不知在何方
逆模因的复仇
高坂绘里的忧郁
泰伯利亚的黎明
星际坠落
从卡兹戴尔到伦蒂尼姆
海中湖沼
巫异日记
永恒寓言
暗影之源
一个BOSS被打倒之前的故事
铁路上,其他基金会来过
死生流转,信念永存
COUNTINUE:WITH SCP FOUNDATION
油腻血渍
支线行动:涂鸦事件 上部
逐“光”之路
《孤岛危机》在上层叙事的演绎 - 演讲讲座
评分
1003
377
334
156
144
139
117
116
104
99
84
77
63
59
55
54
53
49
48
47
44
43
42
38
35
35
35
35
35
35
34
34
33
33
33
32
32
32
30
30
28
28
27
27
27
27
27
26
25
24
24
23
23
23
22
21
20
20
20
19
19
17
16
14
13
13
13
12
11
10
10
10
9
8
6

tsf.png mww.png str.png


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