Rituals for the Cascading Style Sheets

BUNA ZIUA

JAJAJA O ZI FOARTE BUNA PENTRU TOATA LUMEA, NU

Reenie Beanie

css module

[[module CSS]]
@import url('https://fonts.googleapis.com/css?family=Reenie+Beanie&display=swap');

.handwriting{
    font-family: 'Reenie Beanie', cursive;
    font-size: 1.8rem;
}
[[/module]]
[[div class="handwriting"]]
Put writing here!
[[/div]]

Pontus Euxinus theme

css module

[[module CSS]]
/* Wanderer's Depths Theme */
/* 2020 Wikidot Theme */
/* By ROUNDERHOUSE, based off Dustjacket by Woedenaz and Croquembouche */
/* Logo by Bard Bard, using art from SunnyClockwork, licensed under CC BY SA 3.0 */
/* Header background CC BA SA 3.0, edited by ROUNDERHOUSE. */

/* Fonts */

@import url('https://fonts.googleapis.com/css?family=Trade+Winds&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: "WanderersDepths";
    /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
    --theme-name: "Wanderer's Depths";
    /* set this to your theme's full name */

    /* Header */
    --logo-image: url("http://wanderers-sandbox.wdfiles.com/local--files/bard-bard-s-sandbox/emy_anchor.png");
    /* Logo image made by Bard Bard using elements from SunnyClockwork, all licensed under CC BY SA 3.0 */
    --header-title: "WANDERER'S DEPTHS";

    /* Typefaces */
    --header-font: 'Trade Winds', cursive;
    --title-font: 'Trade Winds', 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 */
    --bright-two: 31, 101, 193;
    /* bright blue */
    --medium-accent: 38, 54, 82;
    /*  blue */
    --dark-accent: 38, 54, 82;
    /* dark blue */
    --newpage-color: 221, 102, 17;
    /* pale orange */

    /* Primary Theme Colors */
    --swatch-background: var(--white-monochrome);
    --swatch-primary: var(--medium-accent);
    --swatch-primary-darker: var(--bright-accent);
    --swatch-primary-darkest: var(--bright-accent);
    /* 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);

    /* Interwiki */
    --head: var(--medium-accent);
    --link: var(--bright-two);

}

#content-wrap {
    background-image: url(http://wanderers-sandbox.wdfiles.com/local--files/bard-bard-s-sandbox/emy_bg.png);
}

#skrollr-body {
    width: 100%;
    height: 7.625rem;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(http://wanderers-sandbox.wdfiles.com/local--files/bard-bard-s-sandbox/emy_waves.png);
    background-repeat: repeat-x;
    background-size: contain;
}

#top-bar div.top-bar > ul > li > a {
    padding: 0.2em 1em;
}

#top-bar div.top-bar > ul > li > ul {
    background: url(http://wanderers-library.wikidot.com/local--files/component:wanderers-depths/paperdivbg.jpg);
}

#top-bar div.top-bar > ul > li > ul > a {
    color: rgb(var(--medium-accent));
}

#side-bar:target {
    background: url(http://wanderers-library.wikidot.com/local--files/component:wanderers-depths/paperdivbg.jpg)!important;
}

div#page-options-bottom > a,
div#page-options-bottom-2 > a {
    background: url(http://wanderers-library.wikidot.com/local--files/component:wanderers-depths/paperdivbg.jpg);
    border: 0.15rem solid rgba(var(--dark-accent), 1);
    color: rgba(var(--dark-accent), 1);
}

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);
}

#page-title {
    border-bottom: 1px dashed rgb(var(--swatch-menubg-medium-dark-color,66,66,72));
}

.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));
}

.blockquote, blockquote {
    border: 3px ridge rgb(var(--dark-accent));
    background: rgba(var(--medium-accent),0.05);
}

hr {
    background-image: none;
    background-color: rgba(var(--medium-accent))!important;
}

.footnotes-footer {
   border: 3px ridge rgb(var(--dark-accent));
   background: url(http://wanderers-library.wikidot.com/local--files/component:wanderers-depths/paperdivbg.jpg);
}

.footnotes-footer .title {
   font-family: var(--title-font);
}

#toc {
    border: 3px ridge rgb(var(--medium-accent));
    background: url(http://wanderers-library.wikidot.com/local--files/component:wanderers-depths/paperdivbg.jpg);
}

#toc .title {
    color: rgb(var(--bright-two));
}

.paper {
    font-family: 'Caveat', cursive;
    font-style: bold;
    font-size: 1.4rem;
    background: url("http://scp-sandbox-3.wdfiles.com/local--files/bard-bard-s-sandbox/paper.jpg") repeat 0px 8px;
    /*Licensed under CC, produced by https://www.deviantart.com/jojo-ojoj*/
    border: 3px ridge rgb(var(--dark-accent));
    border-radius: 5px;
    padding: 10px 10px;
    margin: auto;
}

.page p,
.page ul {
    line-height: 1.2em;
    margin: 0;
}

.wl-translations {
    background-color: none;
    background: url(http://wanderers-library.wikidot.com/local--files/component:wanderers-depths/paperdivbg.jpg);
}

.wl-translations a {
    color: rgb(var(--bright-two));
}

a {
    color: rgb(var(--bright-two));
}

a:visited {
    color: rgb(var(--dark-accent));
}

a:hover {
    color: rgba(var(--bright-two), .6);
}

/* mobile */

@media only screen and (max-width: 768px) {

    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        background-color: rgb(var(--medium-accent));
        border-bottom: none;
        border-right: none;
    }

    div#extrac-div-1 {
        background-image: url(http://wanderers-library.wikidot.com/local--files/component:wanderers-depths/waterbg.png);
        background-size: 31.250rem;
        z-index: 3;
    }

    div#page-options-bottom {
        width: 90%;
    }
}
@import url('https://fonts.googleapis.com/css?family=Reenie+Beanie&display=swap');

.handwriting{
    font-family: 'Reenie Beanie', cursive;
    font-size: 1.8rem;
}
[[/module]]

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.

block contents
block contents
block contents
block contents

---

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

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

Nested blockquotes

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

The body font is Adelle Sans.
The Header and Title font is Zuijin.
The monospace font used is Adaptive Mono.

TEXT TEXT TEXT
TEXT TEXT TEXT
TEXT TEXT TEXT
TEXT TEXT TEXT
TEXT TEXT TEXT
TEXT TEXT TEXT
TEXT TEXT TEXT
TEXT TEXT TEXT
TEXT TEXT TEXT

---

[[collapsible show="+ Click to see code" hide="- Hide code" hideLocation="both"]]
[[code type="css"]]