Tema Turbo Visión
/* 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;
    }
    }
}

Puntuación: +2+x

Este es el tema Turbo Visión hecho por JakdragonXJakdragonX y CroquemboucheCroquembouche, un tema aesthetic no asociado con ninguna premisa in-universe, aunque puede invocar una vibra muy retro.

Para usar este tema en tu página, incluye el siguiente código:

[[include theme:turbo-vision]]

Esto pone al tema Turbo Visión en 'modo tema'.


Si solo quieres ser capaz de usar los Turbo Bloques pero no quieres el resto del tema, añade "blocks=-":

[[include theme:turbo-vision blocks=-]]

Esto pone al tema Turbo Visión en 'modo componente'.


El 'modo tema' y el 'modo componente' vendrán adelante, así que asegúrate de saber cuál usa tu página.

jak.png

Logo por AethrisAethris

El tema Turbo Visión está diseñado para lucir similar a un terminal DOS de los 90s — es intencional que parezca hecho por un montón de caracteres ASCII. Esta es la razón de que los bordes y las sombras luzcan toscas y asimétricas — han sido hechas para lucir como box-drawing caracteres, con los colores creados por el color de la fuente y un color de fondo en baldosas individuales.

Dicho esto, no nos apegamos fervientemente a esta línea, y podemos tomarnos algunas libertades creativas para hacer la experiencia ligeramente menos dolorosa.

El tema viene con Alternar Barra Lateral por defecto para facilitar el tener un montón de espacio vertical y horizontal para llenar con bloques compensados con lo que quieras. En las pantallas más pequeñas, donde hay muy poco espacio horizontal, estos bloques de desplazamiento se llevarán automáticamente hacia el centro de la página: los lectores de móviles no se perderán nada.

Este tema es cúbico, tosco y colorido. Las páginas que lo utilizan pueden parecer desordenadas, como un montón de ventanas apiladas en una interfaz abarrotada, y eso es parte del encanto; pero no tiene por qué serlo, depende de ti. Esta página tiene instrucciones sobre cómo configurarlo de la manera que quieras.


La tabview que se muestra a continuación contiene algunos ejemplos del formato básico de Wikidot en este tema.

Ten en cuenta que mientras que el estilo de las blockquotes y de las tablas está disponible en el "modo componente", el estilo de la vista de pestaña sólo está disponible en el "modo tema".

Una regla horizontal puede crearse con 5 guiones "-----" y se extiende a lo largo de toda la página si no está colocada dentro de nada (por ejemplo, una blockquote). Las líneas que separan las secciones de este documento son reglas horizontales.

Este es un texto en negrita.

Este es un texto en cursiva.

Este es un texto monoespaciado.


Ahora, una rápida demostración de cómo funcionan los Turbo Bloques…


La siguiente sección de esta página puede parecer aterradora. Sin embargo, no debes sentirte alarmado o amenazado — cada parte puede dividirse en trozos fáciles.


scpimage.png

Hola si esto es un texto

ÍTEM NÚMERO

SCP-NÚMERO

CLASE DE OBJETO

LIGMA

PROCEDIMIENTOS ESPECIALES DE CONTENCIÓN

johnsmith12: eh, siquiera sabes que haces?

me: equis de, no. Simplemente necesito meter algunas weas para rellenar esta parte.

SCP-NÚMERO actualmente está sin contener. No se sabe si esto puede atribuirse a su escritura no identificada o si simplemente es demasiado molesto para molestar.

En el evento de que uno observa a SCP-NÚMERO por alguna razón — que realmente no hace mucho sentido cuando lo piensas un poco — los sujetos afectados deberán ir con el terapista in-situ para el Tratamiento #104321. Este tratamiento puede durar más de varias horas y puede ser insoportablemente doloroso para el sujeto afectado. Nadie quiere ir a la enfermería, quien sabe por qué.

que chucha dije que iba a almorzar?

DESCRIPCIÓN

SCP-NÚMERO es nada. Absolutamente nada. De hecho, es una mentira. Al igual que tú. Tú también eres, de hecho, una mentira. No te sientas herido o molesto, ya que esto se aplica a todo el mundo universalmente. En la Fundación condenamos la discriminación.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


De hecho, ¿qué podemos describir como verdad? Tal vez la percepción sea una mentira. ¿Una mentira perpetrada entre hombres sobre otros hombres, quizá? En efecto, la realidad no puede ser la misma para ti y para mí. Todos tenemos diferentes verdades y mentiras. Somos, por supuesto, criaturas tridimensionales. Ansiamos comprender. Deseamos el conocimiento y lo buscamos a pesar de algunas de nuestras mejores intenciones.

Quizás creas que sólo estoy escribiendo tonterías porque sólo quiero alargar esto más para conseguir una caja de color extra. Tal vez, pero al margen de tan magros deseos, sólo quiero permitirte el momento de la autorreflexión. ¿Es usted, de hecho, real? No. Como ya he dicho antes, sólo eres una imagen falsa. Una imagen falsa del mundo en el que vives actualmente. Eso es todo.


CÓMO USAR

Para crear un Turbo Bloque sombreado como el de este texto, crea un div con las siguientes clases:

  • "turbo-block"
  • una clase que establezca el color de fondo
  • una clase que establezca el color del borde
  • una clase que establezca el color del texto

Este tema provee de todas estas clases.

BLOQUE

La clase "turbo-block" crea al propio Turbo Bloque. Puedes usarlo por sí mismo sin ninguna de las otras clases, pero probablemente se verá raro (no tendrá fondo, por ejemplo).

[[div class="turbo-block"]]
Tu texto aquí
[[/div]]

COLOR DE FONDO

Este tema proporciona un montón de clases de utilidad de color de fondo, en la forma de "bg-[color]". Aquí están todas ellas:

[[div class="turbo-block bg-red"]]

[[div class="turbo-block bg-grey"]]

[[div class="turbo-block bg-green"]]

[[div class="turbo-block bg-cyan"]]

[[div class="turbo-block bg-orange"]]

[[div class="turbo-block bg-yellow"]]

[[div class="turbo-block bg-purple"]]

[[div class="turbo-block bg-black"]]

[[div class="turbo-block bg-white"]]

COLOR DE BORDE

Estos

Hay dos clases de color de borde: "border-black" y "border-white". Los Turbo Bloques no vienen con un borde por defecto, así que tendrás que elegir uno para cada turbo bloque.

Ten en cuenta que todos los divs creados con la clase "turbo-block" tienen un borde de doble línea. Los blockquotes, tablas y tabviews tienen un borde de una sola línea.

COLOR DE TEXTO

Hay dos clases de color de texto: "text-black" y "text-white". Hacen que el color del texto por defecto en el turbo-block sea negro y blanco respectivamente.

Cada Turbo Bloque puede tener un título y un grupo de encabezados. El título es el texto que aparece en la parte superior — el título de este es "ENCABEZADOS". Para ello, añade un atributo "data-title" al div del bloque:

[[div class="turbo-block ..." data-title="TU TÍTULO AQUÍ"]]

Para que coincidan con el programa original de Turbo Visión, los títulos de los bloques deben ir en mayúsculas, pero esto no es obligatorio — puedes poner el texto que quieras.

Sin embargo, trate de mantenerlos cortos, porque se ven raros si se desbordan:

¿Ves a lo que me refiero?

El código fuente para eso es:

[[div class="turbo-block bg-grey border-black text-black" data-title="Whoops, ¡Mírame! ¡Soy un Título que es Demasiado Largo!"]]
¿Ves a lo que me refiero?
[[/div]]

Piensa en los pobres lectores de móvil — mantén tus títulos cortos.

ENCABEZADOS

Dentro de un Turbo Bloque, puede crear un encabezado de subsección con la clase "heading" — aquí está el código para lo anterior:

[[div class="heading"]]
ENCABEZADOS
[[/div]]

Si quiere añadir una línea como un encabezado pero sin ningún texto en ella, sólo tiene que añadir una regla horizontal con 4 o 5 guiones:


↑ Justo así.

Puedes poner lo que quieras dentro de un Turbo Bloque, incluyendo imágenes. Para añadir una imagen, la mejor manera es hacer un div de Turbo Bloque y poner el componente de bloque de imagen estándar dentro de él.

Aquí está el del Turbo Bloque de imagen utilizado en el ejemplo anterior de esta página:

[[div class="turbo-block bg-orange border-white text-white" data-title="IMAGEN"]]
[[include component:image-block
| name=scpimage.png
| caption=Hola si esto es un texto
]]
[[/div]]

Hasta ahora, estas instrucciones han cubierto cómo crear Turbo Bloques. Puedes poner un Turbo Bloque dentro de otro Turbo Bloque, pero sólo haciendo eso no crearás una sensación de desorden, como una pila desordenada de notas en el escritorio de un investigador desorganizado — para hacer eso, algunos de ellos necesitan ser movidos a la izquierda y a la derecha.

Eso puede hacerse utilizando clases de desplazamiento. El tema Turbo Visión proporciona clases para mover algo a la izquierda:

  • "offset-left"
  • "left-1"
  • "left-2"
  • "left-3"
  • "left-4"
  • "left-5"

…y a la derecha:

  • "offset-right"
  • "right-1"
  • "right-2"
  • "right-3"
  • "right-4"
  • "right-5"

Para mover algo a la izquierda, envuélvelo en un div con dos clases: "offset-left", y luego una de "left-1" a "left-5", dependiendo de lo lejos que quieras moverlo hacia la izquierda. "left-1" sólo lo moverá un poco, pero "left-5" lo moverá mucho — hasta el lado izquierdo de la pantalla.

Para mover algo a la derecha, es exactamente lo mismo, pero cambiando "left" por "right".

DESPLAZAMIENTO EN MÓVIL

Si has trabajado con CSS antes, probablemente estés pensando que usar demasiado espacio horizontal en la pantalla es un juego muy peligroso — estos divs desplazados se verán terriblemente en móviles.

No tengas miedo. En tamaños de pantalla pequeños, los divs desplazados se colocarán más cerca del centro de la página, y en tamaños de pantalla muy pequeños, el desplazamiento se desactivará por completo.

Para los autores, esto significa que, aunque los usuarios de móviles siempre verán todo el contenido que pongas en los divs desplazados, puede que no se vea tan desordenado como pretendías. Pruebe siempre su diseño en móviles antes de publicarlo para comprobar que la experiencia de lectura es sólida para todos.

CREANDO BLOQUES DESPLAZADOS

Para crear un bloque desplazado, combina dos de las clases anteriores, para determinar la dirección y la intensidad del desplazamiento:

[[div class="offset-left left-3"]]

[[/div]]

Si quieres compensar un Turbo Bloque, ponlo dentro del Bloque de Desplazamiento (no añadas las clases de desplazamiento al Turbo Bloque directamente):

[[div class="offset-left left-3"]]
[[div class="turbo-block bg-white border-black text-black"]]
¡hola!
[[/div]]
[[/div]]

¡hola!

Si estás en un navegador ancho (por ejemplo, de escritorio), el ejemplo anterior está a la izquierda. Si estás en un navegador fino (por ejemplo, móvil), el ejemplo anterior está por encima de este texto.

Dado que el bloque de desplazamiento es un elemento diferente al Turbo Bloque, esto significa que puedes desplazar cualquier cosa que quieras, simplemente poniéndolo dentro de un div con clases de desplazamiento. ¡Prueba a desplazar un turbo-block de imagen!

BORRAR EL FLOAT

Los bloques de desplazamiento usan la propiedad de CSS llamada "float". Cuando un elemento HTML está flotando, las cosas que están debajo de él son arrastradas hacia arriba para llenar el espacio que deja.

Esto no siempre es deseable. Tal vez quieras un bloque de desplazamiento flotante, pero quieres que el texto debajo de él aparezca donde estaría si el bloque de desplazamiento no estuviera flotando. Esto dejaría un gran hueco para que puedas poner algo más allí, si quieres.

Puedes hacer esto usando la propiedad de CSS "clear" — una práctica que se conoce comúnmente como "clearfix". Wikidot permite hacer esto con 4 virgulillas (~~~~):

[[div class="offset-left left-3"]]
[[div class="turbo-block bg-white border-black text-black"]]
¡hola!
[[/div]]
[[/div]]

~~~~

¡hola!

Este texto no es arrastrado hacia arriba para llenar el espacio, lo que resulta en un gran vacío en el escritorio. En móvil, por supuesto, no hay ningún cambio.

EJEMPLOS

Aquí hay ejemplos para todas las diferentes combinaciones de desplazamiento.

Tu navegador tiene una pantalla ancha (o al menos el CSS lo dice), así que echa un vistazo a los ejemplos de abajo y ajusta el tamaño de tu ventana para ver cómo reaccionan los divs desplazados.

Tu navegador tiene una pantalla delgada (o al menos el CSS lo dice), lo que significa que probablemente estás en un dispositivo móvil. Los ejemplos de desplazamiento a continuación aparecerán como un montón de divs aburridos y alineados al centro. Intenta ver esta página en un navegador más amplio más tarde para ver los desplazamientos.

[[div class="offset-left left-5"]]

[[div class="offset-left left-4"]]

[[div class="offset-left left-3"]]

[[div class="offset-left left-2]]

[[div class="offset-left left-1"]]

[[div class="offset-right right-1"]]

[[div class="offset-right right-2"]]

[[div class="offset-right right-3"]]

[[div class="offset-right right-4"]]

[[div class="offset-right right-5"]]

Hay ciertas circunstancias en las que no deberías utilizar algunas de las clases de desplazamiento. Puedes hacerlo, por supuesto, pero tendrá un efecto adverso en tu página.

Las clases disponibles dependen de la posición de la barra lateral y de si el contenido de la página está o no alineado al centro con respecto a la ventana gráfica del navegador. También depende de si está utilizando este tema en "modo tema" o en "modo componente" - por favor, revisa las instrucciones de uso en la parte superior de la página para un recordatorio de cuál es cuál.

MODO TEMA

Si estás utilizando el tema Turbo Visión en "modo tema", viene con Alternar Barra Lateral, que alinea el contenido de la página en el centro y libera todo el espacio horizontal posible. Puede utilizar libremente todas las clases de desplazamiento.

MODO COMPONENTE

Si estás utilizando el tema Turbo Visión en 'modo componente', no viene con Alternar Barra Lateral por defecto. Esto limita el espacio horizontal.

Si está usando Alternar Barra Lateral de todos modos, el cuerpo de tu página está alineado al centro. Puedes utilizar libremente todas las clases de desplazamiento.

Si no está usando Alternar Barra Lateral, el cuerpo de la página está en el lado derecho de la página. Debes evitar usar cualquiera de las clases de desplazamiento a la derecha, ya que pueden salirse del borde de la pantalla. También debes evitar usar cualquier clase de desplazamiento a la izquierda cerca del comienzo de la página, ya que pueden superponerse con la barra lateral.

MUCHO TEXTO

En resumen: evita el desplazamiento hacia la izquierda si hay una barra lateral, y evita el desplazamiento hacia la derecha si el contenido de la página no está centrado.

Y ese es todo el tema.

Código fuente

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