메모리아 테마

잠깐 정지

이 페이지는 SCP 위키 내부적으로 사용되기 위한 템플릿 페이지입니다.

허가 없이 건드리지 마시오

사용법

다음 코드를 붙여넣으세요.

[[include :scpko:theme:black-highlighter-theme]]
[[include :scpko:component:collapsible-sidebar]]
[[include :scpko:theme:memoria]]

배경 그라디언트 위로 텍스트를 써야 할 때는 다음 흰 텍스트 상자를 사용합시다.

[[div class="textbox"]]
여기에 텍스트/코드 입력
[[/div]]

솔로모나리 "경전" 코드

[[div class="type1"]]
문단을 나누려면 "@@ @@" 구문을 이용하고,
[[>]]
[[span style="font-family:var(--body-font); font-size: calc(var(--base-font-size) * 1.00); color: #000000;"]]- //여긴 "출전"을 표기하는 자리입니다.//[[/span]]
[[/>]]
[[/div]]

⁷And it came to pass that in those days there went forth throughout the land, a call to explain what the scripture looked like. ⁸It was then that the Prophet stood forth and spake with the words of a crafter, ⁹"Lo, at this very hour I say unto thee, look unto my words and see what purpose these words has revealed to thee."

- 솔로모나리 『발크차론』 「귀속의 서」The Book of Attribution, 1장 7-9절

이것은 무엇인가

이것은 MalyceGraves가 인 메모리아 아뒤툼 카논에서 사용할 목적으로 만든 테마입니다.

본 테마는 CC BY-SA 3.0 라이선스에 따라 이용할 수 있습니다.

비고

이 테마는 블랙 하이라이터 + 블랙 하이라이터 접이식 사이드바 기반 테마입니다. 이 테마를 사용하기 위해서는 그 둘도 탑재해야 합니다. 상세 정보는 여기를 참조.

---

테마 색상

페인 회색--gray-monochrome(66, 66, 72)

자단색--bright-accent(133, 0, 5)

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

알토색--very-light-gray-monochrome(215, 215, 215)

흰 연기색--pale-gray-monochrome(244, 244, 244)

바스티유색--dark-gray-monochrome(48, 48, 52)

부카니에색--medium-accent(100, 46, 44)

프랑스 밤색--dark-accent(100, 3, 15)

망고탱고색--newpage-color(221, 102, 17)

{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}

{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}

{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}

{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}

{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}

{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

사용례

아뒤툼의 대인장

수평줄은 하이픈 5개 "------"를 치면 만들어지며, 따로 들어 있는 곳 (인용 블록 등) 이 없다면 페이지 전체를 가로지릅니다. 이 글에서 섹션을 나누는 줄은 모두 이 수평줄입니다.

---

제목은 문장 처음에 "+"을 1개부터 6개까지 입력해서 적용할 수 있습니다.

+ 제목

제목 1단계

제목 2단계

제목 3단계

제목 4단계

제목 5단계

제목 6단계

탭 만들기

탭뷰입니다.

탭 만들음

다른 텍스트입니다.

멋지죠.

긴 탭

긴 탭입니다. 텍스트가 많습니다.

긴 탭입니다. 텍스트가 많습니다.

긴 탭입니다. 텍스트가 많습니다.

긴 탭입니다. 텍스트가 많습니다.

긴 탭입니다. 텍스트가 많습니다.

긴 탭입니다. 텍스트가 많습니다.

긴 탭입니다. 텍스트가 많습니다.

긴 탭입니다. 텍스트가 많습니다.

긴 탭입니다. 텍스트가 많습니다.

긴 탭입니다. 텍스트가 많습니다.

긴 탭입니다. 텍스트가 많습니다.

긴 탭입니다. 텍스트가 많습니다.

무슨 이유인지 몰라도 이 탭은 빈 탭인데 제목이 엄청 깁니다. 왜 그럴까요? 도저히 모르겠습니다.

빈 탭

빈 탭

빈 탭

빈 탭

빈 탭

인용 블록입니다. 문장 처음에 ">"를 붙여서 만들 수 있습니다.
다른 텍스트

---

요건 수평줄

블록 속의 블록

그리고 또 블록¹

이건	표입니다
어떤 식으로	만드는 건진
다 아시죠

본문 글꼴은 Inter, 나눔바른고딕입니다.
제목 글꼴은 나눔손글씨 붓체입니다.
고정폭 글꼴은 나눔고딕코딩입니다.

---

---

+ Show component code

:root {
        --sidebar-width-on-desktop: calc(var(--base-font-size) * (266 / 15));
        --body-width-on-desktop: 45.75rem;
    }
    @media only screen and (min-width: 56.25rem) {
        #content-wrap {
            display: flex;
            position: initial;
            flex-direction: row;
            flex-grow: 2;
            width: calc(100vw - (100vw - 100%));
            max-width: inherit;
            height: auto;
            min-height: calc(100vh - var(--final-header-height-on-desktop, 10.125rem));
            margin: 0 var(--sidebar-width-on-desktop, 13.6rem) 0 calc(var(--sidebar-width-on-desktop, 13.6rem) * -1 / 2);
        }
 
        #main-content {
            position: initial;
            width: var(--body-width-on-desktop, 45.75rem);
            max-width: var(--body-width-on-desktop, 45.75rem);
            max-height: 100%;
            margin: 0 auto;
            padding: 2rem 1rem;
        }
 
        #page-content {
            max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
        }
 
        #side-bar {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            left: 0;
            grid-area: side-bar;
            width: var(--sidebar-width-on-desktop, 13.6rem) !important;
            min-width: var(--sidebar-width-on-desktop, 13.6rem) !important;
            max-height: 100vh;
            padding-right: 2.5rem;
            padding-left: 0.5rem;
            overflow-y: scroll;
            transition:
                translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                padding 300ms linear,
                margin 300ms linear;
            border: none;
            border-color: rgba(var(--swatch-tertiary-color, 170, 170, 170), 0.4);
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
            translate: calc(var(--sidebar-width-on-desktop, 13.5rem) * -1 - 1rem);
            direction: rtl;
            scrollbar-width: thin;
            -ms-scroll-chaining: none;
                overscroll-behavior: contain;
            scrollbar-color: 
                rgba(var(--swatch-primary-darker), 0.1) /* Thumb */
                rgba(var(--swatch-tertiary-color), 0.05); /* Track */
        }
 
        #side-bar::-webkit-scrollbar-track {
            background-color: rgba(var(--swatch-secondary-color, 244, 244, 244), 0.8);
        }
 
        #side-bar::-webkit-scrollbar,
        #side-bar::-webkit-scrollbar-thumb,
        #side-bar::-webkit-scrollbar-corner {
            width: 0.5rem;
            border-right-width: calc(100vw + 100vh);
            border-right-style: inset;
            border-color: inherit;
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
        }
 
        #side-bar:is(:hover, :active, :focus-within) {
            margin-right: 2.25rem;
            padding-right: 0.25rem;
            overflow-x: hidden;
            overflow-y: auto;
            border-color: rgba(var(--swatch-primary-darker), 1);
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
            translate: calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0));
            scrollbar-color: 
                rgba(170, 170, 170, 1)  /* Thumb */
                rgba(252, 252, 252, 1); /* Track */
            scrollbar-color: 
                rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
                rgb(var(--swatch-menubg-color, 252, 252, 252), 1);  /* Track */
        }
 
        #main-content::after {
            content: " ";
            display: flex;
            position: fixed;
            top: 0;
            left: 1rem;
            align-items: center;
            justify-content: center;
            width: 1rem;
            height: 100%;
            max-height: 100%;
            transition:
                left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg");
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-position: center left 1rem;
            background-size: 1rem 12.875rem;
            pointer-events: none;
        }
 
        #side-bar:is(:hover, :active, :focus-within) + #main-content::after {
            left: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
            width: 0rem;
            transition:
                left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            opacity: 0;
            background-position: center left calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
            font-size: 0em;
        }
 
        #main-content::before {
            content: " ";
            position: absolute;
            z-index: 9;
            top: var(--final-header-height-on-desktop, 0);
            left: 0;
            width: var(--sidebar-width-on-desktop, 14.5rem);
            height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
            margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
            transition:
                translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            opacity: 0.5;
            background-color: rgb(var(--swatch-alternate-color, 0, 0, 0));
            pointer-events: none;
            translate: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1 + 1rem);
        }
 
        #side-bar:is(:hover, :active, :focus-within) + #main-content::before {
            translate: 0;
            opacity: 0;
        }
 
        #side-bar .side-block {
            margin-top: 1em;
            padding-left: 0.25em;
            border-right-width: 0rem;
            border-left-width: 0rem;
            border-radius: 0;
            background-color: rgb(0, 0, 0, 0);
            direction: ltr;
        }
 
        #side-bar .scpnet-interwiki-wrapper {
            direction: ltr;
        }
 
        /* Print Friendly Formatting by Estrella */
        body.print-body { 
            --sidebar-width-on-desktop: 0; 
        } 
        body.print-body #main-content::before,
        body.print-body #main-content::after { 
            display: none; 
        }
    }

Footnotes

1. 그리고 주석!