Turbo Vision Dark Theme
/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
#top-bar .open-menu a {
        position: fixed;
        top: 0.5em;
        left: 0.5em;
        z-index: 5;
        font-family: 'Nanum Gothic', san-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 0.9em;
        text-align: center;
        border: 0.2em solid #888;
        background-color: #fff;
        border-radius: 3em;
        color: #888;
}
 
@media (min-width: 768px) {
 
    #top-bar .mobile-top-bar {
        display: block;
    }
 
    #top-bar .mobile-top-bar li {
        display: none;
    }
 
    #main-content {
        max-width: 708px;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }
 
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -20em;
        width: 17.75em;
        height: 100%;
        margin: 0;
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.4s ease-in-out;
 
        scrollbar-width: thin;
    }
 
    #side-bar:target {
        left: 0;
    }
    #side-bar:focus-within:not(:target) {
        left: 0;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin-left: 19.75em;
        opacity: 0;
        z-index: -1;
        visibility: visible;
    }
    #side-bar:not(:target) .close-menu { display: none; }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
 
    /* FIREFOX-SPECIFIC COMPATIBILITY METHOD */
    @supports (-moz-appearance:none) {
    #top-bar .open-menu a {
        pointer-events: none;
    }
    #side-bar:not(:target) .close-menu {
        display: block;
        pointer-events: none;
        user-select: none;
    }
 
    /* This pseudo-element is meant to overlay the regular sidebar button
    so the fixed positioning (top, left, right and/or bottom) has to match */
 
    #side-bar .close-menu::before {
        content: "";
        position: fixed;
        z-index: 5;
        display: block;
 
        top: 0.5em;
        left: 0.5em;
 
        border: 0.2em solid transparent;
        width: 30px;
        height: 30px;
        font-size: 30px;
        line-height: 0.9em;
 
        pointer-events: all;
        cursor: pointer;
    }
    #side-bar:focus-within {
        left: 0;
    }
    #side-bar:focus-within .close-menu::before {
        pointer-events: none;
    }
    }
}
rating: +42+x

WHAT IS THIS?

Turbo Vision Dark theme is a dark theme (no way!) built on top of Turbo Vision Theme and given a sleek and somewhat 'updated' look. You can use this for any article… but preferably one that touches on retro callbacks from modern times. Or if you prefer this over regular Turbo Vision.


spread-log.png

SCP Foundation / Foundation Media Dept. alternate logos



IMPORTING THE THEME

To use this theme on your page, include the following code:

[[include :scp-wiki:theme:turbo-vision-dark]]


This theme comes with Toggle Sidebar and Turbo Vision built-in so there's no need to include them again. That being said, there is no distinction between the theme itself/'theme mode' and the color divs/'component mode' like in the original Turbo Vision theme (thusly no BHL compatibility). It's 100% or nothing, sorry.


WHAT'S NEW?

Besides the obvious ones like the logo, font changes, and background colors, TURBO DARK also includes new DARK and LIGHT variations of the color divs. The standard color divs are unchanged if you would prefer to use those instead. Simply add '-dark' or '-light' to the end of the color div of your choice (e.g. bg-cyan-dark or bg-red-light).


DARK variations are meant to be used exclusively with WHITE border & text for readability.

LIGHT variations are meant to be used exclusively with BLACK border & text for readability.


The new divs can be seen below:



Blockquotes, Tables, and Tabs/Tabview also received some changes.

Standard tabs and tables have received the Jost font-family (as well as the main body). Blockquotes and use the same font as the color divs - Hermit - and tab headers use the topbar font, Terminus. Drop shadows have been changed individually as to not be too dark/too light depending on condition, and the background color of all three have been changed to be the same as the Grey Light color div for unity.


Here's an example:


A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (e.g. a blockquote). The lines separating sections of this document are horizontal rules.1


This is bolded text.

This is italicized text.

This is monospaced text.


ADDED FONTS

JOST

sphinx of black quartz, judge my vow
SPHINX OF BLACK QUARTZ, JUDGE MY VOW

bolded and italicized
BOLDED AND ITALICIZED


HERMIT

sphinx of black quartz, judge my vow
SPHINX OF BLACK QUARTZ, JUDGE MY VOW

bolded and italicized
BOLDED AND ITALICIZED


TERMINUS (@20px)

sphinx of black quartz, judge my vow
SPHINX OF BLACK QUARTZ, JUDGE MY VOW

bolded and italicized
BOLDED AND ITALICIZED


MICHROMA

sphinx of black quartz, judge my vow
SPHINX OF BLACK QUARTZ, JUDGE MY VOW

bolded and italicized
BOLDED AND ITALICIZED


SOURCE CODE


Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License