Classic Theme

Image.

Classic Theme is an adaptation of ZeroStrider's original Sigma-9 Wanderer's Theme, by EstrellaYoshte.

This is a Hardcover-based theme.

How to include

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

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

---

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¹

Source Code

/*
   Classic Wanderer's Theme
    [2025 Wikidot Theme]
    By EstrellaYoshte
    Based on:
        Sigma-9 Theme by Aelanna and Dr Devan
        Wanderer's Theme (Classic) by ZeroStrider
*/
 
@import url(https://rsms.me/inter/inter.css);
 
@font-face {
    font-family: 'Sans Normalcy';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('https://cdn.scpwiki.com/theme/en/sigma/fonts/Sans-Normalcy.woff2') format('woff2')
}
 
:root {
    --header-title: "Wanderer's Library";
    --header-subtitle: "The Garden is the Serpent's Place.";
    --logo-image: url(https://wanderers-library.wdfiles.com/local--files/component%3Aclassic/sh_logo.png);
 
    --header-height-on-desktop: 9.5rem;
    --topbar-height-on-desktop: 1.5rem;
    --body-width-on-desktop: 47.5rem;
    --header-height-on-mobile: 11.5rem;
    --topbar-height-on-mobile: 2.25rem;
 
    --body-font: InterVariable, Inter, BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
    --header-font: 'Sans Normalcy', sans-serif;
    --UI-font: var(--body-font);
    --title-font: var(--body-font);
    --classic-top-sub-header-color: #f0f0c0;
 
    --classic-white: 252, 252, 252;
    --classic-offwhite: 240, 240, 192;
    --classic-light-gray: 244, 244, 244;
    --classic-medium-gray: 153, 153, 153;
    --classic-dark-gray: 68, 68, 68;
    --bright-accent: 30, 105, 48;
    --medium-accent: 5, 148, 0;
    --light-gray-monochrome: var(--medium-accent);
    --dark-gray-monochrome: 12, 50, 10;
    --swatch-secondary-color: var(--classic-offwhite);
    --swatch-text-secondary-color: var(--classic-white);
    --ui-button-hover-txt: var(--classic-white);
    --pager-selected-link: var(--swatch-text-light);
 
    --visited-link-color: var(--bright-accent);
    --toggle-icon-color: rgb(var(--medium-accent));
    --toggle-border-color: rgb(var(--medium-accent));
    --ui-wght: 500;
    --ui-hvr-wght: 500;
    --modal-header-txt: var(--swatch-headerh1-color);
    --hoverblock-bg: var(--classic-light-gray);
    --hoverblock-txt: var(--swatch-text-general);
    --hoverblock-header-txt: var(--swatch-text-light);
 
    --gradient-header: 
        /* Diagonal stripes */
        repeating-linear-gradient(var(--classic-diagonal-stripes-angle),
            var(--classic-diagonal-stripes-color), var(--classic-diagonal-stripes-color) var(--classic-diagonal-stripes-width),
            transparent var(--classic-diagonal-stripes-width), transparent var(--classic-diagonal-stripes-gap)),
 
        /* Header gradient colors */
        linear-gradient(to bottom,
            var(--classic-header-gradient-top-color) calc(var(--classic-header-gradient-top-stop) * 100%),
            var(--classic-header-gradient-bottom-color) calc(var(--classic-header-gradient-bottom-stop) * 100%)
        );
 
    --classic-header-gradient-top-color: #000000;
    --classic-header-gradient-top-stop: .4;
    --classic-header-gradient-bottom-color: rgb(var(--bright-accent));
    --classic-header-gradient-bottom-stop: .775;
 
    --classic-diagonal-stripes-angle: 45deg;
    --classic-diagonal-stripes-width: .08rem;
    --classic-diagonal-stripes-gap: .22rem;
    --classic-diagonal-stripes-color: #4bd16c0b;
 
    --classic-header-logo-size: 6.25rem;
    --classic-header-logo-adaptive-size: min(var(--classic-header-logo-size), calc(var(--classic-header-logo-size) * 0.575 + 5vw));
    --gradient-topmenu: linear-gradient(to bottom, #535353 0%, #3B3B3B 100%);
 
    --rating-module-text-color: var(--classic-white);
    --rating-module-bg-color: var(--bright-accent);
    --rating-module-text-hover-color: var(--swatch-text-dark);
    --rating-module-button-cancel-color: var(--classic-light-gray);
}
 
html, body {
    scrollbar-color: rgb(var(--swatch-tertiary-color)) rgb(var(--classic-dark-gray));
}
 
/*-------------------*/
/*---- HEADER ----*/
/*-------------------*/
 
#header::before {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    background-size: contain;
    width: var(--classic-header-logo-adaptive-size);
}
 
#header h1 {
    grid-row: 2 / 3;
    justify-content: start;
    box-sizing: border-box;
    padding-inline-start: calc(var(--classic-header-logo-adaptive-size) * 1.05);
 
    a {
        gap: .5rem;
        text-align: start;
    }
    a::before, a::after {
        display: block;
        text-align: inherit;
        text-shadow: unset;
        grid-column: unset;
        grid-row: unset;
        background: unset; 
        background-clip: unset;
        background-size: unset;
        -webkit-text-fill-color: unset;
    }
    a::before {
        content: var(--header-title);
        color: rgb(var(--classic-white));
        font-family: var(--header-font);
    }
    a::after {
        content: var(--header-subtitle);
        font-family: var(--body-font);
        font-size: .325em;
        color: rgb(var(--classic-offwhite));
        --wght: 550;
    }
    a span { display: none; }
}
 
#login-status {
    justify-self: end;
}
 
/*---- Top Bar----*/
 
#top-bar {
    --swatch-text-secondary-color: var(--classic-white);
    --dropdown-links-hover-color: var(--swatch-secondary-color);
    box-shadow: 0 0 0.25rem .05rem rgb(0, 0, 0, .325);
}
 
/*-------------------*/
/*---- SIDEBAR----*/
/*-------------------*/
 
#side-bar, #interwiki {
    --sidebar-links-text: var(--swatch-text-secondary-color);
    --sidebar-links-hover-text-color: var(--swatch-secondary-color);
    --sideblock-heading-border-color: var(--swatch-secondary-color);
}
#side-bar .heading, #side-bar .side-block>.collapsible-block:nth-child(1) .collapsible-block-folded {
    color: rgb(var(--swatch-secondary-color));
    box-shadow: 0 .0625rem 0 0 rgb(var(--sideblock-heading-border-color));
}
 
/*-------------------*/
/*---- ELEMENTS----*/
/*-------------------*/
 
#main-content {
    --ui-icon-color: var(--classic-white);
    --ui-icon-hover-color: var(--ui-icon-color);
    --blockquote-bg-color: var(--classic-light-gray);
    --blockquote-border-color: var(--classic-medium-gray);
 
    --tabs-bg: var(--classic-light-gray);
    --tabs-txt: var(--swatch-text-general);
    --tabs-hover-txt: var(--swatch-text-light);
    --tabs-selected-txt: var(--tabs-hover-txt);
    --tabs-content-bg-color: var(--blockquote-bg-color);
    --tabs-content-border-color: var(--blockquote-border-color);
}
 
#main-content .page-tags {
    --swatch-menutxt-light-color: var(--swatch-text-secondary-color);
    --swatch-menutxt-dark-color: var(--swatch-secondary-color);
}
 
/*---- Page Titles, H1 ----*/
 
div#page-title, .meta-title {
    display: block;
    color: rgb(var(--bright-accent));
    text-align: start;
    border-bottom: solid 0.05rem rgb(var(--classic-medium-gray));
    padding-bottom: .25em;
}
:is(div#page-title, .meta-title)::before,
:is(div#page-title, .meta-title)::after {
    all: unset;
}
 
h1 { color: rgb(var(--bright-accent)); }
 
/*---- Blockquote ----*/
 
:is(blockquote, div.blockquote, [class*="blockquote"]) {
    box-shadow: none;
    border: 0.05rem dashed rgb(var(--blockquote-border-color));
    background-color: rgb(var(--blockquote-bg-color));
}
 
/*---- Horizontal Rule ----*/
 
#main-content hr {
    height: .05rem;
    background: rgb(var(--classic-medium-gray));
    margin-block: 1.5rem;
}
 
/*---- Rate ----*/
div.page-rate-widget-box, #page-content div.rate-box-with-credit-button {
    background: unset;
    background-color: rgb(var(--rating-module-bg-color));
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
    border-radius: .375rem;
}
 
/*---- Image Blocks ----*/
div:is(.image-block,.scp-image-block) {
    border: solid 0.05rem rgb(var(--classic-medium-gray));
}
:is(div.image-block,div.scp-image-block) :is(.image-caption,.scp-image-caption) {
    background-color: rgb(var(--classic-light-gray));
}
 
/*---- Tabs ----*/
:is(.yui-navset,.yui-navset-top,.yui-navset-bottom) .yui-nav {
    column-gap: .25rem;
}
:is(.yui-navset,.yui-navset-top,.yui-navset-bottom) .yui-nav li {
    flex-grow: 0;
}
.yui-navset .yui-nav li, .yui-navset .yui-nav li a, .yui-navset .yui-nav li a::before {
    border-radius: 0;
}
.yui-navset .yui-nav li a {
    border: solid 0.05rem rgb(var(--tabs-content-border-color));
}
 
/*-------------------*/
/*---- ODIALOG ----*/
/*-------------------*/
 
#odialog-container .title { line-height: normal; }
 
/*-------------------*/
/*---- BOTTOM AREA ----*/
/*-------------------*/
 
#footer {
    --footer-bg-color: var(--classic-dark-gray);
}
#license-area {
    --license-bg-color: var(--swatch-background);
    --license-text-color: var(--swatch-text-general);
    --license-link-color: var(--swatch-primary);
}
 
/*-------------------*/
/*---- DESKTOP QUERY ----*/
/*-------------------*/
 
@media not screen and (max-width: 56.25rem) {
 
#header {
    position: static;
}
#header div[class*=top-bar]>ul { justify-content: end; }
#header div[class*=top-bar]>ul>li {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}
#header div[class*=top-bar]>ul>li>a {
    padding-inline: 1em;
}
 
#header div[class*=top-bar]>ul>li>ul {
    left: unset;
    right: 0;
}
#header div[class*=top-bar]>ul>li>ul>li ul { --base-font-size: .875em; }
 
}

Footnotes

1. And here's a footnote!