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
This is a tab view.
Terminal #001

------
Welcome, User
------
Links inside the terminal gain a ">" when you hover over them.
like this
Thanks for checking out my format!
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 Lato.
The Header font is Audiowide.
The Title font is Gugi.
The monospace font used is PT Mono.
+ Click to see code
- Hide code
/* Wanderer's Station Theme */
/* 2019 Wikidot Theme */
/* By Rounderhouse, based off Dustjacket by Woedenaz and Croquembouche */
/* Logo by Rounderhouse, using art from SunnyClockwork, licensed under CC BY SA 3.0 */
/* Header background by NASA, public domain. */
 
/* Fonts */
 
@import url("https://wanderers-library.wikidot.com/component:theme/code/1");
@import url('https://fonts.googleapis.com/css?family=Lato:400,900|PT+Mono|Poppins:600,800');
@import url('https://fonts.googleapis.com/css?family=Iceland&display=swap');
@import url('https://fonts.googleapis.com/css?family=Audiowide&display=swap');
@import url('https://fonts.googleapis.com/css?family=Gugi&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: "WandererStation";
    /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
    --theme-name: "Wanderer's Station";
    /* set this to your theme's full name */
 
    /* Header */
    --logo-image: url("https://wanderers-sandbox.wikidot.com/local--files/component%3Awanderers-station/spacelogo.png");
    --header-title: "WANDERER'S STATION";
    --header-subtitle: "Welcome home, Wanderer01.";
 
    /* Typefaces */
    --body-font: 'Lato', sans-serif;
    --header-font: 'Audiowide', cursive;
    --title-font: 'Gugi', 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 */
    --medium-accent: 36, 38, 114;
    /* blue */
    --dark-accent: 220, 185, 53;
    /* dark yellow */
    --newpage-color: 221, 102, 17;
    /* pale orange */
    --mid-black: 39, 39, 39;
    /* pale black */
 
    /* Primary Theme Colors */
    --swatch-background: var(--mid-black);
    --swatch-primary: var(--medium-accent);
    --swatch-primary-darker: var(--bright-accent);
    --swatch-primary-darkest: var(--medium-accent);
    /* Primary Text Colors */
    --swatch-text-dark: var(--white-monochrome);
    --swatch-text-light: var(--black-monochrome);
    --swatch-important-text: var(--bright-accent);
 
    /* Primary Menu Colors */
    --swatch-menubg-color: var(--gray-monochrome);
    --swatch-menubg-light-color: var(--gray-monochrome);
    --swatch-menubg-medium-color: var(--gray-monochrome);
    --swatch-menubg-medium-dark-color: var(--black-monochrome);
    --swatch-menubg-dark-color: var(--medium-accent);
    --swatch-menubg-black-color: var(--black-monochrome);
    --swatch-menubg-hover-color: var(--gray-monochrome);
    --swatch-menutxt-dark-color: var(--bright-accent);
    --swatch-menutxt-light-color: var(--bright-accent);
    --swatch-border-color: 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);
 
    /* space between the top of the page and the start of the header */
    --border-styling: solid 0.0625rem rgb(var(--swatch-border-color));
 
    /* Box-Shadow 1px Borders */
    --box-border-bottom: 0 0.0625rem 0 0 rgb(var(--swatch-border-color));
    --box-border-top: 0 -0.0625rem 0 0 rgb(var(--swatch-border-color));
    --box-border-left: -0.0625rem 0 0 0 rgb(var(--swatch-border-color));
    --box-border-right: 0.0625rem 0 0 0 rgb(var(--swatch-border-color));
    --box-border-all: 0 0 0 0.0625rem rgb(var(--swatch-border-color));
 
    /* Sidebar */
    --sidebar-transition-timing: 0.5s ease-in-out 0.1s;
    --sidebar-internal-border-thickness: 0.125rem;
 
    --background-gradient-color: 36, 38, 114;
    --background-gradient-distance: 10rem;
 
}
 
div#extra-div-1 {
    background-image: url(https://wanderers-sandbox.wikidot.com/local--files/component%3Awanderers-station/space.png);
    background-size: contain;
    background-repeat: repeat-x;
}
 
.page-rate-widget-box {
    border-radius: 0px 15px 0px 15px !important;
}
 
#top-bar div.top-bar > ul > li > ul {
    background: rgba(var(--medium-accent), 1);
}
 
#login-status, #my-account {
   color: rgb(var(--bright-accent)) !important;
}
 
#login-status a {
   color: rgb(var(--bright-accent)) !important;
}
 
#login-status > a > strong {
   color: rgb(var(--bright-accent)) !important;
}
 
#toc {
     background-color: rgba(var(--medium-accent));
     color: rgba(var(--bright-accent));
}
 
a {
    color: rgb(var(--dark-accent));
}
 
#top-bar div.top-bar div.newpage_dropdown div.new-page-box input {
    background-color: rgba(var(--bright-accent));
    color: rgba(var(--medium-accent));
}
 
#top-bar div.top-bar div.newpage_dropdown div.new-page-box input.button:hover {
    color: rgba(var(--bright-accent));
    border: solid 2px rgba(var(--bright-accent));
}
 
#top-bar div.mobile-top-bar > ul > li > ul > li:hover > a, #top-bar div.top-bar > ul > li > ul > li:hover > a {
    color: rgba(var(--medium-accent));
}
 
.yui-navset .yui-nav li a em, .yui-navset-top .yui-nav li a em, .yui-navset-bottom .yui-nav li a em {
   color: rgba(var(--bright-accent));
}
 
.yui-navset-bottom .yui-nav li a, .yui-navset-top .yui-nav li a, .yui-navset .yui-nav li a {
    background-color: rgba(var(--medium-accent));
}
 
.yui-navset .yui-nav li a em:hover, .yui-navset-top .yui-nav li a em:hover, .yui-navset-bottom .yui-nav li a em:hover {
    color: rgba(var(--medium-accent));
}
 
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em {
    color: rgba(var(--medium-accent));
}
 
#search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"], #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"]:hover {
    background-color: rgb(var(--medium-accent));
}
 
#search-top-box:not(:focus-within)::before {  
    color: rgb(var(--bright-accent));
}
 
#page-title {
    grid-area: page-title;
    border-color: rgb(var(--bright-accent,66,66,72));
    color: rgb(var(--bright-accent,12,12,12));
}
 
h1, h2, h3, h4, h5, h6 {
    color: rgba(var(--bright-accent));
}
 
#lock-info {
    background-color: rgba(var(--medium-accent));
    color: rgba(var(--bright-accent));
}
 
div#page-options-bottom > a,
div#page-options-bottom-2 > a {
    background-color: rgba(178, 210, 180, 0.25);
    background-color: rgba(var(--swatch-menubg-light-color), 0.25);
    border: 0.0625rem solid rgba(255, 219, 90, 1);
    border: 0.0625rem solid rgba(var(--swatch-primary), 1);
    color: rgba(var(--medium-accent));
}
 
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(30, 55, 30, 1);
    background-color: rgba(var(--swatch-menubg-dark-color), 1);
    color: rgba(255, 219, 90, 1);
    color: rgba(var(--medium-accent), 1);
}
 
html body#html-body div#skrollr-body div#container-wrap-wrap div#container-wrap div#container div#content-wrap div#main-content div#action-area div form#edit-page-form div.buttons.alignleft > input {
    background: rgb(var(--medium-accent));
}
 
.wl-translations {
    border: 1px solid rgba(var(--bright-accent), 1);
    border-radius: 2px;
}
 
.wl-translations a {
    color: rgba(var(--bright-accent), 1);
}
 
.collection > .collapsible-block {
    background-color: rgb(var(--mid-black));
    border: 1px solid rgb(var(--dark-accent));
}
 
.collection .collapsible-block-unfolded-link {
  background-color: rgba(var(--medium-accent), 0.75);
  border: 2px solid rgb(var(--mid-black));
}
 
.collection .collapsible-block-folded {
  background-color: rgba(var(--medium-accent), 0.75);
  border: 2px solid rgb(var(--mid-black));
}
 
.authorname {
  color: rgb(var(--white-monochrome));
  background-color: rgba(var(--medium-accent), 0.75);
  border: 2px solid rgb(var(--mid-black));
}
 
.titlecolumn {
  border: 2px solid rgb(var(--mid-black));
  background-color: rgba(var(--medium-accent), 0.75);
}
 
.articlecolumn {
  background-color: rgb(var(--mid-black));
}
 
.blockquote, blockquote {
    background-color: rgba(var(--medium-accent));
    color: rgba(var(--bright-accent));
    border: .063em solid rgba(var(--bright-accent),.25)
}
 
table.wiki-content-table th {
    background-color: rgb(var(--medium-accent));
}
 
table.wiki-content-table th, table.wiki-content-table tr {
    border: .075rem solid rgba(var(--bright-accent),.50) !important;
}
 
/* terminal by ayers */
 
div.terminal{
    border: 1px solid black;
    border: solid 3px #BBBBBB;
    border-radius: 16px;
    background-color: #00183C;
/* black shadow at the top of the terminal */
    background-image:
        -o-radial-gradient(50% 90%, ellipse 1000% 100%, transparent, #00183C);
    background-image:
        radial-gradient(ellipse 1000% 100% at 50% 90%, transparent, #00183C);
    background-position: center;
    display: block;
/* shadow around the terminal */
    -webkit-box-shadow: inset 0 0 10em 1em rgba(0,0,0,0.5);
            box-shadow: inset 0 0 10em 1em rgba(0,0,0,0.5);
/* prevents scanline from forming a scrollwheel */
    overflow:hidden;
}
div.terminal blockquote {
    color: rgba(22,115,255,0.8) !important;
    background-color: black;
    border: double 3px #1E78FF
}
div.scanline{
    margin-top: -40%;
    width: 100%;
    height: 60px;
    position: relative;
    pointer-events: none;
/* Safari 4.0 - 8.0 */
    -webkit-animation: scan 12s linear 0s infinite; /* You may need to change this. If the bar goes by too quickly, increase 5s. */
    animation: scan 12s linear 0s infinite; /* Same as above */
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(56, 112, 82,0)), to(rgba(56, 112, 82,0.1))) !important;
    background: -o-linear-gradient(top, rgba(56, 112, 82,0), rgba(56, 112, 82,0.1)) !important;
    background: linear-gradient(to bottom, rgba(56, 112, 82,0), rgba(56, 112, 82,0.1)) !important;
}
 
div.text{
    color: rgba(22,115,255,0.8);
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 40%;
    font-family: monospace;
    font-size: 1.2em;
    }
 
/* Safari 4.0 - 8.0 */
@-webkit-keyframes scan{
    from{ -webkit-transform: translateY(-10%); transform: translateY(-10%);}
    to{  -webkit-transform: translateY(5000%);  transform: translateY(5000%);} /* You may need to change this depending on the length of your terminal. If the scanline stops halfway, increase the second number.*/
}
 
@keyframes scan{
    from{ -webkit-transform: translateY(-10%); transform: translateY(-10%);}
    to{  -webkit-transform: translateY(5000%);  transform: translateY(5000%);} /* Same as above.*/
}
 
div.text a {
    color: #00B6AC;
    text-decoration: none;
    background: transparent;
}
div.text a.newpage {
    color: #03fff1;
}
 
div.text a:hover {
    color: #00d0c4;
    text-decoration: underline;
    background-color: #272727;
    padding: 1px;
}
div.text a:hover::before{
content: "> ";
}
 
/* mobile */
 
@media only screen and (max-width: 768px) {
 
div#extra-div-1 {
    background-size: cover;
}
 
div#extrac-div-1 {
    background-image: url(https://wanderers-sandbox.wikidot.com/local--files/component%3Awanderers-station/space.png);
    background-size: var(--header-height-on-mobile);
    background-repeat: no-repeat;
    z-index: 3;
}
 
    body {
        background:rgba(var(--swatch-background), 1);
    }
 
    #main-content {
        margin-left: inherit;
    }
 
    div#page-options-bottom {
        width: 90%;
    }
}
- Hide code
theme
page revision: 40, last edited: 03 May 2022 22:46
Edit Rate (+17) Tags Discuss (1) History Files Print Site tools + Options
The Wanderers' Library

Fiction from another world.

Examples

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title
