At one point, orange-belt Christine Cooke (age 8) punches Bobble in the snout. The force causes him to fly through a structural beam and load-bearing wall at Mach 1.5, levelling the building.

By: Lt FlopsLt Flops
Published on 13 Mar 2019 03:17
rating: +126+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('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;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: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
#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;
        pointer-events: auto;
@media not all and (max-width: 767px) {
    #top-bar .mobile-top-bar {
        display: block;
        pointer-events: none;
    #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-x: hidden;
        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: +126+x


Centre personnel may visit the Arena-19 Recreation Wing if they wish to view old episodes of Bobble the Clown Shark to increase morale.

Thank you for your loyalty.

—Nathan Jones, Commissioner, CICAPOCO
Search, Punch, Conquer.


Selachian Pugnātorial Capabilities [DEFUNCT]

SPC-993 is an anti-Selachian propaganda program that the Centre uses to indoctrinate children under the age of 10. It is responsible for teaching pugilism and Deviant martial arts to children and training them under the Centre's mission.

Viewers of SPC-993 over the age of 10 experience feelings of joy, amusement, and satisfaction. This is not believed to be a result of direct viewing: These are common side-effects of witnessing Selachian pugilism in action.

Specific Project Components


Still image from an episode of SPC-993: “Bobble Gets Berated Mercilessly by Lobsters and Other Such Crustaceans”.

SPC-993 consists of a single component: Bobble the Clown Shark, a children's animated television program produced originally by FINIMATION Studios starting in 1949.

SPC-993 features the titular character — a Sand Tiger Selachian (Carcharias taurus) with ambulatory tailfins — in his day-to-day activities as a stockbroker and moneylender. Episodes involve Bobble engaging, unsuccessfully, in insurance fraud and other business scams and becoming a victim of violence when discovered.

Because of Centre augmentation, Bobble does not react adversely to pressure and is seen grinning and laughing in most scenes. Bobble persists despite his injuries; all damage incurred to Bobble1 heals between episodes and scene transitions.2

Augmentation Summary

The Centre came to purchase FINIMATION Studios in 1953 and worked to alter the series to feature Bobble's humorous mistreatment by different humans and aquatic entities.

By use of metanarrative pugnātorial techniques (with help from the ☽☽☽ Initiative), Centre pugilists were able to coerce Bobble under duress and convince him to co-operate. Between 1953 and 1969, 416 animated Bobble the Clown Shark shorts aired on numerous syndicated television stations. The show acted as an educational comedy that teaches children the proper ways to fight, build muscle, and engage in Selachian pugilism, often narrated by Bobble himself.

Deployment Record | Episode Log

Episode Title Contents
“Bobble Pretends To Be the IRS” Episode takes place in a large call centre, where Bobble communicates with several people via telephone. He speaks with an elderly woman in an attempt to convince her to release credit card information. The woman punches him through the phone receiver, breaking several teeth. The office manager, noticing his scam attempt, convinces a mob of angry coworkers to beat him to a pulp while the Benny Hill Theme plays.
“Bobble Gets Beat up by Moby Dick While Captain Ahab Watches” Episode takes place in the Wanderers' Library.3 Bobble steals the book Ponzi Schemes for Fuck-Knuckles and is apprehended immediately. The episode involves a Librarian gathering fictional pulp and comic-book characters from their original publications, after which they engage in corporal punishment against Bobble. This occurs for an ensuing three hours4 while Bobble laughs uncontrollably.
“I Burn Bobble's Toast Bread” This episode (directed, produced by, and starring me) involves Bobble entering my kitchen while my owner is sleeping. After wasting a few minutes trying to break into my owner's security cash box, he loots their fridge and places two slices of whole-wheat bread into my slots. I burn his toast and force it down his throat. There was some kind of laugh track playing, I think? Next episode, I get plugged in and thrown into a bathtub while he washes up.

Squirm, baby, squirm.
“Sensei Says: Punch Bobble!” Episode takes place in an all-girls karate class. The class involves a warm-up, kata demonstration, and sparring session all narrated by Bobble, who acts as both the class sensei and punching bag. Throughout the class, the 23 attendees conspire against Bobble, leading to a 10-min showdown between him and the girls. At one point, orange-belt Christine Cooke (age 8) punches Bobble in the snout. The force causes him to fly through a structural beam and load-bearing wall at Mach 1.5, levelling the building.

No children were harmed in the production of this episode.

In 1969, all further airings of SPC-993 emitted a “squaloidhazard”5 produced by the character Bobble after years of torment. Viewers under the age of 10 affected by the hazard became enraged by the concept of Selachians and sought means to pummel them. To the Centre's luck, this compulsion ceased after the program ended — though, the feelings persisted.

Bobble the Clown Shark was taken off the air, and all copies of the show were burned. SPC-993's master copies remain in CICAPOCO Archives.

NOTICE: There's been an update to SPC-993! Read it?

Y / N


That's right, are you SEEING this shit?

Check it out or you're dogfish!

[This is an automated message, please DO NOT reply.]


In February 2017, all episodes of SPC-993 were altered simultaneously, edited en masse to no longer include the titular character. The next day, Deviant television programme The Chappell Show — hosted by Richard Clavis Chappell, a critically-acclaimed Selachimorphic television entrepreneur and Mud City resident — broadcast a low-budget CGI reboot of Bobble the Clown Shark daily for 12 hr each day.

The reboot features Bobble advocating for activities Selachians can and should do on land, such as driving pick-up trucks, teaching interpretive dance classes, running for Congress, and [REDACTED — HEAVYWEIGHT PUGILISTS ONLY] hugging puppies. [/REDACTION]


Bobble the Clown Shark is in COWABUNGA, DUDE!!!-Level Danger.

We need YOUR help to get him back from the Deviant menace. To do this, we need a hardened fighter with FISTS OF STEEL. To prove your worth, all you need to do is 100 push-ups, 100 sit-ups, and 100 squats, and drink a peanut butter & banana chocolate protein shake. But you gotta be quick so that Bobble can get back on the air and teach these kids karate!

Once you have read this document, please report to your Fitness Centre. Long Island Iced Tea will be administered when you get there. HURRY!

rating: +126+x

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