팀 버드 허브
/* 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;
    }
}
 
}
팀 버드 허브
Author: TocoT0ucan_98TocoT0ucan_98
Published on 29 Mar 2021 12:54
/* 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;
    }
}
 
}
평가: +4+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; }
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
 
/* Flopstyle CSS Theme
 * [2020 Wikidot Theme]
 * Created by Lt Flops
 * Select CSS Styles Are Credited Where Necessary
 * -- (CC BY-SA 3.0) --
**/
 
/* ---- SITE HEADER ---- */
 #header h1 a{
     font-family: "Montserrat", "Arial", "Noto Sans KR", sans-serif;
}
 
/* ---- FORMATTING | [SPECIAL] ---- */
 @font-face {
     font-family: "D2Coding";
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/D2Coding.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 }
 :root{
     --mono-font: "D2Coding", "Fira Code", "Nanum Gothic Coding", monospace;
}
 
/* ---- CUSTOM DIV BLOCKS ---- */
 .journal{ /* ---- Journal Block (Adapted From SCP-4003) ---- */
     font-family: "Architects Daughter", "Nanum Pen Script", cursive;
}
팀 버드 허브
저자: Lt FlopsLt Flopsnotgullnotgull
2018년 5월 20일에 게시함
평가: +4+x

teambird2.jpg

놀라운 MendelssohnMendelssohn이 제공한 배너!
> 아트워크 페이지 <

어쩌다 보니, 이집트 신들, SPC 세계관, 미스터리한 영혼 흡입 장치, 형편없는 말장난, 그리고 갈매기 과학자들이 같은 스토리라인 내에서 모두 행복하게 공존할 수 있게 되었다. 그들이 스스로를 팀 버드라고 칭한 것도 놀랄 것이 못 되고, 줄거리 브레인스토밍은 모두들 겁나 뿅가있는 동안 진행되었음이 분명해 보인다.


ModulumModulum
SCPDeclassified의 최고 책임자

BE급 “이주” 의식절멸 시나리오


Eta4.png
에타-4 “썩 꺼져라 토트Begone Thoth

새들에게도 신이 있다는 것을 알고 있었나요? 뭐, “신”이라는 표현이 우리가 쓸 법한 용어는 아니긴 하죠. 우리는 “최상급 전능 독립체”라는 용어를 쓰도록 되어 있으니까요. 그렇지만 그러라고 강요하는 사람도 아무도 없는데, 신경 쓸 거 뭐 있겠어요?

어쨌거나, 어느 날, 그 신들 중 하나를 열받게 한 뭔가를 우리가 저질렀더랬죠. 그 신은 너무나 화가 난 나머지 어딘가에 있는 삐까번쩍한 옥좌에서 내려와 인류를 조류의 정신수준으로 만들어서 지구상에서 없애 버리려고 했죠. 그게 먹혀들었고, 이제 우리 다 좆된 것 같군요.

우리가 누굽니까? 기동특무부대 에타-4죠. 다른 이름으로는 “썩 꺼져라 토트”라고도 알려져 있고요. 메딜라Medila께 맹세컨대, 누가 그딴 이름을 골랐는지 내가 알아내서 확 쪼아 버릴 겁니다… 이야기가 옆길로 새버렸군요. 옛 재단의 임무를 유지하는 게 우리의 일입니다. 새 일흔다섯 마리 대 인간 70억 명, 신 하나, 그리고 얼마나 되는지는 메딜라께서만 아실 수많은 변칙존재들 (그 중 일부는 토트 그 자체로부터 나온 거죠). 알다시피, 전망은 암울합니다. 그렇지만 우리에게는 두뇌, 투지, 그리고 많은 조류력이 있습니다. 이 일을 잘만 해낸다면, 멸망을 멈출 수가 있습니다.

메딜라여 우리를 도우소서.


—프레드릭 호이걸 박사Dr. Frederick Hoygull, PhD
조류학과장


시즌 1

“새계적 대유행THE BIRDEMIC

주요 스토리라인


필독작

SCP-3095 (Bird is the Word) by notgullnotgull

1부: 최후의 날

1. SCP-3662 (The Doomsday Clock) by AyersAyers
2. SCP-3296 (The Drifter) by notgullnotgull
3. 이야기: Join the Flock by notgullnotgull
추천작: SCP-2785 by notgullnotgull
4. 이야기: Tales of the Automaton: The Big Birdocalypse by notgullnotgull
5. SCP-3362 (A Forced Self-Insert) by notgullnotgull

막간

6. 요주의 단체 서식: SPC-507 (The Bigger Boat) by Lt FlopsLt Flops

2부: 이주

7. EE-3570 (Umbral Ultimatum) by Lt FlopsLt Flops
8. 요주의 단체 서식: The Sacred Djehuti by Lt FlopsLt Flops and AyersAyers
9. SCP-3632 (Nibirdu) by Quantum PhysicianQuantum Physician
10. 이야기: Avian Anthology I by Team Bird
11. 이야기: UMBRAL MIGRATORY SEQUENCE by Lt FlopsLt Flops
12. 이야기: Avian Anthology II by Team Bird

팀 버드 = 완전 존나 쩌는 팀


인터미션

팀 버드 멀티버스의 이야기들



시즌 2

“새계적 대유행 2: 충격과 공포”

팀 버드 앤솔로지


이야기: The Scent of a Toaster by notgullnotgull
이야기: My Empire of Birds by notgullnotgull
SCP-4248 (Alphabet and Omega) by notgullnotgull
이야기: Document recovered from a Parallel Universe 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


팀 버드 아트 페이지

위대한 CelesteKaraCelesteKara 작!


1H5YkQA.png

EE-3570, CelesteKaraCelesteKara 작.

> 보러 가기! <

이 페이지들을 다 읽을 수는 없거나, 다 읽기는 싫다면 어떻게 해야 하나요?


팀 버드의 공식 마체테 오더1는 다음과 같습니다.

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

EE-3570가 줄거리를 요약해 줄 것이고, Avian Anthology I, II와 Umbral Migratory에 전개되는 내용이 다 들어 있습니다. 원한다면, 또는 진짜로 시간이 없다면, SCP-3095도 건너뛰어도 됩니다. “과학자 조류들이 재단을 위해 일한다”는 정도로 요약될 수 있는 거니까요.

그렇지만 시간이 있다면, 나머지 작품도 읽어보는 쪽을 매우 권장합니다. 이 세계관에 대해 더 많은 맥락을 줄 것이고, 모두 정말로 좋은 글이니까요!

조류학과 문장

avdiv.png

멋진 EstrellaYoshteEstrellaYoshte의 조류학과 로고 디자인!
> 아트워크 페이지 <





Lt FlopsLt Flopsnotgullnotgull이 만든 허브.
MendelssohnMendelssohn, CelesteKaraCelesteKara, EstrellaYoshteEstrellaYoshte이 그린 엄선된 아트워크.
최고의 팀 팀 버드




🈲: SCP 재단의 모든 컨텐츠는 15세 미만의 어린이 혹은 청소년이 시청하기에 부적절합니다.
따로 명시하지 않는 한 이 사이트의 모든 콘텐츠는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0 라이선스를 따릅니다.