팀 버드 허브

네, 여러분의 새로운 동료는 갈매기입니다. 세상은 요지경이죠. 재단에 오신 걸 환영합니다. —연구원 캘빈_{Researcher Calvin}

팀 버드 허브
By: TocoT0ucan_98
Published on 29 Mar 2021 12:54

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

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

코드 보기

▷ Show Code ◁

@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap);
 
/* Centered Header Sigma
 * [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:pride-highlighter/lgbtqp_logo.svg);
}
 
/* ---- SITE BANNER ---- */
 #header,
 div#header{
     background-image: none;
}
 
 #header::before{
     position: absolute;
     width: 100%;
     height: 100%;
     content: "";
 
     background-image: var(--lgurl);
     background-position: center top;
     background-repeat: no-repeat;
     background-size: auto 9em;
     opacity: .33;
}
 
 #header h1,
 #header h2{
     float: none;
     margin-left: 0;
 
     text-align: center;
}
 
 #header h1 span,
 #header h2 span{
   /* Hide the Existing Text */
     display: none;
}
 
 #header h1 a::before,
 #header h2::before{
   /* Style the New Text */
     font-family: "Montserrat", "Arial", sans-serif;
     text-shadow: none;
}
 
 #header h1 a::before{
     position: relative;
     bottom: .15em;
 
     color: var(--titleColor);
 
     font-size: 115%;
     font-weight: 700;
}
 
 #header h2::before{
     position: relative;
     top: .1em;
 
     color: var(--subtitleColor);
 
     font-size: 130%;
     font-weight: 600;
}
 
 #header h1 a::before{
   /* Set the New Text's Content From Variable */
     content: var(--header-title, "SCP FOUNDATION");
}
 
 #header h2::before{
     content: var(--header-subtitle, "SECURE - CONTAIN - PROTECT");
}
 
/* ---- SEARCH ---- */
 #search-top-box{
     top: 1em;
     right: 0;
}
 
 #search-top-box-form input.button{
     margin-right: 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: 100%;
}
 
/* ---- TOP BAR ---- */
 #top-bar{
     right: 0;
     display: flex;
     justify-content: center;
}
 
 #top-bar ul li ul{
     border-bottom: 1px solid hsl(0, 0%, 40%);
     box-shadow: none;
}
 
/* ---- LOGIN ---- */
 #login-status{
     top: 1.1em;
     right: initial;
 
     color: hsl(0, 0%, 87%);
}
 
 #account-topbutton{
     border-color: hsl(0, 0%, 87%);
 
     font-size: 100%;
}
 
/* ---- PAGE TITLE ---- */
 .meta-title,
 #page-title{
     text-align: center;
}
 
/* ---- BREADCRUMBS ---- */
 .pseudocrumbs,
 #breadcrumbs{
     text-align: center;
}
 
/* ---- MOBILE DISPLAY ---- */
 @media (max-width: 767px){
     #search-top-box{
          top: 1.85em;
          width: unset;
    }
 
     .mobile-top-bar{
          position: relative;
          left: 0;
          display: flex;
          justify-content: center;
    }
 
     #login-status{
          top: 0;
          right: 0;
    }
 
     #header .printuser{
          font-size: 0;
    }
 
     #header .printuser img.small{
          margin: 0;
 
          transform: translate(6px, 4px);
    }
 
     #my-account{
          display: none;
    }
 
     #account-topbutton{
          margin-left: 2px;
    }
}

팀 버드 허브
저자: Lt Flops & notgull
2018년 5월 20일에 게시함

 

팀 버드 허브 (연작 허브)
2018년 최후의 날 경연을 위해 만든 연작.
2018년 5월 19일에 게시함

---

[{$authorPage} ▸ 작가 더 알아보기 ◂]

---

번역:

F.A.Q.

정보

---

팀 버드 허브(Team Bird Hub)
저자: Lt Flops ＆ notgull
원작: http://scp-wiki.wikidot.com/bird
역자: TocoT0ucan_98

---

팀 버드 허브

이야기 허브 » 연작 허브 » 팀 버드 허브

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

—

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

---

—Modulum
SCPDeclassified의 최고 책임자

—

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

---

에타-4 “썩 꺼져라 토트_{Begone Thoth}”

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

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

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

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

---

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

—

---

시즌 1

“새계적 대유행_{THE BIRDEMIC}”

주요 스토리라인

---

필독작

SCP-3095 (Bird is the Word)

by notgull

1부: 최후의 날

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

막간

6.

요주의 단체 서식: SPC-507: EAGER NETHERENDER

by Lt Flops

2부: 이주

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

팀 버드 = 완전 존나 쩌는 팀

---

인터미션

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

---

이야기: The Scent of a Toaster		by notgull
이야기: My Empire of Birds		by notgull
요주의 단체 서식: The Corncrake Of Destiny		by Uncle Nicolini
SCP-4688 (Manipulative Bike Helmets)		by Mew-ltiverse and notgull
이야기: Eric's Journal		by Mew-ltiverse and notgull
이야기: A Given Purpose		by CelesteKara does not match any existing user name
이야기: 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 does not match any existing user name

---

시즌 2

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

팀 버드 앤솔로지

---

SCP-4248 (Alphabet and Omega)		by notgull
이야기: Document recovered from a Parallel Universe		by notgull
프리퀄: SCP-4795 (Feathered F(r)iends)		by Mew-ltiverse and Lt Flops
이야기: Three Feet Under I		by notgull
이야기: Three Feet Under II		by notgull
이야기: Three Feet Under III		by notgull

---

시즌 3

“하늘은 아마도”

대재앙 10,000년 후

---

이야기: Chasing Suns		by notgull
[최신작] 이야기: Down Through		by notgull
[최신작] 이야기: Forgotten Shrine		by notgull

—

---

팀 버드 아트 페이지

위대한 CelesteKara does not match any existing user name 작!

---

EE-3570, CelesteKara does not match any existing user name 작.

> 보러 가기! <

—

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

---

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

SCP-3095 ▷ EE-3570 ▷ Avian Anthology I ▷ UMBRAL MIGRATORY SEQUENCE ▷ Avian Anthology II

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

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

—

조류학과 문장

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

_{Lt Flops와 notgull이 만든 허브.
Mendelssohn, CelesteKara does not match any existing user name, EstrellaYoshte이 그린 엄선된 아트워크.
최고의 팀 팀 버드}

Footnotes

1. (팬덤 은어) 에피소드Ⅰ을 뺀 스타워즈 장편 영화 시리즈를 보는 순서. (출처) -역주

---