SCP-6641 - 有了ARM，誰還需要Wake-Up Call
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: -18rem;
width: 15.25rem;
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;
}
}
}
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap);
/* Centered Header Sigma-9
* [2021 Wikidot Component]
* By Lt Flops (CC BY-SA 3.0)
* Forked from:
* Penumbra Theme by EstrellaYoshte
* Also based on:
* Centered Header BHL by Woedenaz
**/
/* ---- VARS ---- */
:root{
--titleColor: hsl(0, 0%, 93%);
--subtitleColor: hsl(60, 62%, 85%);
--lgurl: url(https://scp-wiki.wdfiles.com/local--files/component%3Acentered-header-sigma-9/logo.svg);
}
/* ---- SITE HEADER ---- */
div#header{
background-image: none;
}
#header::before{
position: absolute;
width: 100%;
height: 100%;
top: .45rem;
left: 0;
content: " ";
background-image: var(--lgurl);
background-position: center top;
background-repeat: no-repeat;
background-size: auto 8rem;
opacity: .45;
pointer-events: none;
z-index: -1;
}
#header h1,
#header h2{
float: none;
margin-left: 0;
text-align: center;
}
/* Move the Subtitle Down a Smidge */
#header h2{
margin-top: .45rem;
}
/* Hide the Existing Text */
#header h1 span,
#header h2 span{
display: none;
font-size: 0;
}
/* Style the New Text */
#header h1 a::before,
#header h2::before{
font-family: "Montserrat", "Arial", sans-serif;
text-shadow: none;
}
#header h1 a::before{
color: var(--titleColor);
}
#header h2::before{
color: var(--subtitleColor);
}
/* Set the New Text's Content From Variable */
#header h1 a::before{
content: var(--header-title, "SCP基金會");
font-size: 120%;
font-weight: bold;
}
#header h2::before{
content: var(--header-subtitle, "控制, 收容, 保護");
font-size: 125%;
font-weight: 600;
}
/* ---- LOGIN ---- */
#login-status{
top: .5rem;
left: 0;
right: initial;
z-index: 1;
}
/* ---- SEARCH ---- */
#search-top-box{
top: .5rem;
right: 0;
}
#search-top-box-input{
border-radius: 0;
}
#search-top-box-input,
#search-top-box-input:hover,
#search-top-box-input:focus,
#search-top-box-form input[type=submit],
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus{
border-radius: 0;
box-shadow: none;
font-size: unset;
}
/* ---- TOP BAR ---- */
#top-bar{
display: flex;
justify-content: center;
top: 8.8rem;
right: 0;
}
#top-bar ul li ul{
box-shadow: none;
overflow: hidden;
}
/* ---- PAGE TITLE ---- */
#page-title{
text-align: center;
}
/* ---- MOBILE DISPLAY ---- */
@media (max-width: 767px){
#login-status{
left: 5.15rem;
z-index: 20;
}
#search-top-box{
width: unset;
}
.mobile-top-bar{
position: relative;
display: flex;
justify-content: center;
left: 0;
}
}
| 指定站點 |
站點主任 |
研究負責人 |
指定特遣隊 |
| Site-400 |
Adam Desmond主任 |
N/A |
N/A |
特殊收容措施： 仍准許Orville博士繼續於基金會長期工作。當而，將繼續對其保持監視，以記錄任何SCP-6641-1的行動。
描述： SCP-6641是當前發生於基金會高級研究員Ogden Orville身上之異常現象，該員為Site-400天文研究部的部長。
只要Orville博士於上午7:00至晚上10:00期間嘗試入睡，無論其所在位置都將出現一隻沒有毛髮的灰色半透明手臂（歸定為SCP-6641-1）將從Orville博士後背顯現，並透過任何必要之手段將其喚醒。
一旦SCP-6641-1成功將Orville博士喚醒便會立即消失。
附錄6641.1： SCP-6641-1表現形式
以下為部分值得注意之SCP-6641-1表現形式列表：
| 日期與時間 |
地點 |
事件概述 |
| 2017/05/12 (12:54 PM) |
Site-400職員休息室 |
Orville博士在完成一場與異常無關的演講後，在沙發上短暫的睡了一覺。SCP-6641-1顯現並拍打了他的臉，導致該員立即驚醒。 |
| 2017/05/14 (9:04 AM) |
Site-400模因研究實驗室外 |
Orville於研究室外的等候區長椅上打起了瞌睡。SCP-6641-1顯現並拍打了他的臉，但卻並未成功將其喚醒。它抓住了Orville博士的頭髮並用力拉扯之。該動作使Orville隨即驚醒並因痛苦大聲慘叫。 |
| 2017/08/24 (6:53 PM) |
Site-400多功能禮堂 |
Orville博士參與了一場由Placeholder McDoctorate博士所主持的行星外超形上學敘述研討會。研討會進行30分鐘後，Orville博士睡著了，這導致了SCP-6641-1的顯現。Placeholder博士注意到後走近Orville博士並成功將其喚醒。SCP-6641-1在消失前還比出了中指。 |
| 2017/09/07 (3:53 PM) |
Site-400職員休息室 |
參見附錄6641.2 |
附錄6641.2： 事故紀錄
2017年9月9日，Orville無心於Site-400職員休息室沙發上睡著。必須注意的是，當時休息室內還有其他站點職員。以下為事發當下的回溯影像記錄：
駐站維安人員抵達現場，並隨即對Fuller博士、Kelly博士與Sierra進行救治。不過，事件相關的所有基金會職員（除了Orville博士）都在事後隨即受到訓斥，這是因為他們在沒有得到任何主事者同意或直接批准的情況下貿然參與了異常事件之緣故。
2017年9月7日，SCP-6641已被重歸定為Neutralized級。
page revision: 11, 最後編輯於: 23 Jan 2022 14:08
