Dustjacket Sigma-9 Theme

Link to article: Dustjacket Sigma-9 Theme.

@import url('https://scp-wiki.wdfiles.com/local--code/theme:dustjacket-sigma/1');

```
font-family: var(--header-font);
```
```
font-family: var(--mono-font);
```

```
fancyhr
```
```
fancyhr
```
```
fancyborder
```
```
code
```
```
fancyborder
```

[[module CSS]]
@import url('https://scp-wiki.wdfiles.com/local--code/theme:dustjacket-sigma/1');
[[/module]]

[[iftags +theme]]
[[>]]
**Rating:**
[[module Rate]]
[[/>]]

[[>]]
**Rating w/ Credit Module:**
[[/>]]

[[include :scp-wiki:info:start]]
Info about your page.
[[include :scp-wiki:info:more]]
More information about your page.
[[include :scp-wiki:info:end]]

+ Usage

This is a Sigma-9 theme based on the current [http://wanderers-library.wikidot.com Wanderer's Library] CSS Theme. For the BHL version of this theme, [[[theme:dustjacket|see here]]]. For a theme based on the original Wanderer's Library CSS theme, [[[theme:wanderers|see here]]].

This theme is intended to be applied to the articles related to the Wanderers' Library, such as the [[[goi-formats#sh|Serpent's Hand formats]]].

To import this theme to your page, put the following anywhere inside it:

> @@[[include :scp-wiki:theme:dustjacket-sigma]]@@

You can view any page's Backlinks by clicking "+ Options" at the bottom of the page, then "Backlinks".

+ Examples

[[include component:image-block name= https://wanderers-library.wdfiles.com/local--files/component%3Atheme/wandererslibary_logobg.png|caption=Logo for The Wanderers' Library|width=200px]]

A horizontal rule can be created with 4 hyphens "@@----@@" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.

----

An alternative horizontal rule is available as well if the "@@----@@" is enclosed in a "fancyhr" class div, like so:
> @@[[div_ class="fancyhr"]]@@
> @@----@@
> @@[[/div]]@@

Resulting in this:

[[div_ class="fancyhr"]]
----
[[/div]]

[[div_ class="fancyborder"]]
There is also a special border that can be enabled by adding the "fancyborder" class to any element. For instance, this is the code to this block:
[[div_ class="code"]]
@@[[div_ class="fancyborder"]]@@
@@content goes here@@
@@[[/div]]@@
[[/div]]
[[/div]]

Footnotes gain a "(" or "," in front of them.[[footnote]]This allows you to put footnotes next to each other in more pleasing fashion.[[/footnote]][[footnote]]Some browsers may not support this feature optimally.[[/footnote]]

[[footnoteblock]]

Titles can be created by putting between one and six plus "+" at the start of the line

[[collapsible show="+ Titles" hide="- Titles"]]
+ First Title

++ Second Title

+++ Third Title

++++ Fourth Title

+++++ Fifth Title

++++++ Sixth Title
[[/collapsible]]

@@ @@

[[tabview]]
[[tab Tabulator]]
This is a tab view.

[[/tab]]
[[tab Tabulation]]
Hey look, more text here.

How quaint.
[[/tab]]
[[tab Long Tab]]
This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[/tabview]]

> This is a blockquote, created by putting "> " at the start of each line.
>
> More text
> -----
> That's a horizontal rule
>
>> Nested blockquotes

||~ This is a ||~ table ||
||You should know || how to make these ||
||||already ||

[[=]]
The body font is Adelle Sans.
[[span style="font-family: var(--header-font);"]]The Header and Title font is Zuijin.[[/span]]
[[span style="font-family: var(--mono-font);"]]The monospace font used is Adaptive Mono.[[/span]]
[[/=]]

-----

+ Source code

[[code type="css"]]
/*
    Sigma-9 Wanderers' DustJacket Theme
    [2020 Wikidot Theme]
    By DrMacro
    Adapted from Wanderers' DustJacket Theme by Woedenaz
    Based on SCP Sigma 9 Theme created by Aelanna and Dr Devan
*/

@import url("https://wanderers-library.wikidot.com/component:dustjacket-theme-typefaces/code/1");
@import url("https://use.typekit.net/tqr1skr.css");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");

:root {
    --body-font: adelle-sans, 'Lato', sans-serif;
    --header-font: 'zuijinregular', 'Poppins', sans-serif;
    --title-font: 'zuijinregular', 'Poppins', sans-serif;
    --mono-font: adaptive-mono, "PT Mono", "Andale Mono", "Courier New", Courier, monospace;
    --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;

    --gradient-header:
           linear-gradient(to bottom, rgba(var(--dark-gray-monochrome), 1) 0%,
           rgba(var(--dark-gray-monochrome), 1) 30%,
           rgba(var(--bright-accent)) 100%);
    --gradient-sidemenu-header: linear-gradient(10deg, rgba(var(--medium-accent), 0.45), rgba(var(--medium-accent), 0.55));

    scrollbar-color: rgb(var(--medium-accent)) rgb(var(--dark-gray-monochrome));
}

/* HEADER */
div#container-wrap {
    background-image: url(none);
}

div#extra-div-1,
div#extra-div-2 {
    position: absolute;
    display: block;
    width: 100%;
    height: 140px;
    top: 0;
    left: 0;
}

div#extra-div-1 {
    background-image: url("https://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: 31.250rem;
    background-repeat: repeat;
    z-index: -2;
}

div#extra-div-3 {
    height: 22px;
    width: 100%;
    top: 140px;
    position: absolute;
    background-color: rgb(var(--gray-monochrome));
    background-image: rgb(var(--gray-monochrome));
    border-top: solid 1px rgb(var(--bright-accent));
    border-bottom: solid 1px rgb(var(--bright-accent));
} /* Green top bar */

#header {
    background: url('https://scp-wiki.wdfiles.com/local--files/theme:dustjacket-sigma/wl_logo.png') 13px 41px no-repeat;
    background-size: 94px 94px;
}
#header > h1 > a > span {
    display: none;
}
#header h1 a {
    color: transparent;
    text-shadow: none;
    padding: 85px 0 25px;
    font-size: 140%;
    font-family: var(--header-font);
}
#header h1 a::before {
    content: "The Wanderers' Library";
    color: rgb(var(--bright-accent));
    text-shadow: inherit;
    background: url('https://scp-wiki.wdfiles.com/local--files/theme:dustjacket-sigma/goldfoil.png');
    background-size: cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    overflow-wrap: normal;
    font-size: 125%;
}

#header h2 span {
    display: none;
}

@media (max-width: 767px) {
    #header {
        background: url('https://scp-wiki.wdfiles.com/local--files/theme:dustjacket-sigma/wl_logo.png') 2px 72px no-repeat;
        background-size: 50px 50px;
    }
    #header h1 a {
        font-size: 65%;
        padding: 95px 0px;
    }
}

/* LOG-IN INFO */
#login-status {
    color: rgb(var(--pale-gray-monochrome));
    font-weight: 600;
    letter-spacing: 0.05em;
}

#login-status * {
    font-family: var(--header-font);
    letter-spacing: 0.05em;
}

#login-status ul a {
    color: rgb(var(--dark-gray-monochrome));
    background: rgb(var(--pale-gray-monochrome));
}

/* SEARCH BAR */
 #search-top-box-input {
     background-color: rgb(var(--gray-monochrome));
     border: solid 1px rgb(var(--medium-accent));
     border-radius: 0;
}
#search-top-box input.empty {
    color: rgba(var(--bright-accent), 0.5);
}
 #search-top-box-input:hover, 
 #search-top-box-input:focus {
     background: rgb(var(--light-gray-monochrome));
     border: solid 1px rgb(var(--bright-accent));
     border-radius: 0;
}
 #search-top-box-form input[type=submit] {
     background: linear-gradient(to bottom, rgb(var(--bright-accent)),rgb(var(--medium-accent)),rgb(var(--dark-accent)));
     background-color: rgb(var(--dark-accent));
     color: white;
     transition: color 0.25s;
     border: solid 1px rgb(var(--medium-accent));
     border-radius: 0;
}
 #search-top-box-form input[type=submit]:hover, 
 #search-top-box-form input[type=submit]:focus {
     background: linear-gradient(to bottom, rgb(var(--bright-accent)),rgb(var(--medium-accent)),rgb(var(--dark-accent)));
     background-color: rgb(var(--dark-accent));
     color: rgb(var(--gray-monochrome));
     border: solid 1px rgb(var(--medium-accent));
     border-radius: 0;
}

@media (max-width: 767px) {
    #search-top-box {
         top: 115px;
         right: -10px;
    }
}

/* TITLE */ 
#page-title {
    font-size: 210%;
    font-family: 'IMB Plex Mono';
    font-weight: 600;
}

h1, h2, h3, h4, h5, h6, #page-title {
    font-family: var(--title-font);
    color: rgb(var(--black-monochrome));
}
h1 {
    margin: .7em 0 .6em;
    padding: 0 0 .25em;
    font-weight: 700;
}
h2, h3, h4, h5, h6 {
    margin: .5em 0 .4em;
    padding: 0;
    font-weight: 900;
    letter-spacing: .063rem;
}

@media (max-width: 767px) {
    #page-title {
        font-size: 180%
    }
}

/* TOP-BAR SETTINGS */
#top-bar ul li ul {
    border-color: rgb(var(--medium-accent));
}
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
    background: rgb(var(--pale-gray-monochrome));
    border-top: 1px solid rgb(var(--medium-accent));
    padding: 0.3em;
    padding-left: 0.5em;
    color: rgb(var(--dark-gray-monochrome));
    font-family: var(--body-font);
    font-size: 0.7rem;
}
#top-bar ul li a {
    color: rgb(var(--bright-accent));
    font-family: var(--header-font);
    font-size: 0.8rem;
}
#top-bar ul li.sfhover a {
    color: rgb(var(--bright-accent));
    border-top: solid 1px rgb(var(--bright-accent));
    font-family: var(--header-font);
    font-size: 0.8rem;
}

#top-bar ul li:hover a {
    background: rgb(var(--gray-monochrome));
    color: rgb(var(--bright-accent));
}
#top-bar ul li ul a, #top-bar a:hover {
    color: rgb(var(--pale-gray-monochrome));
}
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
    background: rgb(var(--gray-monochrome));
    color: rgb(var(--bright-accent));
}
#top-bar ul li ul.sfhover a:hover,
#top-bar ul li ul:hover a:hover {
    background: rgb(247, 213, 83);
    color: rgb(var(--dark-gray-monochrome));
    font-weight: bold;
}
.topbar_arrow {
    color: rgb(var(--dark-gray-monochrome));
}

/* SIDE-BAR SETTINGS */
#side-bar .side-block {
    border-color: rgb(var(--dark-accent));
    background-color: white;
    box-shadow: 0 2px 6px rgba(var(--dark-accent),.5);
}

#side-bar .side-block.media {
    background-color: rgb(248, 241, 218) !important;
}

#side-bar .side-block.resources {
    background-color: rgb(246, 234, 196) !important;
}

div.scpnet-interwiki-wrapper {
    filter: hue-rotate(90deg);
}

#side-bar .heading {
    font-size: 1rem;
    color: rgb(var(--dark-accent));
    border-bottom-color: rgb(var(--dark-accent));
    font-family: var(--header-font);
}

/* SIDE-BAR IMAGES */
.side-block .menu-item > .image {
    filter: hue-rotate(-171deg);
}

/* Patch pour hover imbriqué */
#top-bar ul li ul li ul {
    left: 159px;
}

/* MOBILE SIDE-BAR */
@media (max-width: 767px) {
#side-bar {
    background-color: rgb(var(--pale-gray-monochrome))
}
#top-bar .open-menu a {
    border: 0.2em solid rgb(var(--bright-accent));
    background-color: rgb(var(--gray-monochrome));
    color: rgb(var(--bright-accent));
    }
}

/* BODY */
body {
    background-color: rgb(var(--white-monochrome));
    font-family: var( --body-font);
}

#page-content {
    font-size: .835rem;
    letter-spacing: .3px;
    word-spacing: .8px;
}

/* FOOTER */
#footer {
    background: rgb(var(--dark-accent));
    color: rgb(var(--dark-gray-monochrome));
}

#footer a {
    color: rgb(var(--dark-gray-monochrome));
} 

/* OTHER STRUCTURAL ELEMENTS */

/* LINKS */
a {
    color: rgb(var(--medium-accent));
    font-weight: bold;
}
a:visited {
    color: rgb(var(--dark-accent));
}
#side-bar a,
#side-bar a:visited,
#side-bar a.newpage {
    color: rgb(93, 111, 93);
}
blockquote a,
div.blockquote a {
    color: rgb(var(--dark-accent));
}
blockquote a:visited,
div.blockquote a:visited {
    color: rgb(153, 123, 15);
}

/* CODE */
.code {
    background-color: rgb(var(--pale-gray-monochrome));
}

/* RATING MODULE */
#page-content .page-rate-widget-box {
    font-size: .8rem;
}

div.page-rate-widget-box .rate-points {
    background-color: rgb(var(--gray-monochrome));
    border-color: rgb(var(--dark-gray-monochrome));
    color: rgb(var(--bright-accent));
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: rgb(var(--pale-gray-monochrome));
    border-top-color: rgb(var(--dark-gray-monochrome));
    border-bottom-color: rgb(var(--dark-gray-monochrome));
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    background: transparent;
    color: rgb(var(--gray-monochrome));
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
    background: rgb(var(--gray-monochrome));
    color: rgb(var(--bright-accent));
}
.page-rate-widget-box .cancel {
    background: transparent;
    background-color: rgb(var(--gray-monochrome));
    border-color: rgb(var(--dark-gray-monochrome));
}
.page-rate-widget-box .cancel a {
    color: rgb(var(--light-gray-monochrome));
}
.page-rate-widget-box .cancel a:hover {
    background-color: rgb(var(--gray-monochrome));
    color: rgb(var(--bright-accent));
}

/* CREDIT MODULE */
#page-content .rate-box-with-credit-button {
    background-color: rgb(var(--gray-monochrome));
    border-color: rgb(var(--dark-gray-monochrome));
}
#page-content .rate-box-with-credit-button .creditButton p a {
    border-left-color: rgb(var(--light-gray-monochrome))
}
#page-content .rate-box-with-credit-button .creditButton a {
    color: rgb(var(--bright-accent));
}
#page-content .rate-box-with-credit-button .creditButton a:hover {
    color: rgb(var(--light-gray-monochrome));
}

#page-content .modalbox {
     background: white !important;
     color: rgb(var(--black-monochrome));
     box-shadow: 0 2px 6px rgba(var(--dark-accent),.5);
}

.close-credits,
.credit-back {
    filter: hue-rotate(-171deg);
}

/* PAGE ELEMENTS */

/* BLOCKQUOTES */
blockquote, 
div.blockquote {
       background: rgb(var(--pale-gray-monochrome));
       border: 3px outset rgb(var(--medium-accent));
}

/* HORIZONTAL RULES */
hr {
    border: 0;
    border-top: .063rem solid transparent;
    background-color: rgba(var(--bright-accent));
    background: url('https://scp-wiki.wdfiles.com/local--files/theme:dustjacket-sigma/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('https://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('https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/wl_border.png') 600 round;
    border-image-width: 6;
    padding: 2vw;
}

/* TABLES */
table.wiki-content-table th {
    color: rgb(var(--bright-accent));
    background-color: rgb(var(--light-gray-monochrome));
    border-color: rgb(108, 138, 112);
}

/* 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 */
.footnotes-footer {
    width: unset;
    margin: unset;
    padding: 20px;
    background-color: #EEF6EE;
    border: solid 1px #112211;
}

/* TABVIEW */
.yui-navset .yui-content {
    border-color: rgb(var(--light-gray-monochrome));
    border-top-color: rgb(var(--medium-accent));
    background-color: rgb(234, 242, 234);
    font-weight: normal;
}
.yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav {
    border-bottom: 0.3em solid rgb(var(--medium-accent));
}
.yui-navset .yui-nav a, 
.yui-navset .yui-navset-top .yui-nav a {
    background-image: none;
    background-color: rgb(var(--pale-gray-monochrome));
    font-weight: normal;
}
.yui-navset .yui-nav a:hover, 
.yui-navset .yui-nav a:focus {
    background: rgb(var(--dark-accent));
    color: white;
}
.yui-navset .yui-nav .selected a, 
.yui-navset .yui-nav .selected a:focus, /* Pas d'effet focus/hover pour tab sélectionné */
.yui-navset .yui-nav .selected a:hover {
    background-image: none !important;
    background: rgb(var(--medium-accent));
    border-color: rgb(var(--medium-accent));
    color: white;
}
.yui-navset li {
    line-height: normal;
}
/* Bordures onglets */
.yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a {
    border: 1.2px solid rgb(var(--medium-accent));
    padding: 0.15em;
}
.yui-navset .yui-nav a em, .yui-navset .yui-navset-top .yui-nav a em {
    border: none !important;
}

/* IMAGE BLOCK */
.scp-image-block .scp-image-caption {
    background-color: rgb(var(--pale-gray-monochrome));
}

/* HIGHLIGHTING */
::-moz-selection {
    background: rgba(var(--bright-accent), 0.5);
}
 
::selection {
    background: rgba(var(--bright-accent), 0.5);
}

/* 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;
    font-weight: normal;
    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;
}

[[/code]]
[[/iftags]]

Dustjacket Sigma-9 Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source