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

+ Show component code

@supports(display: grid) {
    :root {
        --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
        --body-width-on-desktop: 45.75rem;
    }
    @media only screen and (min-width: 769px) {
        #side-bar .close-menu {
            display: block;
            position: fixed;
            top: 0.5rem;
            left: 0.5rem;
            width: 3rem;
            height: 3rem;
            background: unset;
            opacity: 1;
            pointer-events: all;
            z-index: -1;
        }
 
        #side-bar .close-menu img {
            color: transparent;
        }
 
        #side-bar .close-menu::before,
        #side-bar .close-menu::after {
            content: "";
            box-sizing: border-box;
            position: fixed;
            display: block;
            top: 0.5rem;
            left: 0.5rem;
            width: 3rem;
            height: 3rem;
            padding: 0;
            margin: 0;
            text-align: center;
            pointer-events: all;
            cursor: pointer;
            transition:
                opacity var(--sidebar-transition-timing);
        }
 
        #side-bar .close-menu::before {
            --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E");
            z-index: -1;
            background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important;
            -webkit-mask: var(--mask);
            mask: var(--mask);
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: 50% 50%;
            mask-position: 50% 50%;
            -webkit-mask-size: 60%;
            mask-size: 60%;
        }
 
        #side-bar .close-menu::after {
            z-index: -2;
            background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important;
            border-radius: var(--toggle-roundness, 50%);
            border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid;
        }
 
        #side-bar:focus-within .close-menu,
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu {
            pointer-events: none;
        }
 
        #side-bar:focus-within .close-menu::before,
        #side-bar:focus-within .close-menu::after {
            opacity: 0;
            pointer-events: none;
        }
 
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::before,
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::after {
            opacity: 0;
            pointer-events: none;
        }
 
        #side-bar {
            display: block;
            position: fixed;
            top: 0;
            left: calc(var(--sidebar-width-on-desktop)*-1);
            z-index: 10;
            transition:
                left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            margin-top: 0;
        }
 
        #side-bar:focus-within {
            left: 0;
        }
 
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover {
            left: 0;
        }
 
        #side-bar .side-block {
            margin-top: 1rem;
            background-color: rgb(0, 0, 0, 0);
            border-radius: 0;
            border-left-width: 0px;
            border-right-width: 0px;
        }
 
        #main-content::before {
            content: "";
            display: block;
            position: fixed;
            top: 0;
            right: 0;
            z-index: -1;
            opacity: 0;
            transition:
                opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            margin-left: var(--sidebar-width-on-desktop);
            background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat;
            padding-right: 0;
            width: 100%;
            height: 100vh;
            pointer-events: none;
            z-index: 99;
        }
 
        #side-bar:focus-within ~ #main-content::before {
            width: calc(100% - var(--sidebar-width-on-desktop));
            opacity: 1;
            pointer-events: all;
        }
 
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before {
            width: calc(100% - var(--sidebar-width-on-desktop));
            opacity: 1;
            pointer-events: all;
        }
 
        @supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { #side-bar {
            padding: inherit;
        } }
 
        #content-wrap {
            display: flex;
            flex-direction: row;
            width: calc(100vw - (100vw - 100%));
            min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
            flex-grow: 2;
            height: auto;
            position: relative;
            margin: 0 auto;
            max-width: inherit;
        }
 
        #main-content {
            width: 100%;
            position: initial;
            max-height: 100%;
            padding: 2rem 1rem;
            max-width: var(--body-width-on-desktop, 45.75rem);
            margin: 0 auto;
        }
 
        #page-content {
            max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
        }
 
        @supports (-webkit-hyphens:none) { 
            #side-bar {
                transition:
                    left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                    padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                    background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
                padding-right: 0;
                background-color: rgb(0, 0, 0, 0);
                pointer-events: all;
                overflow-x: visible;
                overflow-y: visible;
                z-index: 999;
            }
 
            #side-bar::-webkit-scrollbar {
                opacity: 0;
                -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
                transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            }
 
            #side-bar .close-menu::before {
                z-index: 999;
            }
 
            #side-bar .close-menu::after {
                z-index: 998;
            }
 
            #side-bar:hover .close-menu::before,
            #side-bar:hover .close-menu::after {
                opacity: 0;
            }
 
            #side-bar:hover {
                left: 0;
                background-color: rgba(var(--swatch-menubg-color), 1);
                padding-right: 0;
            }
 
            #side-bar:hover::-webkit-scrollbar {
                opacity: 1;
            }
 
            #side-bar:hover~#main-content::before {
                width: calc(100% - var(--sidebar-width-on-desktop));
                opacity: 1;
                pointer-events: all;
            }
        }
    }
}

---

+ Show component code

:root {
        /* header measurements */
        --header-height-on-desktop: 10rem;
        --header-height-on-mobile: 10rem;
        --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem);
        --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem);
 
        --logo-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg");
    }
 
    #header {
        --search-textbox-text-color: var(--swatch-secondary-color);
        background: none;
    }
 
    #header::before {
        content: " ";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0.75rem;
        background-image: var(--logo-image);
        background-repeat: no-repeat;
        background-position: center 0;
        background-size: auto calc(var(--header-height-on-desktop) - 1.5rem);
        opacity: 0.8;
        pointer-events: none;
    }
 
    #header h1,
    #header h2 {
        margin: 0;
        padding: 0;
        width: 100%;
        height: var(--header-height-on-desktop);
        display: flex;
        align-items: center;
        justify-content: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    #header h1 a,
    #header h1 a::before,
    #header h2 span,
    #header h2 span::before {
        margin: 0;
        padding: 0;
        z-index: 0;
        display: block;
        text-align: center;
    }
 
    #header h1 {
        z-index: 1;
    }
 
    #header h1 a::before,
    #header h1 a::after {
        content: var(--header-title);
    }
 
    #header h1 a::before  {
        color: rgb(var(--swatch-text-tertiary-color));
        z-index: -1;
        -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark));
    }
 
    #header h1 a::after {
        color: rgb(var(--swatch-headerh1-color));
        z-index: 1;
    }
 
    #header h2 {
        z-index: 0;
        text-transform: uppercase;
        pointer-events: none;
    }
 
    #header h2 span {
        margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em);
    }
 
    #header h2 span::before,
    #header h2 span::after {
        --wght: 600;
        content: var(--header-subtitle);
        position: absolute;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 100%;
        text-align: center;
    }
 
    #header h2 span::before {
        -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark));
    }
 
    #header h2 span::after {
        color: rgb(var(--swatch-headerh2-color));
        z-index: 1;
    }
 
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        color: rgba(0, 0, 0, 0);
    }
 
    @media (min-width: 36rem) {
 
        #login-status {
            flex-grow: 1;
            left: 3%;
            right: initial;
        }
 
         #login-status::before {
            --mask-image: none;
            background-color: transparent;
        }
 
        #login-status:not(:focus-within) {
            color: rgb(var(--login-line-divider-color));
            -webkit-user-select: initial;
            -moz-user-select: initial;
            -ms-user-select: initial;
            user-select: initial;
        }
 
        #login-status #account-topbutton,
        #login-status:not(:focus-within) #account-topbutton {
            --clip-path:
                    polygon( 0 0, 100% 0, 100% 100%, 0 100% );
            background-color: rgba(var(--login-arrow-color), 0);
 
        }
 
        #login-status #account-topbutton::before{
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(var(--login-arrow-color), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton:hover::before {
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
        }
 
        #login-status:not(:focus-within) #account-topbutton::after {
            display: none;
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            pointer-events: all;
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) {
            opacity: 1;
        }
 
        #login-status #my-account {
            --wght: 300;
        }
 
        #account-options {
            background: var(--gradient-header);
        }
 
        #search-top-box {
            top: 1.5em;
            right: 3%;
            background: rgba(var(--search-focus-textbox-bg-color), 0.4);
        }
 
         #search-top-box:focus-within ~ #login-status {
            opacity: 1;
        }
 
        #search-top-box::after {
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
        }
 
        #search-top-box:not(:focus-within)::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0% 100%
                    );
            background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #search-top-box:not(:focus-within):hover::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            background-color: rgb(var(--search-icon-hover-bg-color));
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) {
            max-width: var(--search-width);
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
            max-width: var(--search-width);
            padding: 0 var(--search-height) 0 1em;
            outline-width: 0;
            background-color: rgb(var(--search-focus-textbox-bg-color), 0.35);
            color: rgba(var(--search-textbox-text-color), 0.4);
            cursor: pointer;
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"],
        #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] {
            pointer-events: all;
            border: none;
        }
 
    }
 
    #page-title::after,
    .meta-title::after,
    #page-title::before,
    .meta-title::before {
        content: "";
        flex-grow: 1;
        height: 0.0625rem;
        background: rgb(var(--swatch-primary));
    }
 
    #page-title::before,
    .meta-title::before {
        margin: auto 1.25rem auto auto;
    }

Footnotes

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