Qué es esto
Un puñado de "mejoras" CSS varias que yo, 
Croquembouche, 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.
.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;
}
}
}
| ÍTEM #: SCP-5861 |
Nivel-3/5861 |
| CLASIFICACIÓN DE CONTENCIÓN: TAUMIEL |
CONFIDENCIAL |
Procedimientos Especiales de Contención: La IAC "Ἀφρόδιτα" de la Fundación se encargará de vigilar los artículos pendientes en las revistas en relación con SCP-5861. Esos artículos serán rechazados y los investigadores implicados serán detenidos, interrogados y amnestizados o serán tomados en consideración para un puesto en la Fundación.
Los agentes de la Fundación que investigan las empresas paratecnológicas deben mantenerse alerta ante posibles acontecimientos relacionados con SCP-5861 e informar de ellos inmediatamente después de su descubrimiento.
Descripción: SCP-5861 es un proceso taumatúrgico que convierte la emoción del amor en energía eléctrica. Los requisitos materiales para este proceso se detallan en el Informe Técnico 5861-A, e incluyen al menos un humano para sentir la emoción; los no humanos, independientemente de la inteligencia, no son compatibles con el proceso.
Los reactores Mark XI que utiliza SCP-5861 son la fuente de energía primaria para 94 Sitios de la Fundación (véase Informe Técnico 5861-B para más información).
ANEXOS
I. Historia: Orígenes
SCP-5861 fue descubierto en 1968 durante un estudio a largo plazo llevado a cabo por la Fundación sobre fuentes de energía alternativas para los Sitios de Contención. Este estudio tenía como objetivo encontrar una fuente de electricidad renovable que pudiera utilizarse para minimizar el número de envíos a los Sitios de la Fundación y reducir el riesgo de que fueran descubiertos.
Entre 1968 y 1984, se construyeron una serie de reactores de prueba utilizando SCP-5861 para optimizar el proceso para la máxima generación de energía. Los diseños iniciales requerían el amor romántico entre dos sujetos para funcionar, y su uso general fue prohibido por el Comité de Ética.
El reactor experimental Mark III fue la primera versión en producir una potencia positiva neta en 1980, aunque requería cuatro sujetos humanos para funcionar y también requería el consumo de 300mL3/hr de lubricante. El costo de los materiales lo hizo ineficiente comparado con los métodos alternativos de generación de energía.
En 1984, se produjo un gran avance que permitió utilizar el amor platónico en su lugar. Esto causó una serie de desarrollos en los siguientes dos años que llevaron a la producción del primer reactor para producir cantidades utilizables de electricidad. Este fue el reactor Mark VI, que era capaz de producir 100kW de energía proveniente de cuatro humanos.
II. Historia: Adopción Inicial
El Sitio-147 fue el primer sitio en utilizar SCP-5861 para generar energía exclusivamente en 1989. El Comité de Ética rechazó tentativamente la utilización de SCP-5861 como fuente de energía en ese momento, debido a que se basaba en estados emocionales de humano a humano. El Consejo O5 votó 7-5 a favor de continuar utilizando SCP-5861 de esta manera, mientras que también financió investigaciones adicionales para una implementación más eficiente.
El reactor Mark VIII fue la primera versión en ver una adopción generalizada de la Fundación, en 1993. Las mejoras en el proceso de SCP-5861 significaron que solo se necesitaban dos humanos para producir 300kW de potencia; aunque el proceso requería que ambos humanos estuvieran experimentando sentimientos de amor platónico.
Para 1998, se había desarrollado el reactor Mark X. Este utilizaba un solo humano en el proceso SCP-5861 y permitía utilizar la lujuria en lugar del amor. En este caso, se utilizó un humano dentro de cada reactor, con el uso de la pornografía como foco de la emoción. Este reactor demostró ser menos eficiente que el Mark VIII en términos de producción de energía bruta, produciendo solo 50kW de potencia; pero requiriendo significativamente menos espacio y mantenimiento.
Sin embargo, la excesiva masturbación llevada a cabo por el sujeto humano dentro del reactor Mark X significó que tenía que ser reemplazado con frecuencia.
Esto significaba que el Mark X tenía mayores necesidades de suministro que las deseadas por el Consejo O5, por lo que se llevó a cabo una mayor optimización. El Comité de Ética consideró en general que el Mark X era un paso hacia atrás.
III. Historia: Desarrollo Final
En 2002, se completó el Mark XI. El uso de la pornografía se eliminó progresivamente en favor de una energía atractiva más débil repartida entre más humanos. En este caso, se encontró que el catalizador más eficiente era la adoración, específicamente hacia las imágenes felinas.
Los humanos utilizados en este reactor podían ser utilizados de manera efectiva durante toda su vida, con una mínima disminución de la eficiencia, siempre que se pudieran proporcionar nuevas imágenes de gatos de manera regular. Como resultado, la Fundación adquirió un gran número de gatos y estableció una operación de cría bajo la dirección de Soluciones de Wilson para la Fauna Silvestre, para asegurar que se pudiera generar un gran suministro de imágenes variadas de gatos y proporcionarlas a los sujetos en el reactor Mark XI.
En 2004, se creó un nuevo perfeccionamiento del proceso SCP-5861 que permitió que la conversión se llevara a cabo mediante un dispositivo lo suficientemente pequeño como para ser integrado en una torre de escritorio, lo que condujo a la creación del reactor Mark XII. Esto se añadió a la lista estándar de componentes incluidos en los dispositivos informáticos de la Fundación; el salvapantallas predeterminado de la Fundación se cambió por una presentación de diapositivas rotativa de imágenes de gatos. Además, con la supervisión del Comité de Ética, se alentó al personal de la Fundación (incluido a los Clase-D) a navegar por varios sitios web relacionados con imágenes de gatos durante su tiempo de descanso.
