rating: +74+x
Author: cybersqydcybersqyd
Published on 18 Jun 2020 19:13
/* source: */
#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) {
    .mobile-top-bar {
        display: block;
    .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!important;
        position: fixed;
        top: 0;
        left: -19em;
        width: 17em;
        height: 100%;
        overflow-y: auto;
        z-index: 10;
        padding: 0.3em 0.675em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.5s ease-in-out;
    #side-bar:target {
        display: block;
        left: 0;
        width: 17em;
        margin: 0;
        z-index: 10;
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
    #top-bar .open-menu a:hover {
        text-decoration: none;
    .close-menu {
        margin-left: 19em;
        opacity: 0;
rating: +74+x

What this is

A bunch of miscellaneous CSS 'improvements' that I, CroquemboucheCroquembouche, use on a bunch of pages because I think it makes them easier to deal with.

The changes this component makes are bunch of really trivial modifications to ease the writing experience and to make documenting components/themes a bit easier (which I do a lot). It doesn't change anything about the page visually for the reader — the changes are for the writer.

I wouldn't expect translations of articles that use this component to also use this component, unless the translator likes it and would want to use it anyway.

This component probably won't conflict with other components or themes, and even if it does, it probably won't matter too much.


On any wiki:

[[include :scp-wiki:component:croqstyle]]

This component is designed to be used on other components. When using on another component, be sure to add this inside the component's [[iftags]] block, so that users of your component are not forced into also using Croqstyle.

Related components

Other personal styling components (which change just a couple things):

Personal styling themes (which are visual overhauls):

CSS changes

Reasonably-sized footnotes

Stops footnotes from being a million miles wide, so that you can actually read them.

.hovertip { max-width: 400px; }

Monospace edit/code

Makes the edit textbox monospace, and also changes all monospace text to Fira Code, the obviously superior monospace font.

@import url(';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; }

Teletype backgrounds

Adds a light grey background to <tt> elements ({{text}}), so code snippets stand out more.

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 more bigfaces

Stops big pictures from appearing when you hover over someone's avatar image, because they're stupid and really annoying and you can just click on them if you want to see the big version.

.avatar-hover { display: none !important; }

Breaky breaky

Any text inside a div with class nobreak has line-wrapping happen between every letter.

.nobreak { word-break: break-all; }

Code colours

Add my terminal's code colours as variables. Maybe I'll change this to a more common terminal theme like Monokai or something at some point, but for now it's just my personal theme, which is derived from Tomorrow Night Eighties.

Also, adding the .terminal class to a fake code block as [[div class="code terminal"]] gives it a sort of pseudo-terminal look with a dark background. Doesn't work with [[code]], because Wikidot inserts a bunch of syntax highlighting that you can't change yourself without a bunch of CSS. Use it for non-[[code]] code snippets only.

Quick tool to colourise a 'standard' Wikidot component usage example with the above vars: 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;

Debug mode

Draw lines around anything inside .debug-mode. The colour of the lines is red but defers to CSS variable --debug-colour.

You can also add div.debug-info.over and div.debug-info.under inside an element to annotate the debug boxes — though you'll need to make sure to leave enough vertical space that the annotation doesn't overlap the thing above or below it.

…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; }
CONTAINMENT CLASS:Thaumiel confidential


Special Containment Procedure: Foundation AIC "Ἀφρόδιτα" is to be deployed to monitor pending journal papers for SCP-5861 related material. Such papers are to be rejected, and the involved researchers are to be detained, interrogated and either amnesticised or considered for Foundation employment.

Foundation Agents investigating paratech companies are to remain alert for possible SCP-5861 developments, and are to report it immediately upon discovery.

Description: SCP-5861 is a thaumaturgical process that converts the emotion of love into electrical power. The material requirements for this process are detailed in Technical Report 5861-A, and include at least one human to feel the emotion; non-humans, regardless of sapience, are not compatible with the process.

Mark XI Reactors utilising SCP-5861 are the primary power source for 94 Foundation Sites (see Technical Report 5861-B for further information).


I. History: Origins


Mark III Reactor

SCP-5861 was discovered in 1968 during a long term study carried out by the Foundation into alternate power sources for Containment Sites. This study aimed to find a renewable source of electricity that could be used to minimise the number of shipments to Foundation Sites and reduce the risk of them being discovered.

Between 1968 and 1984, a series of trial reactors utilising SCP-5861 were constructed in order to optimise the process for maximum power generation. Initial designs required romantic love between two subjects to function, and their general use was prohibited by the Ethics Committee.

The experimental Mark III reactor was the first version to produce a net positive power output in 1980, though it required four human subjects to work and also required the consumption of 300mL3/hr of lubrication. The material cost made this inefficient compared to alternative power generation methods.

In 1984, a major breakthrough occurred which allowed platonic love to be used instead. This caused a series of developments over the following two years that led to the production of the first reactor to output usable amounts of electricity. This was the Mark VI reactor, which was capable of producing 100kW of power from four humans.

II. History: Initial Adoption


Mark VIII Reactor

Site-1471 was the first site to utilise SCP-5861 to generate power exclusively in 1989. The Ethics Committee tentatively rejected utilisation of SCP-5861 as a power source at this time, due to it relying on human-to-human emotional states. The O5 Council voted 7-5 to continue utilising SCP-5861 in this manner while also funding additional research into more efficient implementations.

The Mark VIII reactor was the first version to see widespread Foundation adoption, in 1993. Improvements in the SCP-5861 process meant that it only required two humans to produce 300kW of power; though the process required both humans to be experiencing feelings of platonic love.

By 1998, the Mark X reactor had been developed. This utilised a single human in the SCP-5861 process and allowed lust to be used in place of love. In this case, a human was used within each reactor, with the use of pornography as the focus of the emotion. This reactor proved to be less efficient than the Mark VIII in terms of raw energy output, producing only 50kW of power; but requiring significantly less space and upkeep.

However, the excessive masturbation carried out by the human subject within the Mark X reactor meant that they frequently had to be replaced.

This meant the Mark X had greater supply requirements than desired by the O5 Council, and so further optimisation was carried out. The Ethics Committee generally considered the Mark X to be a step back.

III. History: Final Development

In 2002, the Mark XI was completed. The use of pornography was phased out in favour of weaker attractive energy spread over more humans. In this case, the most efficient catalyst was found to be adoration, specifically towards feline imagery.

Humans utilised in this reactor could be used effectively throughout their life span, with minimal drop off in efficiency as long as new images of cats could be provided on a regular basis. As a result, the Foundation acquired a large number of cats and set up a breeding operation under the direction of Wilson's Wildlife Solutions, to ensure a large supply of varied cat images could be generated and provided to subjects in the Mark XI reactor.

In 2004, a further refinement of the SCP-5861 process was created that allowed the conversion to be carried out by a device small enough to be embedded in a desktop tower, which led to the creation of the Mark XII reactor. This was added to the standard list of components included in Foundation computing devices; with the default Foundation screensaver being changed to a rotating slide-show of cat images. In addition, with Ethics Committee oversight, Foundation staff (including D-Class) were encouraged to browse various cat imagery related websites during their downtime.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License