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

该账号封禁中


评分: +71+–x

个人沙盒，欢迎参观。
翻一翻甚至能看到加入网站！

按时间顺序排列：

独立翻译：

  1. SCP-4280|原文
  2. SCP-4442|原文
  3. SCP-4664|原文
  4. SCP-3076|原文
  5. SCP-4676|原文
  6. SCP-2119|原文
  7. SCP-4787|原文
  8. URA-1902|原文
  9. SCP-4259|原文
  10. SCP-3449|原文
  11. SCP-5353（旧）|原文
  12. 解密：SCP-KNIFE，“刀”|原文
  13. 解密：SCP-5790：[已杀死数据]|原文
  14. 末日前夕|原文
  15. 有时我希望此刻永存|原文
  16. 等待美好时光|原文
  17. 解密：SCP-CN-001：AIeditor059的提案 - 剧本|原文
  18. 解密：S̶̶C̶̶P̶̶-̶̶5̶̶4̶̶0̶̶4，“语言学雷区”（砰——砰词语）|原文
  19. 解密：文档5242：SCP-整数|原文
  20. SCP-139|原文
  21. SCP-5678|原文
  22. 解密：SCP-5145 - 葬阳|原文
  23. SCP-5483|原文
  24. SCP-5523|原文
  25. SCP-5326|原文
  26. SCP-5520|原文
  27. 泛种论|原文
  28. 围攻Site-19|原文
  29. Nobody、Nobody、Nobody和Nobody与穿白西装的人之间的遭遇|原文
  30. 墨迹 版式|原文
  31. 腐败|原文
  32. 分心|原文
  33. SCP-5976|原文
  34. 解密：SCP-1548-EX：“憎恨星”，写了82分钟|原文
  35. Klakkr的艺作页|原文
  36. lynch的艺作屁作|原文
  37. 占位符 人事档案|原文
  38. 美国爱国者|原文
  39. 招募行动|原文
  40. 拦截自安德森系统人员的文件|原文
  41. SCP-5598|原文
  42. SCP-5510|原文
  43. 观谬维基论坛组件|原文
  44. McDoctorate的提案|原文
  45. 罗纳德·里根在说唱时被切碎|原文
  46. 基金会炫酷成就徽章|原文
  47. 炫酷成就徽章|原文
  48. SCP-0110-J|原文
  49. 给我带点肉|原文
  50. 亚克福音 > 第2章.js|原文
  51. ███-3955|原文
  52. SC-11/11-1/i|原文
  53. 维基模块 组件|原文
  54. Sigma-9 版式中心|原文
  55. 2021丘比特竞赛|原文
  56. SCP-5647|原文
  57. ……还记得我们吗？|原文
  58. 技术内容守则|原文
  59. CSS守则|原文
  60. 破晓|原文
  61. ACS动画|原文
  62. 渐显|原文
  63. 更好的脚注|原文
  64. 黑标居中页眉|原文
  65. 黑标切换侧边栏|原文
  66. 项目计划书 2024-124|原文
  67. SCP-4487|原文
  68. 超级酷的自定义ACS附加组件|原文
  69. 分离式终端 版式|原文
  70. 高级信息方法论（AIM）组件|原文
  71. 怀忆往冬|原文
  72. Fyahgfox的艺术作品|原文
  73. Croq 风格 CSS|原文
  74. 苦痛之年|原文
  75. 末日之后|原文
  76. BreakerBreaker的艺术中心页|原文
  77. 2021连写竞赛|原文
  78. SPC-5000-J（旧）|原文
  79. SCP-5337|原文
  80. SCP-5809|原文
  81. SCP-5756|原文
  82. SCP-5884|原文
  83. SCP-2011-EX|原文
  84. 荒废之地|原文
  85. SCP-5857|原文
  86. 信息模块内容警告|原文
  87. SCP-5814|原文
  88. scp-3-j|原文
  89. 魔杖 版式|原文
  90. 日暮之前|原文
  91. 解密：SCP-3799 - 落雪简史|原文
  92. SCP-5237|原文
  93. SCP-5248|原文
  94. JAK 风格|原文
  95. 这是真的我发誓|原文
  96. 灾害 主题版式|原文
  97. SCP-6000（占位页）|原文
  98. Dark Stuff伴无眠之夜|原文
  99. 黄金盛宴 CSS 版式|原文
  100. 居中页眉 Sigma-9|原文
  101. SCP-1507|原文
  102. 一篇骇客文章：句子子句|原文
  103. 故事系列推荐中心|原文
  104. 麦克斯韦的银锤 CSS 版式|原文
  105. 自然？！|原文
  106. Valdevia的艺作页|原文
  107. SCP-5000|原文
  108. 半影黑标版|原文
  109. 诸神黄昏 版式|原文
  110. 非官方梗竞赛|原文
  111. 给外行人的加标签指导|原文
  112. 单色调|原文
  113. SCP-6017|原文
  114. 玄武岩 版式|原文
  115. JakdragonX 的有点（？？？）艺术的作品页|原文
  116. 心灵坠落|原文
  117. 黑标版极简 主题版式|原文
  118. 塔罗牌故事中心页|原文
  119. 2021放逐竞赛|原文
  120. 被放逐者之图书馆首页展示框|原文
  121. 单色型 版式|原文
  122. Ruiz 再死|原文
  123. 白日梦|原文
  124. 智慧箴言 版式|原文
  125. 钟表 主题版式|原文
  126. 作者标签|原文
  127. 作者标签 源代码|原文
  128. 评分占比条|原文
  129. 艺作屁作 3.0 - 1.0：SCP ⑨月版|原文
  130. 为无谓力量所付的额外支出|原文
  131. SCP-6023|原文
  132. 趁我们还活着 00：请回话|原文
  133. SCP-6320|原文
  134. 霓虹敌托邦 主题版式|原文
  135. 梦魇节（非官方）|原文
  136. SCP-6230|原文
  137. 趁我们还活着播客中心页|原文
  138. SCP-012-EX|原文
  139. 骷髅小队 版式|原文
  140. 帝都经济新闻 版式|原文
  141. “测试对象”（B82SW/9KL74/Y4P1K）|原文
  142. Fishish 的提案|原文
  143. SCP-鱿鱼-J|原文
  144. 最适合学习黑暗力量的 5 所大学！第 1 名竟然是它！|原文
  145. 格式错乱中心页|原文
  146. Instagram 二创艺作竞赛 2021 秋季赛|原文
  147. SPC 黑色标记笔 主题版式|原文
  148. Woed 的分级栏|原文
  149. Woed 的分级栏 源代码|原文
  150. 分级装饰栏|原文
  151. 分级装饰栏 源代码|原文
  152. SCP-画谜-J|原文
  153. DJK|原文
  154. 超级酷的自定义 ACS 附加组件指导|原文
  155. 筹资小组件|原文
  156. 筹资小组件 源代码|原文
  157. 时区转换器|原文
  158. SCP 骄傲样版|原文
  159. 组件中心页|原文
  160. 信浓中央新闻 版式|原文
  161. 第三定律骄傲 CSS 版式|原文
  162. 冰蛛安魂曲|原文
  163. 无悔之道 中心页|原文
  164. 告诫 中心页|原文
  165. 蒐集院版式 - 改|原文
  166. 地下疗法 版式|原文
  167. SCP-空白-J|原文
  168. SCP-6863|原文

合作翻译：

  1. SCP-5999|原文
  2. SCP-6820|原文
  3. SCP-6659|原文

接坑更新：

  1. 机密分级完整列表|原文
  2. K级情景完整列表|原文
  3. SCP-3211|原文

中译英：

  1. Inline Collapsible Block Module|原文
tsf.png  mww.png  str.png 

标签翻译器

标签翻译器

标签翻译器 II

标签翻译器 II

翻译工具

代码参考

[[a href="链接"]]说明文字[[/a]] = [链接 说明文字]
[[a href="链接|"]]说明文字[[/a]] = [[[链接|说明文字]]]
该作者的更多作品
作者
页面版本: 103, 最后编辑于: 14 Jan 2023 10:27
编辑 评分 (+71) 标签 讨论 (87) 历史记录 附件 打印 网站工具 + 选项
除非特别注明，本页内容采用以下授权方式： Creative Commons Attribution-ShareAlike 3.0 License