Biopunk Theme

This is the Biopunk Theme. It was created for tales to use in the third SSS Event - TitanClash LIVE.

How to include

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

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

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

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

Theme Components

---

The body font is Chakra Petch
The Header font is East Sea Dokdo
The Title font is Special Elite
The Monsospace font is Syne Mono

---

Here's some links for you:

• Visited link
• Unvisited link
• Missing link

---

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

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

---

Tabulator

This is a tab view.

Tabulation

Hey look, text in a tab. Cool!

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

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

/* Biopunk Theme */
/* 2023 Wikidot Theme */
/* By UncertaintyCrossing, based off Wanderers Observatory theme by EstrellaYoshte, Dust Jacket theme by Woedenaz,and Vitalis LLC theme.  */
/* All images, textures, and so on are create by me, excluding the worm titan in the header which is made by mxssacre. All items are licensed under CC BY SA 3.0. */
 
  @import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap');
  @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');
 
:root {
    --titan-body-bg: url(https://wanderers-library.wdfiles.com/local--files/component%3Abiopunk/radioactive_texture_dark.jpg);
    --titan-header-layer-0: url(https://wanderers-library.wdfiles.com/local--files/component%3Abiopunk/skyline_background.jpg);
    --titan-header-layer-1: url(https://wanderers-library.wdfiles.com/local--files/component%3Abiopunk/cityskyline2.png);
 
    --titan-ichor: 0,0,0;
    --titan-flesh: 4, 38, 1;
    --titan-eyes: 75, 255, 68;
    --titan-bone: 196, 102, 255;
    --titan-maw: 128, 1, 188;
    --titan-teeth: 7, 168, 1;
    --titan-scar: 169, 40, 76;
 
    --body-font: 'Chakra Petch', sans-serif; font-size: 18px; 
    --header-font: 'East Sea Dokdo', cursive;
    --title-font: 'Special Elite', cursive;
    --UI-font: var(--title-font);
    --mono-font: 'Syne Mono', monospace;
    --header-title: "TitanClash LIVE";
    --logo-image: url( );
 
    --white-monochrome: var(--titan-flesh);
    --light-gray-monochrome: var(--titan-bone);
    --light-pale-gray-monochrome: var(--titan-flesh);
    --gray-monochrome: var(--titan-maw);
    --pale-gray-monochrome: var(--titan-maw);
    --dark-gray-monochrome: var(--titan-ichor);
    --black-monochrome: var(--titan-eyes);
    --bright-accent: var(--titan-eyes);
    --medium-accent: var(--titan-bone);
    --dark-accent: var(--titan-flesh);
 
    --swatch-primary-darker: var(--titan-teeth);
    --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( --titan-scar);
    --swatch-tertiary-color: var( --titan-flesh);
 
     --sidebar-links-bg-color: var(--titan-flesh);
 
    --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(--titan-maw);
    --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(--titan-teeth);
    --rating-module-bottom-border-color: var(--bright-accent);
    --rating-module-text-hover-color: var(--pale-gray-monochrome);
 
}
 
body {
    background-color: rgb(var(--swatch-background));
    background-image: var(--titan-body-bg);
    background-size: calc(50rem + 20%);
    background-attachment: fixed;
    background-repeat: repeat;
    color: rgb(227, 232, 228);
}
 
#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(--titan-maw);
    --footnotes-footer-bg-color: var(--titan-ichor);
 
    margin: 0 auto;
}
 
tt, pre { font-size: 0.9125em; }
 
/*------ 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: 30vh;
    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(--titan-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(--titan-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(--titan-ichor), 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%3Abiopunk/texture%20bg2.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%3Abiopunk/titan_border.png) 600 round;
    -moz-border-image: url(https://wanderers-library.wdfiles.com/local--files/component%3Abiopunk/titan_border.png) 600 round;
    -o-border-image: url(https://wanderers-library.wdfiles.com/local--files/component%3Abiopunk/titan_border.png) 600 round;
    border-image: url(https://wanderers-library.wdfiles.com/local--files/component%3Abiopunk/titan_border.png) 600 round;
    border-image-width: 6;
    padding: 2vw;
}
 
#main-content .fancyhr hr {
    border-top: 2vw solid transparent;
    background-color: rgba(255, 219, 90, 0);
    background-color: rgba(var(--bright-accent), 0);
    height: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-image-source: url(https://wanderers-library.wdfiles.com/local--files/component%3Abiopunk/titan_fancy.png);
    border-image-repeat: round round;
    background: none;
    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(--titan-eyes), 1);
    background-color: rgba(var(--titan-maw), 0.15);
    border: .063em solid rgba(var(--bright-accent), 1);
}
 
/*--- HR ---*/
#main-content hr {
    --hr-icon-size: 3.75rem;
    margin: .5rem 0;
    background: transparent;
    height: var(--hr-icon-size);
    display: grid;
    place-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
hr::before, hr::after {
    content: "";
    display: grid;
    grid-column: 1/2;
    grid-row: 1/2;
    background-color: rgb(var(--swatch-primary));
}
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(--titan-eyes)) !important;
 background-color: rgb(var(--titan-eyes)) !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: 25vh;
}
@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(--titan-ichor));
}
#extra-div-1::before {
    background-color: rgb(var(--titan-ichor), .15);
}
#extra-div-1 > span {
    background-image: none;
}
body {
    background-color: rgb(var(--titan-ichor));
    background-image: none;
}

Footnotes

1. And here's a footnote!