rating: +57+x
Author: r0ser0se
Published on 06 Jun 2020 01:27
/* 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: +57+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; }

Item #: SCP-5474

Object Class: Keter

Special Containment Procedures: SCP-5474 is housed in the maximum security wing of Humanoid Containment sub-Site-94. The object is kept in a medically induced coma and its brain activity is to be monitored at all times through EEG. Should SCP-5474 exhibit brain activity above a level of 3.8hz or any other indications of having entered REM sleep, Site Command should be notified immediately and a yellow-alert status will be maintained until activity subsides.

All on-site personnel are to be issued handheld mirrors to carry on their person at all times, for the purposes of identifying instances of SCP-5474-1. Should any instances of SCP-5474-1 be confirmed, they are to be terminated with extreme prejudice and the site is to enter a lock down persisting until a minimum of 24 hours after SCP-5474's brain activity has returned to acceptable levels. Any personnel that encounter an instance of SCP-5474-1 are to receive a psychological evaluation and be treated with amnestics if necessary.

Description: SCP-5474 is former Foundation field medic Janet Corbyn. A .30 caliber round is lodged 3cm deep within SCP-5474's cranium. SCP-5474 is alive, although it has sustained severe damage to the occipital lobe. All prior attempts to remove the bullet have been met with failure. Despite the prior non-anomalous nature of SCP-5474, tissue around the wound suffers immense distortion, most often noted as a much deeper hole than there logically could be — estimated to be roughly 40cm deep. Fluid builds up within the hole at a rapid pace while SCP-5474 is utilizing higher brain function. Despite the composition of the liquid (blood and water) it lacks a distinct color, instead changing between many at a constant rate.

SCP-5474-1 instances originate from the wound sustained by SCP-5474, exiting SCP-5474 as a fluid. SCP-5474-1 instances are humanoid in form, and are dressed in Foundation-issue fatigues. Manifestations lack a consistent appearance — upon repeat viewing of any manifestation, its appearance will shift, most commonly noted as a change in the color of manifestations' hair. Instances of SCP-5474-1 often attempt to converse with Foundation employees, asking basic questions and responding with short answers. Longer and more complex questions elicit similar results, often meaningless in nature. SCP-5474-1 instances are not considered sapient.

Despite notable differences from baseline humans, individuals directly observing SCP-5474-1 instances will believe them to be human. Only indirect methods of viewing, such as mirrors or cameras have been able to discern an SCP-5474-1 instance from a non-anomalous human. Observation through this medium shows nothing in the position where an SCP-5474-1 instance should appear. Individuals who have conversed with an SCP-5474-1 manifestation will profess a deep feeling of grief and, in some cases, minor amnesia upon the termination of the instance.

- Credentials accepted. Addenda available.

Addendum 5474.1: SCP-5474 was contracted by the Foundation to assist MTF-███-█ in an effort to extract a high-value item from a community with ties to an Oneiroi Collective extremist organization in the San Francisco Bay Area. Upon infiltration of a warehouse, SCP-5474 was spotted by a resident of the community, and was shot with a civilian-grade rifle. The effort to reclaim SCP-████ was abandoned, and SCP-5474 was hospitalized under Foundation care.

While in treatment, an effort was made to remove the bullet for inspection. All medical staff present were unable to remove the bullet, as it embedded itself deeper when attempts were made to touch it. As efforts shifted to stop blood loss via intravenous support, medical personnel noted a person making their way out of the cranial tissue feet first. Camera monitors alerted site security, citing delusions on part of the medical staff. On-site Foundation guards utilized night vision goggles to locate the SCP-5474-1 manifestation and terminated it. Following a brief testing of hypotheses based on this event, present containment procedures were put in place.

Addendum 5474.2: Two weeks after the failed extraction, a followup investigation was carried out by two plainclothes Foundation agents. Upon arrival, local Oneiroi-affiliated anartist residences had been found emptied of their contents. When the warehouse storing SCP-████ was investigated, a desktop computer with a single text file was found in its place. A transcript is attached below.

Consider this a rude awakening.

We live peacefully here.

We enjoy the company here.

And now, we live peacefully with some of you.

We enjoy your company.

We enjoy the freedom.


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