Wanderers Depths Theme

Wanderer's Depths!

This is the Wanderer's Depths theme. It was made for the Wanderers Depths Contest

How to include

To put this theme on your page, slap this somewhere in your page:

[[include :wanderers-library:component:wanderers-depths]]

Theme Components

---

The body font is Lato.
The Header font is Trade Winds.
The Title font is Trade Winds.
The monospace font used is PT Mono.

---

Here's some links for you:

• Visited link
• Unvisited link
• Missing link

---

Examples

A horizontal rule can be created with 5 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.

---

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, text in a tab. Cool!

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

And another¹

---

There is a custom div to look like paper. An example of it is below.

[[div class="paper"]]




[[/div]]

---

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

——

+ Click to see code

/* Wanderer's Depths Theme */
/* 2020 Wikidot Theme */
/* By ROUNDERHOUSE, based off Dustjacket by Woedenaz and Croquembouche */
/* Logo by Bard Bard, using art from SunnyClockwork, licensed under CC BY SA 3.0 */
/* Header background CC BA SA 3.0, edited by ROUNDERHOUSE. */
 
/* Fonts */
 
@import url('https://fonts.googleapis.com/css?family=Trade+Winds&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');
 
/* All Vars Used */
 
:root {
    /* S-CSS-P Integration */
    /* If you're making a new CSS theme, please include the following three variables at minimum. */
    --theme-base: "nuscp";
    /* must be either "nuscp" or "sigma9" */
    --theme-id: "WanderersDepths";
    /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
    --theme-name: "Wanderer's Depths";
    /* set this to your theme's full name */
 
    /* Header */
    --logo-image: url("https://wanderers-library.wikidot.com/local--files/component:wanderers-depths/anchor.png");
    /* Logo image made by Bard Bard using elements from SunnyClockwork, all licensed under CC BY SA 3.0 */
    --header-title: "WANDERER'S DEPTHS";
 
    /* Typefaces */
    --header-font: 'Trade Winds', cursive;
    --title-font: 'Trade Winds', cursive;
    --mono-font: "PT Mono", "Andale Mono", "Courier New", Courier, monospace;
 
    /* Standard Colors */
    --white-monochrome: 252, 252, 252;
    /* white */
    --pale-gray-monochrome: 244, 244, 244;
    /* v light gray for blockquotes and stuff */
    --light-gray-monochrome: 170, 170, 170;
    /* light accent gray for login status */
    --gray-monochrome: 66, 66, 72;
    /* gray */
    --dark-gray-monochrome: 48, 48, 52;
    /* dark accent gray for sidebar background */
    --black-monochrome: 12, 12, 12;
    /* black */
    --bright-accent: 255, 219, 90;
    /* bright yellow */
    --bright-two: 31, 101, 193;
    /* bright blue */
    --medium-accent: 12, 64, 122;
    /*  blue */
    --dark-accent: 0, 63, 96;
    /* dark blue */
    --newpage-color: 221, 102, 17;
    /* pale orange */
 
    /* Primary Theme Colors */
    --swatch-background: var(--white-monochrome);
    --swatch-primary: var(--medium-accent);
    --swatch-primary-darker: var(--bright-accent);
    --swatch-primary-darkest: var(--bright-two);
    /* Primary Text Colors */
    --swatch-text-dark: var(--black-monochrome);
    --swatch-text-light: var(--white-monochrome);
    --swatch-important-text: var(--bright-accent);
 
    /* Primary Header Colors */
    --swatch-headerh1-color: var(--white-monochrome);
    --swatch-headerh2-color: var(--white-monochrome);
    --swatch-topmenu-border-color: var(--bright-accent);
    --swatch-topmenu-bg-color: var(--medium-accent);
 
    --rating-module-button-color: var(--bright-accent);
    --rating-module-text-color: var(--bright-accent);
 
    /* Interwiki */
    --head: var(--medium-accent);
    --link: var(--bright-two);
 
    /* Contrast Adjustments */
    --sidebar-links-hover-text-color: var(--bright-accent);
    --ui-button-hover-txt: var(--bright-two);
    --dropdown-links-hover-color: var(--pale-gray-monochrome);
    --ui-button-hover-bg: var(--pale-gray-monochrome);
 
}
 
#login-status #account-options {
    width: auto;
    padding: 0.5em;
    border-color: rgba(var(--bright-accent));
    background: rgba(var(--dark-gray-monochrome), 0.5);
    color: rgb(var(--bright-accent));
    --login-dropdown-text-hover-color: var(--pale-gray-monochrome);
}
 
#content-wrap {
    background-image: url(https://wanderers-library.wikidot.com/local--files/component:wanderers-depths/paperbodybg.jpg);
}
 
div#extra-div-1 {
    background-image: url(https://wanderers-library.wikidot.com/local--files/component:wanderers-depths/waterbg.png);
    background-size: contain;
    background-repeat: repeat-x;
}
 
#top-bar {
  --dropdown-links-hover-color: var(--pale-gray-monochrome);
  --dropdown-links-hover-bg-color:  var(--bright-accent);
}
 
#top-bar div.top-bar > ul > li > a {
    padding: 0.2em 1em;
}
 
#top-bar div.top-bar > ul > li > ul {
    background: rgba(var(--dark-gray-monochrome), 1);
}
 
#top-bar div.top-bar > ul > li > ul > a {
    color: rgb(var(--bright-accent));
}
 
#side-bar {
  --sidebar-links-text: var(--pale-gray-monochrome);
  --sidebar-links-hover-text-color: var(--bright-accent);
  --sidebar-collapsible-fld-link-hover-bg: var(--medium-accent);
  --sidebar-links-hover-bg-color: var(--bright-accent);
 
}
 
#main-content {
   --toc-body-link-color: var(--bright-accent);
  --toc-body-link-hover-color: var(--pale-gray-monochrome);
  --toc-body-hover-arrow-color: var(--pale-gray-monochrome);
    --tabs-bg: var(--bright-two);
    --tabs-bottom-border-color: var(--light-gray-monochrome);
    --tabs-hover-bg: var(--tabs-bottom-border-color);
    --tabs-txt: var(--bright-accent);
    --tabs-content-bg-color: var(--swatch-secondary-color), 0.375;
    --tabs-selected-txt: var(--light-gray-monochrome);
    margin: 0 auto;
 
}
 
div#page-options-bottom > a,
div#page-options-bottom-2 > a {
    background: url(https://wanderers-library.wikidot.com/local--files/component:wanderers-depths/paperdivbg.jpg);
    border: 0.15rem solid rgba(var(--dark-accent), 1);
    color: rgba(var(--dark-accent), 1);
}
 
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,25);
    color: rgba(var(--bright-two), 1);
    border: 0.15rem solid rgba(var(--bright-two), 1);
}
 
#page-title {
    border-bottom: 1px dashed rgb(var(--swatch-menubg-medium-dark-color,66,66,72));
}
 
.page-rate-widget-box {
    background: linear-gradient(to top, rgba(var(--dark-accent), 1) 0, rgba(var(--medium-accent), .75) 100%);
}
 
#search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
   border: 1px solid rgb(var(--bright-accent));
}
 
#search-top-box:not(:focus-within)::before {  
    color: rgb(var(--bright-accent));
}
 
.blockquote, blockquote {
    border: 3px ridge rgb(var(--dark-accent));
    background: rgba(var(--medium-accent),0.05);
}
 
#main-content hr {
    background-image: none;
    background-color: rgba(var(--medium-accent))!important;
}
 
.footnotes-footer .title {
   font-family: var(--title-font);
}
 
.footnotes-footer {
    box-sizing: border-box;
    display: block;
    position: relative;
    width: 95%;
    height: auto;
    margin: 1.5rem 1.5rem .5rem;
    padding: .15em 1em 1em 0;
    background-color: rgb(var(--pale-gray-monochrome));
    box-shadow: inset .5em 0 0 0 rgba(var(--footnotes-footer-colorbar-color));
    color: rgb(var(--footnotes-footer-text-color));
}
 
.footnotes-footer {
   border: 3px ridge rgb(var(--dark-accent));
   background: url(https://wanderers-library.wikidot.com/local--files/component:wanderers-depths/paperdivbg.jpg);
}
 
#toc {
     background-color: rgba(var(--medium-accent));
     color: rgba(var(--bright-accent));
} 
 
#toc .title {
    color: rgb(var(--bright-two));
}
 
.collection > .collapsible-block {
    background-color: rgb(var(--white-monochrome));
    border: 3px solid rgb(var(--dark-accent));
}
 
.collection .collapsible-block-unfolded-link {
    background: url(https://wanderers-library.wikidot.com/local--files/component:wanderers-depths/paperdivbg.jpg);
  border: 2px solid rgb(var(--white-monochrome));
}
 
.collection .collapsible-block-folded {
    background: url(https://wanderers-library.wikidot.com/local--files/component:wanderers-depths/paperdivbg.jpg);
  border: 2px solid rgb(var(--white-monochrome));
}
 
.authorname {
   color: rgb(var(--dark-accent));
   background: url(https://wanderers-library.wikidot.com/local--files/component:wanderers-depths/paperdivbg.jpg);
   border: 2px solid rgb(var(--white-monochrome));
}
 
.titlecolumn {
   border: 2px solid rgb(var(--white-monochrome));
    background: url(https://wanderers-library.wikidot.com/local--files/component:wanderers-depths/paperdivbg.jpg);
}
 
.articlecolumn {
  background-color: rgb(var(--white-monochrome));
}
 
.paper {
    font-family: 'Caveat', cursive;
    font-style: bold;
    font-size: 1.4rem;
    background: url("https://scp-sandbox-3.wdfiles.com/local--files/bard-bard-s-sandbox/paper.jpg") repeat 0px 8px;
    /*Licensed under CC, produced by https://www.deviantart.com/jojo-ojoj*/
    border: 3px ridge rgb(var(--dark-accent));
    border-radius: 5px;
    padding: 10px 10px;
    margin: auto;
}
 
.page p,
.page ul {
    line-height: 1.2em;
    margin: 0;
}
 
.wl-translations {
    background-color: none;
    background: url(https://wanderers-library.wikidot.com/local--files/component:wanderers-depths/paperdivbg.jpg);
}
 
.wl-translations a {
    color: rgb(var(--bright-two));
}
 
.wl-image-block .wl-image-caption {
    background-color: rgb(var(--medium-accent));
}
 
a {
    color: rgb(var(--bright-two));
}
 
a:visited {
    color: rgb(var(--dark-accent));
}
 
a:hover {
    color: rgba(var(--bright-two), .6);
}
 
/* mobile */
 
@media only screen and (max-width: 768px) {
 
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        background-color: rgb(var(--medium-accent));
        border-bottom: none;
        border-right: none;
    } 
 
#header div#top-bar {
  font-size: 1vh;
} 
 
div#extra-div-1 {
    background-size: cover;
}
 
div#extrac-div-1 {
    background-image: url(https://wanderers-library.wikidot.com/local--files/component:wanderers-depths/waterbg.png);
    background-size: var(--header-height-on-mobile);
    background-repeat: no-repeat;
    z-index: 3;
}
 
    div#page-options-bottom {
        width: 90%;
    }
}

Footnotes

1. And here's a footnote!