Хаб Птичьей Команды
Хаб Птичьей Команды
Author: Lt FlopsLt Flops
Published on 18 Aug 2020 22:18
/* 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;
    }
}
 
}
рейтинг: +2+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; }
рейтинг: +2+x

teambird2.jpg

Баннер создан MendelssohnMendelssohn!
> Арт-страница <


Каким-то неизвестным образом египетские боги, вселенная SCP, загадочные высасыватели душ, плоский юмор и птицы-ученые могут счастливо сосуществовать в одном сюжете. Неудивительно, что они назвали себя Птичьей командой, ведь мозговой штурм сюжета должен был быть проведен, пока все еще были под кайфом.



BE-Класс “Миграция” Сценарий Конца Адекватности


Eta4.png

Эта-4 “Прочь отсюда, Тот”

Вы знали, что у птиц есть свои боги? Ну что же, "боги" это термин, который, как предполагается, нам не следует использовать. Вместо этого нам лучше говорить "Плюрипотентная Сущность Высшего уровня", но никто ведь не собирается настаивать, так что какая разница?

Так или иначе, однажды, мы сделали что-то, что взбесило одного из богов. Он так сильно разозлился, что спустился со своего высокого-и-могучего трона куда-то-там и попытался стереть человечество с лица Земли дав людям разум птиц. Это сработало и теперь, я думаю, мы в дерьме.

Кто мы такие? Мы являемся Мобильной Оперативной Группой Эта-4, также известной как "Прочь отсюда, Тот". Клянусь Медилой, я выслежу и заклюю того, кто выбрал это название… Впрочем, я ушел от темы. Наша задача - продолжать дело Старого Фонда. Семьдесят пять птиц против семи миллиардов людей, бога, и Медила-знает сколько аномалий (некоторые из них относятся к самому Тоту). Шансы не велики, я знаю. Но у нас есть мозги, решимость и множество всяких птичьих сил. Если мы все сделаем правильно, то остановим этот апокалипсис.

Да храни нас Медила


—Д-р Фредерик Эйчайка, кандидат наук
Начальник Птичьего Отдела



ПЕРВЫЙ СЕЗОН

“ПТИЦЕПОКАЛИПСИС”

Основная сюжетная линия


ТРЕБУЕТ ПРОЧТЕНИЯ

SCP-3095 (Слово - Птицы) за авторством notgullnotgull1

ЧАСТЬ ПЕРВАЯ: Судный день

1. SCP-3662 (The Doomsday Clock) за авторством AyersAyers
2. SCP-3296 (The Drifter) за авторством notgullnotgull
3. Рассказ: Join the Flock за авторством notgullnotgull
Рекомендуется: SCP-2785 за авторством notgullnotgull
4. Рассказ: Tales of the Automaton: The Big Birdocalypse за авторством notgullnotgull
5. SCP-3362 (A Forced Self-Insert) за авторством notgullnotgull

ИНТЕРЛЮДИЯ

6. GOI Format: SPC-507 (The Bigger Boat) за авторством Lt FlopsLt Flops

ЧАСТЬ ВТОРАЯ: Миграция

7. EE-3570 (Umbral Ultimatum) за авторством Lt FlopsLt Flops
8. GOI Format: The Sacred Djehuti за авторством Lt FlopsLt Flops и AyersAyers
9. SCP-3632 (Nibirdu) за авторством Quantum PhysicianQuantum Physician
10. Рассказ: Avian Anthology I за авторством Team Bird
11. Рассказ: UMBRAL MIGRATORY SEQUENCE за авторством Lt FlopsLt Flops
12. Рассказ: Avian Anthology II за авторством Team Bird

Птичья Команда = Вся, мать его, команда


АНТРАКТ

Истории из Птичьей Мультивселенной


GOI Format: The Corncrake Of Destiny за авторством Uncle NicoliniUncle Nicolini
SCP-4688 (Manipulative Bike Helmets) за авторством Mew-ltiverseMew-ltiverse и notgullnotgull
Рассказ: Дневник Эрика за авторством Mew-ltiverseMew-ltiverse и notgullnotgull
Рассказ: A Given Purpose за авторством CelesteKaraCelesteKara

СЕЗОН ВТОРОЙ

“ПТИЦЕПОКАЛИПСИС 2: ШОК И ТЕРРОР”

Антология Птичьей Команды


Рассказ: The Scent of a Toaster за авторством notgullnotgull
Рассказ: My Empire of Birds за авторством notgullnotgull
SCP-4248 (Alphabet and Omega) за авторством notgullnotgull
Рассказ: Document recovered from a Parallel Universe за авторством notgullnotgull
Приквел: SCP-4795 (Feathered F(r)iends) за авторством Mew-ltiverseMew-ltiverse и Lt FlopsLt Flops
Рассказ: Three Feet Under I за авторством notgullnotgull
Рассказ: Three Feet Under II за авторством notgullnotgull
Рассказ: Three Feet Under III за авторством notgullnotgull


АРТ-СТРАНИЦА ПТИЧЬЕЙ КОМАНДЫ

За авторством CelesteKaraCelesteKara!


1H5YkQA.png

EE-3570 by CelesteKaraCelesteKara

Что если я не могу/не хочу читать все эти страницы?


Официальным Приказом Птичьей Команды установлен следующий краткий порядок прочтения

SCP-3095EE-3570Птичья Антология IUMBRAL MIGRATORY SEQUENCEПтичья Антология II

EE-3570 вкратце описывает сам сценарий, а Птичьи Антологии + Теневая Миграция - это те части, где происходит все действо. Если хотите, или если у вас серьезно нет времени, вы можете пропустить SCP-3095, который вкратце можно описать как "птицы, которые ученые, которые работают на Фонд".

Однако, если время у вас все же есть, то настоятельно рекомендуем прочесть остальной материал. Это даст вам больше контекста происходящего, а еще это действительно того стоит!



ЭМБЛЕМА ПТИЧЬЕЙ КОМАНДЫ


avdiv.png

Эмблема Птичьего Отдела за авторством EstrellaYoshteEstrellaYoshte!
> Арт-страницы <





Хаб создан Lt FlopsLt Flops и notgullnotgull.
Избранные изображения за авторством MendelssohnMendelssohn, CelesteKaraCelesteKara, и EstrellaYoshteEstrellaYoshte.
ПТИЧЬЯ КОМАНДА - ЛУЧШАЯ КОМАНДА

Пока не указано иное, содержимое этой страницы распространяется по лицензии Creative Commons Attribution-ShareAlike 3.0 License