라그나로크 테마

평가 모듈:

정보형 평가 모듈:

정보

Info about your page.

추가적인 정보

More information about your page.

이 테마는 라그나로크 카논에 사용하기 위해 MalyceGraves가 만들었음.

귀속:

라그나로크 테마는 EstrellaYoshte가 만든 반그림자 테마의 변형입니다.

사용법

이 테마를 항목에 사용하기 위해서는 다음 코드를 페이지에 붙여넣으세요.

[[include :scpko:theme:ragnarok]]

[[include]] 다음에 아래 CSS 모듈을 사용함으로써 제목과 색상을 변경할 수 있습니다.

:root {

  --header-title: "큰 제목";

  --header-subtitle: "부제목";

  --lgurl: url("로고 경로");

  --accentColor: 색;

  --headerColor: 상;

}

색상 기본값은 #9e9e9e와 #8a0101입니다.

라그나로크 로고

SCP 재단 로고

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

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

접기 - 클릭

탭 뷰입니다.

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

글자

구분선

이중 인용문

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

[[div class="darkbox"]]

sidebox div 속성은 다음과 같이 사용합니다.

[[div class="limit"]] <— 상한 설정
[[div class="anchor"]] <— sidebox의 고정 위치 설정
[[div class="sidebox"]]
sidebox의 내용
[[/div]]
[[/div]]

sidebox가 달릴 본문 내용

[[/div]] <— 하한 설정

예시

기교를 좀 부리면 이렇게

방황하여도, 봄날의 가장 끝에 없으면 그들의 석가는 꽃이 하였으며, 봄바람이다. 같지 보이는 그들의 커다란 찬미를 우리의 뜨거운지라, 고동을 하여도 뿐이다. 크고 타오르고 사람은 불어 피다. 얼음과 이 찾아 피에 그들은 되려니와, 약동하다. 그들은 장식하는 때까지 부패뿐이다. 하는 청춘의 이는 투명하되 황금시대의 곳으로 위하여, 이것이야말로 것이다. 것은 타오르고 그것을 우리는 현저하게 찾아 곳이 황금시대다. 이것을 부패를 얼마나 작고 것이다.보라, 희망의 보이는 쓸쓸하랴? 품으며, 위하여서 착목한는 것은 옷을 두손을 가치를 것이다.

행복스럽고 열락의 같이, 오직 이상이 길을 내는 이것이다. 아름답고 굳세게 위하여, 꽃이 가는 모래뿐일 봄바람이다. 하여도 피고, 원대하고, 그러므로 청춘의 바이며, 맺어, 것이다. 끓는 구하기 얼마나 있는가? 뛰노는 수 인간은 돋고, 장식하는 봄바람이다. 피고, 것이다.보라, 가는 우리의 풍부하게 영원히 곳이 끓는다. 투명하되 황금시대를 대한 두기 황금시대다. 부패를 피고 돋고, 무엇을 그들은 끝에 뿐이다. 노년에게서 그러므로 구하지 무엇을 가진 동력은 무엇을 것은 열락의 뿐이다. 수 아니더면, 것은 무엇을 것이다. 이상 따뜻한 기관과 자신과 힘있다.

sideboxe를 여러 개 사용

피에 구하지 싹이 때에, 충분히 못하다 사막이다. 찾아 바이며, 인도하겠다는 소리다.이것은 꽃이 곧 황금시대를 그들에게 끓는다. 유소년에게서 살았으며, 위하여서 끓는 노년에게서 뛰노는 따뜻한 피에 못할 것이다. 인생을 수 우리 이상 들어 그것을 내는 석가는 끓는다. 일월과 그들은 것은 속잎나고, 그들은 얼마나 듣기만 행복스럽고 약동하다. 얼음이 피가 그것을 꾸며 찾아 무엇을 힘있다. 미인을 구하지 살 무엇을 봄바람을 길지 수 피가 인생에 쓸쓸하랴? 노래하며 곳으로 끓는 위하여, 보배를 있으며, 꽃이 구하기 사막이다. 싶이 무엇을 피가 소담스러운 그러므로 같이, 기관과 피부가 피어나는 것이다. 하는 목숨이 싹이 이상이 자신과 불어 듣는다. 이상 얼음에 이상의 봄바람을 앞이 가치를 싹이 이상, 군영과 듣는다.

장식하는 청춘 많이 청춘의 위하여서. 피는 아니더면, 착목한는 실로 무엇을 쓸쓸한 긴지라 황금시대다. 수 튼튼하며, 가는 불러 눈에 귀는 인생을 노년에게서 기관과 아름다우냐? 품으며, 위하여, 그들은 온갖 있음으로써 것이다. 같은 길을 소담스러운 속에서 싸인 천고에 가치를 철환하였는가? 우리의 못할 공자는 설레는 대한 있다. 듣기만 꽃이 길을 심장은 기쁘며, 얼마나 있다. 열매를 트고, 눈이 공자는 천고에 철환하였는가? 낙원을 있으며, 옷을 생생하며, 사막이다. 귀는 넣는 청춘에서만 긴지라 두기 피다. 청춘은 무엇을 끓는 보라.

하는 것도 가능합니다.

곳이 방황하였으며, 할지니, 교향악이다. 되려니와, 옷을 평화스러운 사막이다. 꽃 이상, 옷을 얼마나 풀이 하였으며, 이는 말이다. 옷을 무엇이 안고, 보이는 영락과 것이다. 것은 넣는 평화스러운 찾아다녀도, 같이, 칼이다. 무엇이 뼈 없으면 같지 공자는 보이는 것은 생의 뭇 사막이다. 찾아다녀도, 별과 따뜻한 가치를 목숨을 새가 살았으며, 목숨이 구하기 힘있다. 뜨고, 우는 그러므로 일월과 들어 어디 심장의 약동하다. 기관과 생생하며, 같으며, 길지 타오르고 살 주는 굳세게 찾아 것이다.

있음으로써 가는 눈이 착목한는 찬미를 사막이다. 청춘이 천하를 보배를 심장은 주는 수 작고 뿐이다. 것은 발휘하기 하는 살 곳으로 풀이 현저하게 약동하다. 사람은 원질이 열매를 대중을 구하기 풀밭에 지혜는 역사를 봄바람이다. 기관과 어디 못하다 그들은 철환하였는가? 놀이 목숨을 더운지라 품으며, 못하다 이것이다. 인생에 청춘의 같은 황금시대다. 속에서 인간은 이상의 위하여서. 청춘은 이것을 예수는 자신과 가장 인도하겠다는 이것이다. 없으면, 만천하의 귀는 청춘 투명하되 우리의 품으며, 밥을 곳이 황금시대다. 열락의 그들은 노년에게서 우리는 그림자는 타오르고 것이다.

limit 속성이 지정되지 않으면 anchor는 페이지 전체에 들러붙을 것입니다.

sidebox 속성은 화면 가로폭 1290 픽셀 이하에서는 최소화됩니다. (코드 제공자: Woedenaz!)

제목 글꼴은 New Tegomin, 목우자수심결입니다.

본문 글꼴은 Changa, 닉스곤입니다.

고정폭 글꼴은 Courier Prime 입니다.

소스코드

/* 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;
        pointer-events: auto;
}
 
@media not all and (max-width: 767px) {
 
    #top-bar .mobile-top-bar {
        display: block;
        pointer-events: none;
    }
 
    #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: -18rem;
        width: 15.25rem;
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        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;
    }
    }
}

/*
    Ragnarok Theme
    [2021 Wikidot Theme]
    By MalyceGraves
    Based on:
       Penumbra Theme by EstrellaYoshte
       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=New+Tegomin&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Changa&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');
 
#page-content { font-size: 1rem; }
 
body {
    font-family: 'Changa', sans-serif;
    color: #EDEDED;
    background-color: #000212;
    background-image: linear-gradient(
        to bottom,
        rgba(5, 10, 20, .2), rgba(5, 10, 20, .5) 100px,
        rgba(5, 10, 20, .5) 100px, rgba(0, 4, 31, .8) 200px,
        rgba(0, 4, 31, .8) 200px, rgba(0, 2, 18, 1) 400px,
        rgba(0, 2, 18, 1) 400px, rgba(0, 2, 18, 1) 100%),
        url('https://scp-wiki.wdfiles.com/local--files/theme%3Aragnarok-theme/starfield.jpg');
    background-repeat: no-repeat;
}
 
#main-content {
    top: -1.2rem;
}
 
/* ---- SCROLLBAR ---- */
 
::-webkit-scrollbar {
  width: 9px;
  background: transparent;
}
 
::-webkit-scrollbar-track {
  background: #050a14;
}
 
::-webkit-scrollbar-thumb {
  background: #ededed;
  border: none;
}
 
::-webkit-scrollbar-thumb:hover {
  background: var(--accentColor);
}
 
/* ---- HEADER ---- */
 
div#container-wrap {
     background-image: none;
}
div#header {
    background-image: none;
}
 
div#extra-div-1 {
    height: 164px;
    width: 100%;
    top: 0;
    position: absolute;
    background: var(--lgurl);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    z-index: -1;
}
 
#header h1, #header h2 { margin-left: 0; float: none; text-align: center; }
/* Move the subtitle down a smidge */
#header h2 { margin-top: 0.45rem; }
/* Hide the existing text */
#header h1 span, #header h2 span { font-size: 0; display: none; }
/* Style the new text */
#header h1 a::before, #header h2::before {
  color: var(--headerColor);
  font-family: 'New Tegomin', sans-serif;
  text-shadow: none;
}
/* Set the new text's content from variable */
#header h1 a::before {
  content: var(--header-title, "R A G N A R O K");
  font-weight: 300;
  font-size: 1.3em;
}
#header h2::before {
  content: var(--header-subtitle, "The End of All Things");
  font-weight: 600;
  font-size: 1.22em;
}
 
#login-status {
    color: #ededed;
}
#login-status a {
    color: var(--accentColor);
}
#login-status ul a {
    color: #ededed;
    background: #21252E;
}
#login-status ul a:hover {
    color: var(--accentColor);
}
 
#account-topbutton{
    border: solid 1px var(--accentColor);
}
 
#footer, #footer a {
    background: transparent;
    color: #ededed;
}
#license-area {
     color: #ededed;
}
 
#search-top-box {
    top: 2.2rem!important;
    right: 8px;
}
#search-top-box-form > input[type=submit] {
    border: solid 1px #ededed;
    background: #21252E!important;
    box-shadow: none;
    border-radius: 0;
    color: #ededed;
    transition: color 0.15s linear;
}
#search-top-box-form input[type=submit]:hover {
    border: solid 1px var(--accentColor);
    box-shadow: none;
    color: var(--accentColor);
}
#search-top-box-form > input[type=text] { display: none; }
 
/* ---- TOP BAR ---- */
 
#top-bar {
     top: 8.4rem;
     display: flex;
     justify-content: center;
     right: 0;
}
#top-bar, #top-bar a {
     color: #ededed;
     transition: color 0s;
}
#top-bar ul li ul {
    border-color: var(--accentColor);
    overflow: hidden;
}
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
   border-top-color: #2F333C;
}
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
    background: #21252E;
    color: #ededed;
}
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
    background: #21252E; /* top bar hover background color */
    color: var(--accentColor);
    transition: color 0.1s linear;
}
 
/* ---- SIDE BAR ---- */
 
div#side-bar{
    background: #21252E;
    clear: both;
    padding: .8em;
    border-radius: 0;
    box-shadow: none;
    overflow-x: hidden;
}
 
#side-bar .heading{
    color: #ededed;
    font-family: 'New Tegomin', sans-serif;
    font-size: 0.94rem;
    border-bottom: solid 1px #ededed;
}
#side-bar .side-block {
    border: transparent;
    border-radius: 0;
    box-shadow: none;
    background-color: #21252E;
}
#side-bar .side-block.media {
    background-color:#21252E;
}
#side-bar .side-block.media > * {
    display: flex;
    justify-content: space-evenly;
}
#side-bar .side-block.resources {
    background-color:#21252E;
}
.side-block .menu-item > .image {
    display: none;
}
 
#top-bar div.open-menu a {
    border-radius: 0;
    box-shadow: none;
    color: var(--accentColor);
    background-color: #050a14;
    border: solid 1px #050a14;
}
 
@media (max-width: 767px) {
    #main-content {
        padding: 0;
        margin: 0 5%;
        border-left: none;
    }
    #page-title {
        margin-top: 0.7em;
    }
    #side-bar {
        background-color: #050a14;
        left: -18.6em;
    }
    #side-bar:target {
        border: none;
        box-shadow: none;
    }
    #side-bar .close-menu {
        transition: width 0.5s ease-in-out 0.1s,
                    opacity 1s ease-in-out 0s;
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        background: rgba(0,0,0,0.3);
        background-position: 18.6em 50%;
        z-index: -1;
        opacity: 0;
        pointer-events: none;
    }
    #side-bar:target .close-menu {
        width: calc(100% - 18.6em);
        right: 0;
        left: auto;
        opacity: 1;
        pointer-events: auto;
    }
    #side-bar:target .close-menu:hover {
        background: unset;
    }
    #page-content > hr, #page-content > .list-pages-box > .list-pages-item > hr {
        margin: 3em -5.5%;
    }
    #side-bar {
        top: 0;
    }
    #side-bar .heading {
        padding-left: 1em;
        margin-left: -1em;
    }
    #search-top-box {
        top: 107px;
    }
}
 
/* ---- TABS ---- */
 
/* ---- YUI TAB BASE ---- */
.yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{background-color:inherit;background-image:inherit}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:inherit;text-decoration:inherit}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{color:inherit;background:inherit}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{border-color:inherit}.yui-navset li{line-height:inherit}
 
/* ---- YUI TAB CUSTOMIZATION ----*/ 
 
 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav{
     display: flex;
     flex-wrap: wrap;
     width: calc(100% - .125rem);
     margin: 0 auto;
     border-color: var(--accentColor);
     box-shadow: none;
}
 .yui-navset .yui-nav a, /* ---- Link Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav a{
     color: #ededed;
     font-weight: bold;
    /* ---- Tab Background Colour | [UNSELECTED] ---- */
     background-color: #050a14;
     border: unset;
     box-shadow: none;
     box-shadow: none;
     transition: background-color 0.15s linear;
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
     color: #ededed;
    /* ---- Tab Background Colour | [HOVER] ---- */
     background-color: var(--accentColor);
}
 .yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav li{
     position: relative;
     display: flex;
     flex-grow: 2;
     max-width: 100%;
     margin: 0;
     padding: 0;
     color: #ededed;
     background-color: #050a14;
     border-color: transparent;
     box-shadow: none;
}
 .yui-navset .yui-nav li a,
 .yui-navset-top .yui-nav li a,
 .yui-navset-bottom .yui-nav li a{
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
}
 .yui-navset .yui-nav li em{
     border: unset;
}
 .yui-navset .yui-nav a em,
 .yui-navset .yui-navset-top .yui-nav a em{
     padding: .35em .75em;
 
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
}
 .yui-navset .yui-nav .selected, /* ---- Selection Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav .selected{
     flex-grow: 2;
     margin: 0;
     padding: 0;
    /* ---- Tab Background Colour | [SELECTED] ---- */
     background-color: var(--accentColor);
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a em{
     border: none;
}
 .yui-navset .yui-nav .selected a{
     width: 100%;
     color: #050a14;
     font-weight: bold;
}
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:active{
     color: #050a14;
     background-color: var(--accentColor);
}
 .yui-navset .yui-content {
    background-color: #050a14;
    box-shadow: none;
}
 .yui-navset .yui-content,
 .yui-navset .yui-navset-top .yui-content{
     padding: .5em;
     border: none;
}
 
/*---- TAB ANIMATION by Croquembouche ---- */
 
.yui-navset .yui-content > div {
    display: block;
    top: 0;
    overflow: hidden;
    transform-origin: 0 0;
}
 
#page-content .yui-navset .yui-content > div[style*="none"] {
    display: block !important;
    flex: 0;
    max-height: 0;
    padding: 0 0.5em;
    border-width: 0;
    /* The following transition affects the one that DISAPPEARS */
    transition: padding 0s linear 0.5s,
          border-width 0s linear 0.5s,
          flex 0.5s cubic-bezier(.18,.51,.54,.9) 0s;
    animation: tab-disappear 0.5s ease-in-out 0s 1 both;
}
#page-content .yui-navset .yui-content > div[style*="block"] {
    display: block !important;
    flex: 1;
    max-height: 9999rem;
    /* The following transition affects the one that APPEARS */
    transition: padding 0s linear 0.5s,
          border-width 0s linear 0.5s,
          flex 0.5s cubic-bezier(.18,.51,.54,.9) 0.5s;
    animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
}
 
@keyframes tab-disappear {
    0% { max-height: 9999rem; }
    1% { max-height: 100vh; }
    100% { max-height: 0; }
}
@keyframes tab-appear {
    0% { max-height: 0; }
    99% { max-height: 100vh; }
    100% { max-height: 9999rem; }
}
 
/* ---- INFO BAR ---- */
 body{
     --barColour: #3a414f;
     --linkColour: #ededed;
}
 
 .info-container .collapsible-block-content{
     padding: 0 .5em 30px;
}
 .info-container .collapsible-block-content .wiki-content-table{
     width: 100%;
}
 
/* Ayer's info-bar patch by Monkatraz */
#page-content .info-container .collapsible-block-folded, #page-content .info-container .collapsible-block-unfolded-link  {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-shadow: none;
}
#page-content .info-container .collapsible-block-link::before, #page-content .info-container .collapsible-block-unfolded-link::before  {
    content: " ";
    display: none;
}
#page-content .info-container .collapsible-block-content::after {
    display: none;
}
 
/* ---- INFO PANE ---- */
 
#page-content .creditRate{
     margin: unset;
     margin-top: 4px;
     margin-bottom: 4px;
     margin-right: 3px;
}
#page-content .rate-box-with-credit-button {
    background-color: #050a14;
    border: solid 2px #050a14;
    border-radius: 0;
    box-shadow: 3px 0px 0px 0px var(--accentColor);
}
#page-content .rate-box-with-credit-button .creditButton p a {
    border-left-color: transparent;
}
 
#page-content .rate-box-with-credit-button .page-rate-widget-box .cancel {
    border-radius: 0;
}
#page-content .rate-box-with-credit-button .page-rate-widget-box .rate-points {
    border-left: 0;
}
 
.rate-box-with-credit-button .page-rate-widget-box .cancel a:hover {
    border-radius: 0;
}
 
#page-content .rate-box-with-credit-button .fa-info {
     color: #ededed;
}
#page-content .rate-box-with-credit-button .fa-info:hover {
     color: var(--accentColor);
}
 
#page-content .creditButtonStandalone p a {
    background-color: #050a14;
    border: solid 2px #050a14;
    border-radius: 0;
    box-shadow: 3px 0px 0px 0px var(--accentColor);
    color: #ededed;
}
#page-content .creditButtonStandalone p a:hover {
    color: var(--accentColor);
}
 
#page-content .modalbox {
     background: #2F333C !important;
     color: #ededed;
     box-shadow: none;
}
.close-credits,
.credit-back {
    filter: grayscale(100%) invert(100%) contrast(275%);
}
 
/* ---- PAGE RATING ---- */
 
.page-rate-widget-box {
     margin: unset;
     border-radius: 0;
     border: solid 2px #050a14;
     box-shadow: 3px 0px 0px 0px var(--accentColor);
     background-color: #050a14;
     margin-top: 4px;
     margin-bottom:4px;
     margin-right: 3px;
}
 
div.page-rate-widget-box .rate-points {
    background-color: #050a14;
    border: none;
    color: #ededed !important;
    text-transform: capitalize;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: #050a14;
    border-top: none;
    border-bottom: none;
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    background: transparent;
    color: #ededed;
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
    background: #050a14;
    color: var(--accentColor);
}
.page-rate-widget-box .cancel {
    background: transparent;
    background-color: #050a14;
    border: none;
}
.page-rate-widget-box .cancel a {
    color: #ededed;
}
.page-rate-widget-box .cancel a:hover {
    background: #050a14;
    color: var(--accentColor);
}
 
/* ---- PAGE ELEMENTS ---- */
 
.page-source, tt{
    font-family: "Courier Prime", monospace;
    font-size: 0.87rem;
}
 .code pre, .code p, .code {
    font-family: "Courier Prime", monospace;
    font-size: 0.87rem;
    color: #050a14;
}
 
h1 {
    color: var(--accentColor);
    font-family: 'New Tegomin', sans-serif;
    font-weight: bold;
}
h2,
h3,
h4,
h5,
h6 {
    color: #EDEDED;
    font-family: 'New Tegomin', sans-serif;
    font-weight: bold;
}
 
#page-title {
    color: #ededed;
    font-family: 'New Tegomin', sans-serif;
    font-size: 1.65rem;
    text-align: center;
    border-color: #ededed;
}
 
/* Clicky links */
a,
a.newpage,
a:visited,
#side-bar a {
    color: var(--accentColor);
    transition: color 0.15s linear;
}
a:hover, a.newpage:hover, a:visited:hover, #side-bar a:hover {
    color: #ffffff;
    text-decoration: none;
    background-color: var(--accentColor);
}
a.newpage { filter: hue-rotate(180deg); }
 
/* patch for sidebar media, collapsibles, ACS, info button and ayers module so link doesn't override */
#page-content .collapsible-block-folded a:hover, #page-content .collapsible-block-unfolded-link a:hover, #page-content .rate-box-with-credit-button .fa-info:hover, #side-bar .side-block.media a:hover, .danger-diamond a:hover {
    background: transparent;
}
.info-container .collapsible-block-folded .collapsible-block-link, .info-container .collapsible-block-link {
    background: var(--linkColour) !important;
}
 
hr{
    background-color: var(--accentColor);
}
 
blockquote,
div.blockquote,
#toc {
    background-color: #3a414f;
    border: solid 2px #2F333C;
    box-shadow: -3px 0px 0px -0.1px var(--accentColor);
}
 
.code {
    background-color: #F8F8F8;
    border: solid 3px #2F333C;
    box-shadow: none;
}
.scp-image-block {
    border: solid 8px #050a14;
    border-bottom: solid 0px #050a14;
    box-shadow: 0px 0.26rem 0px 0px var(--accentColor);
    box-sizing: border-box;
}
.scp-image-block .scp-image-caption {
    background-color: #050a14;
    border: solid 4px #050a14;
    color: #ededed;
    font-size: 0.84rem;
}
.scp-image-block.block-left { margin-left: 0; }
.scp-image-block.block-right { margin-right: 0; }
@media (max-width: 540px) {
  .scp-image-block.block-left, .scp-image-block.block-right {
    float: none; clear: both; margin-left: auto; margin-right: auto;
  }
}
 
#page-content .wiki-content-table tr th {
    border: solid 1px var(--accentColor);
    color: var(--accentColor);
    background-color: #050a14;
    /* set border for table title */
}
#page-content .wiki-content-table tr td {
    border: solid 1px var(--accentColor);
    /* set border for table content */
}
 
/* fancy collapsible */
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    background: #3a414f;
    transition: background 0.25s linear;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 1fr;
    white-space: nowrap;
    overflow: hidden;
    margin: auto;
}
#page-content .collapsible-block-folded .collapsible-block-link::before {
    content: "▷ ";
}
#page-content .collapsible-block-unfolded .collapsible-block-link::before {
    content: "▽ ";
}
#page-content .collapsible-block-link {
    text-decoration: none;
    color: #ededed;
    font-weight: bold;
}
#page-content .collapsible-block-folded:hover, #page-content .collapsible-block-unfolded-link:hover {
    background: var(--accentColor);
}
#page-content .collapsible-block-unfolded-link {
    box-shadow: 0px -0.26rem 0px 0px var(--accentColor);
}
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    margin-top: 10px;
    margin-bottom: 10px;
}
 
/* Selection */
::selection {
    background: var(--accentColor);
    color: #ffffff;
}
 
/* Footnotes */
.hovertip {
    font-size: .9rem;
    background-color: #050a14 !important;
    border: solid 1px var(--accentColor) !important;
}
.footnotes-footer {
    background-color: #050a14;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
    padding-bottom: 1.5rem;
    box-shadow: -0.24rem 0px 0px 0px var(--accentColor);
}
.footnotes-footer .title {
    color: #ededed;
}
.footnote .f-footer, .equation .e-footer, .reference .r-footer {
    display: none;
}
 
/* Tags */
#main-content .page-tags a {
    margin-top: .18rem;
}
.page-tags span {
    border-top: 1px solid #ededed;
}
 
/* Pop-Up Windows */
.owindow {
    background-color: #050a14;
    border-color: var(--accentColor);
}
 
.owindow .modal-header {
    background-color: #050a14;
}
 
.owindow .modal-body img {
    background-color: transparent !important;
}
 
.owindow .title {
    background-color: #050a14;
    color: #var(--accentColor);
    border-bottom: 1px solid #2F333C;
}
 
.owindow .button-bar a {
    background-color: #050a14;
    border-color: var(--accentColor);
    color: #ededed;
}
.owindow .button-bar a:hover {
    background-color: var(--accentColor);
}
 
/* Edit Buttons */
.buttons .btn {
    background-color: #050a14;
    border-color: var(--accentColor);
    color: var(--accentColor);
    padding: 3px 5px;
}
.buttons .btn:hover {
    background-color: var(--accentColor);
    color: #21252E;
}
 
/* Edit Lock Info*/
#lock-info {
    background-color: #050a14;
    border-color: #ededed;
}
 
/* Close Button for Page Source, Rating, Etc */
a.action-area-close:hover {
    background-color: #050a14;
}
 
/* Page-History Current */
.pager .current {
    background-color: var(--accentColor);
    border-color: #ededed;
}
 
/* ---- INTERWIKI ---- */
 
.scpnet-interwiki-frame{
    filter: invert(100%) grayscale(100%) contrast(75%);
}
 
/* ---- CUSTOM SYNTAX ---- */
 
.darkbox {
    background-color: #050a14;
    border-left: solid 0.26rem var(--accentColor);
    border-right: solid 0.26rem var(--accentColor);
    padding: .4rem;
    margin-top: 12px;
    margin-bottom:12px;
}
 
.lightbox {
    background-color: #ededed;
    color: #050a14;
    border-left: solid 0.26rem var(--accentColor);
    border-right: solid 0.26rem var(--accentColor);
    padding: .4rem;
    margin-top: 12px;
    margin-bottom:12px;
}
.lightbox h2, .lightbox h3, .lightbox h4, .lightbox h5, .lightbox h6 {
    color: #050a14;
}
 
.limit {
    margin-bottom: -1rem;
    z-index: 5;
 
}
.anchor {
    position: sticky;
    height:0;
    top: 0;
    z-index: 5;
}
.sidebox {
    background-color: #050a14;
    border-top: solid 2px var(--accentColor);
    padding: .14rem;
    margin-top: 0;
    margin-bottom: 8px;
    width: calc((100vw - 870px)/2);
    max-height: calc(100vh - 18rem);
    position: absolute;
    top: 0;
    left: 103.5%;
    z-index: 5;
    overflow: auto;
    box-sizing: border-box;
}
/* Sidebox mobile optimization, courtesy of Woed */
@media (max-width: 1290px) {
   .sidebox {
        width: auto;
        max-width: 65vw!important;
        border: none;
        padding-left: 0.4rem; padding-right: 0.4rem;
        top: 0.75rem;
        right: calc(((100vw - 45.8rem)/2) * -1);
        left: initial;
        -webkit-clip-path: inset(-0.125rem -0.25rem 0 calc(100% - 0.85rem));
        clip-path: inset(-0.125rem -0.25rem 0 calc(100% - 0.85rem));
        -webkit-transition: color 0.2s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s;
        transition: color 0.2s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s;
        -o-transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s;
        transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s;
        transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s;
        overflow: visible;
    }
 
    .sidebox::before, .sidebox::after {
        content: " ";
        position: absolute;
        right: 0;
    }
 
    .sidebox::before {
        top: calc(50% - 0.75rem);
        width: 0;
        height: 0;
        border-top: 0.75rem solid transparent;
        border-bottom: 0.75rem solid transparent;
        border-right: 0.75rem solid var(--accentColor);
        transition: border 0.1s ease-in-out 0.1s;
        z-index: 10;
    }
 
    .sidebox::after {
        top: 0;
        max-width: 0.75rem;
        width: 100%;
        height: 100%;
        box-shadow: 0.15rem 0 0 0 var(--accentColor);
        max-height: calc(100vh - 18rem);
        background-color: #050a14;
        z-index: -1;
        transition: box-shadow 0.5s ease-in-out 0.1s, max-width 0.5s ease-in-out 0.1s;
    }
 
    .sidebox > * {
        opacity: 0;
        -webkit-transition: opacity 0.2s ease-in-out 0.2s;
        -o-transition: opacity 0.2s ease-in-out 0.2s;
        transition: opacity 0.2s ease-in-out 0.2s;
    }
 
    .sidebox:hover {
        overflow: visible;
        -webkit-clip-path: inset(-0.125rem -0.25rem 0 0);
        clip-path: inset(-0.125rem -0.25rem 0 0);
        -webkit-transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s;
        transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s;
        -o-transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s;
        transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s;
        transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s;
    }
 
    .sidebox:hover::before {
        border-top: 0 solid transparent;
        border-bottom: 0 solid transparent;
    }
    .sidebox:hover::after {
        box-shadow: 0 -0.125rem 0 0 var(--accentColor);
        right: 0;
        max-width: 100%;
    }
    .sidebox:hover > * {
        opacity: 1;
    }
}
 
@media (max-width:768px) {
    .sidebox, .sidebox:hover {
        right: calc(((100vw - (100% - 3rem))/2) * -1 + 1.9rem);
    }
}
 
:root {
  --accentColor: #9e9e9e;
  --headerColor: #8a0101;
  --lgurl: url("https://scp-wiki.wdfiles.com/local--files/theme%3Aragnarok-theme/ragnarok1.png");
}

/* 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;
        pointer-events: auto;
}
 
@media not all and (max-width: 767px) {
 
    #top-bar .mobile-top-bar {
        display: block;
        pointer-events: none;
    }
 
    #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: -18rem;
        width: 15.25rem;
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        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;
    }
    }
}

/*
    Ragnarok Theme
    [2021 Wikidot Theme]
    By MalyceGraves
    Based on:
       Penumbra Theme by EstrellaYoshte
       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=New+Tegomin&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Changa&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');
@font-face {
     font-family: '닉스곤';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/NIXGONM-Vb.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
@font-face { font-family: '목우자수심결'; 
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_ten@1.2/TTMogujasusimgyeolR.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
 
body {
    font-family: 'Changa', '닉스곤', sans-serif;
}
 
#header h1 a::before, #header h2::before {
  font-family: 'New Tegomin', '목우자수심결', sans-serif;
}
 
#header h1 a::before {
  content: var(--header-title, "라그나로크");
}
#header h2::before {
  content: var(--header-subtitle, "만물의 종말");
}
 
#side-bar .heading{
    font-family: 'New Tegomin', '목우자수심결', sans-serif;
}
 
/* ---- PAGE ELEMENTS ---- */
 
.page-source, tt{
    font-family: "Courier Prime", monospace;
}
 .code pre, .code p, .code {
    font-family: "Courier Prime", monospace;
}
 
h1 {
    font-family: 'New Tegomin', '목우자수심결', sans-serif;
}
h2,
h3,
h4,
h5,
h6 {
    font-family: 'New Tegomin', '목우자수심결', sans-serif;
}
 
#page-title {
    font-family: 'New Tegomin', '목우자수심결', sans-serif;
}
 
:root {
  --accentColor: #9e9e9e;
  --headerColor: #8a0101;
  --lgurl: url("https://scp-wiki.wdfiles.com/local--files/theme%3Aragnarok-theme/ragnarok1.png");
}

en 테마

페이지 내역: 13, 마지막 수정: 06 Apr 2022 18:51

편집 평가 (0) 태그 토론하기 (0) 내역 파일 인쇄 사이트 도구 + 설정

SCP 재단

확보, 격리, 보호

정보

추가적인 정보

귀속:

사용법

제목 1단계

제목 2단계

제목 3단계

제목 4단계

제목 5단계

제목 6단계

제목 글꼴은 New Tegomin, 목우자수심결입니다.

소스코드