群鸟之伍中心页

是的，你的新同事是一只海鸥。这是个奇怪的世界。欢迎来到基金会。 - 研究员Calvin

群鸟之伍中心页
By: Sraosha
Published on 10 Oct 2018 13:35

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

/* 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;
        pointer-events: auto;
}
 
@media not all and (max-width: 767px) {
 
    #top-bar .mobile-top-bar {
        display: block;
        pointer-events: none;
    }
 
    #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-x: hidden;
        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;
    }
    }
}

▷ 显示代码 ◁

@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap);
 
/* Centered Header Sigma-9
 * [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%3Acentered-header-sigma-9/logo.svg);
}
 
/* ---- SITE HEADER ---- */
 div#header{
     background-image: none;
}
 #header::before{
     position: absolute;
     width: 100%;
     height: 100%;
     top: .45rem;
     left: 0;
     content: " ";
 
     background-image: var(--lgurl);
     background-position: center top;
     background-repeat: no-repeat;
     background-size: auto 8rem;
 
     opacity: .35;
     pointer-events: none;
     z-index: -1;
}
 #header h1,
 #header h2{
     float: none;
     margin-left: 0;
 
     text-align: center;
}
 
/* Move the Subtitle Down a Smidge */
 #header h2{
     margin-top: .45rem;
}
 
/* Hide the Existing Text */
 #header h1 span,
 #header h2 span{
     display: none;
 
     font-size: 0;
}
 
/* Style the New Text */
 #header h1 a::before,
 #header h2::before{
     font-family: "Montserrat", "Arial", sans-serif;
     text-shadow: none;
}
 #header h1 a::before{
     position: relative;
     bottom: .15em;
     color: var(--titleColor);
}
 #header h2::before{
     position: relative;
     bottom: .3em;
     color: var(--subtitleColor);
}
 
/* Set the New Text's Content From Variable */
 #header h1 a::before{
     content: var(--header-title, "SCP基金会");
 
     font-size: 115%;
     font-weight: bold;
}
 #header h2::before{
     content: var(--header-subtitle, "控制 - 收容 - 保护");
 
     font-size: 130%;
     font-weight: 600;
}
 
/* ---- LOGIN ---- */
 #login-status{
     top: .5rem;
     left: 0;
     right: initial;
 
     z-index: 1;
}
 
/* ---- SEARCH ---- */
 #search-top-box{
     top: .5rem;
     right: 0;
}
 #search-top-box-input{
     border-radius: 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: unset;
}
 
/* ---- TOP BAR ---- */
 #top-bar{
     display: flex;
     justify-content: center;
     right: 0;
}
 #top-bar ul li ul{
     box-shadow: none;
 
     overflow: hidden;
}
 
/* ---- PAGE TITLE ---- */
 .meta-title,
 #page-title{
     text-align: center;
}
 
/* ---- BREADCRUMBS ---- */
 .pseudocrumbs,
 #breadcrumbs{
     text-align: center;
}
 
/* ---- MOBILE DISPLAY ---- */
 @media (max-width: 767px){
     #login-status{
         left: 5.15rem;
 
         z-index: 20;
    }
     #search-top-box{
         width: unset;
    }
     .mobile-top-bar{
         position: relative;
         display: flex;
         justify-content: center;
         left: 0;
    }
}

群鸟之伍中心页
由 Lt Flops 与 notgull 创作 并由 Sraosha 翻译
翻译日期：10 Oct 2018 13:35

 

群鸟之伍（系列中心页）
2018末日竞赛参赛作品的系列中心页。
发布日期：2018年5月19日

---

bird群鸟之伍中心页▸ 该作者的更多作品 ◂（原文链接）bird▸ 该作者的更多作品 ◂

---

其他语言

常见问题

群鸟之伍中心页

故事中心 » 故事系列 » 群鸟之伍中心页

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

—

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

---

—Modulum
解密SCP首席负责人

—

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

---

Eta-4“滚开透特”

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

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

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

Medila护佑我们。

---

— Frederick Hoygull博士
鸟类部门主管

—

---

第一季

群 鸟

主要故事线

---

需 读

SCP-3095（鸟即真理）

by notgull

第一部分：末日

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

幕 间

6.

GoI格式：SPC-507（更大的船）

by Lt Flops

第二部分：迁移

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

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

---

幕间

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

---

GoI格式：命运之雉		by Uncle Nicolini
SCP-4688（心智控制头盔）		by Mew-ltiverse and notgull
故事：Eric的日记		by Mew-ltiverse and notgull
故事：既定的目标		by KaraKatt
故事： Bill Reviews: The Bird Is The Word		by YellowISlol
图书馆： From the Journals of Agent Hopper: Home Bittersweet Home (or Free as a Bird)		by Nykacolaquantum

---

第二季

“群鸟2：震惊和恐怖”

群鸟之伍 选集

---

故事：The Scent of a Toaster		by notgull
故事：My Empire of Birds		by notgull
SCP-4248（字母表与俄梅嘎）		by notgull
故事：恢复自平行宇宙的文档		by notgull
前篇：SCP-4795（覆羽喷（嗯）友）		by Mew-ltiverse and Lt Flops
故事：三尺之下Ⅰ		by notgull
故事：三尺之下Ⅱ		by notgull
故事：三尺之下Ⅲ		by notgull

---

第三季

“天空可会”

大灾变一万年后

---

故事：Chasing Suns		by notgull
[新作] 故事：Down Through		by notgull
[新作] 故事：Forgotten Shrine		by notgull

—

---

群鸟之伍艺作页

由出色的KaraKatt所创作！

---

EE-3570，由KaraKatt作

> 点此一看究竟！ <

—

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

---

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

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

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

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

—

鸟类部门标志

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

_{中心页由 Lt Flops 与 notgull 制作。
精选艺作由 Mendelssohn、KaraKatt 与 EstrellaYoshte绘制。
群鸟之伍最佳团队}

More by notgull

SCPs

Tales

Other

See my Author Page for more information. If you like reading my stuff, consider checking out my YouTube Channel for SCP-inspired animations, among other things.

More by Lt Flops

Other Works by Lt Flops!

---

SCP Articles
Title	Rating

Tales
Title	Rating

GOI Formats
Title	Rating

Hubs
Title	Rating

CSS Themes
Title	Rating

Collaborations

---

Co-Authored SCP Articles

SCP-3309 - Where We Go When We Fade, Fade Away
Co-Author	Rating
PhamtomGuy	+101

SCP-3739 - Mind-Milk™ by Moosphere, Inc.
Co-Author	Rating
KindlyTurtleClem	+11

SCP-4428 Michaels 博士 - Dr. Michaels is not in danger.
Co-Author	Rating
Henzoid	+29

SCP-4475 - So Long, and Thanks for All the Milk
Co-Author	Rating
KindlyTurtleClem	+2

SCP-4519 - Carl Sagan, Godhead
Co-Author	Rating
NatVoltaic	+5

SCP-4795 - Feathered F(r)iends
Co-Author	Rating
Mew-ltiverse	+1

Co-Authored Tales

飞鸟录，第一部
Co-Author	Rating
Team Bird	+3

飞鸟录，第二部
Co-Author	Rating
Team Bird	+2

揭开世界帷幕的一角
Co-Author	Rating
Nykacolaquantum & Others	+19

Co-Authored GOI Formats

圣者杰胡提
Co-Author	Rating
Ayers	+3

Co-Authored Hubs

群鸟之伍中心页
Co-Author	Rating
notgull	+13

非先知团体 中心页
Co-Author	Rating
Uncle Nicolini	+5

我，中心页（2021愚人节）
Co-Author	Rating
Elenee FishTruck & Others	+24

SPC 中心页
Co-Author	Rating
PeppersGhost, MrWrong, & LORDXVNV	+16

Other Co-Authored Pages

基金会部门半完整列表
Co-Author	Rating
TopDownUnder & Dr Moned	+43

Wanderers' Library Entries

---

Page	Page Info
Lampyra, the Watcher	Wanderers' Library Author Page
Cave Story	2020 Wanderers' Depths Contest, First Place
Interplanetary Colonization	2021 Scavenger Hunt Contest
I'll Take You to the Parashops	2021 Scavenger Hunt Contest
Talk of the Town	Last Light Canon
The Foolish One	2021 WanderCon

---

▸ Lt Flops的作者页 ◂

‡ 授权 / 引用

请按如下方式引用此页：

“群鸟之伍中心页”，作者 Lt Flops、notgull，来自 SCP 维基。原文链接：https://www.scpwiki.com/bird。译者 Sraosha，来自 SCP-CN 维基。译文链接：http://scp-wiki-cn.wikidot.com/bird。遵循 CC-BY-SA 协议。

更多详情请参阅授权指南。
授权信息

文件名：avdiv.png、avdiv_white.png、avian-division-logo-transparent.png
图像作者：EstrellaYoshte
授权协议：Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
来源链接：见上

文件名：teambird2.jpg
图像作者：Mendelssohn
授权协议：Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
来源链接：见上

文件名：Eta4.png
图像名：MTF Eta-4 ("Begone Thoth")
图像作者：Lt Flops
授权协议：Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
来源链接：机动特遣队 - SCP基金会

文件名：1H5YkQA.png
图像作者：CelesteKara does not match any existing user name
授权协议：Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
来源链接：群鸟之伍艺作页 - SCP基金会

更多维基文档信息，请见版权信息总览。

Footnotes

1. 译注：透特（Thoth），即埃及神话中的知识与月亮之神，常以鸟貌出现。