Tema Foxtrot
/* fuente: 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;
    }
    }
}
fxtrt.png

Foxtrot

Puntuación: +4+x

En cualquier página de Sigma-9:

[[include theme:foxtrot]]

¿Qué es esto?

Foxtrot es una tema estético de Sigma-9 diseñado para emular el aspecto y la sensación de Basalto — que combina un diseño moderno y plano con la extravagante comodidad de la web inicial del Sigma-9 que le precedió.

Puede verse como un tema de transición para aquellos que buscan encontrarse con el nuevo aspecto de Basalto a medio camino.

Foxtrot se basa en una serie de temas anteriores, sobre todo en Blankstyle y Penumbra. Está equipado con soporte para los modos claro y oscuro; los artículos pueden cambiarse sin problemas a uno u otro.

1 Variantes


1.1 En Guardia 43

[[include theme:foxtrot canada=a]]


canada_light.png
canada_dark.png

1.2 S&C Plásticos

[[include theme:foxtrot slothspit=a]]


slothspit_light.png
slothspit_dark.png

1.3 De los Archivos del 120

[[include theme:foxtrot poland=a]]


poland_light.png
poland_dark.png

1.4 Vanguardia

[[include theme:foxtrot vanguard=a]]


vanguard_light.png
vanguard_dark.png

1.13 Modo Oscuro

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

[[include theme:foxtrot dark=a|threshold=a]]

2 Personalización


2.1 Variables

Las siguientes son variables CSS utilizadas para controlar aspectos de este tema.

3 Elementos


3.1 Divs

Div blocks incluidos o alterados por este tema.

[[div class="blockquote"]]

[[div class="jotting"]]

[[div class="paper"]]

[[div class="notation"]]

3.2 Coloreado

Muchos elementos pueden ser coloreados envolviéndolos en un div con una clase tableX.

table1 corresponde a green,
table2 corresponde a blue,
table3 corresponde a yellow,
table4 corresponde a orange,
table5 corresponde a red,
and table6 corresponde a purple.

Este sistema está diseñado para conectar con la paleta de colores del ACS; cada color significa un nivel de autorización de seguridad diferente.

Tabla ordinaria
Texto aquí
Texto aquí
Texto aquí
Tabla con clase table2
Texto aquí
Texto aquí
Texto aquí
Tabla con clase table5
Texto aquí
Texto aquí
Texto aquí

Blockquote ordinario

Blockquote con clase table1

Blockquote con clase table3

3.3 Extras

Algunos consejos adicionales.

  • Los desplegables, muy estilizados en este tema, pueden recuperar su aspecto original si se envuelven dentro de un div con la clase default-col.

  • Prácticamente cualquier elemento puede tener bordes redondos si se envuelve dentro de un div con la clase round.

Blockquote ordinario

Blockquote redondo

  • Aplicar hidetitle=a remueve el título de la página.
  • Aplicar wide=a extiende el ancho de la página — aunque esto puede interferir con cualquier caja lateral presente (para la que este tema tiene soporte incorporado).
  • Aplicar verdana=a cambia la fuente a Verdana.

Si no se indica lo contrario, el contenido de esta página se ofrece bajo Creative Commons Attribution-ShareAlike 3.0 License