13 indeed.

By: FishishFishish
Published on 01 Aug 2022 03:59
rating: +160+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; }
/* 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) {
    #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;
    @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;

rating: +160+x

Item #: SCP-7013

Object Class: Keter Resolved

Special Containment Procedures:

[ N / A ]

Description: SCP-7013 was a probabilistic anomaly affecting the Overseer Council's ability to carry out its functions in accordance with the Foundation's primary mission. The anomaly manifested shortly after the addition of a thirteenth seat to the Overseer Council on 14/02/1969.


Fig. 1.1: O5-13 in his personal office.

SCP-7013 manifested as an anomalous agglomeration of extremely improbable occurrences affecting Foundation personnel and facilities worldwide. These improbable events invariably led to misfortune, loss of life, destruction of property, mass demonic possession of personnel, and cascading containment failures. All recorded SCP-7013-related phenomena involved, either directly or indirectly, the thirteenth Overseer.

Although the origins and mechanisms through which SCP-7013 operated remain unclear, SCP-7013 currently poses no threat to the Foundation at large; for further information, see Addendum-7013-A.

Addendum-7013-A: Following the discovery of SCP-7013 and a series of containment breaches and other improbable phenomena occurring within a period of 6 months, placing unprecedented stress on Foundation resources, an emergency summit was held at Administrative Site-01 by the Overseer Council in order to discuss potential countermeasures that could be taken to neutralize the anomaly.



[All Council members are present in the meeting room, with the exception of O5-1, O5-2, O5-6, and O5-13. All seem exhausted, and some sigh. Several glance at their watches occasionally, while others fight amongst themselves and riffle through sheets of documents and other records.]

[The entrance door swings open, and O5-2 enters with a clipboard and an aide carrying numerous cardboard boxes and stapled paperwork.  When the duo appears, a low hush descends over the room as the assistant lays everything on the glass table. They then walk to the far end of the room, giving the Council the floor.]

[O5-2 rubs her eyes and throws the clipboard onto the glass table before collapsing into her chair.]

O5-2: Very well everybody, let's, uh, begin.

O5-5: One and Six?

O5-2: Unfortunately, they will not be joining us today, due to an… unexpected

O5-7: Unexpected, my ass.

[O5-2 continues as though she hadn't been interrupted.]

O5-2: —InfoSec breach that briefly compromised their transport route. We'll be unable to contact them remotely, too, due to the sporadic outages in communications.

[O5-2 exhales deeply.]

O5-2: And this brings us to what we'll be discussing today. Thirteen.

O5-4: What? How so? He's not even here.

O5-2: Knowing him… well, knowing him, he'll be late.

O5-12: Which is good for us, given that, you know…

O5-10: He's a moron?

O5-11: Come now, that's uncalled for. It's true, but… [sighs] uncalled for.

O5-4: Oh God's sake, I fucking left '17 to get here, you know. Do you know how much shit that place is going through right now?

O5-8: Please, none of us should be anywhere even remotely close to the crisis zones, with everything that's going on right now. But I agree. Did we all just gather here to shit-talk Thirteen?

[O5-2 sighs, motioning to her assistant. The assistant starts handing out a series of documents to each Council member.]

O5-2: This is why we're meeting here without Thirteen. What you all have in your hands is the proposed file for SCP-7013.

[The room falls silent as all present Council members skim through the documents handed to them.]

O5-5: Is… Is this for real?

O5-2: Yes. It's all there, documented by a team handpicked by One.

O5-10: Jesus. All of these files…

O5-2: Are events that are confirmed to have been indirectly influenced by Thirteen, yes.

[The room falls silent as all Council members continue poring over the documents.]

O5-9: Fuck. The raid at '83? The fucking breach at '57? This is…

O5-7: Well, I can't say this is entirely unexpected. But if this is all true—

O5-2: It is, trust me. One and I spent weeks gathering all this intel.

O5-12: Wait. Is this why you started inviting him to bowling night? [Raises his voice] You could've gotten all of us killed there!

O5-2: Yes. And I apologize for not coming forward about this, sooner.

[All Council members stare at the table in contemplation. None of them moves for a short period.]

O5-11: So, what are we supposed to do now?

O5-7: Something must be done. We have the resources to lock Thirteen in a cage so secure that even the thought of him won't be able to get out.

O5-9: Well, look. Thirteen's an annoying prick, there isn't a question about it, but locking up a member of the Council? It's unprecedented! It doesn't jive one bit with me.

O5-4: He's anomalous! We have to!

O5-9: Okay, look. I'm not trying to go against the Mission here, not at all, but if we really contained every anomalous individual we encountered, half of our goddamn staff would be gone. That's a weak argument.

O5-10: Why not just replace him with someone else?

O5-2: Not an option. The current Thirteen isn't the first, but '7013 has been active since the seat was added to the Council. In fact, it's been active every time we've had thirteen members on our governing body, even before the Council existed.

O5-9: Alright, so what we have to do now is to find a way to—

[The chamber doors are suddenly pushed open, and O5-13 walks in. He wears a ragged suit and has a number of visible bruises. All Council members immediately fall silent.]

O5-13: Hi fellas! Sorry I'm late, I just [pants heavily] just went through hell trying to get into the site. My credentials weren't accepted when I got here! Took a couple of tries for the security system to disengage and then Alpha-1 got on my case. Jeez, terrible day, am I right?

O5-2: [Visibly upset] Hello, Thirteen. Why don't you, um, take a seat? We can, uh, get started with the meeting.

O5-13: Sounds good! Say, where are One and Si—

[The sound of a gun is heard, and O5-13's head is thrown backwards as he collapses to the ground. From the other side of the room, O5-3 is seen holding a gun.]

O5-9: What the fuck, Three!?

O5-3: Hm? That should take care of it, no?

O5-9: How!? We could've just, I don't know, gotten a fourteenth Overseer?

[The room is silent.]

O5-11: Well…

O5-7: I mean…

O5-10: Honestly, I'm fine leaving things like this.

O5-4: Agreed.

O5-8: Ah, well, what's done is done!

[Everyone nods along, congratulating and applauding O5-3's quick and decisive thinking.]

[O5-2 stands up and addresses the Council.]

O5-2: Aaaand that's quorum. Good talk.


Following the neutralization of SCP-7013, the Overseer Council was reorganized to have exactly twelve members. Following this change, all SCP-7013-related activity ceased. The deceased body of the former O5-13 was placed in a concrete block underneath Site-01.

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