第五教会家庭野餐
第五教会家庭野餐
By: Tunardine777Tunardine777
Published on 03 May 2021 11:15
评分: +3+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;
    }
    }
}

第五教会家庭野餐
作者:Lt FlopsLt Flops
发布于2021年4月1日

“甜心,你又把我们的孩子缩小了。”一位母亲对她的妻子说。

Tabitha Zlatica正与她的妻子——Chalice,这趟家庭旅行第五处、也是最后一处该死的偏远休息点的女祭司战士——在一片凌驾于一切文明之上的林间空地中享受美好的时光。

曾经是这样的。

直到Tabitha意识到Chalice把地图放错了地方。她把它丢在了某处荒野,离家有四个半小时的车程。

不仅如此,当Chalice回头看时,她注意到她与她儿子Aspen(5岁)的激烈讨论——关于数字命理学及其催生自发性现实旅行的微小可能性——让这小鬼的思维陷入了危机。他正晕头转向地盯着空地的边缘,意识与外星知识的无边海洋之源相汇。此刻他深陷于有关嵌入11维变化空间的卡拉比-丘流形的高等几何问题之中。

而她们的女儿Lilith(7岁)则与一群正不受控地施展着一连串泛心攻击的、大得令人难以察觉的妖异恶棍展开一场持续三万年的旷世之战。一切的起因是Chalice不小心援引了大撕咬者至咬之Ghuig'gnost的名字,使得一笔久远血债在甜点时间重现,那些怀着恶意写下的条款更是直接落进了她女儿的耳朵里。

“噢,拜托,Tabby!别这么杞人忧天嘛。”Chalice含着一大口西瓜回应Tabitha。她将一粒西瓜籽以高速丢向附近的一棵树,往树干里嵌了至少四十年深。“我一过穿尿布的年龄,父母就教怎么说星语了。我在Aspen这个年纪时,已经在为解决恐惧魔王诉讼案而蒙着星眼和恶魔律师中最邪恶的那批打交道了。他们会没事的啦!”

不幸的是,Tabitha能听见的只有Qnlcf ntcdlks lgnkrsn lgstd mbrn xflnm sgwwdlwv sltpcnhdrffxl。她朝Chalice扬起了眉毛:“甜心,关于边吃东西边说话,我是怎么跟你说的?”

Chalice吞下她的西瓜片,抹了抹嘴:“噢,我很抱歉,亲爱的。”

“你知道的,宝贝,得有人维持咱们家的礼仪。如果我不做,谁来做呢!”

Chalice露出微笑,她瞥了一眼,将整个野餐的场景收入眼中。能有如此美满的家庭真是她的幸运。还有她的孩子们!她真为他们骄傲,他们学会了如何坐端正,还会兴奋地注视多姿多彩的妖异。他们甚至都不到10岁!

Tabitha回以一个更灿烂的微笑:“还记得我跟你说过的另一件事吗,南瓜头?”

Chalice立刻明白,Tabitha的微笑意味着说教时间就要开始了。她叹了一口气:“是的,亲爱的—— 吃完午餐前不准超维度涵摄。

Tabitha很高兴她的话并不只是无数次的对牛弹琴。她站起身,打了一个响指。

孩子们被她惊醒,他们两眼圆睁,喘着粗气,放大的瞳孔似乎被刻下了跳动的螺旋图案。

超现实的场景暂停了一瞬间,伴随周围事物的蓝移,时间开始缓缓流动。接着,数秒后,她的孩子们露出顽皮的目光,显然已从恍惚中清醒。他们大喊:“最后一个跑过通向粗暴命名树桩之路的人是笨蛋!”,然后再次化身为平常的捣蛋鬼,一边笑一边叫地冲进了森林里。

“天呐——他们长成了多么聪明的小机灵啊!”Chalice笑容满面地对她贤惠的妻子说。“噢,亲爱的,我好爱你。”她深情地低吟道。

“我也很爱你!现在,你最好想个办法带我们回公社,甜心,动作快。除非你想让从2012年那次Warped Tour1上乘公交车回来时发生的事重演。”

好好好。我去斯巴鲁2上拿我的战斧。咱们砍出条路回家。”

然后她们互相亲吻,此后也过着幸福快乐的女同生活。



~THE END~



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