Foxtrot 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;
        pointer-events: auto;
}
 
@media not all and (max-width: 767px) {
 
    #top-bar .mobile-top-bar {
        display: block;
        pointer-events: none;
    }
 
    #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-x: hidden;
        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;
    }
    }
}
fxtrt.png

Foxtrot

rating: +80+–x
Liryn

me author page / twitter

projects admonition / metafoundation / basalt

On any Sigma-9 page:

[[include :scp-wiki:theme:foxtrot]]

What's this?

Foxtrot is an aesthetic Sigma-9 theme designed to emulate the look and feel of a large forthcoming Basalt update — blending a modern, flat design with the quirky early-web comfiness of the Sigma-9 that came before.

It can be viewed as a transitionary theme for those looking to meet Basalt's new look halfway.

Foxtrot is based on a slew of previous themes, most notably Blankstyle and Penumbra. It is equipped with support for light and dark modes; articles can be seamlessly switched to one or the other.

1 Variants

1.1 On Guard 43

[[include :scp-wiki:theme:foxtrot canada=a]]


canada_light.png
canada_dark.png

1.2 S&C Plastics

[[include :scp-wiki:theme:foxtrot slothspit=a]]


slothspit_light.png
slothspit_dark.png

1.3 From 120's Archives

[[include :scp-wiki:theme:foxtrot poland=a]]


poland_light.png
poland_dark.png

1.4 Vanguard

[[include :scp-wiki:theme:foxtrot vanguard=a]]


vanguard_light.png
vanguard_dark.png

+ Show additional variants

1.13 Dark Mode

To apply dark mode, add the dark=a modifier. Multiple modifiers are separated with |, like so:

[[include :scp-wiki:theme:foxtrot dark=a|threshold=a]]

2 Customization

2.1 Variables

The following are CSS variables used to control aspects of this theme.

+ Basics
+ Colors
+ Fonts

3 Elements

3.1 Divs

Div blocks included with or altered by this theme.

[[div class="blockquote"]]

[[div class="modal"]]

[[div class="jotting"]]

[[div class="paper"]]

[[div class="notation"]]

3.2 Coloring

Many elements can be colored by wrapping them in a div with a tableX class.

table1 corresponds to green,
table2 corresponds to blue,
table3 corresponds to yellow,
table4 corresponds to orange,
table5 corresponds to red,
and table6 corresponds to purple.

This system is designed to connect with the color palette of the Anomaly Classification System; each color signifies a different security clearance level.

Ordinary table
Text here
Text here
Text here
Table with table2 class
Text here
Text here
Text here
Table with table5 class
Text here
Text here
Text here

Ordinary blockquote

Blockquote with table1 class

Blockquote with table3 class

3.3 Extras

A few additional tips.

  • Collapsibles, heavily styled in this theme, can be reverted back their original look if wrapped inside a div with the default-col class.

  • Virtually any element can be given round edges if wrapped inside a div with the round class.

Ordinary blockquote

Round blockquote

  • Applying the hidetitle=a setting removes the page title.
  • Applying the wide=a setting extends the width of the page — though this may interfere with any sideboxes present (which this theme has inbuilt support for).
  • Applying the verdana=a setting switches the main page font to Verdana.

+ Show source code
theme
page revision: 149, last edited: 12 Jan 2023 21:18
Edit Rate (+80) Tags Discuss (14) History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License