Usage
This is a theme based on the current Wanderer's Library CSS Theme. For a theme based on the original Wanderer's Library CSS theme, see here.
Note: This is a Black Highlighter based theme. You will need to import the Black Highlighter theme as well in order to use this theme. To learn more go here.
To import this theme, add this to your page:
[[include :scpko:component:black-highlighter-theme-dev]]
[[include :scpko:component:dustjacket-theme]]
Usage of the collapsible sidebar module is suggested, if a user wishes their page to look closer to the appearance of the Wanderer's Library site.
테마 색상
예시
구분선은 하이픈(-) 5개 "-----"로 만들 수 있고 어떤 것 안에(예: 인용구) 들어있지 않다면 페이지 전체를 가로지릅니다. 이 줄은 이 문서의 구획을 나누는 구분선입니다.
대안적인 구분선은 "-----"을 "fancyhr" 클래스 div로 감싸면 됩니다. 다음을 보시죠.
[[div_ class="fancyhr"]]
----
[[/div]]
결과는 다음과 같습니다.
content goes here
[[/div]]
Footnotes gain a "(" or "," in front of them.12
타이틀은 1~6개의 "+"를 각 줄의 시작에 넣는 것으로 추가할 수 있습니다.
탭 뷰입니다.
봐요, 글자 더 있음.
대단하죠.
긴 탭입니다. 많은 글자가 들어가죠.
긴 탭입니다. 많은 글자가 들어가죠.
긴 탭입니다. 많은 글자가 들어가죠.
긴 탭입니다. 많은 글자가 들어가죠.
긴 탭입니다. 많은 글자가 들어가죠.
긴 탭입니다. 많은 글자가 들어가죠.
긴 탭입니다. 많은 글자가 들어가죠.
긴 탭입니다. 많은 글자가 들어가죠.
긴 탭입니다. 많은 글자가 들어가죠.
긴 탭입니다. 많은 글자가 들어가죠.
긴 탭입니다. 많은 글자가 들어가죠.
긴 탭입니다. 많은 글자가 들어가죠.
이것은 인용구로 각 줄의 시작에 ">"를 넣으면 작동합니다.
글자
구분선
이중 인용구
이것은 | 테이블 |
---|---|
만드는 법은 | 아실거라 |
믿습니다. |
본문 글꼴은 나눔고딕과 Adelle Sans입니다.
제목 글꼴은 HS봄바람체와 Zuijin입니다.
고정폭 글꼴은 은타이프와 Adaptive Mono입니다.
@import url("http://wanderers-library.wikidot.com/component:dustjacket-theme-typefaces/code/1"); @import url("https://use.typekit.net/tqr1skr.css"); @import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/normalize.min.css"); @import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/black-highlighter.min.css"); @import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'); @import url('https://fonts.googleapis.com/css?family=Nanum+Gothic'); @import url('http://wanderers-library-ko.wdfiles.com/local--files/component%3Atheme/HSBombaram.css'); @import url('http://scpko.wdfiles.com/local--files/unfont/UnTaza.css'); @supports(--css:variables) { :root { /* S-CSS-P Integration */ --theme-base: "nuscp"; --theme-id: "dustjacket-theme"; --theme-name: "Dustjacket Theme"; /* Header */ --logo-image: url("http://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/wl_logo.png"); --header-title: "방랑자의 도서관"; --header-subtitle: " "; --diagonal-stripes: unset; /* Typefaces */ --body-font: 'Nanum+Gothic', adelle-sans, 'Lato', sans-serif; --header-font: 'HSBombaram', 'zuijinregular', 'Poppins', sans-serif; --title-font: 'HSBombaram', 'zuijinregular', 'Poppins', sans-serif; --mono-font: adaptive-mono, "PT Mono", "Andale Mono", "Courier New", Courier, 'UnTaza', monospace; /* Standard Colors */ --pale-gray-monochrome: 178, 210, 180; --light-gray-monochrome: 130, 160, 135; --gray-monochrome: 45, 70, 45; --dark-gray-monochrome: 30, 55, 30; --bright-accent: 255, 219, 90; --medium-accent: 228, 180, 28; --dark-accent: 185, 150, 17; --newpage-color: 221, 102, 17; /* Primary Menu Colors */ --swatch-menubg-hover-color: var(--dark-gray-monochrome); --swatch-menutxt-dark-color: var(--dark-gray-monochrome); --swatch-menutxt-light-color: var(--bright-accent); --swatch-border-color: var(--medium-accent); /* Primary Header Colors */ --swatch-topmenu-border-color: var(--bright-accent); --swatch-topmenu-bg-color: var(--dark-gray-monochrome); /* Link Colors */ --link-color: var(--pale-accent); --rating-module-button-color: var(--bright-accent); --rating-module-text-color: var(--bright-accent); --gradient-sidemenu-header: linear-gradient(10deg, rgba(var(--dark-gray-monochrome), 0.65) 0%, rgba(var(--dark-gray-monochrome), 0.75) 100%); --barColour: rgb(var(--gray-monochrome)); --linkColour: rgb(var(--medium-accent)); } /* HIGHLIGHTING */ ::-moz-selection { background: rgba(var(--bright-accent), 0.5); } ::selection { background: rgba(var(--bright-accent), 0.5); } /* LINKS */ a { color: rgb(var(--swatch-primary-darker)); } a:hover, a:active, a:visited { color: rgb(var(--swatch-primary-darkest)); } /* HEADER */ div#extra-div-1, div#extra-div-2 { position: absolute; display: block; width: 100%; height: 7.5rem; top: 0; left: 0; } div#extra-div-1 { background-image: url("http://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/wlheader_bg.png"); background-size: 31.250rem; z-index: -1; mix-blend-mode: hard-light; } div#extra-div-2 { background: var(--gradient-header); background-size: var(--header-background-image-size); background-repeat: repeat; z-index: -2; } #header h1 a { margin-left: 7.75rem; margin-top: 0.6em; font-size: 175%; overflow-wrap: normal; } #header h1 a::before { content: "The Wanderers' Library"; content: var(--header-title); color: rgb(var(--bright-accent)); text-shadow: inherit; background: url(http://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/goldfoil.png); background-size: cover; -webkit-background-clip: text; -webkit-text-fill-color: transparent; overflow-wrap: normal; } #header h2 { display: none; } /* Search Bar */ #search-top-box-form * { font-family: var(--header-font); font-weight: 600 !important; letter-spacing: 0.05em; } #search-top-box-form { display: inline-flex; justify-content: center; position: absolute; height: 1.3rem; top: 47%; right: 3%; width: auto; text-align: center; justify-items: center; align-content: center; align-items: center; padding-top: 0.4rem !important; } #search-top-box input.empty { color: rgba(var(--swatch-menutxt-light-color), 0.5); } #search-top-box-form > input, #search-top-box-form > input[type="submit"] { min-height: 1.3rem; height: 1.3rem; padding: .25rem; margin: 0; box-sizing: border-box; flex-grow: 1; display: flex; font-weight: 500; } input.button.btn { padding-top: 0.1em !important; } /* Log-In Info */ #login-status { color: rgb(var(--swatch-menubg-light-color)); font-weight: 600; letter-spacing: 0.05em; } #login-status * { font-family: var(--header-font); letter-spacing: 0.05em; } /* TOPBAR */ #top-bar div.top-bar > ul > li > a, #top-bar div.mobile-top-bar > ul > li > a { font-family: var(--header-font); text-transform: uppercase; } #top-bar div.top-bar > ul > li > ul > li > a, #top-bar div.mobile-top-bar > ul > li > ul > li > a { font-weight: 700; color: rgb(var(--swatch-menutxt-dark-color)); } #top-bar div.top-bar > ul > li > ul, #top-bar div.mobile-top-bar > ul > li > ul { background: rgba(var(--pale-gray-monochrome), 0.93); } #top-bar div.top-bar > ul > li > ul > li > ul > li > a:hover, #top-bar div.mobile-top-bar > ul > li > ul > li > ul > li > a:hover { background: transparent; } #top-bar div.top-bar > ul > li > ul > li > a::before, #top-bar div.top-bar > ul > li > ul > li > ul > li > a::before, #top-bar div.top-bar > ul > li > ul > li > a:hover::before { background-color: rgba(var(--bright-accent), 1); } #top-bar > div.mobile-top-bar > div.open-menu > p > a { color: rgb(var(--medium-accent)) !important; } /* SIDEBAR */ #side-bar .heading { font-family: var(--header-font); } #side-bar div.menu-item a::before, #side-bar div.menu-item a:hover::before { background-color: rgb(var(--gray-monochrome),0.25); } /* Page-Options */ div#page-options-bottom > a, div#page-options-bottom-2 > a { background-color: rgba(var(--swatch-menubg-dark-color), 1); border: 0.08rem solid rgba(var(--swatch-primary), 1); color: rgba(var(--swatch-primary), 1); font-weight: 700; } div#page-options-bottom > a:hover, div#page-options-bottom > a:active, div#page-options-bottom-2 > a:hover, div#page-options-bottom-2 > a:active { background-color: rgba(var(--swatch-menubg-light-color), 0.85); color: rgba(var(--swatch-primary), 1); } /* Footer */ #footer { width: calc(100% - 1.25rem); color: rgb(var(--swatch-menubg-dark-color)); } #footer a { color: inherit; } /* Page-Tags */ #main-content .page-tags { border-top: 2px solid rgb(var(--dark-accent)); } #main-content .page-tags a { display: inline-block; height: 0.8125rem; line-height: 13px; line-height: 0.8125rem; font-size: 11px; font-size: 0.6875rem; background: rgb(var(--gray-monochrome)); color: rgb(var(--bright-accent)); border-bottom-right-radius: 0.25rem; border-top-right-radius: 0.25rem; margin: 0 0 .5rem .75rem; padding: 0.1875rem 0.3125rem 0.1875rem 0; } #main-content .page-tags a:before { top: -0.1875rem; left: -0.625rem; width: 0; height: 0; border-color: transparent rgb(48, 48, 52) transparent transparent; border-color: transparent rgb(var(--gray-monochrome, 45, 70, 45)) transparent transparent; border-style: solid; border-width: 0.5rem 0.5rem 0.5rem 0; padding: 0 0.0625rem 0.1875rem; } #main-content .page-tags a:before, #main-content .page-tags a:after { content: ""; float: left; position: relative; } #main-content .page-tags a:after { --box-shadow: rgb(var(--gray-monochrome, 45, 70, 45)); top: 0.28125rem; left: -0.5rem; width: 0.25rem; height: 0.25rem; border-radius: 0.125rem; background-color: rgb(var(--bright-accent, 255, 219, 90)); box-shadow: -0.0625rem -0.0625rem 0.125rem var(--box-shadow); } .page-tags span { border-top: .5rem solid transparent; } /* Rating and Info Modules */ .page-rate-widget-box, #page-content .rate-box-with-credit-button { background: linear-gradient(to top, rgba(var(--swatch-menubg-dark-color), 1) 0, rgba(var(--swatch-menubg-medium-color), 1) 100%); font-family: var(--header-font); letter-spacing: 0.05em; } .page-rate-widget-box .rate-points, .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown, .page-rate-widget-box .cancel, .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a { font-weight: 500; } #page-content .rate-box-with-credit-button > .creditButton > p > a::before { background-color: rgb(var(--rating-module-button-color)); } /* Blockquotes, Horizontal Rules and Special Divs*/ .blockquote, blockquote { background: rgb(var(--pale-gray-monochrome)); border: 3px outset rgb(var(--medium-accent)); } hr { height: .125rem; border: 0; border-top: .063rem solid transparent; background-color: rgba(var(--bright-accent)); background: url(http://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/goldfoil.png); background-size: cover; } .fancyhr hr { border-top: 2vw solid transparent; background-color: rgba(var(--bright-accent), 0); height: 0; box-sizing: border-box; border-image-source: url(http://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/wl_hr.png); border-image-repeat: round round; background: none; border-image-slice: 80 500 80 500 fill; border-image-width: 10em 80em 10em 80em; } .fancyborder { box-sizing: border-box; border: 2vw solid rgba(0,0,0,0.5); border-image: url(http://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/wl_border.png) 600 round; border-image-width: 6; padding: 2vw; } /* footnote by 7happy7 */ span:not([class]):not([style]) > sup.footnoteref:first-child > a.footnoteref:before, sup.footnoteref > a.footnoteref:before { content: "("; } span:not([class]):not([style]) > sup.footnoteref > a.footnoteref:before { content: ","; } /* Adjusts footnote block at bottom to fit the Hand format better, rather than BHL Default */ .footnotes-footer { width: unset; margin: unset; padding: 20px; background-color: #EEF6EE; border: solid 1px #112211; } /* MOBILE ELEMENTS */ @media only screen and (max-width: 768px) { #header h1 a, #header h2 span { margin-left: 7.75rem; margin-top: 0.35em; } #header h1 a { line-height: 1; } #header h2 span { margin-top: calc(3.4rem + var(--offset-from-page-top)); } div#extrac-div-1 { background-image: url(http://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/wlheader_bg.png); background-size: 31.250rem; z-index: 3; } div#extrac-div-1, div#extrac-div-2 { position: absolute; display: block; width: 100%; height: 7.5rem; top: 0; left: 0; } div#extrac-div-3::before { text-shadow: inherit; background: url(http://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/goldfoil.png); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; content: var(--header-title); font-family: var(--header-font); font-size: 170%; width: 95%; height: 3rem; display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; background-color: transparent; text-align: center; font-weight: 700; } div#extrac-div-3 { display: block; position: static; z-index: 1; background-color: transparent; } div#extrac-div-2 > span { display: flex; top: 0; right: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 3rem; box-sizing: inherit; background: var(--gradient-topmenu-mobile, linear-gradient(to bottom, rgba(var(--swatch-topmenu-border-color), 1) 0, rgba(var(--swatch-topmenu-bg-color), 1) 0.125rem, rgba(var(--swatch-topmenu-bg-color), 1) calc(3rem - 0.125rem), rgba(var(--swatch-topmenu-bg-color), 1) calc(3rem - 0.125rem), rgba(var(--swatch-topmenu-border-color), 1) 3rem)); background-size: 100% 10.375rem; align-items: center; position: sticky; margin-top: 7.5rem; background-color: transparent; } div#extra-div-2::before { content: " "; width: 100%; height: 100%; } div#extrac-div-2 { position: absolute; width: 100%; height: 100%; pointer-events: none; top: 0; left: 0; z-index: 0; } #search-top-box { width: 12.5rem; } #search-top-box-form { top: 0; right: 0; align-items: initial; } } }