구성요소 허브

구성요소 코드 보기

평가: 0+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; }
평가: 0+x

서론

구성요소 허브에 오신 것을 환영합니다! 이 허브는 component: 카테고리에 속한 모든 페이지를 정리하기 위해 만들어졌습니다. 구성요소란 "다른 페이지에 [[include]] 구문을 통해 새로운 디자인이나 스타일, 혹은 기능을 추가할 수 있게끔 설계된 페이지"를 말합니다. 페이지의 외관과 분위기를 변형하기 위한 페이지인 테마는 구성요소에 해당하지 않습니다.


목차

이 페이지는 총 4개의 카테고리로 나누어져 있습니다.



- 공통 -

적용된 테마와 관계없이 사용할 수 있는 구성요소입니다.

- 시그마-9 -

시그마-9 페이지만을 위한 구성요소로, 블랙 하이라이터나 현무암 테마에서 망가질 가능성이 높습니다.

- 블랙 하이라이터 -

블랙 하이라이터 페이지만을 위한 구성요소로, 시그마-9이나 현무암 테마에서 망가질 가능성이 높습니다.

- 기술/운영진 -

보다 기술적인 작업이나 운영진 업무 처리에 사용되는 구성요소입니다. 일반적으로는 사용할 가능성이 낮습니다.


현무암 테마 전용 구성요소가 만들어지면 새 카테고리가 추가될 수 있습니다.


구성요소


공통


일련번호: 6776
Level4
격리 등급:
난해
2차 등급:
타우미엘
혼란 등급:
플람
위험 등급:
주의

이 구성요소는 SCP 문서의 헤더로 기능하며, SCP의 일련번호와 격리 등급, 혼란 등급과 위험 등급을 보여줍니다. 각각의 의미는 이 가이드에서 찾아볼 수 있습니다. 사용하려면 다음 코드를 페이지에서 필요한 곳에 붙여넣으세요.

[[include :scpko:component:anomaly-class-bar-source
|item-number= XXXX
|clearance= #
|container-class= 등급_자리
|secondary-class= 등급_자리
|secondary-icon= http://urlhere.com
|disruption-class= 커너크
|risk-class= 주목
]]

WoedenazWoedenaz가 만든 근사한 데이터베이스에서 ACS를 사용하는 페이지 목록을 볼 수 있습니다. (영미권 위키에 업로드된 문서 한정입니다)



로딩되는 ACS 헤더를 애니메이션화 해주는 구성요소입니다. 사용하려면 다음 코드를 페이지에서 필요한 곳에 붙여넣으세요.

[[include :scpko:component:acs-animation]]

실제로 작동하는 모습은 SCP-5935에서 볼 수 있습니다.


acshybrid.png

acstext.png

덜 구체적인 버전의 ACS입니다. 사용하려면 다음 코드를 페이지에서 필요한 곳에 붙여넣으세요.

[[include :scpko:component:acs-hybrid-text-bar-source
|version= 하이브리드/텍스트
|item-number= ####
|clearance-level= #
|containment-class= 등급_자리
|include-secondary= yes/no
|secondary-class= 등급_자리
|secondary-icon= https://urlhere.com
|disruption-class= 등급_자리
|risk-class= 등급_자리
]]


acslitehor.png

선의 굵기를 3px로 통일하고, 대부분의 기기에서 크기를 반으로 줄여놓은 ACS 구성요소입니다. 사용하려면 다음 코드를 페이지에서 필요한 곳에 붙여넣으세요.

[[include :scpko:component:acs-horm-lite-source
|item-number= XXXX
|clearance= #
|container-class= 등급_자리
|secondary-class= 등급_자리
|secondary-icon= http://urlhere.com
|disruption-class= 등급_자리
|risk-class= 등급_자리
]]


acslitepeppo.png

대부분의 기기에서 ACS 크기를 줄이고 조금 다른 분위기를 낸 구성요소입니다. 사용하려면 다음 코드를 페이지에서 필요한 곳에 붙여넣으세요.

[[include :scpko:component:acs-peppo-lite
|item-number= ####
|clearance= #
|container-class= 등급_자리
|secondary-class= 등급_자리
|secondary-icon= http://urlhere.com
|disruption-class= 등급_자리
|risk-class= 등급_자리
]]


acssplit.png

ACS에서 격리 등급과 2차 등급이 동시에 보여지게 만드는 구성요소입니다. 사용하려면 다음 코드를 ACS [[include]] 뒤에 붙여넣으세요.

[[include :scpko:component:acs-peppo-split
|object= 등급_자리
|object-image= http://urlhere.com
|object-color= 등급_자리
|esoteric-color= 등급_자리
]]

기본 ACS의 [[include]]는 원하는 격리 등급에 알맞은 object, object-image, object-color와 일치하는 2차 등급이 설정되어야 합니다.


일련번호: SCP-6776

LEVEL-

격리 등급: 타우미엘

혼란 등급: 커너크


담당 기지


N/A

기지 이사관


N/A

연구 책임자


아카비 하이크 박사

배정 특무부대


N/A

번호: SCP-6776

LEVEL-

격리 등급:
타우미엘

혼란 등급:
커너크


담당 기지


N/A

기지 이사관


N/A

연구 책임자


아카비 하이크 박사

배정 특무부대


N/A

이 구성요소는 SCP 문서의 헤더로 기능하며, 자주 사용되는 다른 헤더들을 하나로 묶어 만들어졌습니다. 사용하려면 다음 코드를 페이지에서 필요한 곳에 붙여넣으세요.

[[include :scpko:component:advanced-information-methodology
|XXXX=####
|lv=일/이/삼/사/오/육
|cc=안전/유클리드/케테르/무효/타우미엘
|dc=암흑/플람/커너크/에키/아미타
|site=제##기지/ N/A
|dir=디렉터 박사/ N/A
|head=닥터 박사/ N/A
|mtf=이름-#/ N/A
]]


Included page "component:audio-player-woed-source" does not exist (create it now)

이 구성요소는 완전히 맞춤 설정 가능한 오디오 플레이어입니다. 사용하려면 다음 코드를 문서에서 필요한 곳에 붙여넣으세요.

[[include :scpko:component:audio-player-woed-source
|unique-name=secretparty (only words, no numbers)
|audio-file= https://thisisalink.com/PartyTime.mp3 (all audio file types allowed)
|background-color=rgb(252, 252, 252)
|border-color=rgb(215, 215, 215)
|border-radius=0.313rem
|dropshadow-color=rgba(12, 12, 12, 0.15)
|text-color=rgb(80, 0, 2)
|icons-color=rgb(171, 0, 5)
|player-color=rgb(215, 215, 215)
|progress-color=rgb(80, 0, 2)
]]


평가: 0+x

페이지 상단부에 작은 드롭다운 메뉴로 저자를 표시할 수 있게 해주는 구성요소입니다. 사용하려면 다음 코드를 평가 모듈 뒤에 붙여넣으세요.

공통 버전:

[[include :scpko:component:author-label-source start=--
|name=이름(들)]]
내용
[[include :scpko:component:author-label-source end=—]]

블랙 하이라이터 버전:

[[include :scpko:component:author-label-source start=--
|name=이름(들)
|no-right-margin=*]]
내용
[[include :scpko:component:author-label-source end=—]]



미번역 📎작가 페이지 도구


새 글을 올릴 때마다 편집할 필요 없이 쉽고 빠르게 작가 페이지를 만들어주는 구성요소입니다. 사용하려면 다음 코드를 여러분의 페이지에 붙여넣으세요.

[[include :scpko:component:author-page order=created_at]]



미번역 📎더나은각주


SCP-4485의 것처럼 맞춤형 각주를 만들어주는 구성요소입니다. 사용하려면 다음 코드를 페이지에서 필요한 곳에 붙여넣으세요.

[[include :scpko:component:betterfootnotes]]

각주를 넣고 싶은 곳에 다음 코드를 붙여넣으세요.

[[span class="fnnum"]].[[/span]][[span class="fncon"]]각주 속 텍스트.[[/span]]

구성요소가 망가질 수 있으니 fnnum span에서는 아무것도 건드리지 마세요..제대로 들어갔다면 이렇게 보일거에요.



미번역 📎BHL 스타일 접기


이 구성요소는 기본 문법인 [[collapsible]]접기의 모양을 변경해줍니다. 사용하려면 다음 코드를 페이지에서 필요한 곳에 붙여넣으세요.

[[include :scpko:component:bhl-style-collapse-source]]

실제로 작동하는 모습은 에서 볼 수 있습니다.


미번역 📎블랙라이트 상자


페이지 꾸미기에 좋은 BHL 스타일의 예쁜 div를 만들어주는 구성요소입니다. 사용하려면 다음 코드를 페이지에서 필요한 곳에 붙여넣으세요.

[[include :scpko:component:blacklight-box-source |inc-source= --]]]

그리고, 상자를 사용하고 싶을 때마다 이 코드를 원하는 곳에 붙여넣으세요.

[[include :scpko:component:blacklight-box-source |inc-section-start= --]
|color-family=추가-색상
|unique-name=소문자로-빈칸없이
|display-name=레이블 속 텍스트
]]
상자 내용은 여기에 입력하세요.
[[include :scpko:component:blacklight-box-source |inc-section-end= —]]]

"color-family"란은 선택사항이며, 상자를 칠하고 싶은 색상 값을 넣으면 됩니다.

실제로 작동하는 모습은McDoctorate의 제안에서 볼 수 있습니다.



📎Cd Ver2


SCP 문서의 헤더로 기능하는 구성요소입니다. 사용하려면 사용하려면 다음 코드를 페이지 상단 필요한 곳에 붙여넣으세요.

[[include :scpko:component:cd-ver2
|lv=1/2/3/4/5/6
|item=SCP-XXXX
|class= 등급
|site-responsible=제##기지/제##구역
|director= 이름
|research-head= 이름
|assigned-task-force= MTF 이름-## ("코드네임")
]]

실제로 작동하는 모습은 익명의 제안 II에서 볼 수 있습니다.

4/6776 4/6776등급
보안인가 필요
classified-bar.svg
classified-bar.svg
classified-bar.svg
classified-bar.svg
classified-bar.svg
classified-bar.svg
일련번호: SCP-6776
타우미엘

SCP 문서의 헤더로 기능하는 구성요소입니다. 사용하려면 다음 코드를 페이지에서 필요한 곳에 붙여넣으세요.

[[include :scpko:component:classified-bar-woed
|lv=0/1/2/3/4/5
|item=XXXX
|oc= 등급
|oc-en= 영문-등급
|lang=KO
]]


4/6776 4/6776등급

보안인가 필요

classified-lv4.png

일련번호: SCP-6776

등급: 타우미엘(Thaumiel)

SCP 문서에 헤더를 추가해주는 구성요소입니다. 사용하려면 다음 코드를 페이지에서 필요한 곳에 붙여넣으세요.

[[include :scpko:component:classified-decoration
|lv=1/2/3/4/5
|item=XXXX
|oc=등급(영문 등급)
|lang=KO
]]



미번역 📎크로캉스타일 CSS


CroquemboucheCroquembouche를 위한 개인용 스타일링 구성요소로, 소소한 CSS 구성요소들이 포함되어 있습니다. 사용하려면 다음 코드를 페이지에서 필요한 곳에 붙여넣으세요.

[[include :scpko:component:croqstyle]]


catsby
11:00
Angry, and half in love with her, and tremendously sorry, I turned away.
sans
11:01
based and gatbilled

This component allows you to emulate the look of a Discord chat in your pages. 사용하려면 다음 코드를 페이지에서 필요한 곳에 붙여넣으세요.

[[include :scpko:component:discord-chat-source |inc-source= --]]]

Please refer to the component page for further instructions on its use.


This component serves as an easy way to guide readers through a tale series. To use it, paste the following at the bottom of your page:

[[include :scpko:component:earthworm
| first=true/false | last=true/false | hub=yes/no
| previous-url=URL_OF_PREVIOUS | previous-title=TITLE OF PREVIOUS
| next-url=URL_OF_NEXT | next-title=TITLE OF NEXT
| hub-url=URL_OF_HUB | hub-title=TITLE OF HUB
]]



📎Fade In


This component smoothly fades in the contents of a page, instead of having it all load at once. 사용하려면 다음 코드를 페이지에서 필요한 곳에 붙여넣으세요.

[[include :scpko:component:fade-in speed=1/2/3]]

You can see this component in action in the BLANKSTYLE and PLACESTYLE themes.


일련번호:SCP-6776 LEVEL 4/6776
격리 등급:thaumiel secret

혼란 등급: keneq

This component adds a header for your SCP article. 사용하려면 다음 코드를 페이지에서 필요한 곳에 붙여넣으세요.

[[include :scpko:component:flops-header
|item= 0001–9999
|containment= safe/euclid/keter/thaumiel/other
|level= 1–6
|security= unrestricted/restricted/confidential/secret/top-secret/other
|disruption= dark/vlam/keneq/ekhi/amida/other
|disruption-bg-color= #00638a/#008a5c/#bd9d00/#bd5200/#8a0022/your choice
]]


Included page "component:fundraiser-widget-source" does not exist (create it now)

This component is used to link to any of your offsite fundraisers in a visually appealing way. All use of this component must comply with the SCP Wiki's Donations Policy. To use this, paste the following on your page:

[[include :scpko:component:fundraiser-widget amt=
|goal=
|title=
|main_url=
|curr_sym=$|num_sep=,
|image_url= none
|donate_url= none
|logo_text=
|description=
]]


Poster:

평가: 0+x


The One Sent by God

SHE FLIES!

SHE HEALS!

SHE GIVES LIFE!

SHE HELPS!

LIFE!



HUMAN?

BIRD?

MIRACLE?

ANGEL?

SOUL!

lorem ipsum

¡Don't miss it!

ONE DAY ONLY
10 PM this Sunday.
Come one, come all!

These components are related to the GoI Format for Herman Fuller's Circus of the Disquieting. To use them, paste the following:

[[include :scpko:component:hf-poster title=[1]|textLeft=[2]|image=[3]|textRight=[4]|textBottom=[5]|textFooter=[6]]]

[[include :scpko:component:hf-book-left chapter=[1]|content=[2]|pagenumber=[3]]]

[[include :scpko:component:hf-book-right chapter=[1]|content=[2]|pagenumber=[3]]]

Included page "fragment:components-gen2" does not exist (create it now)

Included page "fragment:components-sigma" does not exist (create it now)

Included page "fragment:components-bhl" does not exist (create it now)

Included page "fragment:components-tech" does not exist (create it now)

Site-2021K | Contact | License | Made with ❤️ in Seoul