| SCP-5861 |
By:  ashausesall |
| Published on 15 Jul 2020 05:39 |
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;
}
@media (min-width: 768px) {
#top-bar .mobile-top-bar {
display: block;
}
#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-5861 |
3/5861 级級 |
| 收容等级：收容等級：Thaumiel |
confidential |
特殊收容措施：基金会AIC“Ἀφρόδιτα”将被部署，用以监控关于SCP-5861相关材料的期刊论文。此类论文将被回拒，相关研究员将被拘留、讯问，而后记忆删除，或是考虑为基金会所雇用。
调查超技术公司的基金会特工应留意是否存在对SCP-5861的开发，并在有所发现后立即上报。
描述：SCP-5861是一种能将爱恋情感转化为电力的奇术进程。此进程的材料需求列于技术报告5861-A之中，包括至少一名感受到此种情感的人类；非人类无论是否具有智能，均不能与此进程兼容。
当前，使用SCP-5861的XI型反应堆为94座基金会站点充当了主要能源（参见技术报告5861-B获取详情）。
附录
I. 历史：起源
1968年，基金会对收容站点的替代能源展开了一项长期研究，从中发现了SCP-5861。此项研究的目标是找到一种全新的电力来源，能用以最小化向基金会站点的运货次数，减少其被发现的风险。
在1968到1984期间，曾建造了一系列使用SCP-5861的实验反应堆，以求将此进程优化到最大产能。初期设计中需要两名处于恋爱关系的对象才能运作，推广应用被伦理委员会所禁止。
1980年的实验性Mark III反应堆首次产生了净正面能量输出，但需要四名人类对象才能工作，且需要以300毫升3/小时消耗润滑。材料成本使其不足以胜任替代式发电方法。
1984年出现了一次重大突破，改用柏拉图式爱恋成为可能。经过接下来两年内的一系列开发后，首台能产生出实用级电量的反应堆制造完成。这便是Mark VI反应堆，能从四名人类中产生100千瓦的电力。
II. 历史：初步改进
Site-147在1989年成为首个仅使用SCP-5851发电的站点。伦理委员会在当时暂且否决将SCP-5861用作能源，因其仍然依赖于人类对人类的情感状态。O5议会以7-5投票同意继续以此方式使用SCP-5861，同时也资助更多研究，寻找更有效的实施手段。
1993年的Mark VIII反应堆首次有望在基金会内广泛应用。SCP-5861进程的改进使其只需两名人类便能产生300千瓦电力；但此过程需要两名人类经历有柏拉图式恋爱感受。
到1998年，Mark X反应堆开发完成。它在SCP-5861中只需使用一名人类，且允许以色欲来替代爱恋。具体而言，每台反应堆使用一名人类，并以色情作品作为情感的焦点。此反应堆在总能量输出上不及Mark VIII，只能产生50千瓦电力；然而其所需空间和维护远小于后者。
这使得Mark X在供应需求上远超O5议会所预期，为此展开了进一步优化。伦理委员会整体将Mark X视作一种折衷方案。
III. 历史：最终开发
2002年，Mark XI开发完成。色情作品的应用渐渐淡出，让位于在更多人类间传播的较弱吸引能。就此而言，最有效的催化媒介被发现是怜爱，具体是针对猫类图片的怜爱。
该反应堆中利用的人类可被终生有效使用，只要能定期提供新的猫类图片，效率下降即可降低到最小。为此，基金会需要大量的猫，并在威尔逊野生动物应对组的指导下开展了繁育工作，确保能大量供应多样的猫类图片，提供给Mark XI反应堆中的对象。
2004年，SCP-5861进程得到了进一步改良，转化现可在极小的设备上进行，足以被装入桌面电脑中，由此开发出了Mark XII反应堆。它被加入了基金会计算机设备的标准配件表内；基金会的默认屏幕保护也被改为了滚动播放的猫类图片幻灯片。此外，在伦理委员会的监督下，基金会人员（包括D级）被鼓励在休息期间多浏览一些包含猫类图片的网站。
