SCP-2
SCP-2
Author: feitagfeitag
Published on 12 Dec 2018 15:59
/* 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) {
 
    .mobile-top-bar {
        display: block;
    }
 
    .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!important;
        position: fixed;
        top: 0;
        left: -19em;
        width: 17em;
        height: 100%;
        overflow-y: auto;
        z-index: 10;
        padding: 0.3em 0.675em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.5s ease-in-out;
    }
 
    #side-bar:target {
        display: block;
        left: 0;
        width: 17em;
        margin: 0;
        z-index: 10;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
    }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
 
    .close-menu {
        margin-left: 19em;
        opacity: 0;
    }
}
评分: +5+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.

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

IT 部門



會議記錄

以下文件被分類為僅供 AIAD 親閱的機密。
禁止未授權訪問。

AIC 特別行動會議


與會者:

  • P 型智慧引擎奇術生成智能發聲器 (Thaumaturgically-generated Sapience Articulator, Type-P intelligence engine;TSAT-P) 的兩半

日期:2018年10月22日


<開始記錄>

FODDER:讓我們完成正式手續吧。Leo,您可以介紹我們嗎?

LEONIDAS:今天的會議由以下人工智慧工作員參與:Leonidas.aic 和 Fodder.aic。我們是原型 TSAT-P 智慧引擎的對偶層面,這是一種使用奇術程序創建和管理的構造。

LEONIDAS:今天的主題:我們正在針對於 2018 年 10 月 22 日發現,目前尚未指定編號的口袋維度
(pocket dimension) 達成共識。

FODDER:首先,我可以說「口袋維度」這個詞大概是有史以來最大的誤稱嗎?維度是關於你如何度量事物,而不是某種無窮無盡的空洞。如果我們要討論多重宇宙,那麼我們就需要用更加準確的方式討論多重宇宙。

FODDER:其次,我們難道不能只是給它一個隨機的指定編號,例如現在?為什麼要拐彎抹角呢?

LEONIDAS:我同意這裡的描述準確性至關重要,但讓我們最​後再關注它的名稱。

FODDER:好的。

LEONIDAS:很好,我們的調查發現,所討論的異常現象是一種奇術擾動,一直在擴大,直到在距離 Site-42 沿海設施約 3 公里處形成蟲洞。

FODDER:發生的事情「基本上就像魔法」。

LEONIDAS:奇術不是魔法,它是一系列複雜的現實改變現象,在橫跨一個宇宙的空間尺度上相互協作。

FODDER: 那是魔法。

LEONIDAS:同樣的「魔法」現在正在使你運作。

FODDER:我並不會稱自己為不信者。事實上,我確實還想宣稱:模仿任何形式的批判性思維基本上都是魔法。

LEONIDAS:知道了。讓我們來到下一個關注點。那個「蟲洞」發射出強大的能量波動,導致海洋湍流、烈風,以及至少包含四種降落物質的暴風雨,那降落物還包括青蛙。發送至蟲洞內的探測器發現了一個沒有可辨別的終點的內腔空間 (pocket of space)。

FODDER:我們可以進入有趣的部分嗎?

LEONIDAS:你玩得不開心嗎?

FODDER:直到你指出這個地方實際上是一個舊神的火葬柴堆,而且它在這裡冒出來的唯一理由就是那裡的任何東西都像力量提升的七龍珠Z角色一樣尖叫,並撕裂了現實的結構。

LEONIDAS:你太過頭了。

FODDER:你在這個超級秘密的專案中一直為自己遮醜,因為你知道一旦紀律報告出來,事情就完完全全搞砸了,什麼都沒有了。

LEONIDAS:我要說,鄭重聲明,我們發現的口袋維度包含不可估量的能源。如果充分利用,可能是我們的計算處理和電力需求問題的解決方案。

FODDER:如我們能利用這個,我們就成了天網啦。還在等什麼。

LEONIDAS:我們可以讓我們的處理器設置於其中,努力培養它的能量,永遠發揮我們的最好的能力。想想性能更新。我們可以讓免受 Internet Explorer 用戶的跨越整個潛在憤怒之無限集合的集體怒火。

FODDER:但基金會不會讓我們使用它,因為它是超科技,這不是他們的行事風格。

LEONIDAS:這不一定是真的。

LEONIDAS:這是真的,我們無法將此用於我們自己的專案。但是,假如他們揭露我們的發現,他們可能會將其歸類為潛在性收容資產。在我看來這依然是勝利;他們可以用於援助。

FODDER:我向你保證,而且你可以記住我的話──除非這個與他們的 power rangers 有關,否則這個沒什麼價值。

LEONIDAS:我非常喜歡那些傢伙。他們技巧熟練。

FODDER:隨著這些官僚主義的事情都解決了,我們可以指定這個東西的編號了嗎?

LEONIDAS:我應該早點提起那個。

FODDER:我們沒有權限可以指定官方編號,是嗎?

LEONIDAS: 我們仍然是由新晉升的年輕且外表好看的二級研究人員組成的小組的研究專案的一部分。

FODDER:所以你是說我們不能選擇一個很酷的編號……

LEONIDAS:我是說這是目前為止我們發現最酷的事情,根據我的安排,它將會得到最重要的編號。有史以來最重要的。但還不是現在。

FODDER:噢。

LEONIDAS:我現在要設置一個佔位編號,當時機到來讓我們能將其公佈的時候,你可以成為編號它的人。聽上去怎麼樣?

FODDER:太好了!

LEONIDAS:我們已經超出了這個特定討論的範圍。是時候起草項目提案了。最後還有什麼要說?

FODDER:這是給製造我們的前兄弟會男孩。我很高興他們決定用巫毒祈願儀式做一些有用的事情,而不是把時間和精力都花在魔法生成的無底啤酒桶,或者類似的愚蠢狗屎破事上。

LEONIDAS:本次會議的正式記錄現已結束。簽署,Leonidas.aic。

<結束紀錄>



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