A 1 Metro Bajo Tierra II
A 1 Metro Bajo Tierra II
Autora: Lt FlopsLt Flops
Traductor: morhadowmorhadow
Publicado el 26 Aug 2023 10:07
Puntuación: +1+–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;
    }
    }
}

▷ Mostrar Código ◁
Puntuación: +1+–x

"No, no, no. Eso parece nuevo. Como si alguien lo hubiera pintado. Tienes que hacer que parezca más angular".

Sarah estaba ayudando al arqueólogo más quisquilloso del mundo a falsificar algunas pruebas. Cada vez, el Dr. Leo encontraba alguna forma de criticar las alas, o las plumas, o la vestimenta de Sarah. A decir verdad, Sarah no sabía qué prisa tenía. La pirámide egipcia subterránea que estaban asaltando ni siquiera había sido descubierta antes de que Thoth saliera de la luna y todo sucediera.

"Escucha, ¿podemos descansar 10 minutos? Se me está acalambrando la mano".

El Dr. Leo asintió. "Solo recuerda: aquí no se puede fumar". Se dio la vuelta y se alejó hacia el lugar donde habían dejado sus fiambreras.

Sarah caminó en la otra dirección, encendiendo un cigarrillo por el camino. Las paredes estaban cubiertas de diversos dibujos egipcios de personas que no tenían sentido ahora que los Dioses Pájaro habían decidido dotar a todo el mundo de alas. Alguna organización clandestina les había encomendado la tarea de corregir aquel error. Dios mío, ¡había miles de dibujos! Sarah apenas podía imaginarse cuántos días más tendría que pasar en la pirámide subterránea.

¿No hay aquí una sala del tesoro? pensó Sarah. Este tipo de pirámides suelen tener algún tipo de tesoro, ¿no? Ya que esta organización clandestina le pagaba una miseria por esto, pensó que podría recompensarse a sí misma.

En realidad no era tan difícil de encontrar; estaba detrás de una puerta oculta que hacía tiempo que se había derrumbado. El principal problema era el contenido: cinco pinturas antiguas que Sarah no tenía ninguna posibilidad de sacar de contrabando, dos enormes jarrones con el mismo problema, un espejo de mano dorado y un gran montón de monedas de oro. Al darse cuenta de que sus diez minutos estaban a punto de terminar, Sarah metió el espejo de mano y un par de puñados de monedas en su mochila.

A decir verdad, le gustaba el espejo de mano. No era gran cosa, pero, por alguna razón, su reflejo se veía mejor cuando se miraba en él.

"Ah, genial", dijo Katy, rompiendo el silencio. "Diego, para. Tenemos un problema".

Diego estaba ocupado llenando el coche con uno de los bidones de gasolina que habían traído. Cuando miró hacia atrás, vio a un grupo de hombres que se les acercaban a caballo. Llevaban armaduras de placas metálicas y portaban lanzas y arcos largos. Katy suspiró audiblemente.

"Estos tipos… conoces la Orden del Arrendajo Azul, ¿verdad?"

"…¿no?"

"Diego, ¿acaso escuchas cuando hablan los adultos?"

"¿Qué se supone que significa eso?"

Katy suspiró "Estos chicos son… raros, creo. Pensaron que las bombas eran una señal de Dios para dejar de usar la tecnología, así que intentaron volver a la época medieval. Van por ahí golpeando a la gente y se llevan sus cosas. Deberíamos ser capaces de adelantarles. ¿Ya terminaste de llenar el depósito?"

"Sí."

"Bien. Volvamos al coche y escapemos".

"¿Estás segura de que no podrán alcanzarnos?"

"Diego, van en caballos. Puedo garantizarte personalmente que este coche tiene más de un caballo de potencia".

Diego vació la bombona de gasolina y se tiró en el asiento delantero. Giró el arranque y pisó a fondo el acelerador. El coche emitió un sonido parecido al bostezo de su padre por la mañana antes de despegar. Como Katy predijo, dejaron atrás a los asaltantes en el polvo. Sin embargo, antes de que pudieran despejar mucha distancia, vieron a otro hombre con armadura cruzar la carretera a la carrera, con una tira de pinchos a cuestas. Diego pisó el freno, pero no a tiempo para evitar que las cuatro ruedas se pincharan.

"Mierda", dijo Diego, "¿y ahora qué?"

"Que no cunda el pánico, Diego".

"No voy a entrar en pánico".

"Bien. Creo que puedo disuadirlos. Déjame intentarlo".

Después de unos tortuosos minutos de ver a los asaltantes montados en los únicos caballos que Diego había visto en su vida, se detuvieron frente a ellos. Se alzaban sobre el dúo, haciendo que Diego se encogiera instintivamente. Katy se adelantó con las manos en alto. "Os entregamos todas nuestras posesiones", dijo, "pero por favor, no nos matéis. Tenemos una familia".

Uno de los asaltantes, el que llevaba una corona dorada en lugar de una máscara, desmontó de su caballo y se volvió hacia sus hombres. "¡Mirad a estos tipos!", dijo con un acento evidentemente fingido. "¿Creen que vamos a matarlos? Qué graciosos". Se rió de una manera falsa que hizo que el resto de los asaltantes se rieran con él.

Se volvió hacia Katy y Diego. Llevaba un bigote muy bien recortado y una sonrisa que dejaba al descubierto sus dientes amarillentos. "No, no, no, no hemos venido a robaros. ¡Al contrario! ¡Hemos venido a reclutaros!"

"Esperad", dijo Katy, "¿queréis que nos unamos a vosotros? ¿Para… asaltar, gente?"

"¿Asaltar?" El rey volvió a reírse. "Somos lo más alejado de esos salvajes saqueadores despreciados por Dios. ¡Somos soldados sagrados, en la guerra contra la Revolución Industrial!"

Siguió una larga e incómoda pausa. Diego miró a Katy; por primera vez en su vida, parecía desconcertada.

El rey continuó. "¡Ni siquiera os he dicho mi nombre! Soy el rey Lancelote Arturo Equis-Uve-Palito-Palito, ¡líder de la Orden del Arrendajo Azul!" Graznó. "¡Y vosotros, señorito y señorita, participaréis en la mayor batalla que el mundo haya visto jamás! ¡El asalto contra la Torre!"

"¿Ahora hay una torre?" preguntó Diego. Su mandíbula inferior ya había caído al suelo.

"Solo la torre más impía de la historia de este mundo enfermo. Es el cuartel general de los Fundadores, la gente que controla en secreto esta tierra. Quieren restaurar el mundo y devolverlo a donde estaba. ¿No saben que simplemente bombardearemos el mundo hasta convertirlo en una cáscara una vez más?". Graznó, y el resto de su escuadrón graznó con él, como un canto patriótico.

"¿Estás…?" Katy comenzó, "estás…"

"¡Sí!" El Rey Arturo interrumpió "¡Estamos seguros de que estos Fundadores son el mayor de los males! Los líderes del mundo son sus meras marionetas. Envían a sus impíos caballos negros y se llevan a la gente que simplemente los cuestiona. A nuestro mejor hombre, Sir César Primero, se lo llevaron junto con el artefacto más preciado del mundo, el Espejo de la Profecía".

"Espera." Dijo Katy, antes de hacer una pausa. Tenía una idea; podía verlo en su falta de expresión. "¿Y si pudiera suministrarte armas mágicas? Podrías conquistar fácilmente la… Torre".

"¡Una propuesta interesante!" Respondió el Rey Arturo, "…¡pero posiblemente sea una trampa! ¿Cómo puedo confiar en vosotros?"

"Mi maldición me obliga a no mentir nunca", respondió Katy. Estaba usando esa voz para contar historias. "Puedo decirte que, a muy poca distancia de aquí, hay un lugar donde los maestros de antaño guardaban sus mejores armas. Armas que podrían derribar la Torre de un solo golpe".

El Rey Arturo consideró sus opciones. "Necesitamos la artillería para derribar la Torre… ¡de acuerdo! Os seguiremos a ese supuesto… lugar. ¡Pero os lo advierto! ¡Si mentís, desearéis no haber nacido!"

"¿De qué estabas hablando?" susurró Diego a Katy. Ambos iban a lomos de caballos, mientras la Orden vitoreaba ante la idea de acabar con sus enemigos mortales.

"¿A dónde crees que íbamos, genio?". Katy respondió en un susurro. "Hay un viejo búnker militar cerca de la autopista. Lo encontré cuando me perdí por aquí el verano pasado. Pensaba esconderme allí y abastecerme de armas, pero como creo que tenemos el mismo enemigo que estos tipos, deberíamos adoptar un enfoque más proactivo."

"¿Entonces qué? Atacamos esta 'Torre', ¿y luego qué hacemos?"

"Bueno, yo estaba pensando…"

"¿De qué estáis hablando ahí atrás?" El Rey Arturo gritó.

"¡Estamos hablando de cómo no podemos esperar a ver a los Fundadores de rodillas!" Katy gritó, antes de graznar patrióticamente.

Todos los hombres emitieron un poderoso graznido antes de continuar por la interminable carretera.

« A 1 Metro Bajo Tierra I | Hub del Equipo Pájaro | A 1 Metro Bajo Tierra III »

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