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-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;
}
}
}
项目编号：SCP-7991
项目等级：Keter
特殊收容措施：MTF Psi-7（“家居装饰”）需与当地植入的监视特工与基金会前台公司合作，控制受SCP-7991影响的房产。受影响个体将由CRI得分5.8/10以上的人员进行访谈。
| 图像 # 7991-0324 |
|
|
| ████ ██████女士（49）的最后位置，美国██州。 |
| 拍摄时间 — 08/29/09 |
将酌情制定隐匿协议以处理受SCP-7991影响的失踪人员。
描述：SCP-7991是一种当前无法预测的自发现象，影响长期独自在家的个体，无论现象持续期间出现如何无法预见的情况，其将始终保持这一状态。受影响个体之间无确认的模式或联系，但SCP-7991似乎主要影响高压力的城市环境中的人群。
一旦受到SCP-7991影响，对象将完成自己的日常行为，随后回到卧房。他们将把一个适于坐下的物件移到房内窗边，并在当天其余时间带着忧郁和放松的神情坐在那里。
在SCP-7991期间，对象所处位置附近不会出现恶劣的天气现象，大部分情况下几乎总是晴朗和多云的天气。
在一天的时间里，对象将失去感知到周围人声音的能力，但其不会对此变化表现出不安。此外，他们将表现出对其他刺激的过度敏感和对自然声音的喜爱。
受影响个体无法参与任何有意义的对话，且通常在此类尝试开始时表现出疑惑。意识到有人在对他们说话时，对象将在周围环境、对话发起者和他们落座的窗户之间反复查看，伴有明显的紧张。几秒钟后，个体将恢复镇定，微笑，礼貌地挥手示意谈话发起者离开，随后继续望着窗户。
第二天上午，SCP-7991“虹降”事件将开始。下附一次拍摄到的“虹降”事件的书面记录，由一名SCP-7991受影响个体经历，为隐私起见，下文仅称其为“Jane”。
[ 记录开始 ]
[清晨时分，Jane凝视着窗外。]
[她靠在椅子上，歪着头注视着远处缓慢移动的云团，云团隐匿了背后的太阳，仅让几缕微弱的光线透过。]
[她专注地看着云，慢慢将注意力转向后花园中一株大橡树的影子。它古老的树枝在拂过的微风中轻轻摇曳，在树叶的沙沙声中嘎吱作响。]
[一只青蛙从花园的池塘里跳出来，跳向树的底部，躲藏在后面。青蛙与花园里的几只唧唧喳喳的蟋蟀，还有两只在树枝上歌唱的黄莺一同鸣叫起来。]
| 图像 # 7991-0316 |
|
|
| 由该现象产生的彩虹，摄于消失之前。 |
| 拍摄时间 — 08/29/09 |
[轻柔的细雨开始落下。Jane抬起头，看着浅灰色的云层。]
[小雨持续了一段时间。黄莺蓬出羽毛，继续歌唱。Jane打了个哈欠，听着它们的歌声交织着绵绵细雨拍打在窗户上的声音。]
[一道小小的彩虹出现在远处。它的色彩越发明艳，高耸入云。Jane的目光朝它望去，她以极大的兴趣观察着它，非常着迷。]
[可听见花园里传来溅水声，是青蛙跳回了池水中。鸣叫的蟋蟀现在只剩了一只，与鸟鸣声安静地合奏。]
[Jane露出微笑。]
[她向后靠在椅子上，呼出一口气，合上了双眼。她的胸膛持续有节奏地起伏，她听着雨声和回荡在她家中那黯淡剥落的墙壁间的时钟单调的滴答声慢慢陷入沉眠。]
[云散开，太阳出来。慢慢地，日光穿透了窗户，照在Jane身上，慵懒闲适。每过一秒钟，它都照得更加剧烈明亮，金色、纯粹的光芒反射着缓慢地飘浮在Jane身旁的尘埃颗粒。]
[镜头很快被遮蔽，最终可见的静止帧是Jane脸上温和的微笑。]
[片刻过去，光芒变暗。云再次开始遮蔽日光，光线逐渐黯淡。]
[只余一把空荡的椅子。]
[ 记录结束 ]
在所有有记录的“虹降”事件之后，对象都不约而同地失踪。
需注意，通过掩盖过程，观察到对象亲密的家庭成员克服悲痛、寻到终结、回归日常生活的速度明显快于预期。这些个体将在几个月后彻底遗忘对象。
请按如下方式引用此页：
更多详情请参阅授权指南。
授权信息
文件名：chair.jpg
图像名：Black Country Living Museum - The Village Centre - Gregory’s General Store - door to the living room
图像作者：Elliott Brown
授权协议：CC BY 2.0
来源链接：Flickr
文件名：rainbow.jpg
图像名：Rainbow
图像作者：Stephen Hynds
授权协议：CC BY-SA 2.0
来源链接：Flickr
更多维基文档信息，请见版权信息总览。
页面版本: 3, 最后编辑于: 11 Oct 2022 18:44
