Dustjacket Theme

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 :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:theme:dustjacket]]

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.

Theme Colors

Palm Leaf--gray-monochrome(45, 70, 45)

Golden Yellow--bright-accent(255, 219, 90)

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

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

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

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

Surf--pale-gray-monochrome(178, 210, 180)

Envy--light-gray-monochrome(130, 160, 135)

Cardin Green--dark-gray-monochrome(30, 55, 30)

Gold Tips--medium-accent(228, 180, 28)

Dark Goldenrod--dark-accent(185, 150, 17)

Mango Tango--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}

Logo for The Wanderers' Library

Examples

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:

---

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="fancyborder"]]
content goes here
[[/div]]

Footnotes gain a "(" or "," in front of them.¹²

Footnotes

1. This allows you to put footnotes next to each other in more pleasing fashion.

2. Some browsers may not support this feature optimally.

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

+ Titles

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Tabulator

This is a tab view.

Tabulation

Hey look, more text here.

How quaint.

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.

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

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.
The Header and Title font is Zuijin.
The monospace font used is Adaptive Mono.

---

+ Show code

@import url("http://wanderers-library.wikidot.com/component:dustjacket-theme-typefaces/code/1");
@import url("https://use.typekit.net/tqr1skr.css");
@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.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: "The Wanderers' Library";
    --header-subtitle: " ";
    --diagonal-stripes: unset;
 
    /* Typefaces */
    --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;
 
    /* 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;
    }
}
}