Team Bird Hub

Yes, your new colleague is a seagull. The world is a weird place. Welcome to the Foundation. —Researcher Calvin

Team Bird Hub
By: Lt FlopsLt Flops
Published on 19 May 2018 22:38
rating: +224+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.


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(';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: */
#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;
    @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;

Team Bird Hub
By: Lt FlopsLt Flops
& notgullnotgull
Published on 19 May 2018 22:38
rating: +224+x

Team Bird Hub

Tales Hub » Series Archive » Team Bird Hub


Banner courtesy of the amazing MendelssohnMendelssohn!
> Artwork Page <

Because somehow, Egyptian gods, the SPC universe, mysterious soul-vacuum devices, bad puns, and seagull scientists can all happily coexist in the same storyline. No wonder they called themselves Team Bird, the plot brainstorming must have been done while everyone was hella high.

Head honcho of SCPDeclassified

BE-Class “Migration” End-of-Consciousness Scenario

Eta-4 “Begone Thoth”

Did you know that birds have their own gods? Well, “gods” is a term we're not meant to use. We're supposed to use “Apex-tier Pluripotent Entity”, but nobody around is going to enforce that, so why bother?

Anyway, one day, we did something to piss off one of the gods. He got so angry that he came down from his high-and-mighty throne in who-knows-where and tried to wipe the human population off the face of the Earth by giving them bird minds. It worked, and now I think we're all screwed.

Who are we? We're Mobile Task Force Eta-4, otherwise known as “Begone Thoth”. I swear to Medila, I'm going to track down and peck whoever decided on that name… But, I digress. It's our job to uphold the mission of the Old Foundation. Seventy-five birds against seven billion humans, a god, and Medila-knows how many anomalies (some of them from Thoth himself). The odds are bleak, I know. But we've got brains, determination, and a whole lot of bird-power. If we pull this off right, we can stop this apocalypse.

Medila help us all.

—Dr. Frederick Hoygull, PhD
Avian Division Head



The Main Storyline


SCP-3095: Bird is the Word by notgullnotgull

PART ONE: Doomsday

1. SCP-3662: The Doomsday Clock by AyersAyers
2. SCP-3296: The Drifter by notgullnotgull
3. Tale: Join the Flock by notgullnotgull
Recommended: SCP-2785: Self-Replicating Automaton by notgullnotgull
4. Tale: Tales of the Automaton: The Big Birdocalypse by notgullnotgull
5. SCP-3362: A Forced Self-Insert by notgullnotgull


PART TWO: Migration

Team Bird = The whole gosh dang team



10,000 Years After the Apocalypse

Tale: Chasing Suns by notgullnotgull
[LATEST] Tale: Down Through by notgullnotgull
[LATEST] Tale: Forgotten Shrine by notgullnotgull


By the magnificent CelesteKara does not match any existing user name!


EE-3570 by CelesteKara does not match any existing user name

> Check it out! <

What if I can't/don't want to read all these pages?

The official Team Bird Machete Order is as follows:

SCP-3095EE-3570Avian Anthology IUMBRAL MIGRATORY SEQUENCEAvian Anthology II

EE-3570 will summarize the scenario for you, and the Avian Anthologies + Umbral Migratory are where all the action is. If you want, or if you're really starved for time, you may also skip SCP-3095, as it can be summarized as “birds that are scientists who work for the Foundation”.

If you do have the time, however, we heavily recommend reading the rest of the material. It will give more context to this universe, and it's all really good stuff!



Avian Division logo design by the awesome EstrellaYoshteEstrellaYoshte!
> Artwork Page <

Hub created by Lt FlopsLt Flops and notgullnotgull.
Select artwork created by MendelssohnMendelssohn, CelesteKara does not match any existing user name, and EstrellaYoshteEstrellaYoshte.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License