Yuletide Theme

This is the Yuletide Theme. It is a lightweight / simple theme meant for the Yuletide Event, but can be used for any story needing a winter aesthetic!

How to include

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

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

Theme Components

The body font is Bellefair.
The Header font is Great Vibes

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

/* Wanderer's Yuletide Theme */
/* 2023 Wikidot Theme */
/* Updated in 2025 */
/* By UncertaintyCrossing, based off Wanderer's Depths by Rounderhouse and Atlas's Burden by melted_bee */
 
/* Fonts */
 
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bellefair&display=swap');
 
:root {
    /* Textures */
    --snow-body-bg: url(https://wanderers-library.wdfiles.com/local--files/uncertaintycrossing-s-workbench/snow_bg.jpg);
 
    /* Header */
    --header-title: "Library's Yuletide";
    --logo-image: url("https://wanderers-library.wikidot.com/local--files/uncertaintycrossing-s-workbench/yuletide_logo.png");
 
    /* Typefaces */
    --header-font: 'Great Vibes', cursive;
    --body-font: 'Bellefair', serif;
 
    /* 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: 138, 230, 255;
    /* 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 */
    --bright-purple: 72, 16, 231;
    /* bright purple */
    --light-blue: 163, 170, 228;
    /* light blue */
 
    /* 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);
    --ui-button-hover-txt: var(--white-monochrome);
 
    /* Interwiki */
    --head: var(--medium-accent);
    --link: var(--bright-two);
 
   /* Contrast Adjustments */
    --sidebar-links-hover-text-color: var(--bright-two);
    --ui-button-hover-txt: var(--bright-two);
    --ui-icon-hover-color: var(--bright-purple);
    --dropdown-links-hover-color: var(--pale-gray-monochrome);
    --ui-button-hover-bg: var(--pale-gray-monochrome);
    --pagetags-text-hover-bg-color: var(--bright-two);
   --ui-icon-color: var(--bright-purple);
   --editor-icon-hover-color: var(--bright-two);
   --pagetags-text-hover-color: var(--bright-two);
   --pagetags-text-hover-bg-color: var(--bright-two);
}
 
html,
    body {
        -webkit-font-feature-settings: "onum"0;
        -moz-font-feature-settings: "onum"0;
        font-feature-settings: "onum"0;
        font-variant-numeric: tabular-nums;
        scrollbar-color: rgb(var(--pale-gray-monochrome)) rgb(var(--dark-gray-monochrome));
    }
 
#skrollr-body {
    width: 100%;
    height: 10rem;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(https://wanderers-library.wdfiles.com/local--files/uncertaintycrossing-s-workbench/snow_header.jpg);
    background-size: cover;
    background-position: 50% 50%;
}
 
#container-wrap-wrap {
  width: 100%;
}
 
#content-wrap {
    background-image: url(https://wanderers-library.wdfiles.com/local--files/uncertaintycrossing-s-workbench/snow_bg.jpg);
}
 
#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/uncertaintycrossing-s-workbench/snow_overlay.png);
  opacity: 0.2;
}
 
#side-bar {
  --sidebar-links-text: var(--pale-gray-monochrome);
  --sidebar-links-hover-text-color: var(--bright-two);
  --sidebar-collapsible-fld-link-hover-bg: var(--medium-accent);
  --sidebar-links-hover-bg-color: var(--medium-accent);
 
}
 
.wl-translations a:hover {
    color: rgb(var(--light-blue));
}
 
#main-content {
    --tabs-bg: var(--dark-accent);
    --tabs-bottom-border-color: var(--light-blue);
    --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(--light-blue);
    --tabs-selected-bg: var(--light-blue);
    --footnotes-footer-bg-color: var(--light-blue);
    margin: 0 auto;
}
 
#main-content .page-tags span a:not([href^="/system:page-tags/tag/_"])::before {
  background-color: rgb(var(--light-blue));
}
 
#page-title::before, .meta-title::before, #page-title::after, .meta-title::after {
  background-color: rgb(var(--swatch-primary));
  background-image: url("https://wanderers-library.wdfiles.com/local--files/uncertaintycrossing-s-workbench/snow_header.jpg");
 
}
 
#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);
}
 
#page-content td {
  text-align: center;
  color: white;
  background-image: url(https://wanderers-library.wdfiles.com/local--files/component%3Atheme/wlheader_bg.png);
  background-blend-mode: luminosity;
  background-color: #2246b07a;
  border-color: rgb(var(--bright-accent))!important;
}
 
div#extra-div-1 {
    background-image: url(https://wanderers-library.wdfiles.com/local--files/uncertaintycrossing-s-workbench/snow_header.jpg);
}
 
#top-bar {
    --dropdown-links-hover-color: var(--white-monochrome);
}
 
#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);
 
}
 
#header h1 a::before {
    content: "Library's Yuletide";
    content: var(--header-title);
    color: rgb(var(--bright-accent));
    text-shadow: inherit;
}
 
#header h1 a::after {
       background: rgba(var(--bright-accent), 1);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
 
#top-bar div.top-bar > ul > li > ul > a {
    color: rgb(var(--medium-accent));
}
#top-bar div.top-bar > ul > li > ul > a:hover {
    color: rgb(var(--white-monochrome));
}
 
#side-bar {
    --sidebar-links-hover-text-color: var(--white-monochrome);
}
 
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);
}
 
/*--- 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;
}
 
.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));
}
 .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.wikidot.com/local--files/uncertaintycrossing-s-workbench/yuletide_border.png) 600 round;
    -moz-border-image: url(https://wanderers-library.wikidot.com/local--files/uncertaintycrossing-s-workbench/yuletide_border.png) 600 round;
    -o-border-image: url(https://wanderers-library.wikidot.com/local--files/uncertaintycrossing-s-workbench/yuletide_border.png) 600 round;
    border-image: url(https://wanderers-library.wikidot.com/local--files/uncertaintycrossing-s-workbench/yuletide_border.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-image: none;
    background: none;
    background-color: rgba(255, 219, 90, 0);
    background-color: rgba(var(--bright-accent), 0);
    border-image-source: url(https://wanderers-library.wikidot.com/local--files/uncertaintycrossing-s-workbench/yuletide_hr.png);
    border-image-repeat: round round;
    border-image-slice: 80 500 80 500 fill;
    border-image-width: 10em 80em 10em 80em;
}
 
/*--- HR ---*/
 #main-content hr {
  background: url( );
  background-image: url(" ");
  background-color: rgba(var(--bright-purple));
}
 
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);
}
 
.articlecolumn {
  background-color: rgb(var(--dark-accent));
}
 
a {
    color: rgb(var(--medium-accent));
    text-decoration: underline;
}
 
a:visited {
    color: rgb(var(--bright-purple));
    text-decoration: underline;
}
 
a:hover {
    color: rgba(var(--bright-two), .6);
    text-decoration: underline;
}
 
div.solo {
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
    align-content: stretch;
    flex-wrap: wrap;
}
 
div.article {
  font-size: 80%;
  display: inline-block;
  max-width: 30%;
  background-image: url(https://wanderers-library.wdfiles.com/local--files/component%3Atheme/wlheader_bg.png);
  background-blend-mode: luminosity;
  background-color: #2246b07a;
  border-color: rgb(var(--bright-accent))!important;
  padding: 1rem;
  margin: 1rem 1rem;
  border-radius: 3px;
  box-shadow: 10px 10px rgba(0,0,0,.15);
  transition: all .4s ease;
  color: white;
}
 
div.article:hover {
  box-shadow: 5px 5px rgba(0,0,0,.25);
}
 
div.article a:link {color: rgb(var(--bright-accent));}
div.article a:visited {color: rgb(var(--light-blue));}
div.article a:hover {color:#FFFFFF;}
 
table a:link {color: rgb(var(--bright-accent));}
table a:visited {color: rgb(var(--light-blue));}
table a:hover {color:#bright-two;}
 
div.mobiletable {
max-width: 100%;
overflow: auto;
}
 
/* mobile */
 
@media not all and (min-resolution:.001dpcm) { @media {
div#extra-div-1 {
  background-attachment: initial;
}
}}
 
@media only screen and (max-width: 48rem) {
  #header div#top-bar {
  font-size: 1vh;
}
 div#extrac-div-3::before {
        text-shadow: inherit;
        background: url(https://wanderers-library.wdfiles.com/local--files/uncertaintycrossing-s-workbench/snow_bg.jpg);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        content: "Library's Yuletide";
        content: var(--header-title);
        font-family: var(--header-font);
        font-size: 1%;
        width: 100%;
        height: 6 rem;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
           -moz-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        position: fixed;
        top: 0;
        right: 0;
        background-color: transparent;
        text-align: center;
        font-weight: 700;
    }

theme yuletide

page revision: 4, last edited: 23 Dec 2025 21:20

Edit Rate (+4) Tags Discuss (2) 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