Thalassophobia Theme

Fish^12

It's my first theme! And this here is the Author Page!

---

Dive deep, deep diver.

tha·las·so·pho·bi·a.

/θˌalɐsəfˈə͡ʊbi͡ə/

noun

the irrational fear of the ocean or deep bodies of water.

---

The purpose of this theme is for the Fish Council's Deep Sea Site-72, a collaborative project about an ocean based Foundation facility in the mid-1900s, dedicated to research and containment, ten thousand meters below the surface. Think bathyscaphes, acoustic sonar technology, and copper diving suits you'd see out of Bioshock.

Although it's not limited to just that. If you want anything to do with deep sea analog horror, or just underwater vibes in general, you've come to the right place. Slap this theme on it and you're good to go.

---

It's getting so cold and dark.

Bronze--bronze#BA7F00

Sky Blue--sky-blue#00AABD

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

Light Bronze--light-bronze#E8BA56

Dark Bronze--dark-bronze#6E4B00

Sea Black--sea-black#010507

Black--black#000000

Deep Blue--deep-blue#0A5180

Dark Blue--dark-blue#052942

{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}

{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}

{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}

{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}

{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}

{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

---

---

Tangled icon. Lost. Irretrievable.

As with all Black Highlighter themes, this theme needs the code for Black Highlighter placed before it. Without it, it breaks. You don't want stuff breaking, do you?

Copy paste this in there to get the theme:

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:theme:thalassophobia]]

This theme comes with Woedenaz's BHL Toggle Sidebar and BHL Centered Header. It looks very bad without those things. This theme also extends from his Extra Black Highlighter Theme.

Formatting Examples

What's this? A horizontal line! "-----" You make it with four, technically, but five is nicer.

---

Titles. But not subtitles. Or header titles. Use the "+" to make 'em.

+ Titles

1 meter

10 meter

100 meter

1000 meter

10000 meter

100000 meter

tabs :)

How deep can we go?

tabs :(

Not that deep, unfortunately.

Did you know that you can make these without the stupid looking >?
Observe this horizontal line.

---

Like this! [[div class="blockquote"]]

What? It goes deeper!

Deeper! All the way down to the bottom!¹

Why	would
you	use
tables?

---

The header, body, and title font is Miriam Libre.
The monospace font is Anonymous Pro.

---

+ Show theme code

/*
   Thalassophobia Theme
   [2021 Wikidot Theme]
   by Fish^12
          Glory to the Homeland.
*/
 
@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro&family=Miriam+Libre:wght@700&display=swap');
 
::-moz-selection {
    background: #1745a9;
}
 
::selection {
    background: #1745a9;
}
 
body {
    background: linear-gradient(-90deg, #010507, #000000, #001012, #020411);
    background-size: 150% 1%;
    -webkit-animation: gradient 15s ease infinite;
            animation: gradient 15s ease infinite;
    background-color: #010507;
}
 
@-webkit-keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
 
    50% {
        background-position: 100% 50%;
    }
 
    100% {
        background-position: 0% 50%;
    }
}
 
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
 
    50% {
        background-position: 100% 50%;
    }
 
    100% {
        background-position: 0% 50%;
    }
}
 
div#container-wrap {
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Athalassophobia/thalassophobiagradient.png');
}
 
:root {
    --theme-base: "black-highlighter";
    --theme-id: "thalassophobia";
    --theme-name: "Thalassophobia Theme";
 
    --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Athalassophobia/thalassophobiaheader.svg");
    --header-title: "DEEP SEA SITE-72";
    --header-subtitle: "Abyssus Custodiens Sub Lumine";
 
    --body-font: 'Miriam Libre', sans-serif;
    --header-font: var(--body-font), sans-serif;
    --title-font: var(--body-font), sans-serif;
    --mono-font: 'Anonymous Pro', monospace;
    --UI-font: var(--body-font);
 
    /* THEME ASSIGNMENTS */
    --sea-black: 1, 5, 7;
    --black: 0, 0, 0;
    --bronze: 186, 127, 0;
    --dark-bronze: 110, 75, 0;
    --light-bronze: 232, 186, 86;
    --sky-blue: 0, 170, 189;
    --deep-blue: 10, 81, 128;
    --dark-blue: 5, 41, 66;
    --neon-blue: 0, 229, 255;
 
    --dark-gray-monochrome: 12, 13, 14;
    --black-monochrome: 1, 5, 7;
    --light-pale-gray-monochrome: 232, 186, 86;
    --bright-accent: var(--pale-accent);
 
    --swatch-primary: var(--dark-bronze);
    --swatch-primary-darker: var(--bronze);
    --swatch-primary-darkest: var(--bronze);
    --swatch-background: var(--swatch-menubg-black-color);
    --swatch-border-color: var(--light-bronze);
 
    --swatch-text-light: var(--light-pale-gray-monochrome);
    --swatch-text-general: var(--swatch-text-light);
 
    --swatch-menubg-color: var(--swatch-menubg-black-color);
    --swatch-menubg-extra-dark-color: var(--black-monochrome);
    --swatch-menutxt-general-color: var(--swatch-menutxt-light-color);
 
    --swatch-secondary-color: var(--swatch-menubg-dark-color);
    --swatch-tertiary-color: var(--swatch-menubg-medium-dark-color);
    --swatch-alternate-color: var(--swatch-primary);
 
    --swatch-text-secondary-color: var(--sea-black);
    --swatch-text-tertiary-color: var(--light-bronze);
 
    --swatch-topmenu-bg-color: var(--sea-black);
 
}
 
#header {
    --search-icon-color: var(--light-bronze);
    --search-icon-hover-color: var(--light-bronze);
 
    --search-focus-textbox-text-color: var(--light-bronze);
    --search-textbox-text-color: var(--sky-blue) --login-line-divider-color: var(--light-bronze);
    --login-username-color: var(--sky-blue);
    --login-myaccount-color: var(--light-bronze);
    --login-dropdown-text-color: var(--light-bronze);
    --login-dropdown-text-hover-color: var(--light-bronze);
}
 
#top-bar {
    --dropdown-bg-color: var(--swatch-menubg-extra-dark-color), 0.9;
    --mobile-topmenu-sidebar-button-color: var(--sky-blue);
 
    --topmenu-category-color: var(--light-bronze);
    --topmenu-category-hover-color: var(--light-bronze);
    --dropdown-links-color: var(--light-bronze);
    --dropdown-links-hover-color: var(--light-bronze);
}
 
#side-bar,
#interwiki {
    --sideblock-heading-border-color: var(--deep-blue);
    --sideblock-heading-text-color: var(--sky-blue);
 
    --sidebar-bg-color: var(--sea-black);
 
    --sidebar-border-color: var(--dark-blue), 0.08;
    --sidebar-subtest-color: var(--dark-blue);
 
    --sidebar-links-text: var(--sky-blue);
    --sidebar-links-hover-bg-color: var(--sky-blue);
    --sidebar-links-hover-text-color: var(--sea-black);
}
 
#search-top-box-input {
    background-color: rgb(var(--sky-blue));
}
 
hr {
    background-color: rgb(var(--light-bronze));
}
 
:root {
    --link-color: var(--sky-blue);
    --hover-link-color: var(--sky-blue);
    --visited-link-color: var(--sky-blue);
    color: rgb(var(--swatch-text-general));
}
 
#main-content {
    --footnotes-footer-title-text-color: var(--sea-black);
    --hoverblock-header-txt: var(--sea-black);
 
    --tabs-hover-bg: var(--bronze);
    --tabs-selected-bg: var(--dark-gray-monochrome);
    --tabs-selected-txt: var(--light-bronze);
    --tabs-selected-outline: var(--dark-bronze);
}
 
input[type=checkbox]:checked {
    outline: 0 solid rgb(var(--bronze));
    box-shadow: 0 0 0 .125rem rgb(var(--bronze));
}
 
input[type=checkbox]:checked:after,
input[type=checkbox]:checked:before {
    background-color: rgba(var(--bronze), 1);
}
 
.pager .current,
.pager .current:before {
    background-color: rgb(var(--bronze));
}
 
input[type=radio] {
    background: rgb(var(--bronze));
    box-shadow: 0 0 0 .0625rem rgb(var(--bronze));
}
 
table.page-history tr:nth-of-type(2) td:not(:nth-of-type(7))::before {
    background-color: rgb(var(--bronze));
}

Footnotes

1. Surprise! I live here! But you haven't gone down far enough yet.