Sand Dunes Theme

This is the Sand Dunes theme. It was created for tales to use in the fourth SSS Event - Tracks Across the Sand.

How to include

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

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

You can use this code for a stripped-down, simpler version of the theme:

[[include :wanderers-library:component:sanddunes
|simple=--]
]]

Theme Components

The body font is Neutron
The Header font is Fredericka the Great
The Title font is Jim Nightshade
The Monsospace font is Syne Mono

Here's some links for you:

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.

This is a blockquote, created by putting "> " at the start of each line.
More text

That's a horizontal rule

Nested blockquotes

And another¹

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]]

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

+ Show theme code

- Hide theme code

/* Sand Dunes Theme */
/* 2025 Wikidot Theme */
/* By UncertaintyCrossing, based off the Biopunk theme, Wanderers Observatory theme by EstrellaYoshte, Dust Jacket theme by Woedenaz, and Vitalis LLC theme.  */
/* All images, textures, and so on are create by me. All items are licensed under CC BY SA 3.0. */
 
  @import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Jim+Nightshade&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Neuton:wght@300&display=swap');
 
:root {
    --sand-body-bg: url(https://wanderers-library.wdfiles.com/local--files/component%3Asanddunes/sandbg.jpg);
    --sand-header-layer-0: url(https://wanderers-library.wdfiles.com/local--files/component%3Asanddunes/sand_sky_test_2.jpg);
    --sand-header-layer-1: url(https://wanderers-library.wdfiles.com/local--files/component%3Asanddunes/sand_dunes_2.png);
 
    --desert-night-black: 0,0,0;
    --desert-rock-brown: 36, 12, 0;
    --desert-sand-yellow: 255, 168, 58;
    --desert-sky-blue: 113, 220, 255;
    --desert-sky-navy: 0, 131, 181;
    --desert-sand-orange: 235, 117, 0;
    --desert-star-purple: 92, 35, 169;
 
    --body-font: 'Neutron', serif; font-size: 18px;
    --header-font: 'Fredericka the Great', serif;
    --title-font: 'Jim Nightshade', cursive;
    --UI-font: var(--title-font);
    --mono-font: 'Syne Mono', monospace;
    --header-title: "Tracks Across the Sand";
    --logo-image: url( );
 
    --white-monochrome: var(--desert-rock-brown);
    --light-gray-monochrome: var(--desert-sky-blue);
    --light-pale-gray-monochrome: var(--desert-rock-brown);
    --gray-monochrome: var(--desert-sky-navy);
    --pale-gray-monochrome: var(--desert-sky-navy);
    --dark-gray-monochrome: var(--desert-night-black);
    --black-monochrome: var(--desert-sand-yellow);
    --bright-accent: var(--desert-sand-yellow);
    --medium-accent: var(--desert-sky-blue);
    --dark-accent: var(--desert-rock-brown);
 
    --swatch-primary-darker: var(--desert-sand-orange);
    --swatch-secondary-color: var(--dark-gray-monochrome);
    --swatch-menutxt-light-color: var(--medium-accent);
    --swatch-menubg-light-color: var(--white-monochrome);
    --swatch-menutxt-general-color: var(--swatch-menubg-black-color);
    --swatch-text-tertiary-color: var( --desert-star-purple);
    --swatch-tertiary-color: var( --desert-rock-brown);
 
  --sidebar-links-bg-color: var(--desert-rock-brown);
 
    --ui-button-txt: var(--swatch-text-secondary-color);
    --modal-body-text: var(--swatch-text-general);
    --modal-body-header-txt: var(--swatch-primary-darker);
    --modal-header-stripe: var(--white-monochrome);
    --hoverblock-header-bg: var(--swatch-text-secondary-color);
    --hoverblock-txt: var(--black-monochrome);
    --hoverblock-bg: var(--swatch-primary-darkest),0.5;
    --hoverblock-footer-txt: var(--desert-sky-navy);
    --gradient-topmenu: linear-gradient( to bottom, rgb(255, 255, 255, 0) 0%, rgb(255, 255, 255, 0) var(--header-height-on-desktop), rgb(var(--dark-gray-monochrome)) var(--header-height-on-desktop), rgb(var(--dark-gray-monochrome)) 100% );
    --hover-link-color: var(--swatch-primary-darker);
    --visited-link-color: var(--desert-sand-orange);
    --rating-module-bottom-border-color: var(--desert-night-black);
    --rating-module-text-hover-color: var(--pale-gray-monochrome);
    --scrollbar-color: rgb(255, 168, 58)rgb(0, 131, 181);
 
}
 
body {
    background-color: rgb(var(--swatch-background));
    background-image: var(--sand-body-bg);
    background-size: calc(50rem + 20%);
    background-attachment: fixed;
    background-repeat: repeat;
    color: rgb(227, 232, 228);
}
 
html,
body {
    scrollbar-color: rgb(var(--desert-sand-orange)) rgb(var(--desert-sky-navy));
}
 
::-webkit-scrollbar,
#side-bar:hover::-webkit-scrollbar {
    background-color: rgb(var(--desert-sky-navy));
}
 
::-webkit-scrollbar-thumb,
#side-bar:hover::-webkit-scrollbar-thumb {
    background-color: rgb(var(--desert-sand-orange));
}
 
#main-content {
    --tabs-bg: var(--white-monochrome);
    --tabs-bottom-border-color: var(--light-gray-monochrome);
    --tabs-hover-bg: var(--tabs-bottom-border-color);
    --tabs-txt: var(--swatch-text-secondary-color);
    --tabs-content-bg-color: var(--swatch-secondary-color), 0.375;
    --tables-border: var(--desert-sky-navy);
    --footnotes-footer-bg-color: var(--desert-night-black);
 
    margin: 0 auto;
}
 
tt, pre { font-size: 0.9125em; }
 
div.rate-box-with-credit-button, div.page-rate-widget-box {
    background:
        linear-gradient(to top,
            rgba(var(--desert-star-purple), 1) 0,
            rgba(var(--desert-night-black), 1) 100%);
}
 
/*------ HEADER ------*/
 
:root {
    --header-height-on-mobile: calc(23.75rem + 14.75vw);
    --topbar-height-on-mobile: 2.75rem;
    --header-height-on-desktop: var(--header-height-on-mobile);
    --topbar-height-on-desktop: var(--topbar-height-on-mobile);
}
 
#header::before, #header h1 a::before { content: unset; }
#header h1 a {
    pointer-events: none;
    place-items: center;
}
#header h1 a::after {
   top: -1.5rem;
    --wght: 400;
    font-size: 20vh;
    background: unset;
    -webkit-background-clip: unset;
    background-clip: unset;
    background-size: unset;
    -webkit-text-fill-color: unset;
    content: var(--header-title);
    color: rgb(var(--black-monochrome));
    text-shadow: 0 0 .375rem currentColor;
    position: relative;
    height: auto; width: auto;
    pointer-events: auto;
    padding: 0.75rem;
}
 
@media only screen and (max-width: 800px) {
    #header h1 a::after {    
        top: 0rem;
        font-size: 12vh;
 }
}
 
div#extra-div-1 {
    background-image: var(--sand-header-layer-0);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
@media not all and (min-resolution:.001dpcm) { @media {
div#extra-div-1 {
  background-attachment: initial;
}
}}
 
#extra-div-1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgb(var(--medium-accent), .15);
}
#extra-div-1 > span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--sand-header-layer-1);
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}
#extra-div-1::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    height: 48rem;
    width: 100%;
    background: linear-gradient(to bottom, rgb(var(--dark-gray-monochrome)) 5%, rgb(var(--dark-gray-monochrome), 0));
}
 
div#extrac-div-1 { z-index: initial; }
#extrac-div-1::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: calc(var(--header-height-on-desktop)*.5 - .5rem);
    background-image: var(--logo-image);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 82.5%;
    mix-blend-mode: overlay;
}
div#extrac-div-1 span { z-index: 2; }
 
/*----------------------------*/
 
#header #login-status a.btn:is(.login-status-create-account,.login-status-sign-in) {
    color: rgb(var(--swatch-text-secondary-color));
}
 
#search-top-box { box-shadow: none; }
 
#login-status #account-options {
    width: auto;
    padding: 0.5em;
    border-color: rgba(var(--bright-accent));
    background: rgba(var(--desert-night-black), 0.5);
    color: rgb(var(--swatch-text-light));
}
 
#top-bar {
    --dropdown-bg-color: var(--swatch-menubg-light-color), 0.875;
}
 
/*------ SIDE BAR ------*/
 
#side-bar .close-menu::before,
#side-bar .close-menu::after {
    width: var(--topbar-height-on-mobile);
    height: var(--topbar-height-on-mobile);
    top: -.15rem; left: -.15rem;
    border-radius: 0 0 0.75rem 0;
    border: none;
}
 
:is(#interwiki, #side-bar) .heading {
    color: rgb(var(--swatch-primary-darker));
}
 
/*------ MAIN ------*/
 
#content-wrap { position: relative; }
#content-wrap::before {
  content: "";
  position: absolute;
  height: 100%; width: 100%; top: 0; left: 0;
  background-repeat: repeat-x;
  pointer-events: none;
  background-image: url(https://wanderers-library.wdfiles.com/local--files/component%3Asanddunes/texture%20bg3.png);
  opacity: 0.3;
}
 
h1,h2,h3,h4,h5,h6 { color: rgb(var(--swatch-primary-darker)); }
 
#page-title, .meta-title {
    color: rgb(var(--swatch-primary));
}
#page-title::before,#page-title::after,
.meta-title::before, .meta-title::after {
    background-image: unset;
    background-color: currentColor;
}
 
.code, .page-source {
    border: none;
}
 
.fancyborder {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 2vw solid rgba(0, 0, 0, 0.5);
    -webkit-border-image: url(https://wanderers-library.wdfiles.com/local--files/component%3Asanddunes/sand_border_2.png) 600 round;
    -moz-border-image: url(https://wanderers-library.wdfiles.com/local--files/component%3Asanddunes/sand_border_2.png) 600 round;
    -o-border-image: url(https://wanderers-library.wdfiles.com/local--files/component%3Asanddunes/sand_border_2.png) 600 round;
    border-image: url(https://wanderers-library.wdfiles.com/local--files/component%3Asanddunes/sand_border_2.png) 600 round;
    border-image-width: 6;
    padding: 2vw 3vw;
}
 
#main-content .fancyhr hr {
    box-sizing: border-box;
    height: 0;
    border-top: 2vw solid transparent;
    background: none;
    background-color: rgba(255, 219, 90, 0);
    background-color: rgba(var(--bright-accent), 0);
    border-image-source: url(https://wanderers-library.wdfiles.com/local--files/component%3Asanddunes/sand_fancy_2.png);
    border-image-repeat: round round;
    border-image-slice: 80 500 80 500 fill;
    border-image-width: 10em 80em 10em 80em;
}
 
:is(blockquote, .blockquote, div.blockquote, [class*="blockquote"]) {
    color: rgba(var(--desert-sand-yellow), 1);
    background-color: rgba(var(--desert-sky-navy), 0.15);
    border: .063em solid rgba(var(--bright-accent), 1);
}
 
/* Collection Box / More By This Author */
 
.authorname {
  color: rgb(var(--bright-accent));
  color: rgb(255, 255, 255);
  font-weight: bold;
  text-align: center;
}
 
.collection .collapsible-block-unfolded-link a, .collection .collapsible-block-folded a {
  color: rgb(var(--bright-accent));
  font-weight: bold;
}
 
/*--- HR ---*/
 #main-content hr {
  background: url( );
  background-image: url(" ");
  background-color: rgba(var(--desert-sky-blue));
}
 
hr::before, hr::after {
    content: " ";
    display: grid;
    grid-column: 1/2;
    grid-row: 1/2;
}
hr::before {
    height: 0.05rem;
    width: 100%;
 
hr::after {
    width: var(--hr-icon-size);
    height: var(--hr-icon-size);
}
 
/*--- Tabs ---*/
 
:is(.yui-navset,.yui-navset-top,.yui-navset-bottom) .yui-content {
    border: none;
}
 
/*--- Table ---*/
table.wiki-content-table th { box-shadow: none; }
 
/*--- Footnotes ---*/
 
.hovertip {
    -webkit-backdrop-filter: blur(0.125rem);
    backdrop-filter: blur(0.125rem);
}
.hovertip::before {
    box-shadow: none;
    border: solid 0.1rem rgb(var(--hoverblock-header-bg));
}
 
.footnote .f-content, .reference .r-content {
    font-family: var(--body-font);
}
 
.footnotes-footer, .bibitems {
    background-color: rgb(var(--footnotes-footer-bg-color),0.375);
}
 
:is(.footnotes-footer,.bibitems) .bibitem::after, :is(.footnotes-footer,.bibitems) a[href*=javascript]::before {
    right: -30%;
    background-color: transparent;
}
 
/*--- Tags ---*/
#main-content .page-tags span a:any-link:not([href^="/system:page-tags/tag/_"])::after {
    background: currentColor;
    box-shadow: none;
}
 
/*------ BOTTOM ------*/
 
#footer {
    --footer-link-color: var(--swatch-primary);
    --footer-link-hover-color: var(--swatch-alternate-color);
    --footer-link-hover-bg-color: var(--swatch-primary-darker);
    position: relative;
    margin-top: calc(6.25rem + 10vw);
    background: transparent;
    isolation: isolate;
}
 
#license-area {
    --license-text-color: var(--swatch-text-secondary-color);
    --license-link-hover-color: var(--swatch-alternate-color);
    --license-link-hover-bg-color: var(--swatch-primary-darker);
}
 
#who-rated-page-area > div > span[style*="color"] {
  color: rgb(var(--desert-sand-yellow)) !important;
 background-color: rgb(var(--desert-sand-yellow)) !important;
}
 
/*------ MODAL ------*/
#odialog-container div.owindow>div.modal-body>img[style*="padding: 2px 8px;"]:first-child { box-shadow: none; }

:root {
    --header-height-on-mobile: 7.5rem;
    --topbar-height-on-mobile: var(--topbar-height-on-desktop);
    --header-height-on-desktop: 10rem;
    --topbar-height-on-desktop: 1.625rem;
}
#header h1 a::after {
   top: 0.25rem;
    font-size: 10vh;
}
@media only screen and (max-width: 800px) {
    #header h1 a::after {    
        top: -0.5rem;
        font-size: 8vh;
 }
}
div#extra-div-1 {
    background-image: none;
    background-color: rgb(var(--desert-night-black));
}
#extra-div-1::before {
    background-color: rgb(var(--desert-night-black), .15);
}
#extra-div-1 > span {
    background-image: none;
}
body {
    background-color: rgb(var(--desert-night-black));
    background-image: none;
}

sand-tracks theme

page revision: 42, last edited: 12 Apr 2025 19:40

Edit Rate (+9) Tags Discuss (3) History Files Print Site tools + Options

The Wanderers' Library

Fiction from another world.

How to include

Theme Components

Examples

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title