By: Lt FlopsLt Flops
Published on 20 Mar 2018 03:26
rating: +82+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: +82+x


CONTAINMENT CLASS:safe unrestricted


SCP-3719 during recovery operations.

(Hover to enlarge.)

Special Containment Procedures: SCP-3719 is stored in a standard SAFE-Class containment stall in the Anomalous Objects Wing of Site-82.

Foundation web crawler SE851G (“AZURE GLADIUS”) is to track social media posts, news reports, and SMS messages transmitted in the state of Maryland for references to 3719-COBALT Events. References to unnatural flowering plant growth patterns, the formation of collective human amalgamations, and irregularities in the operation of yard equipment are to be flagged and isolated for further monitoring.

SCP-3719-A-1 through 61 (collectively designated SCP-3719-B) are contained in suspended animation in a standardized 10 000-L Class-6 Lovell–Huron containment vat.1

Persons associated with this anomaly, including nearby genetic relatives of SCP-3719-B, have been administered Class-A Amnestics. These persons are to undergo a false memory implantation procedure to subdue all memory of SCP-3719-B and the impact each affected person had on the Middlesex suburb during their life.

Description: SCP-3719 is a GO/ON-brand lawnmower with a cutting width of 55 cm. SCP-3719 performs in an identical manner to non-anomalous rotary mowers, except for a few notable differences:

  • SCP-3719 relies on the energy exerted by its user (designated SCP-3719-A) to power its engine.
  • To prevent fatigue and over-exertion in SCP-3719-A, SCP-3719 generates added energy by reclaiming and consuming grass passing through its cutting deck. The generated energy does not mitigate the force required to push SCP-3719; rather, energy transfers through the lawnmower handle into SCP-3719-A via esoteric means.
  • A chamber within SCP-3719 stores excess grass for future consumption.

During use, SCP-3719-A instances operate the lawnmower until the desired lawn is fully mown. Each instance then experiences a sense of personal responsibility from the completion of the task. This mind-affecting property does not hinder SCP-3719-A; instead, SCP-3719-A instances experience positive emotional affect for long after SCP-3719 use. The emotional impact is shared by any person with a similar headspace2 to SCP-3719-A within the vicinity of its effects.3


I. Discovery

SCP-3719 was discovered in the Middlesex suburb of Baltimore, Maryland, on 17 August 2014.

On discovery, 61 residents constituting a collective body amalgamation4 were piloting SCP-3719 along the road with evident ease. When the Foundation arrived, about 6 km of roadways displayed anomalously manifested grass, whereas a 2-km stretch of roads had already been mown.

The formation of masses like SCP-3719-B and widespread manifestation of grass on paved streets is termed a 3719-COBALT Event.

II. Interview Log

An interview was conducted with Grace Farley, a single parent living in Middlesex. The day before the discovery of SCP-3719-B, she had reported her son Kevin Farley as missing.

A transcript is as follows.


INTERVIEWER: Agent Francis Digby


NOTE: After Foundation personnel arrived on-scene, a 3-km-in-diameter no-go zone surrounding the neighbourhood was observed and cordoned off.

While searching for persons directly affected by the 3719-COBALT Event, embedded field agents discovered Grace Farley (POI-3719-7) sitting alone on the curb. Agent Francis Digby approached Ms. Farley under the guise of a concerned neighbour with the neighbourhood watch. Shortly thereafter, she agreed to a recorded interview.


Agent Francis Digby: — like I said, and I'm Francis Digby from just up the street. And you don't mind if I ask you some things about the incident?

Ms. Grace Farley: 'Course not, Francis, anything you need, my dear. And please, do call me Grace.

Agent Digby: So, Grace, how did you first hear about the lawnmower?

Ms. Farley: Old Billy kept that mower locked in his garage since before my boys were born. Billy's always been on the go, but after his accident, it's been hard for him to manage things. Robbie lifted the mower from him in the spring, had it refurbished, made sure it worked fine. Let me tell you, Francis, there was just somethin' about that mower that made it special. In all my days, I've never seen Rob so interested in anything, 'cept for that mower.

Agent Digby: In what way was he interested, Grace?

Ms. Farley: The spark in his eyes when he worked on that thing, you wouldn't believe. It had to be special. Wouldn't make sense otherwise.

Agent Digby: So, Bill owned the mower, and he lent it to Robert. Is there any indication that anyone else used the mower during that time?

Ms. Farley: [She shakes her head.] Robbie went about, door-to-door, askin' if anyone wanted their lawns cut. That kid was willing, and it seemed like once he started, he just couldn't stop himself. On the first day, he cut nine lawns alone! Can you believe that, Francis?

[Agent Digby grunts in approval.]

Ms. Farley: The next week it was as if everybody was asking Rob to cut their lawns, all the way down to Waterview, and boy did he do it. Robbie's one of those meek types — when the little ones wanted to try the mower, he let them, so they could learn too. I would never allow my youngest to go near the thing, but those kids nudged it along like it was a toy.

Agent Digby: And you said your eldest son was Kevin, correct?

Ms. Farley: Yes, my dear.

Agent Digby: Grace, for what reason did Kevin start using that mower?

Ms. Farley: I had to let my boy try it. Just had to. Heaven knows I wouldn't even know how to use the thing myself. But my Kevin, he's a smart cookie, he is. Could figure out anything he set his mind to. So, when he joined the others, I just knew they were going to enjoy themselves fine. It's better having 'em so close together, Francis, isn't it?

Agent Digby: I'm not so sure what you mean, Grace.

Ms. Farley: Kevin's a– He's a smart kid with a kind heart. That's the boy I raised. Yeah, I always wanted to keep him away from the bad crowd. Couldn't bear to lose my baby. So, I tried hard, see? To teach 'em right. To get him along with the other smart boys I know are out there, too. Now, Francis, to see him want to join the other kids? That made me proud.


Ms. Farley: All those kids, together, closer than a hug. That's what gives this community its spirit. We can all learn to become as warm as those kids were, and that mower's the key.

Agent Digby: How — how'd Kevin and the other kids come together?

Ms. Farley: There were maybe seven others, or so. The closest boys and girls in the neighbourhood. We're all good parents. We all know how to raise a good kid. Raise a kid well enough, and eventually, they'll raise themselves.

Agent Digby: Grace, do you believe that this lawnmower is going to help them learn how to raise themselves properly?

Ms. Farley: I don't just think so, Francis; I've seen it with my own eyes. Those kids could achieve incredible things if they just worked together. All eight of 'em, in the same body — that's what we raised 'em for.

Agent Digby: You're saying these kids were in the same body? But– That's just not possible, Grace.

Ms. Farley: Makes sense to me, Francis.


Ms. Farley: But wouldn't you like to see all our sons and daughters together, bonding deeper than they ever could naturally? Having them so close together, boy, it just gives me the fuzziest feelin'. Middlesex ain't what it was when I grew up. I never learned the same closeness my sons know.

[Ms. Farley retrieves a tissue from her purse.]

Ms. Farley: Being able to help the Other in such a way, with the smartest sons and daughters this neighbourhood's ever seen. That's human. That's heart. I just crave to bask in the skin of the Other. To be as warm as them. Wouldn't you like to be as warm as those kids, Francis? Wouldn't you like to share my skin too?

Agent Digby: Grace–

Ms. Farley: Why can't you share one body, one soul, and by God if it's possible, one flesh? We're all human, Francis. We're one. We were born together and together we shall remain. It's meant to be that way, 'cause what other way could there be? Keep 'em together, and we won't be having any more tragedies, like the ones you see in the headlines every week. That mower's the best thing to happen to this neighbourhood, period. You wouldn't understand unless you stitched your heart where all others can see and basked in the skin of your fellow man.


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