三尺之下Ⅲ

三尺之下Ⅲ
By: Boliedwindow
Published on 30 Dec 2022 02:30

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):

• RSO Component — Rounderhouse

Personal styling themes (which are visual overhauls):

• Magnus Web Format — DrMagnus
• Flopstyle CSS — Lt Flops
• Blankstyle CSS — HarryBlank
• Placestyle CSS — Placeholder McD
• Jakstyle — JakdragonX

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; }

▷ Show Code ◁

@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap);
 
/* Centered Header Sigma
 * [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%, 95%);
     --subtitleColor: hsl(60, 62%, 85%);
     --lgurl: url(https://scp-wiki.wdfiles.com/local--files/component:pride-highlighter/lgbtqp_logo.svg);
}
 
/* ---- SITE BANNER ---- */
 #header,
 div#header{
     background-image: none;
}
 
 #header::before{
     position: absolute;
     width: 100%;
     height: 100%;
     content: "";
 
     background-image: var(--lgurl);
     background-position: center top;
     background-repeat: no-repeat;
     background-size: auto 9em;
     opacity: .33;
}
 
 #header h1,
 #header h2{
     float: none;
     margin-left: 0;
 
     text-align: center;
}
 
 #header h1 span,
 #header h2 span{
   /* Hide the Existing Text */
     display: none;
}
 
 #header h1 a::before,
 #header h2::before{
   /* Style the New Text */
     font-family: "Montserrat", "Arial", sans-serif;
     text-shadow: none;
}
 
 #header h1 a::before{
     position: relative;
     bottom: .15em;
 
     color: var(--titleColor);
 
     font-size: 115%;
     font-weight: 700;
}
 
 #header h2::before{
     position: relative;
     top: .1em;
 
     color: var(--subtitleColor);
 
     font-size: 130%;
     font-weight: 600;
}
 
 #header h1 a::before{
   /* Set the New Text's Content From Variable */
     content: var(--header-title, "SCP FOUNDATION");
}
 
 #header h2::before{
     content: var(--header-subtitle, "SECURE - CONTAIN - PROTECT");
}
 
/* ---- SEARCH ---- */
 #search-top-box{
     top: 1em;
     right: 0;
}
 
 #search-top-box-form input.button{
     margin-right: 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: 100%;
}
 
/* ---- TOP BAR ---- */
 #top-bar{
     right: 0;
     display: flex;
     justify-content: center;
}
 
 #top-bar ul li ul{
     border-bottom: 1px solid hsl(0, 0%, 40%);
     box-shadow: none;
}
 
/* ---- LOGIN ---- */
 #login-status{
     top: 1.1em;
     right: initial;
 
     color: hsl(0, 0%, 87%);
}
 
 #account-topbutton{
     border-color: hsl(0, 0%, 87%);
 
     font-size: 100%;
}
 
/* ---- PAGE TITLE ---- */
 .meta-title,
 #page-title{
     text-align: center;
}
 
/* ---- BREADCRUMBS ---- */
 .pseudocrumbs,
 #breadcrumbs{
     text-align: center;
}
 
/* ---- MOBILE DISPLAY ---- */
 @media (max-width: 767px){
     #search-top-box{
          top: 1.85em;
          width: unset;
    }
 
     .mobile-top-bar{
          position: relative;
          left: 0;
          display: flex;
          justify-content: center;
    }
 
     #login-status{
          top: 0;
          right: 0;
    }
 
     #header .printuser{
          font-size: 0;
    }
 
     #header .printuser img.small{
          margin: 0;
 
          transform: translate(6px, 4px);
    }
 
     #my-account{
          display: none;
    }
 
     #account-topbutton{
          margin-left: 2px;
    }
}

Dr.Hoygull一边喝着咖啡，一边仔细阅读着面前的表格。他知道这个习惯对他而言很糟糕；不仅因为咖啡对鸟类有害，还因为此时十几亿贪婪的鸟人正狼吞虎咽地吃着任何看起来像豆子的东西，这意味着咖啡供应链相当脆弱。然而，Hoygull过去六年为了世界重建作出的那些贡献让他付出了很多代价。大多数鸟类都活不到这么久。他觉得自己的心脏随时会跳出胸腔。

然而真正糟糕的是响起的入侵警报，他的高级安全顾问冲进了房间。Hoygull差点心脏病发作。

“先生，大约30个敌人正在攻击塔楼。他们似乎是骑手们——”

“那应该不会有什么麻烦，不是吗？”Hoygull的翻译工具很难强调他语气中的重音。他确实留下了一些骑手，主要是因为犯不上浪费优秀的队伍和弹药追捕他们。他找到了办法来把一些比较讨厌的人变成他的傀儡，就像他对当地公社的领导人所做的那样。

“是这样，事实上，他们有火箭发射器。他们已经越过围墙了。”

“不好意思，你是说骑手们装备了火箭发射器吗？”Hoygull的翻译设备同样很难强调他声音中的愤怒。

“是的先生。”

“他们是怎么搞到军用级武器的?我以为我们已经清理了这个半球所有的军事基地。”

“是的，先生，此外我需要使用异常武器的授权。”

“什么？为什么？他们是骑手，而我们有全国最好的武器装备。”

“说实话，Hoygull，我们‘军队’之间的羁绊细若游丝。他们大多是志愿者，由于我们的修复计划落后于进度，他们士气低落。你曾说过我们会在这个时候让国家政府恢复正常。”

“每个人都在拒绝我们试图植入的傀儡。这比看起来要难得多。”Hoygull又喝了一口咖啡。

“关键是，我们需要士气。有机会干掉这帮装备了轻武器的部队肯定会让所有人兴奋起来。”

“好吧，好吧，当然。一定要把这些家伙赶走，好吗?”

“我不会让您失望的，先生。”

Dr.Kastra一离开房间，Hoygull就把头埋在翅膀里。“为什么？”他自言自语道。“你为什么把这个位子留给我，Calvin？”他非常想辞职，但他知道，是他的存在使这个羽翼未开的基金会团结在一起。他抑制住感情，大口地喝着剩下的咖啡，然后走到走廊尽头，想把战场看得更清楚些。

---

骑士团一突破前门，凯蒂和迭戈就很容易地溜了进去。喊叫声、火箭弹爆炸声和轻武器开火声响彻走廊。蓝鸦骑士团似乎很享受使用这些魔法武器，然而Diego与他们相反，对于端枪开火这件事忧心忡忡。他一生中从未拿过枪；把手枪放在斗篷里的唯一原因是Katy逼他拿的。

“我们得找到Dr.Andrew。”Katy又自言自语道。“妈的。真希望我有这里的地图。他们把俘虏关在哪?”

他们最终偶然发现了一个看起来像牢房的地方。门是锁着的，但Katy在军事基地发现的塑胶炸药很快就把锁炸开了。里面没有囚犯，只有放在天鹅绒枕头上的一面金色手镜。

“骑士们不是谈论过那面镜子吗？”Diego问道。

“我想是的。”Katy把镜子从底座上拿下来，仔细地看了看。“我们也许应该把它带回去。如果骑士团因此失去了人，他们会很生气的；我告诉过他们这些武器会让他们战无不胜。我们可以用这个来平息他们的怒火。而且，我觉得我在它里面的映像很漂亮。”

这是Diego第一次听到Katy称自己“漂亮”。但他们很快被一声机械音吓了一跳，那个声音对他们喊道：“不许动！”

他们转过身来，看到一只穿着白大褂的鸟，脖子上挂着一种金属装置，一名身穿西装、手持猎枪的男子护卫着他。

Katy拔出手枪，把枪管顶在镜子上。“如果你再走一步，我就打破镜子。”

“那就请便吧，”Hoygull说。它轻轻地对着设备鸣叫着，然后让它输出冰冷的机械音。“在过去的一个月里，我们一直试图打破它。如果你的枪比液压机和30磅TNT炸药还强，我恳求你开枪。”

Katy在脑内迅速思考了这些信息，然后扣动扳机，打算揭穿海鸥的虚张声势。子弹从镜子上反弹回来，嵌进了房间的泡沫墙上。

“现在，请把你们的武器扔掉。”Hoygull说。就在这时，Katy深吸了一口气，用枪指着Dr.Kastra，开了枪。她尽力开了两枪，然后Kastra开了猎枪，把她击倒在地。

“Katy！”Diego喊道。他蹲在她身边，试着去摸她的脉搏。他还没来得及做出准确的判断，就感觉到一把猎枪的枪管直直地抵着他的脑袋。

“你没事吧，Dr.Kastra？”Hoygull问。

“我很好，别担心。她的枪法没那么准。我的肩膀可能会淤青一个星期左右，但我没事。”

Diego看着镜子。Katy摔倒在地时抓住了它。在镜子里，他看不到自己。很难描述他看到了什么。里面像是一个完全由想象构造起来的地方。他看到了Katy，他的爸爸，他的妈妈，还有骑士团，蓝色的光晕似乎覆盖了一切。看着它，他感到很满足。好像他脑后根本没有抵着一把猎枪一样。

“把镜子放下！”Dr.Kastra喊道。

Diego甚至没有意识到他拿着它。

“别，我不想在一天内杀死两个人，”Hoygull说，“从背后抱住他，我要从他手里把镜子撬开。”

这位警卫用手臂抱住Diego，把他举起来。海鸥飞到Diego的胸前，用爪子抓住了镜子。虽然这只鸟已经很老了，但在Dr.Kastra的帮助下，镜子似乎从他手中滑了出去。然后海鸥试着把它搬到原来放它的枕头上，但它突然昏了过去，倒在了地上。

“你没事吧，Hoygull？”Dr.Kastra问。突然，Hoygull开始发光。同时，镜子开始发出金属互相摩擦的声音。Diego发现自己头痛欲裂，他开始尖叫。在他昏过去之前，他看到镜子里出现了什么东西：某种人形的身影，和房间里的其他人一起发着光。

当Diego听到响彻世界的震耳欲聋的嘶吼声时，黑暗笼罩了他的视野。

月亮变成了蓝色。

« 三尺之下 II | 群鸟之伍中心页 | 逐日 »