SCP-7422
SCP-7422
By: Hg-labHg-lab
Published on 04 Dec 2022 02:47
评分: +8+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; }
/* 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-7422
等级等級1
收容等级:收容等級:
euclid
次要等级:次要等級:
{$secondary-class}
扰动等级:擾動等級:
dark
风险等级:風險等級:
notice

指定站点 站点主管 研究首席 指派特遣队
Site-400 Adam Desmond主管 N/A N/A

特殊收容措施:在获得现任站点主管批准后,允许SCP-7422永久留在Site-400。对其个人宿舍进行改造,以更好容纳各类禽用设施(包括一个小池塘和喂食站)。

为保持士气并确保合作,要求站点人员像往常一样与SCP-7422交往,不得因为对方是一只鹅而有任何歧视。


描述:SCP-7422为以下二者(可交互指代):

  • 一头成年雌性Anser anser domesticus(或家养灰鹅)实例,长有灰白相间的羽毛和粉色的足。或;
  • 高级研究员Savannah Andrews-Swann,曾任Site-400元小说研究部-叙事学部-操作部门首席。

具体情况为:2018年4月3日,当Dr. Andrews-Swann及其同事在Site-400的主餐厅时,她突然毫无征兆地自发变成了一只灰鹅。由于其同事的骚动,该鹅(下称SCP-7422)开始四处乱窜,不断鸣叫,后被Carlos Sierra特工捕获并暂时扣留。

在制定收容措施,并通知Site-400所有人员Dr. Andrews-Swann变成了一只鹅之后,发布了标准测试和实验,以确定SCP-7422是否存有理智。

然而,这一测试被证明是徒劳的,因为研究人员报告称他们难以辨别Dr. Andrews-Swann的惯常表现和鹅的正常行为之间的区别。


附录7422-1,事件记录:2019年8月18日,四只SCP-31991成功破坏其二级悬挂装置,并逃出改装收容间,导致一起全站收容突破。迅速派出应急特遣队(ETF) 单位,并下令立即封锁南侧Keter级收容翼。

尽管ETF尽力疏散,仍有二十余名人员被困在Keter级收容翼的大厅内。与此同时,所有SCP-3199实例都在大厅外游荡。SCP-7422也被困在其中。

由于实例的风险,救援极其困难。当SCP-3199最终打破大厅的双封锁门时,人们尖叫起来,蜷缩在一起,等待着他们似乎无法逃脱的命运。

但事情发生了意想不到的转折:SCP-7422迈着自信的步伐走向SCP-3199实例,从她的喙中发出了响亮的嘶嘶声。她走近一步,举起双翅,似在威胁这些实例。人们虽仍然畏缩着,但对这一峰回路转明显流露出敬畏之情。

所有四只SCP-3199都开始后退至外面的走廊。SCP-7422再次响亮地鸣叫起来,朝其中一只实例猛扑过去,从它的左耳上咬下一小块肉。它立即踉跄后退,表现得惊慌失措,身后的其他实例迅速拉开了与SCP-7422的距离。

不带任何犹豫,SCP-7422开始将所有四只SCP-3199实例逐离大厅。她成功将这些实例驱赶到改装收容间处,那里正好是ETF单位的所在位置。尚不清楚这仅仅是一个巧合,还是SCP-7422的最初意图。

所有实例立即被射杀。了解SCP-7422情况的ETF人员迅速将其带往附近医务室治伤口。该单位最终抵达被困人员所在大厅,并执行标准医疗护理程序,没有发现任何重伤。


附录422-2,事件后续:在恢复此次事件录像及对多名相关人员取证后,Site-400现任站点主管及行政与监督委员会决定授予SCP-7422基金会之星,以表彰其对SCP基金会的杰出贡献和英勇行为。

授勋仪式在Site-400的多功能餐厅举行。SCP-7422在得知获奖消息后大声鸣叫起来,据旁人解释,这是她得意与高兴的表现。

除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License