RIVER BANK THEME

How do I use this theme?

Put this line at the top of your page. This theme is tied to the River Canon, but feel free to use it for whatever you'd like.

[[include :wanderers-library:component:river-bank-theme]]

Examples

Animated River Headers can be created by adding the code below.

[[module CSS]]
:root{
--river-text-content: "content goes here";
}
[[/module]]
[[=]]
[[div_ class="rivertext"]]
+ content goes here
[[/div]]
[[/=]]

The same content should be added to both the —river-text-content variable and inside of the rivertext div. Make sure to add the "+ " symbol and space in front of the content inside of the rivertext div and the quotations around the content in the —river-text-content variable. This text can be used multiple times on one page, but can only display one message per page. If it doesn't look right, you probably typed something too long.

Resulting in this:

RIVER BANK THEME

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.

---

I have edited the texture of the default fancyhr to match this theme. It is available as usual with "-----" enclosed in a "fancyhr" class div, like so:

[[div_ class="fancyhr"]]
-----
[[/div]]

Resulting in this:

---

I also altered the texture of the fancyborder. That can be created like this.

[[div_ class="fancyborder"]]
content goes here
[[/div]]

Titles can be created by putting between 1-6 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, more text here.

How quaint.

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
These

Are

Nested

Blockquotes¹

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

The small title font and Body font is Lato.
The large title font is Amatic SC.
The UI font is Dosis.
The header and animated text font is Yanone Kaffeesatz.

+ Click to see code

/* River Bank Theme by IronShears
*    Built on Dust Jacket by Woedenaz which was built on Black Highlighter by Woedenaz and Croquembouche
* Header image, river texture, and logo by IronShears, released under CC-BY-SA 3.0
* Fancy Border and Fancy hr Texture by Stygian Blue, edited by IronShears, released under CC-BY-SA 3.0
* Icon by Stygian Blue, released under CC-BY-SA 3.0
* Fonts used are  */
 
/*font imports*/
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&family=Dosis:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap');
 
/*dust jacket import*/
@import url("https://wanderers-library.wikidot.com/component:theme/code/1");
:root{
 
/*Header*/
--gold-foil: linear-gradient( rgb(var(--dark-accent)), rgb(var(--gray-monochrome)));
--gradient-header: url("https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/riverheader.gif");
--logo-image: url("https://wanderers-library.wikidot.com/local--files/component:river-bank-theme/LANTERN_PROJECT.png");
 
/* Theme colors*/
    --white-monochrome: 168, 188, 185;
/*offwhite-greenish page color*/
 
    --light-pale-gray-monochrome: 76, 131, 161;
    /* off-white paper edge color */
 
    --gray-monochrome: 76, 131, 161;
    /* light-blue*/
 
    --dark-gray-monochrome: 23, 34, 58;
    /* black*/
 
    --light-gray-monochrome: 48, 80, 49;
    /* dark green*/
 
    --bright-accent: 119, 141, 118;
    /* light green*/
 
    --dark-accent: 23, 34, 58;
    /* black*/
 
    --alt-accent:  237, 220, 183;
    --very-light-gray-monochrome: var(--white-monochrome);
    --medium-accent: var(--bright-accent);
--swatch-menubg-color: var(--light-gray-monochrome);
--swatch-text-tertiary-color: var(--dark-accent);
--swatch-secondary-color: var(--alt-accent);
    --black-monochrome: var(--dark-accent);
-login-myaccount-hover-bg-color: var(--bright-accent);
--rating-module-text-color: var(--alt-accent);
--link-color: var(--light-gray-monochrome);
--rating-module-button-plus-color: var(--white-monochrome);
--rating-module-button-negative-color: var(--dark-gray-monochrome);
--rating-module-button-cancel-color: var(--gray-monochrome);
--rating-module-button-credit-color: var(--swatch-secondary-color);
 
/*Extra*/
--river-text-content: "RIVER BANK THEME";
--river-texture: url('https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/waves.png');
--river-texture-trans: url('https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/wavestransleft.png');
--river-texture-trans-left: url('https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/wavestransright.png');
--fancy-hr: url("https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/riverhr.png");
--fancy-border: url("https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/riverborder.png");
 
/* Fonts */
--body-font: 'Lato', sans-serif;
--title-font: 'Dosis', sans-serif;
--UI-font: 'Dosis', sans-serif;
}
/*BODY STUFF*/
 
#page-content a{
font-weight: bold;
 text-decoration: underline;
}
 
body{
background-color: rgb(var(--white-monochrome));
}
 
blockquote, .blockquote, div.blockquote, [class*="blockquote"] {
  border-style: dashed;
  border-radius: 10px;
  background-color: rgb(var(--very-light-gray-monochrome));
}
 
.fancyborder{
border-image-source: var(--fancy-border);
border-image-slice: 300;
  border-image-repeat: round;
}
 
.fancyhr hr{
border-image-source: var(--fancy-hr);
border-top: 4vw solid transparent;
}
 
div.page-watch-options a, div.page-watch-options a:visited {
  --hover-link-color: red;
}
 
/*header*/
div#extra-div-1 {
    background: var(--gradient-header);
    background-repeat: repeat;
    background-position: left;
    background-size: auto 100%;
}
 
#login-status #account-options {
  background-image: none;
  background-color: rgb(var(--black-monochrome));
}
 
#header{
--login-username-color: var(--alt-accent);
--login-myaccount-color: var(--alt-accent);
}
 
#login-status {
color: rgb(var(--black-monochrome));
}
#login-status #account-topbutton {
background-color: rgb(var(--alt-accent));
}
 
#header h1 a {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 200%;
}
 
#header h1 a, #header h1 a::before, #header h1 a::after {
  color: rgb(var(--white-monochrome));
}
 
#header h1 a::before {
  text-shadow: black 0.125rem 0rem 0, black  0.0675rem 0.1052rem 0, black  -0.052rem 0.1137rem 0, black  -0.1237rem 0.0176rem 0, black  -0.0817rem -0.0946rem 0, black  0.0355rem -0.1199rem 0, black  0.12rem -0.0349rem 0;
}
 
#header h1 a::after {
  background-repeat: repeat-x;
  background-position: center;
background-size: 6rem;
    background-image: none;
  animation: wave 50s linear infinite;
}
 
/*Gold foil removal surgery*/
#page-title::before,
.meta-title::before,
#page-title::after,
.meta-title::after {
    background-image: var(--gold-foil);
}
 
hr {
    background: var(--gold-foil);
}
 
#content-wrap {
background-image: var(--river-texture);
background-repeat: repeat-x;
background-position: left bottom;
background-size: 100px;
  animation: wave-bottom 50s linear infinite;
}
 
/*Animations*/
 
@keyframes wave{
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -99% 0;
  }
}
 
@keyframes wave-bottom{
  0% {
    background-position-x: 100%;
  }
  100% {
    background-position-x: -99%;
  }
}
@keyframes wave-bottom-left{
  0% {
    background-position-x: -99%;
  }
  100% {
    background-position-x: 100%;
  }
}
 
/*River Title*/
div.rivertext {
    height: 12vw;
}
 
div.rivertext h1 {
font-family: 'Yanone Kaffeesatz', sans-serif !important;
font-size: 10vw !important;
}
 
div.rivertext h1::before {
text-shadow: black 0.125rem 0rem 0, black 0.0675rem 0.1052rem 0, black -0.052rem 0.1137rem 0, black -0.1237rem 0.0176rem 0, black -0.0817rem -0.0946rem 0, black 0.0355rem -0.1199rem 0, black 0.12rem -0.0349rem 0;
content: var(--river-text-content);
}
 
div.rivertext h1::after {
  background-repeat: repeat-x;
  background-position: center bottom;
background-size: 10vw;
    background-image: var(--river-texture);
  animation: wave 50s linear infinite;
 -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
content: var(--river-text-content);
}
 
div.rivertext h1,
div.rivertext h1::before,
div.rivertext h1::after {
position: absolute;
left: 0;
right: 0;
}
 
/*page style*/
 
#page-content h1{
font-family: 'Amatic SC', cursive;
font-size: 500%;
margin-bottom: -20px;
}
#page-content h2{
font-family: 'Amatic SC', cursive;
font-size: 400%;
margin-bottom: -15px;
}
#page-content h3{
font-family: 'Amatic SC', cursive;
font-size: 300%;
margin-bottom: -12px;px;
}
 
/*rating bottom page*/
#who-rated-page-area {
  background-color: rgb(var(--white-monochrome));
  border-radius: 10px;
  padding: 9px;
  border-style: dashed;
  border-color: rgb(var(--bright-accent));
}
 
/*footer*/
 
#footer a {
  background-color: rgb(var(--black-monochrome));
border-radius: 2px;
  margin-left: 10px;
  margin-right: 10px;
background-image: none;
}
 
#license-area a, #license-area a:visited {
pointer-events:auto;
  background-color: rgb(var(--black-monochrome));
border-radius: 2px;
  margin-left: 10px;
  margin-right: 10px;
}
#license-area a:hover{
color: rgb(var(--black-monochrome));
}
 
#footer {
  --footer-bg-color: transparent;
  --footer-text-color: rgb(var(--black-monochrome));
  --footer-link-color: var(--swatch-text-secondary-color);
  --footer-link-hover-color: var(--swatch-primary-darkest);
font-size: 1rem;
height: 100px;
background-image: var(--river-texture-trans-left);
background-position-y: center;
background-size: 100px;
position: relative;
margin-top: -60px;
  animation: wave-bottom-left 50s linear infinite;
pointer-events: auto;
padding-bottom: 30px;
}
 
#license-area{
font-size: 1rem;
color: rgb(var(--black-monochrome));
pointer-events:  none;
background-color: transparent;
height: 100px;
background-image: var(--river-texture-trans);
background-position-y: center;
background-size: 100px;
z-index: 3;
position: relative;
margin-top: -60px;
  animation: wave-bottom 50s linear infinite;
padding-top: 30px;
}

Footnotes

1. This is a footnote!