Author: Lt FlopsLt Flops
Published on 21 Sep 2019 15:58
/* 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: +100+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.

: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; }
Authors: Mew-ltiverseMew-ltiverse and Lt FlopsLt Flops
Published on 21 Sep 2019 15:58
rating: +100+x
CONTAINMENT CLASS:keter confidential

DISRUPTION CLASS: {$disruption}


Pigeons protecting the northern entrance to SCP-4795.

Special Containment Procedures: SCP-4795 is currently monitored in association with Project: CALADRIUS, which uses Foundation-operated biomechanical surveillance drones resembling the domestic pigeon. Foundation parazoologists regularly track pigeon flock movement through the Kanz Park area to assess population numbers. Park signs warning against pigeon aggression have been installed in and around Kanz Park to reduce the likelihood of pigeon attacks on civilians.

Description: SCP-4795 is Kanz Park, a 2.5-km² recreational park located in southern Cairo, Egypt.

SCP-4795's anomalous properties manifest in its attraction of domestic pigeons (Columba livia domestica), which flock to the park's premises in large volumes. Between 400 and 600 pigeons (designated SCP-4795-1) currently reside within the park. When in close proximity of humans, SCP-4795-1 display a marked increase in aggression, tending toward seeking out and attacking humans in possession of food.


I. Discovery

In the early 2010s, Cairo's municipal government reported a dramatic increase in pigeon populations, along with the prevalence of pigeon flocks using sophisticated attack techniques1 against other flocks. This culminated in March 2014 following the pigeon-mating season, when an observed convergence of tens of thousands of pigeons (comprising hundreds of rival flocks) organized and attacked one another within the Kanz Park area.

Regional Foundation parazoologists noticed Kanz Park's use as a focal point and classified it as E-08298 while designating increased social intelligence and aggression in pigeon populations as E-08298-1. The case was later forwarded to the Avian Division for its immense importance to inter-avian relations. Cairo-based Foundation officials flew Dr. Guenevere Goshawk, then-Envoy to the Avian Division, out to Egypt to foster positive pigeon relationships. Dr. Goshawk was charged with placating the population and determining what power structure had emerged — if any.

II. Extended Communications

Though the study of E-08298 occurred mainly through Foundation plants within Cairo's Parks and Recreation Department, Site-76's Command Office found it necessary to assume control over the project. Starting in late April 2014, several budgetary and personnel cuts were made. Site-76's administration eventually declared the anomaly as self-containing. After issuing the current Special Containment Procedures, site officials ordered the Foundation Parazoology Division personnel to cease their operations.

Internal correspondences were transmitted during this time.

III. Incident Log


On the early morning of May 18, 2014, archaeological surveyors arrived on the premises of Kanz Park with dowsing equipment to locate a suspected Beirut-Tier religious artifact. During this time, SCP-4795-1 instances evaded archaeologists and perched in high locations around the park. Archaeologists soon determined that an artifact was located beneath the center of the park and began excavation. SCP-4795-1 instances fled the park.

On May 25, archaeologists located a clay statue of an ibis bird wielding a long, narrow, and gold and beryllium bronze ankh staff in its beak. When the site supervisor deemed the excavation pit stable, workers descended to retrieve the artifact by hand but found that visibility in the pit had reduced dramatically.

A large flock of an estimated 30,000 pigeons amassed above the park and attacked.

Most pigeons surrounded Kanz Park to prevent workers from leaving, while others defecated from a high altitude. In response, the containment team attempted to enter the park but met extreme opposition and experienced extensive injuries. In the resulting commotion, the artifact's whereabouts could not be located. Within the hour, the pigeons evaded Kanz Park with minor casualties.

Though the artifact had been lost, the containment team managed to secure several SCP-4795-1 instances and relocated them to Site-76 for study. Agents discovered that SCP-4795-1 instance “Sgt. Nour” was among the captured pigeons and intended on carrying out an interrogation. However, without the proper avian communications equipment (which was under the possession of the Parazoology Division), no further actions could be taken.

On May 30, through correspondence with the Mediterranean Regional Command, Envoy Dr. Guenevere Goshawk requested to assist with the interrogation. Dr. Goshawk was transported to Site-76 with diplomatic clearance.

rating: +100+x
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License