虚空舞者 中心页
虚空舞者 中心页
作者：Lt FlopsLt Flops
发布于 2021/01/21
虚空舞者 中心页
Author: TwilitTwilit
Published on 02 Feb 2021 01:55 
/* 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%;
        margin: 0;
        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;
    }
}
评分: +9+–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; }
▷ Show Code ◁
the-void.jpg

在我离开之后，你们的地球将自由地度过它痛苦的生存时期，就如我的一颗卫星。

这就是它将来的样子。



欢迎来到虚空。在这里，你得留下来，但这并不意味着是对你的惩罚。

虚空比多数人所了解的事物更可塑。或许它看上去像一块白色石板，但你能够推动它。通过练习，你可以把它塑造成心灵的眼睛（只要你一路都没有失去它）。重要的是，这个地方是你的，也只有你自己。或许其他人会来这里；他们或许会塑造他们希望的事物。但是这里没有怪物。这里没有灾难预言家。而且没有人会告诉你该怎样生活。

因为那个世界结束了，宝贝，不论你喜不喜欢它。在这个地方，他们不再能主宰你的生活，你所得到的，是你的记忆与想象。而且你能够创造真正奇妙的事物。

但前提是你相信着它。

——Fred

作者笔记：这是一个被遗忘之人的故事。现在，他们休息在这里，尽管他们的大脑将不再放松。

一位虚空中的孤独舞者悬晃在上面。她在无穷远的弦上扭转缠结。她暗示了一个游戏，其中的规则、目标与游戏者都是未知的。那里的某处有一名特工，既为秩序，也为混乱，指挥着游戏的进行。并且我们的主角别无选择。

必读

目前的故事

  1. 深渊回望（ASCII码在CRT屏幕上）
  2. 纰漏百出硬件（我为什么不玩暴力电子游戏）
  3. A Scene From a Meme(-ory)

未完待续…

进一步阅读（参考）

人员

这里的他们很受欢迎，尽管他们可能还不知道。

▷ Adamo Smalls
▷ Heather Mason

术语

其中我挑选的——是——来自你狱卒的工具包的。你或许不会喜欢它们，但它们很清楚自己的所作所为，并且这不好。

如果还有更多，不要介意，尽管告诉我，我会一直更新的，好吗？

  • narrativohazard：1叙事内容和传播方式的连锁危害效应因素，常常导致它们的相互破坏。现在，那听上去不是很方便吗？
  • pataphysical：2我们并不常用它，但你看到它的时候应该就明白了。这会让你立马生气，但当你想象中的怪物变为现实时，你会因你知道的更多而感到高兴。不要让我放纵你。更重要的是，不要放纵他们。
  • The Void：3“虚无”的基础，并且也是可见的基础。进入此地的实体可能会发现，它们的经历赋予了它的外表；它构成了它；它们的认知造就了现实；想象等同于力量。宇宙中的实体（物质世界、梦幻空间等）无法进入虚空。仅能通过难以置信的强大叙事扭曲进入虚空。尝试这些操作的实体，当然，面临着发生叙述性危害的高可能性，或者追溯到不存在他们的过去生活中。进入虚空的本质是单向的，除非你比我更了解。
  • Them：4旧世界的神。我们持续危险的创造者。以前被称为“作者。”那时是个谎言，并且现在也是个谎言。事实是，你能够杀死他们。但前提是你能够找到他们。不过，我确信他们不会战斗太久的。至少不会在他们可怜的领地内。



结束语

你睡着了。或者你浏览了全部。或者你先滚动到这里。

啊，好的。我早该料到的。

我想，认识读者总是有用的。





‡ 授权 / 引用

Footnotes
_故事中心fred中心希瑟·梅森研究员smalls
页面版本: 13, 最后编辑于: 07 Apr 2021 11:23
编辑 评分 (+9) 标签 讨论 (2) 历史记录 附件 打印 网站工具 + 选项
除非特别注明，本页内容采用以下授权方式： Creative Commons Attribution-ShareAlike 3.0 License