SCP-4031
SCP-4031
Autora: Lt FlopsLt Flops
Traductor: Riyer PRiyer P
Publicado el 28 Dec 2018 22:44
Puntuación: +5+–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;
    }
    }
}

#page-content .collapsible-block {
    position: relative;
    padding: 0.5em;
    margin: 0.5em;
    box-shadow: 2px 1.5px 1px rgba(176,16,0,0.7), 0 0 0px 1px lightgrey;
    overflow-wrap: break-word;
}
 
.collapsible-block-unfolded{
    color: black;
    overflow-wrap: break-word;
 
}
 
.collapsible-block-unfolded-link {
    text-align:center;
}
 
.collapsible-block-folded {
    text-align: center;
    color: dimgrey;
}
 
.collapsible-block-link {
    font-weight: bold;
    color: dimgrey;
    text-align: center;
}
 
.addendumbox {
    padding: .01em 16px;
    margin-bottom: 16px;
    margin-top: 16px;
    padding-bottom: 1em;
    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
 
.material-box {
    padding: .01em 16px;
    margin-bottom: 16px;
    margin-top: 16px;
    padding-bottom: 1em;
    border: 1px lightgrey solid;
    box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.16);
}
 
.material-box blockquote {
    border: 1px double #999;
}
 
.wiki-content-table {
    width: 100%;
}
 
.addendumbox blockquote {
    border: 1px double #999;
}
 
.addendumtitle {
   opacity: 0.8;
   margin-bottom: 10px;
   color: #b01;
}
 
.maintitle {
   margin-bottom: 10px;
   color: black;
}
 
.scp-header {
    text-align: center;
    font-size:x-large;
    color:#b01;
}
 
.addenda-header {
    width: 100%;
    border-bottom: 2px black solid;
    color: black;
}
 
.scp-info {
    display:flex;
    justify-content:space-between;
    font-size:large;
}
 
.scp-info-box {
    display:flex;
    justify-content:space-between;
}
 
.object-info {
    color:black;
    align-self: flex-end;
    font-size: large;
}
 
.title-style {
    opacity: 0.8;
    margin-bottom: 10px;
    color: #b01;
    font-size: large;
    text-decoration: underline;
    font-weight: bold;
}
 
.update-div-empty {
    text-align: right;
    font-size: x-small;
    color: lightgrey;
}
 
.update-div {
    text-align: right;
    font-size: x-small;
}
 
.computed {
    border: 1px black solid;
    width: 50%;
    display: inline-block;
text-align: left;
    padding: 3px;
}
.computed:before {
    content:"Computed Code";
    font-weight: bold;
border-bottom: solid 1px black;
width: 100%;
}
.rawcode {
    border: black solid 1px;
    width: 50%;
    display: inline-block;
text-align: left;
    padding: 3px;
}
.rawcode:before{
    content:"Raw Code";
    text-align: center;
    font-weight: bold;
border-bottom: solid 1px black;
width: 100%;
}
.codebox {
    display: inline-block;
    width: 100%;
    text-align: center;
}
.yui-navset .yui-nav .selected a em,  .yui-navset .yui-nav a em{
        padding: 0.25em .75em;
        top: 0px;
        margin-bottom: 0px;
}
.yui-navset .yui-nav .selected a {
     background: gray;
}
.yui-navset .yui-nav .selected {
       margin: 0px;
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:hover, .yui-navset .yui-nav .selected a {
         background: gray;
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background: gainsboro;
    text-decoration: none;
}
.yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a {
background-color: none;
background-image: none;
}
.yui-navset .yui-nav a {
background: none;
}
.yui-navset .yui-nav li{
margin: 0px;
}
 
#page-content .licensebox .collapsible-block {
    position: unset;
    padding: unset;
    margin: unset;
    box-shadow: unset;
}
 
.licensebox .collapsible-block-unfolded{
    color: inherit;
}
 
.licensebox .collapsible-block-unfolded-link {
    text-align: left;
}
 
.licensebox .collapsible-block-folded {
    text-align: left;
    color: inherit;
}
 
.licensebox .collapsible-block-link {
    color: inherit;
    text-align: left;
}
▷ Mostrar Código ◁
Puntuación: +5+–x

El siguiente archivo ha sido encontrado en el Ala de Investigación del Sitio-82.

Número de Ítem: SCP-4031

Clasificación de Objeto: Euclid

Nivel de Amenaza: Desconocido

Procedimientos Especiales de Contención: N/A

Description: SCP-4031 es un poderoso amnésico de acción rápida de composición, cantidad y origen desconocido.

Los sujetos en el rango visual, olfativo, gustativo, auditivo, táctil y memético sufren pérdida de memoria a corto plazo, disociación y un regusto ácido. La aplicación del amnésico conduce a una vocalización de origen humano masculino. Los sujetos expuestos no pueden corroborar la existencia de la vocalización durante el interrogatorio.

Registro de Experimentación: Lo siguiente es una serie de supuestas interacciones con SCP-4031. Las interacciones no fueron registradas en tiempo real: los sujetos desconocidos registran las interacciones en las áreas de documentación. Los insumos incluyen diferentes personas, objetos y estructuras conceptuales. Los resultados incluyen diferentes niveles de memoria conceptuales.

Entrada Resultado
Tarta de Ruibarbo y Fresa Olvidado.
Tarta N/A
Sensación Gustativa N/A
Lengua Olvidado.
Estructura Carnosa; Origen Desconocido Consumido.
Pérdida de Sangre Olvidado.
Pérdida de Sangre N/A
Sangre N/A
Sangre Sujeto fallecido.
Nueva Prueba Recordado.
Sangre Recordado.
Lápiz de Laboratorio Olvidado.
D-5549 Olvidado.
D-5549 N/A
Investigador Menor Ortega Olvidado.
Investigador Menor Ortega N/A
Investigador Smalls N/A
Dr. Westrin Olvidado.
Dr. Westrin N/A
Jefe de Proyecto Xiulan Olvidado.
Vocalización N/A

Anexo: Al personal de investigación se les fue administrados mnésticos de Clase-W con el motivo de examinar a SCP-4031. Un hombre blanco humano fallecido emergió desnudo en el área de experimentación. El sujeto poseía laceraciones, decoloración de la piel, demacración, pérdida de cabello, clavícula izquierda rota y pérdida de sangre en la cavidad oral. Notablemente, el sujeto poseía un daño craneal significativo.

« SCP-4030 | Lt Flops | SCP-4032 »

antimeméticocognito-peligrosoeuclidhumanoideinvestigador-smallsmeméticometamnemónicoscpsensorialvivo
Si no se indica lo contrario, el contenido de esta página se ofrece bajo Creative Commons Attribution-ShareAlike 3.0 License