Flopstyle: OSCURO
Flopstyle: OSCURO
Hecho porㅤ Lt FlopsLt Flops
Traducido por Dc_YerkoDc_Yerko
Traducido el 12 Nov 2022 07:40

Este es un ejemplo funcional del authorbox. Consulta la subseccion Sideboxes para más información.

Cerrar

Navegación

I. ¿Qué es esto?
II. Cómo Usar
1. Componentes Precargados
2. Variables Personalizables
3. Encabezado Flops
4. Sideboxes
5. Porciones Cambiables Misc.
6. Variantes del Tema
III. Ejemplos de Formateo (GENERAL)
IV. Ejemplos de Formateo (AVANZADO)

alt_logo_tyrian.png

.

Flopstyle: OSCURO
Quien me dio el poder de editar Penumbra cometió un grave error.
scp_foundation_logo.png

Este es un ejemplo funcional del sidebox.

⮤ Esto es una flavorbox ⮥

Consulta la subsección Sideboxes para más información.

Flopstyle: OSCURO

Temas Sigma-9 » Flopstyle: OSCURO

alt_logo_tyrian.png

Puntuación

Puntuación: +3+–x

Puntuación + Módulo de Info

Puntuación: +3+–x

Módulo de Info Standalone

Info

¿Qué Es Esto?

Este es un tema creado por Lt FlopsLt Flops. Está pensado para su uso generalizado en cualquier artículo en el que se prefiera el modo oscuro o el modo nocturno.

Flopstyle: OSCURO existe para que pueda actualizarlo fácilmente, independientemente de todas las páginas que lo incluyan. Es de esperar que el CSS cambie sutilmente con el tiempo.

Utiliza esto sólo si entiendes lo que estás haciendo.

Este tema es incompatible con Black Highlighter y BASALTO. Si tu página incluye Black Highlighter o BASALTO, no utilices este tema, o tendrás errores importantes.

Flopstyle: OSCURO es un derivado de los siguientes temas:

Créditos mayores a JackalRelated, quién creó el theme logo (CC BY-SA 3.0).

Por ultimo pero no menos importante, gracias a stormbreath, quien revisó el tema entero, y a Croquembouche, que aportó en un par de áreas.

» MIRA LAS NOTAS DEL PARCHE (en inglés) «

Cómo Usar

La Información Esencial

Por favor, lee esta sección introductoria antes de configurar Flopstyle: OSCURA en tu página.

PASO 1. INCLUYE EL TEMA Copia esta sintaxis y pégala en la parte superior de tu página:

[[include theme:flopstyle-dark]]

[OPCIONAL] PASO 2. AÑADIR LÍNEA DE REFERENCIACopia esta sintaxis y pégala directamente debajo del módulo de puntuación — así:

[[module Rate]]

[[div class="byline"]]
[[span]] by authorLink [[/span]](A)
[[span]] # [[/span]](B)
[[/div]]

2. (A) Reemplaza authorLink con el nombre del/los autor(es), y un/los enlace(s) a las páginas pertinentes del autor.

2. (B) Reemplaza # con el tiempo estimado (en minutes) que le tomaría a un lector terminar tu artículo. Para estimar el tiempo de lectura de tu artículo, puedes copiar el texto del artículo y pegarlo en la herramienta Read-o-Meter, y luego redondea para arriba o abajo el minuto más cercano..AVISO Read-o-Meter no registra ni almacena tus datos.

‼️ Asegúrate de que no hay espacios entre las líneas que contienen los spans, ¡o no funcionará como es debido!

hCGnFsp.png

Un ejemplo del paso 2 en acción.

PASO 3. ESTABLECER TÍTULO DE PÁGINA Copia esta sintaxis y pégala donde quieras señalar el inicio de tu artículo:

[[div class="meta-title"]]
Tu Título Aquí
[[/div]]

Por razones de accesibilidad, debeS hacer esto en cada página que utilice Flopstyle: oscuro.

PASO 4. ESTABLECER NAVEGACIÓN DE MIGAJAS Copia esta sintaxis y pégala directamente debajo del título de la página:

[[div class="pseudocrumbs"]]
[[[parent-page-url1|1° Título de Página Padre]]] » Título de Página Hija
[[[parent-page-url2|2° Título de Página Padre]]] » Título de Página Hija
[[/div]]

‼️ Si estás creando un artículo que requiere el uso de ListPages, no te preocupes — aún puedes ascender tus fragments como es usual, pero debes hacerlo de la manera tradicional. La funcionalidad prima sobre la forma en este caso.

uKmDCe1.png

Un ejemplo de los pasos 3 y 4 en acción.

Ahora… Si la estética básica es todo lo que quieres de Flopstyle: DARK, eres libre de coger el código y salir corriendo. Pero si sigues avanzando, puedo mostrarte lo profundo que es este agujero de conejo.

Flopstyle: OSCURO fue diseñado con los siguientes componentes en mente…

1. Componentes pre-cargados

Este tema viene pre-cargado con los siguientes seis componentes:

1.1. Animación de ACS por EstrellaYoshte
1.2. Mejores Notas al Pie por EstrellaYoshte
1.3. CSS Croqstyle por Croquembouche
1.4. Fundido de Entrada (con speed=1) por Croquembouche
1.5. Estilo de Texto (Por JaonHax) by JaonHax
1.6. Alternar Barra Lateral por EstrellaYoshte

2. Variables Personalizables

(Cámbialas solo si entiendes lo que estás haciendo)

Todos los cambios de variables deben estar envueltos/encerrados en un módulo CSS, [[module CSS]]. Todos los enumerados también deben estar envueltos/encerrados en un selector :root.

2.1. COLORES Puedes cambiar una variedad de colores del tema según te plazca. Simplemente copia cualquiera de las siguientes variables (pero sólo las que necesites) y edítalas como sea necesario:

[[module CSS]]
:root{

/* -- COLORES -- */
--accentColor: accent_color;
--accentColorLite: lighter_accent_color;
--hue: hue;

/* Estándares (No copiar):
* accentColor:
Bright Tyrian pink hsl(325, 85%, 55%).
* accentColorLite:
Soft Tyrian pink hsla(325, 85%, 65%, .5).
* hue: 325deg.
**/

accentColor es la variable de página más utilizada. Entre todas las demás variables, cambiar el accentColor es normalmente la única alteración que los usuarios de este tema tienden a hacer.

Cuando cambies accentColor, también debes cambiar otras dos variables:

2.1. (A) accentColorLite: Debe tener una luminosidad más alta y un valor alfa más bajo que su accentColor. Recomiendo una luminosidad de al menos un 10% más que la de su accentColor elegido, y un valor alfa de 0,5.
2.1. (B) hue: Debe coincidir con el tono de su accentColor elegido.

Para seleccionar el color que desees, te recomiendo el HSL Color Picker. HSL es un sistema de color amigable con el ser humano que significa Hue, Saturation, Lightness, que en español serían Tono, Saturación y Luminosidad, respectivamente. Se puede ampliar a HSLA, que incluye el valor Alfa (opacidad).

Para confirmar que el accentColor elegido cumple con las Directrices de Accesibilidad del Contenido en la Web, chequea este Ratio de Contraste. Inserta
hsl(222, 12%, 21%) en el campo de "Background", y tu accentColor escogido en el campo de "Text color". Las directrices exigen una relación de contraste de 3 o superior para el texto de los encabezados.

2.2. LOGOS Y FUENTES Puede cambiar el logotipo, las fuentes, etc.:

/* -- LOGOS -- */
--lgurl: url(URL_HERE);

/* -- FUENTES -- */
--header-font: "yourFont", sans-serif;
--body-font: "yourFont", sans-serif;

/* Estándares (No copiar):
* header-font: Montserrat, sans-serif
* body-font: Inter, sans-serif
**/

2.3. TÍTULOS DE ENCABEZADO También puedes cambiar el título, el subtítulo, el color del título y el color del subtítulo:

/* -- TÍTULOS -- */
--header-title: "TÍTULO";
--header-subtitle: "SUBTÍTULO";
--titleColor: title_colour;
--subtitleColor: subtitle_colour;

/* Estándares (No copiar):
* titleColor:
Bright Tyrian pink hsl(325, 85%, 55%).
* subtitleColor:
Bright Tyrian pink hsl(325, 85%, 55%).
**/

}
[[/module]]

3. Encabezado Flops

Flopstyle: OSCURO proporciona una versión del Encabezado Flops apta para el modo oscuro:

[[include component:flops-header
|item=
|containment=
|level=
|security=
|disruption=
|disruption-bg-color=
]]

cGbnRpP.png

An example of the Flops Header in action.

4. Sideboxes

Sideboxes son componentes incorporados que vienen en dos tipos:

  • Tipo-A authorbox y sidebox
  • Tipo-B sidecontainer

Las instrucciones de uso varían según el tipo.

  • La authorbox y el sidebox no se muestran en pantallas de width=1280px y menores, lo que incluye las pantallas de los móviles. Pueden configurarse para mostrar la información de la página y del autor.
  • El sidecontainer se hunde en el borde de la página en pantallas de width=1280px y menores. En esas pantallas, se puede acceder a él tocando con el dedo o pasando el cursor por encima. Se puede configurar para que muestre información narrativa adicional.

Ten en cuenta estas condiciones antes de configurar estos elementos: un porcentaje considerable de los usuarios de la Wiki SCP navega a través de dispositivos móviles.

Tipo-A Authorbox y Sidebox

(Ver arriba a la izquierda y arriba a la derecha)

Adaptado del Tema Peumbra por EstrellaYoshte

Por defecto, la authorbox está opt-out. Viene precargado en todas las páginas que incluyen Flopstyle: OSCURO. Si deseas removerlo, reemplaza esto:

[[include theme:flopstyle-dark]]

Por esto:

[[div style="display: none;"]]
[[include theme:flopstyle-dark]]
[[/div]]

ALTERNATIVA 1 Después de eliminar la authorbox, puedes reemplazarla con una versión personalizada que muestre la información que deseas. Esta funcionalidad puede ser especialmente útil para páginas con coautoría, reescritas o traducidas. Para referencia, este es el código que crea el authorbox:

[[div class="anchor"]]Establece la posición adhesiva de la caja de autor.
[[div class="authorbox tableb"]]
[[module ListPages name="="]]
||~ %%title%% ||
||= [[span class="bt bb"]] By [[/span]] %%created_by_linked%% ||
||~ Published on %%created_at|%d %b %Y%% ||
[[/module]]

[[div class="flavorbox"]]Creates authorbox's flavorbox.
Desired flavor text here.
[[/div]]

[[/div]]
[[/div]]Establece el límite final del anclaje.

Por defecto, la authorbox hace uso de ListPages para automatizar los metadatos mostrados. Teóricamente podrías copiar el módulo ListPages dentro de la authorbox y pegarlo en cualquier página de la Wiki, y estos campos se rellenarían de forma exclusiva para esa página. Por supuesto, puedes cambiar cualquiera de estos campos si lo deseas.

También puedes editar tu authorbox personalizado para mostrar un texto de un sabor adaptado a tu página, como una nota para los lectores.

RECUERDA — El uso del flavorbox es opcional. Pero es el único bloque div que debes utilizar dentro de un authorbox.

ALTERNATIVA 2 Si quieres, puedes mover la authorbox a la derecha de la página cambiándola por la sidebox. Para crear un sidebox, copia esta sintaxis y pégala dentro de un módulo CSS en la parte superior de tu página:

[[div class="anchor"]]Sets sidebox's sticky position.
[[div class="sidebox tableb"]]
[[module ListPages name="="]]
||~ %%title%% ||
||= [[span class="bt bb"]] Por [[/span]] %%created_by_linked%% ||
||~ Publicado el %%created_at|%d %b %Y%% ||
[[/module]]

[[div class="flavorbox"]]Crea el flavorbox de caja lateral.
Texto saborizado deseado aquí.
[[/div]]

[[/div]]
[[/div]]Establece el límite final del anclaje.

Si tienes pensado insertar algún sidecontainer en tu página, te recomiendo encarecidamente que utilices la authorbox en lugar de la sidebox. La razón es que, cuando el sidebox y el sidecontainer aparecen en tándem, se superponen y quedan visualmente desordenados. Esto puede resultar muy confuso para los lectores. Por lo tanto, es mejor permanecer en el lado seguro.

Puedes configurar un sidebox para transmitir la misma información que un authorbox. O, como en el caso de la tabla que muestro aquí, puedes añadir un eslogan de artículo y un icono único.

Como cualquier otra tabla, también puedes aplicar un tono único — por ejemplo, el verde actual, como se consigue con table1. Consulta Formateo de Tabla en la sección Ejemplos de Formateo (GENERAL) para más información.

Sidecontainer Tipo-B

(Ver Abajo)

Cortesía de Woedenaz

El sidecontainer está opt-in. Está configurado así:

[[div class="limit"]]Establece el límite de inicio del anclaje.
[[div class="anchor"]]Establece la posición adhesiva del sidecontainer.
[[div class="sidecontainer"]]
Texto de sidecontainer deseado aquí.
[[/div]]
[[/div]]
Texto con el que el sidecontainer se asocia.
[[/div]]Establece el límite final del anclaje.

Recomiendo insertar un salto de línea manual después del texto asociado al sidecontainer. Puedes conseguirlo encerrando un espacio con dos conjuntos de @@ (uno a cada lado). El sidecontainer aparecerá junto a este texto al pasar por él.

Mostrar Ejemplo

Recuerda el div limit. Sin un limit, el anchor permanecerá presente en todo el contenido de la página una vez que se desplace más allá de su posición inicial.

5. Porciones Cambiales Misc.

Si es necesario, también puedes editar cualquiera de estas propiedades CSS para adaptarlas mejor a tu página.

Cambiar Opacidad del Logo

#extra-div-1{
filter: opacity(number_percentage);
}

Opacidad Estándar = 33%

6. Variantes del Tema

Si insertas una variable diferente en el bloque de inclusión del tema, puedes aplicar una variante de tema prefabricada a tu página.

Variante BRUJA

Para el futuro canon "Tejiendo Hilos Imperceptibles"

0bxdPMM.png

[[include theme:flopstyle-dark witch=a]]

Mostrar Variantes Alternativas

Ejemplos de Formateo [GENERAL]

Mostrar Formateo General
Mostrar Formateo de Imágenes
Mostrar Formateo de Tabla

Ejemplos de Formateo [AVANZADO]

Mostrar Div Blocks Personalizados
Mostrar Formateo Especial

Código Fuente

Mostrar Código 

La fuente de ENCABEZADO es Montserrat.

La fuente del CUERPO es Inter.

La fuente del MONOESPACIADO es Fira Code.

La fuente de GUIÓN es Comic Neue.

Puntuación: +3+–x

Qué es esto

Un puñado de "mejoras" CSS varias que yo, CroquemboucheCroquembouche, utilizo en un montón de páginas porque creo que las hace más fáciles de manejar.

Los cambios que hace este componente son un montón de modificaciones realmente triviales para facilitar la experiencia de escritura y para hacer la documentación de los componentes/temas un poco más fácil (lo que hago mucho). No cambia nada de la página visualmente para el lector — los cambios son para el escritor.

No esperaría que las traducciones de los artículos que usan este componente también lo usen, a menos que al traductor le guste y quiera usarlo de todos modos.

Este componente probablemente no entrará en conflicto con otros componentes o temas, e incluso si lo hace, probablemente no importará demasiado.

Uso

En cualquier wiki:

[[include :lafundacionscp:component:croqstyle]]

Este componente está diseñado para ser utilizado en otros componentes. Cuando lo utilice en otro componente, asegúrese de añadir esto dentro del bloque de [[iftags]] del componente, para que los usuarios de su componente no se vean obligados a utilizar también Croqstyle.

Componentes relacionados

Otros componentes de estilo personal (que sólo cambian un par de cosas):

Temas de estilo personal (que son revisiones visuales):

Cambios de CSS

Notas a pie de página de tamaño razonable

Evita que las notas a pie de página sean de un tamaño excesivo, para que se puedan leer realmente.

.hovertip { max-width: 400px; }

Edición/código monoespaciado

Hace que el cuadro de texto de edición sea monospace, y también cambia todo el texto monospace a Fira Code, la fuente monospace obviamente superior.

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

Fondos de teletipo

Añade un fondo gris claro a los elementos <tt> ({{text}}), para que los fragmentos de código destaquen más.

tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

No más caras grandes

Evita que aparezcan imágenes grandes cuando pasas el ratón por encima de la imagen de avatar de alguien, porque son estúpidas y realmente molestas y puedes hacer clic en ellas si quieres ver la versión grande.

.avatar-hover { display: none !important; }

Salto saltito

Cualquier texto dentro de un div con clase nobreak tiene un ajuste de línea entre cada letra.

.nobreak { word-break: break-all; }

Colores del código

Añade los colores del código de mi terminal como variables. Tal vez cambie esto a un tema de terminal más común como Monokai o algo así en algún momento, pero por ahora es sólo mi tema personal, que se deriva de Tomorrow Night Eighties.

Además, al añadir la clase .terminal a un bloque de código falso como [[div class="code terminal"]] le da una especie de aspecto de pseudo-terminal con un fondo oscuro. No funciona con [[code]], porque Wikidot inserta un montón de resaltado de sintaxis que no puedes cambiar tú mismo sin un montón de CSS. Utilízalo solo para fragmentos de código sin [[code]].

Herramienta rápida para colorear un ejemplo de uso de un componente "estándar" de Wikidot con las variables anteriores: link

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
}
 
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;
}

Modo de depuración

Dibuje líneas alrededor de cualquier cosa dentro de .debug-mode. El color de las líneas es rojo, pero depende de la variable CSS --debug-colour.

También puede añadir div.debug-info.over y div.debug-info.under dentro de un elemento para anotar las cajas de depuración - aunque tendrá que asegurarse de dejar suficiente espacio vertical para que la anotación no se superponga a lo que está por encima o por debajo.

…like this!

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
}
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }
/* 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;
    }
    }
}

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