Documento recuperado de un Universo Paralelo
Documento recuperado de un Universo Paralelo
Autora: Lt FlopsLt Flops
Traductor: morhadowmorhadow
Publicado el 24 Aug 2023 15:53
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

El documento fue recuperado del universo E-██████ poco antes del colapso entrópico total. Se cree que el contexto del documento son las etapas finales de un evento SCP-4800 abortado inesperadamente. Se desconoce un contexto más amplio; E-██████ no fue objeto de estudio antes de este incidente.

Tras una noche de sueño ligero, me desperté con un despertador mecánico y me di cuenta de que hoy era el día. Me eché encima las sábanas, me vestí a toda prisa y salí corriendo de casa. Era el día del Concurso de Repostería de Villa Pájaro, ¡e iba a ganarlo!

Mientras corría hacia el Edificio de Repostería, me crucé con una anciana que me dijo "¡buena suerte, Emily!" No la conocía, así que simplemente le devolví el saludo mientras seguía adelante.

Finalmente, agotada, llegué a la puerta. La placa sobre la puerta indicaba "Edificio de Repostería de Villa Pájaro" en letra gris curvada. La expectación se apoderó de mis plumas cuando empujé la pesada puerta y entré en el concurso de confitería.

Me encontré detrás de un mostrador de cocina, con un surtido de ingredientes para hornear delante de mí: harina, sal, huevos… Miré a mis competidoras, mis amigas, que pensaban que me iban a ganar el concurso de repostería. ¡Se equivocaban!

Levanté la vista hacia el reloj de neón del techo que nos cronometraba. El concurso no se basaba en el tiempo, pero era un factor que los jueces utilizaban para puntuar el concurso. El cronómetro decía: "-0:20." ¡El concurso empezaba en 20 segundos!

Oí que un presentador a quien no pude ver gritar por encima del nerviosismo de la sala nos decía que era hora de empezar. Tenía memorizada hasta la fibra la receta de los famosos muffins de mi abuela. Dos tazas de harina, tres huevos, cinco pizcas de canela. Mezclar hasta que ya no se vean los copos de canela. Viértalo en un molde para muffins y cuézalo durante veinte minutos.

Mientras preparaba mi plato especial, miraba a mi alrededor los otros pasteles que se estaban horneando. Había galletas, pasteles, pan, rosquillas y bagels, todos moldeados con masa. Yo era la única que estaba haciendo muffins. Sabía que eso me daría ventaja.

Antes de que pudiera pulsar el botón del temporizador del horno, oí un grito espeluznante. Me di la vuelta y vi a una de las panaderas, una mujer de plumas verdes con cara de asombro, en plena crisis mental.

"Nun… nun… nun…" dijo tartamudeando, "…nunca imaginé que acabaría tan rápido. ¡Mirad por la ventana!" Entonces se desplomó.

De repente, me di cuenta de la oscuridad que se veía a través de las ventanas. Dejé de hacer lo que estaba haciendo y apreté el pico contra una de ellas, atisbando la oscuridad. Había amanecido cuando llegué; ¿por qué era de noche ahora? Pero no era de noche. No había estrellas, ni siquiera tierra visible, solo oscuridad en estado puro. Era como si pudiera tocarla.

Me di la vuelta y vi a una chica pelícano que había terminado sus galletas antes de tiempo y las estaba llevando a la sala de evaluación. Le temblaban los brazos y la parte superior del cuerpo, como si luchara contra la melaza. Cuando abrió la puerta, vi la oscuridad que emanaba por detrás, igual que las ventanas. La oí gritar mientras se adentraba en la oscuridad.

Han pasado cinco horas. Otras tres chicas, que participaban en el Concurso de Repostería, terminaron sus platos: una tarta, un plato de brownies y otro de galletas con pepitas de chocolate que tenían un aspecto delicioso. Las tres se levantaron, poseídas por llevar sus platos a la oscuridad para morir.

Mis muffins, mis geniales y deliciosos muffins, han estado en el horno durante cinco horas. Durante ese tiempo, me quedé en posición fetal junto al horno, presa del pánico. Una de las otras reposteras, una chica pingüino con gorra de béisbol, se había pasado el tiempo batiendo, quejándose de que le dolía el brazo. El resto de la gente estaba encerrada en varias fases del proceso. No podíamos parar. Simplemente no podíamos; nos parecía mal.

Ha pasado un día. La oscuridad de fuera no ha cambiado y mis muffins probablemente se desintegraron dentro del horno. Me obligué a levantarme y caminar hacia la puerta principal. El exterior también es oscuridad. No puedo escapar.

De repente, la oscuridad empezó a avanzar. Todo el mundo empezó a entrar en pánico. Sin embargo, una vez que corrí hacia mi horno, se detuvo. Parece que empeora cuando no estoy horneando activamente.

Ya han pasado dos días. Empecé a sentir dolor en el estómago. La chica pingüino, se llama Karen, lo llamó "hambre". Me dijo que horneábamos para curar el hambre. ¿No era solo un concurso?

Han pasado tres días. Mia, la chica loro, se metió en la boca un poco de su mezcla para pasteles y dijo que le curaba el hambre. Las demás hicieron lo mismo. Intenté llevarme a la boca los restos quemados de los muffins, pero la sartén me quemó la mano. Tuve que usar la harina cruda para ello.

Estaba pensando y me di cuenta de que no tengo ningún recuerdo de cuando me desperté hace tres días. Al menos, creo que han pasado tres días. ¿Qué pasó antes?

He preguntado a las demás reposteras y no tienen mejor memoria que yo. Karen me preguntó por mi abuela, la que hizo la receta de los muffins y la verdad es que no pude decir nada. Esto se está poniendo muy raro.

Han pasado cinco días. De hecho, Mia dejó de escarchar sus galletas, gritó y saltó a la oscuridad. Karen dijo que ella también quería hacer eso y mentiría si dijera que no lo consideré.

La chica de plumas verdes está empezando a pudrirse. Parece tan obvio, ahora que lo pienso. Esto empezó con la venta de pasteles, y creo que terminará con esto también. Me pregunto si esto podría haberse evitado. Karen dice que estaba predeterminado. Le pregunté qué quería decir y me dijo que no teníamos elección en el asunto.

Ya han pasado siete días. Hemos acordado caminar hacia la oscuridad que nos rodea ahora. Adiós.

Cabe destacar que E-██████ estaba habitado por humanos no anómalos. Las referencias a rasgos aviares pueden estar relacionadas con escenarios anteriores de clase "Migración". Otras implicaciones más amplias no son concluyentes.

« SCP-4248 | Hub del Equipo Pájaro | A 1 Metro Bajo Tierra I »

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