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.
.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; }
/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
#top-bar .open-menu a {
position: fixed;
top: 0.5em;
left: 0.5em;
z-index: 5;
font-family: 'Nanum Gothic', san-serif;
font-size: 30px;
font-weight: 700;
width: 30px;
height: 30px;
line-height: 0.9em;
text-align: center;
border: 0.2em solid #888;
background-color: #fff;
border-radius: 3em;
color: #888;
pointer-events: auto;
}
@media not all and (max-width: 767px) {
#top-bar .mobile-top-bar {
display: block;
pointer-events: none;
}
#top-bar .mobile-top-bar li {
display: none;
}
#main-content {
max-width: 708px;
margin: 0 auto;
padding: 0;
transition: max-width 0.2s ease-in-out;
}
#side-bar {
display: block;
position: fixed;
top: 0;
left: -20em;
width: 17.75em;
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
z-index: 10;
padding: 1em 1em 0 1em;
background-color: rgba(0,0,0,0.1);
transition: left 0.4s ease-in-out;
scrollbar-width: thin;
}
#side-bar:target {
left: 0;
}
#side-bar:focus-within:not(:target) {
left: 0;
}
#side-bar:target .close-menu {
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin-left: 19.75em;
opacity: 0;
z-index: -1;
visibility: visible;
}
#side-bar:not(:target) .close-menu { display: none; }
#top-bar .open-menu a:hover {
text-decoration: none;
}
/* FIREFOX-SPECIFIC COMPATIBILITY METHOD */
@supports (-moz-appearance:none) {
#top-bar .open-menu a {
pointer-events: none;
}
#side-bar:not(:target) .close-menu {
display: block;
pointer-events: none;
user-select: none;
}
/* This pseudo-element is meant to overlay the regular sidebar button
so the fixed positioning (top, left, right and/or bottom) has to match */
#side-bar .close-menu::before {
content: "";
position: fixed;
z-index: 5;
display: block;
top: 0.5em;
left: 0.5em;
border: 0.2em solid transparent;
width: 30px;
height: 30px;
font-size: 30px;
line-height: 0.9em;
pointer-events: all;
cursor: pointer;
}
#side-bar:focus-within {
left: 0;
}
#side-bar:focus-within .close-menu::before {
pointer-events: none;
}
}
}
一夜成永诀。永诀。永诀之夜。
当晚，月色昏红，她的背影朝向阁楼。通向那里的一级台阶凹下去了。她走过时不得不提起裙摆，小心翼翼，那模样像把自己切开。一半自然而然继续向前，一半令人痛心地落在断处以下，而且还将继续下跌。
她的断面整齐如星座。这里是恒星，那边是一簇行星，形成了有条不紊的整体意识，又在另一颗恒星的打扰下几乎破灭。一阵杂音。我们能够看见它们是得益于月光。
没有月光。她的心脏挤不下月光，有两种不同的温柔。在她看来，这些无损于她的纯洁。或许是一种危险？危险值得逃避吗？如果答案是否定的话，危险又值得珍藏吗？她热爱危险，就像热爱白天一样，她还没有见过白天，她的童话里辉煌的火球，她的痴迷不可救药。
她把危险一分为二，其中一份深埋地下。她对他的爱这么深，反过来也成立。她有时候想建立一座城市，只有两个公民，紧张着的和等待着的。他会靠在一座瞭望塔边上，把深情注入射向远处的目光，或者他会伏在塔顶这样做。她老是想起这样的情景，他注视她的情景，那双海水一样蓝的眼睛。夜晚当上统治者之后，海水也没能夺回这样的蓝。
有时这双眼睛能够望见星座。她招呼他看。近处是一面血红，远方是一面血红，她挨着他，想象一座城墙，切分错杂，她捂着嘴笑，撇下一道漫长的阴影，宛如连成串的骷髅，坚不可摧。
她有积木游戏的天赋。长大后，她拥有一座伟大的城市。玫瑰浮夸，道路沉重，纵向延伸的夜晚，被错认的寻常月亮。这是一座有天赋的城市。他在这一切之间拥抱过她。他有着玫瑰的风度和气味。她仅有的是一间遥不可及的阁楼。她全部的天赋自那当中来，自那当中去。阁楼就是她的整个身体。
她离她的身体很近了。她断裂在躯干之前。一地珍珠。钟楼振动起来。她躲进回忆，躲进想象，苏美尔人在时间诞生以前刻下的诗歌和传说中一处不易注意到的巧合无意间开创的回廊里塞拉匹斯脏兮兮的信徒以一座伟大城市的荣耀向事实邀战，一个念头又胜过千场万场战争。
她是悬挂在天花板的视线。她注视自己。她危险的信号已经过去。她注视前方。她挽起他的手。她注视着他挥发。她被一级凹陷的楼梯切碎。她注视那只手。她用积木搭起天堂。她只在夜晚注视。她注视。她是倒挂在天花板的视线。
夜幕一直以来呈锥形，像极了玫瑰的剑，输掉决斗的隐士没有藏好身形，插上了月光的翅膀后海上也起了风。雕刻一样。某个夜里风车会重新梦到持长枪向它冲锋的人，如果没有在此死于非命，他最终能够作为娶得公主的光荣骑士。
天堂是最危险的地方。
她的夜晚上了阁楼，铺满空床，让她安睡。我们知道这就是天堂。然而她无法就此死去，她会梦到一座城市，一座有天赋的城市。狂野之夜。惊悚之夜。他就在那里，他就在落寞的麦田间，他就在犹豫的宫殿里，他就在太阳上，只有星座和月亮会梦到他。她会活下去。这就是她的天赋所在。她也梦见墓地。墓碑像牛奶一样光滑。她尝过墓碑的味道。她会活下去。
她打开窗子，一阵风挖开夜幕，让她的目光直抵墓地以下，一度拥抱过她的，曾让她魂牵梦萦的那具骸骨。只有在玫瑰花香弥漫的夜晚，墓地绽放成一座城市。
