群鸟之伍中心页
群鸟之伍中心页
Author: SraoshaSraosha
Published on 10 Oct 2018 13:35 
/* 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;
    }
 
     #top-bar .close-menu {
        margin-left: 19.75em;
        opacity: 0;
    }
    #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;
    }
}
 
@supports selector(:focus-within) {
 
@media (min-width: 768px) {
    #top-bar .open-menu a {
        pointer-events: none;
    }
    #side-bar:not(:target) .close-menu {
        display: block;
        pointer-events: none;
        user-select: none;
        z-index: -1;
    }
 
    /* 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;
    }
}
 
}
评分: +10+–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 ◁
 

teambird2.jpg

此横幅蒙谢于令人惊艳的MendelssohnMendelssohn！点击此处查看更多他的艺术创作！

—

因为不知何故，埃及诸神、SPC宇宙、神秘的灵魂真空装置、拙劣的双关语以及海鸥科学家都可以在同一故事情节中快乐地共存。难怪他们称自己为“群鸟之伍”，情节的头脑风暴肯定在大家都兴致高昂之时进行。

—ModulumModulum
解密SCP首席负责人

—

BE级“迁徙”意识终结情景

Eta4.png

Eta-4 "Begone Thoth"

你知道鸟类有自己的众神吗？好吧，“众神”是我们不应该使用的术语。我们应该使用“顶点型多功能实体”，但周围没有人在强迫用它，所以为什么要这么麻烦呢？

不管怎样，有一天，我们做了一件事，把那些众神中的一个给惹毛了。他非常生气，从他那高高在上的宝座上——谁都不知道那在哪里——下来，试图给予人类鸟类的思想，然后从而将他们从地球上抹去。他成功了，于是现在我想我们都完蛋了。

我们是谁？我们是MTF-Eta-4，也被称为“滚开透特（Begone Thoth）”1。我向Medila发誓，我要追捕和啄食决定了这名字的家伙。我跑题了。那维护旧日基金会的使命即是我们的工作。七十五只鸟对抗七十亿人类，一个神，还有只有Medila才知道到底有多少的异常（其中一些来自于透特本人）。我知道，希望渺茫。但我们有头脑，有决心，还有很多鸟类的力量。如果我们能成功，我们就能阻止这次天启大灾难。

Medila护佑我们。

— Frederick Hoygull博士，鸟类部门主管

—

第一季

群 鸟

主要故事情节

需 读

SCP-3095（鸟即真理） by notgullnotgull

第一部分：末日

1. SCP-3662（末日之钟） by AyersAyers
2. SCP-3296（漂泊游子） by notgullnotgull
3. 故事：加入鸟群 by notgullnotgull
推荐：SCP-2785 by notgullnotgull
4. 故事：自动化的故事：大鸟灾 by notgullnotgull
5. SCP-3362（强制自我植入） by notgullnotgull

幕 间

6. GoI格式：SPC-507（更大的船） by Lt FlopsLt Flops

第二部分：迁移

7. EE-3570（阴暗的最后通牒） by Lt FlopsLt Flops
8. GoI格式：圣者杰胡提 by Lt FlopsLt Flops, AyersAyers
9. SCP-3632（尼比鸟鲁） by Quantum PhysicianQuantum Physician
10. 故事：飞鸟录，第一部 by 群鸟之伍
11. 故事：UMBRAL MIGRATORY SEQUENCE by Lt FlopsLt Flops
12. 故事：飞鸟录，第二部 by 群鸟之伍

群鸟之伍=整个超见鬼团队

幕间

来自群鸟之伍多元宇宙的故事

GoI格式：命运之雉 by Uncle NicoliniUncle Nicolini
SCP-4688 (Manipulative Bike Helmets) by Mew-ltiverseMew-ltiverse and notgullnotgull
故事：Eric's Journal by Mew-ltiverseMew-ltiverse and notgullnotgull
故事：既定的目标 by KaraKattKaraKatt
[新作] 故事： Bill Reviews: The Bird Is The Word by YellowISlolYellowISlol
[新作] 图书馆： From the Journals of Agent Hopper: Home Bittersweet Home (or Free as a Bird) by NykacolaquantumNykacolaquantum

第二季

“群鸟2：震惊和恐怖”

群鸟之伍 选集

故事：The Scent of a Toaster by notgullnotgull
故事：My Empire of Birds by notgullnotgull
SCP-4248（字母表与俄梅嘎） by notgullnotgull
故事：恢复自平行宇宙的文档 by notgullnotgull
前篇：SCP-4795 (Feathered F(r)iends) by Mew-ltiverseMew-ltiverse and Lt FlopsLt Flops
故事：Three Feet Under I by notgullnotgull
故事：Three Feet Under II by notgullnotgull
故事：Three Feet Under III by notgullnotgull

—

群鸟之伍艺作页

由出色的KaraKattKaraKatt！

1H5YkQA.png

EE-3570，由KaraKattKaraKatt作

> 点此一看究竟！ <

—

如果我不能/不想读所有这些页面呢？

群鸟之伍官方划出顺序如下：

EE-3570 ▷ 飞鸟录，第一部 ▷ UMBRAL_MIGRATORY_SEQUENCE ▷ 飞鸟录，第二部

EE-3570将会为你总结这整个情景，而飞鸟录+Umbral Migratory是整个行动所在之处。如果你想，或者你真的很缺少时间，你也可以跳过SCP-3095，因为它可以概括为“那些给基金会工作的鸟类科学家”。

然而，如果你有时间，我们强烈建议你阅读剩下的材料。它将给这个宇宙更多的背景，而且它们真的都是超棒的东西！

—

鸟类部门标志

avdiv.png

由令人惊叹的EstrellaYoshteEstrellaYoshte设计的鸟类部门标志！
> 艺作页 <





中心页由 Lt FlopsLt Flops 与 notgullnotgull 制作。
精选艺作由 MendelssohnMendelssohn、KaraKattKaraKatt 与 EstrellaYoshteEstrellaYoshte绘制。
群鸟之伍最佳团队

Footnotes
2018末日竞赛_故事中心中心合著打鲨鱼中心群鸟之伍
页面版本: 36, 最后编辑于: 23 Aug 2021 11:07
编辑 评分 (+10) 标签 讨论 (12) 历史记录 附件 打印 网站工具 + 选项
除非特别注明，本页内容采用以下授权方式： Creative Commons Attribution-ShareAlike 3.0 License