Caminó Una Milla Torcida
Caminó Una Milla Torcida
Hecho porㅤ Lt FlopsLt Flops
Traducido por Dc_YerkoDc_Yerko
Traducido el 08 Sep 2022 12:01
Puntuación: +2+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;
    }
    }
}

Puntuación: +2+x

Canon Hub » Caminó una Milla Torcida

Una larga caída y una cuerda corta era todo lo que me separaba del olvido. Hubo una especie de calma pacífica en el momento en que el saco carmesí pasó por encima de mi cabeza. La multitud gritaba sus acusaciones, en su mayoría ciertas, pero ahora me parecían más tranquilas.

"Ladrón de cuerpos". "Ladrón de criptas". "Ladrón de tumbas".

No importaba que fuera en la búsqueda de la ciencia. Que una entrada en la Universidad de Yarsborough dijera "Sr. Cimmerian - 65". A nadie le importaba que esos 65 cadáveres hubieran hecho más por la ciencia como una causa que cualquier cantidad de trabajo que yo hubiera podido realizar en mi vida.

Un día, pronto, esas personas que me gritaban serían salvadas por el conocimiento que yo había ayudado a proporcionar. Me quedé allí, a la luz de la luna rubí, seguro de tener ese consuelo.

Y entonces la trampilla se dejó abrir debajo de mí la cuerda que me rodeaba el cuello se tensó, hubo un crujido, un destello de dolor, y luego no hubo nada. Este lugar se había cobrado otra víctima.

La ciudad de Dezmond, sin embargo, rara vez deja escapar algo de valor.

Hubo destellos de conciencia. De dolores inimaginables. Luego, el silencio de nuevo. El estado onírico en el que caí fue uno de terror y asombro. Luché por respirar durante unos momentos. Veía las vagas formas de los rostros que me miraban. Luego, de nuevo nada. El olvido. Una y otra vez.

En los breves momentos de conocimiento, imaginé que esto era tal vez un castigo por una vida de maldad.

Entonces, una noche desperté del olvido para siempre. Estaba atado a una mesa, elevado en lo alto del cielo lluvioso. Podía sentir la oleada de electricidad a través de mi cuerpo. Un relámpago me golpeó por segunda vez cuando rompí las ataduras que me sujetaban. Apestaba a carne quemada, a formaldehído y a aire ionizado. Pero estaba vivo. Era poderoso.

Sin embargo estas no eran mis manos. Mis gafas habían desaparecido pero mi vista estaba clara, así que estos no eran mis ojos. Sin embargo, estaba seguro de que era mi mente.

Salté desde la plataforma elevada. Caí a casi 30 metros de profundidad, pero los adoquines se rompieron en lugar de mis huesos. Nadie me persiguió en la noche, pero corrí de todos modos. Me encontré en un callejón que no reconocía, mientras que la lluvia disminuía lentamente.

Allí, en el suelo, en un charco de agua turbia de color rojo sangre, vi mi reflejo por primera vez. Una gran cicatriz comenzaba en mi cuero cabelludo, continuaba por mi nariz y bajaba por mi cuello. La piel del lado izquierdo de mi cara era un poco más clara que la del resto de mí, y un solo ojo rojo me devolvía la mirada. El otro ojo era de color avellana, igual de irreconocible pero al menos no tan extraño.

Me rasgué la túnica suelta que me cubría el pecho. Se desprendió a trompicones y pronto pude ver mi piel. Se encontraba llena de costuras y cicatrices.

Me apoyé sobre el edificio cercano y me puse a llorar. No había un gran castigo o recompensa al otro lado. Solo el olvido. El dolor que había sentido era totalmente humano. Los hombres de ciencia intentaban recomponerme. Y cuando llegué a esa conclusión, un hombre entró en el callejón con una sonrisa.

Debo haber parecido un blanco fácil para este ladrón. Sostenía el cuchillo con cierta confianza. En él veía una mano entrenada. Había luchado con hombres como él en las trincheras.

Pero Cimmerian había estado demasiado enfermo para luchar en la guerra.

Ahh. Me percaté entonces. Después de todo, esto no era completamente mi mente.

El ladrón comenzó a acercarse a mí. Me levanté y le miré. Mientras me tomaba la medida, pude ver las punzadas de miedo en sus ojos. Antes de que pudiera contemplar su error, me moví como un rayo. Su cabeza se estrelló contra la pared de ladrillos con un chapoteo húmedo.

Miré hacia abajo y descubrí que me había apuñalado. Justo debajo de la caja torácica de otra persona, en el corazón de otra persona. Un golpe mortal. Saqué el cuchillo.

Esperaba verme desangrar allí sobre los adoquines, pero la única sangre que brotaba era la del muerto que tenía delante mientras se deslizaba lentamente por la pared y se desplomaba.

La herida se cerró inmediatamente. Las cicatrices permanecieron, pero el agujero sobre mi corazón quedó sellado.

Lo consideré por un momento. Luego agarré el cuerpo del hombre y lo puse sobre mi hombro y me dirigí por los tejados hacia Yarsborough. La universidad pagó bien por el cuerpo de ese ladrón. Se hizo una nueva entrada para mí. El Hombre Construido, me llamó el doctor. Creo que pretendía ser una broma, pero lo dejé pasar sin comentarlo. Incluso le convencí de que me prestara una cama para pasar la noche y algo de ropa.

Cuando sonaron los silbatos a la mañana siguiente, volví al mundo. Mi sueldo pagó una comida. El buen doctor de Yarsborough incluso me alquiló la habitación, en secreto, en la torre del reloj de Yarsborough. No era suyo el alquiler, pero nadie más lo utiliza. Voy y vengo siempre en secreto.

Tenía que saciar mi curiosidad. Volví a donde me hicieron, pero encontré el edificio quemado hasta las cenizas. Los nombres de los propietarios no figuraban en ningún registro público. Tal vez esta sea mi penitencia por algún desaire imaginado. Tal vez un amigo hizo esto para salvarme de la muerte.

Quizá nunca sepa quién lo hizo ni por qué.

Por ahora descanso en lo alto de la torre del reloj de Yarsborough. Una campana negra y apagada es mi compañera constante. Está agrietada por las arañas. Alguien la recompuso, pero nunca volverá a sonar. Eso me viene bien a decir verdad.

El buen doctor me habló de una serie de asesinatos en la universidad. Alguna criatura de la noche ha empezado a matar gente de madrugada.

Los usurpamientos pagan las facturas. El ocasional robo de tumbas compra mi comida. ¿Pero cuánto puedo obtener por el cuerpo de un verdadero vampiro? ¿O de un hombre lobo?

Creo que esta noche cazaré monstruos.

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