반그림자 테마

평가 모듈:

평가: 0+x

정보 모듈:

평가: 0+x

EstrellaYoshteEstrellaYoshte서류더미 테마에서 포킹해서 만든 심미용 테마입니다.

테마를 사용하기 위해서는 다음 코드를 복붙하세요.

[[include :scpko:theme:penumbra]]

또한 테카 작동을 위한 [[include]] 아랫줄에 CSS 모듈을 넣어 헤더와 로고를 변경할 수 있습니다.

:root {
--header-title: "사이트 제목";
--header-subtitle: "사이트 부제목";
--lgurl: url("로고 파일 경로");
--accentColor: 색상;
}

색상 기본값은 #1EB5E8 입니다.


tb.png

화상.

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

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




탭 뷰입니다.

이것은 인용구로 각 줄의 시작에 ">"를 넣으면 작동합니다.
글자


구분선

이중 인용문

이것은
만드는 법은 이미 아실 거라
생각합니다

[[div class="darkbox"]]


sidebox div 속성은 다음과 같습니다.

[[div class="limit"]] <— 앵커의 시작 한계를 설정
[[div class="anchor"]] <— 사이드박스가 고정될 위치를 설정
[[div class="sidebox"]]
사이드박스에 들어갈 내용
[[/div]]
[[/div]]

사이드박스가 스크롤해 지나갈 내용

[[/div]] <— 앵커의 종료 한계를 설정


limit 를 설정하지 않으면 anchor는 페이지 전체를 기준으로 고정되어 버릴 겁니다.

sidebox div는 모바일 또는 가로화소 1290px 이하의 환경에서는 작동하지 않습니다.


The header font is Josefin Sans.

The body font is Roboto.

The monospace font is Fira Code.


소스코드:

/* 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;
    }
    #side-bar:focus-within:not(:target) {
        left: 0;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin-left: 19.75em;
        opacity: 0;
        z-index: -1;
        visibility: visible;
    }
    #side-bar:not(:target) .close-menu { display: none; }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
 
    /* FIREFOX-SPECIFIC COMPATIBILITY METHOD */
    @supports (-moz-appearance:none) {
    #top-bar .open-menu a {
        pointer-events: none;
    }
    #side-bar:not(:target) .close-menu {
        display: block;
        pointer-events: none;
        user-select: none;
    }
 
    /* 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;
    }
    }
}

/*
    Penumbra Theme
    [2020 Wikidot Theme]
    By EstrellaYoshte
    Based on:
       Paperstack Theme by EstrellaYoshte
       Ad Astra Theme by NatVoltaic and stormbreath
       Inkblot Theme by Croquembouche
       Anderson Robotics Theme by Croquembouche
       BHL Style Collapsible by Monkatraz
*/
 
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url(https://fonts.googleapis.com/css2?family=Fira+Code&display=swap);
@font-face {
    font-family: 'MapoDPPA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MapoDPPA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
 
/* Set the new text's content from variable */
#header h1 a::before {
  content: var(--header-title, "SCP 재단");
}
 
#header h2::before {
  content: var(--header-subtitle, "확보 - 격리 - 보호");
}
 
#header h1 a::before, #header h2::before {
  font-family: 'Josefin Sans', 'MapoDPPA', sans-serif;
}
 
#side-bar .heading{
  font-family: 'Josefin Sans', 'MapoDPPA', sans-serif;
}
 
/* ---- PAGE ELEMENTS ---- */
 
h1 {
    color: var(--accentColor);
    font-family: 'Josefin Sans', 'MapoDPPA', sans-serif;
}
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Josefin Sans', 'MapoDPPA', sans-serif;
}
 
#page-title {
    font-family: 'Josefin Sans', 'MapoDPPA', sans-serif;
}
🈲: SCP 재단의 모든 컨텐츠는 15세 미만의 어린이 혹은 청소년이 시청하기에 부적절합니다.
따로 명시하지 않는 한 이 사이트의 모든 콘텐츠는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0 라이선스를 따릅니다.