Spilled Milk
Spilled Milk
By: Lt FlopsLt Flops
Published on 13 Mar 2020 04:01
rating: +64+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;
@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: +64+x

Spilled Milk

Canon Hub » Broken Masquerade Hub » Spilled Milk

A voicemail sent by one Chaz Ambrose of Ambrose Restaurants to an unknown party about a partnership with Moosphere, Incorporated.

Andy! Hey mate, it's Chaz!

So, I got the MC&D shareholders together for one final board meeting, right? And some were, well, still a tad skeptical of the whole thing. I'm telling you: I haven't had that much difficulty giving a pitch since cookery school, heh heh! I got a hold of a few Oneiric representatives who, luckily, were more than willing to spin their dreams into day for us. They'll be able to ease along our partnership with those secretive Moo… Those moo fellows. Can't recall their name, sorry!

We've been working on the insurance angle — can't seem to get that sorted out yet, sadly — but I'm telling you, we'll have this all set up within six, maybe twelve weeks, by the latest!

Andy? 2025's our bloody year! That's right — Ambrose is setting up shop in the Mindscapes, baby!

Six, maybe twelve weeks later. Soft opening for Ambrose Mindscape.


~in partnership with~

Moosphere, Inc.

For more than [UNKNOWN] long Ages, Moosphere, Incorporated has been a forerunner in surrealistic dairy artisanship; a feast for more than 30 BILLION souls and counting! By the fruits of their very spirits, our well-trained Oneiric confectioneers would like to serve you our many fresh, EGO-SHATTERING delights. Mouth-watering cuisine is hard-coded in their DNA — we're sure of it! Feed your chakric affirmations, O vaccimulgent one!

For your benefit, Ambrose Restaurant has selected 100 lucky folks from the Free Ports catchment area to come and feast!


Please note: The True Name listed on your Library Card is required to enter.
Don't forget to leave a review!


The latest customer reviews, powered by Void!
Join in the discussion with #ambrosemindscape!



ever since i went to #ambrosemindscape, i've been hallucinating so. many. worlds. ugh, i've not had a panpsychismic migraine this bad in epochs, it's unbelievable. thanks for appropriating eldritch culture, fleshbag. #whowon? #whosecultureisnext? #youdecide
  • ECHOES 366
  • HUMS 790

11:25 AM · 12 March 2025


The Cosmic Fish

I've taken Ways to Ambrose Restaurants many times in the past. You guys have access to some of the finest cuisine the paranormal market has to offer. And you've always been very accessible to my needs, even in my current form. But this time, did you guys even do your research? Dude, you partnered with MOOSPHERE? Do you even know what these guys DO TO SAPIENTS? You eat their dairy products and they suck your mind THROUGH A NON-BIODEGRADABLE STRAW! #ambrosemindscape
  • ECHOES 159
  • HUMS 238

12:01 PM · 12 March 2025



  • ECHOES 1.1k
  • HUMS 1.4k

6:15 PM · 12 March 2025 · VOID FOR ONEIROI SEA


unborn chubby

#ambrosemindscape ohm my god help theyve taken mmy mind i can feel it theyre loading it into a dropssssship back to nightmareland holy frick someone plz hELP ME
  • ECHOES null
  • HUMS null

8:59 PM · 12 March 2025 · Void for ☒☒☒☒


Theodore Greenleaf

You are disrespecting the Library of Her Serpent by using Her Cards for a simple online-review parlour trick. I have reported you to the nearest Librarian. And that gimmick where you take people's minds to add back into your gestalt mass, or whatever? Not cool. Oh, and I want my money back. #ambrosemindscape #wandererslibrary
  • ECHOES 1
  • HUMS 4

9:41 AM · 13 March 2025 · Void for Waytech

Following a tip-off to a Foundation Site, Mobile Task Force Mu-13 ("Ghostbusters") was alerted to the nearest Mindscape nexus gate and commenced a raid at the conceptual corner of Surreptitious and Scrumptious. At the supposed location of Ambrose Mindscape, no conscious activity was detected.

MTF-Mu-13 remains on stand-by.

A phone call between Chaz Ambrose and an unknown party.

Oi Andy, it's Chaz. I'm calling because…

We've had some, er, growing pains, in a manner of speaking. No no, it's okay. It's cool. I totally get your vibe. Just, breathe for a sec.

You good now? All right.

So anyway, like I said last time, I've just been having the worst headache lately. … What's that? Oh, it's nothing. I spoke with my new shrink, Marcie, she says it's just my anxiety flaring up again. No “raving sub-mariner extrusion” or whatever hysteria's struck the news again. Seriously, nothing to panic about.

Right! Now, we had the place up last week, over on the conceptual corner of Surreptitious and Scrumptious, buuut… We've had irate mindscapers from all over the thought-sphere pouring into our Head Office in Portland — er, one of 'em — the whole weekend. All protesting over dodgy business practices or what have you.

I spoke with this one thoughtform, through e-mail? Friendly l'il thing, just the cutest! We chatted for a bit; said xe attended my second-ever soft opening down in SanFran, y'know, before we took the brand out East. It warmed me right up! But xe said that xe took issue with the way Ambrose has been presenting ourselves lately. Said I, personally, am in with the wrong crowd. Seems not many are down to marry the dairy yet–

Oh, you wanna know what I said? Well I told 'em, you know, “we respect the anomalous community,” right, and “this is our way to give back,” and all that. It came from the heart, you know.

I… Think I ruffled a few feathers. Like, metaphorically-speaking. Er… 'pparently I've been using the wrong word? And “paranatural” is what we use now? It's meant to inspire strength for a diversity of beings, and solidarity no matter how mundane — that sort of thing.

Andy, do you know what “ok noomer” means?

Sorry, I'm rambling, but what I wanted to say was, I want this to be a fresh start. I want to put my best foot forward.

I want Ambrose to do important things this year. We'll make a few hundred thousand gees, I'm sure, but I want our customers to feel appreciated. For following us all these years.

Ayup! Thanks for hearing me out, then! All right. And er, Andy? Whatever you do, don't look on Void for a couple days.

Take care now!

rating: +64+x

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