Three Feet Under II
Three Feet Under II
By: notgullnotgull
Published on 22 Apr 2020 01:43
rating: +19+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: +19+x

"No, no, no. That looks like it's new. Like someone painted it on. You have to make it look more angular."

Sarah was helping the world's pickiest archaeologist forge some evidence. Every time, Dr. Leo found some way to critique Sarah's wings, or feathers, or dress apparel. Truthfully, Sarah didn't know what the hurry was. The subterranean Egyptian pyramid they were raiding wasn't even been discovered before Thoth popped out of the moon and everything happened.

"Listen, can we just take 10? My hand's cramping up."

Dr. Leo nodded. "Just remember: you can't smoke in here." He turned and strolled off to the place where they'd put their lunchboxes.

Sarah strolled in the other direction, lighting a cigarette along the way. The walls were covered with various Egyptian drawings of people that made no sense now that the Bird Gods decided to bestow everyone with wings. Some shadow agency tasked them with correcting that mistake. Good God, there were thousands of drawings! Sarah could barely imagine how many more days she'd have to spend down in the boiling hot underground pyramid.

Isn't there a treasure room in here? Sarah thought to herself. These kinds of pyramids usually had some sort of treasure in them, right? Since this shadow agency was paying her peanuts for this, she figured she would compensate herself.

It wasn't actually that hard to find; it was behind a hidden door that had long since crumbled away. The main issue were the contents: five ancient paintings Sarah had no chance of smuggling out, two massive vases with the same problem, a golden hand mirror, and a large pile of golden coins. Realizing that her ten minutes were almost up, Sarah slipped the hand mirror and a couple handfuls of coins into her backpack.

Truth be told, she liked the hand mirror. It wasn't much to look at, but for whatever reason, her reflection looked better when she looked in it.

"Ah, great," Katy said, breaking the silence. "Diego, stop. We've got a problem."

Diego was busy filling up the car with one of the canisters of gas they brought along. When he looked behind, he saw a bunch of men approaching them on horseback. They were wearing metal plate armor and carrying spears and longbows. Katy audibly sighed.

"These guys… you know the Order of the Blue Jay, right?"


"Diego, do you even listen when the adults are talking?"

"What's that supposed to mean?"

Katy sighed "These guys are… odd, I think. They thought that the bombs were a sign from God to stop using technology, so they tried to revert to the medieval age. They just go around beating up people and take their stuff. We should be able to get ahead of them. Are you done filling the tank yet?"


"Good. Let's get back in the car and get away."

"Are you sure that they won't be able to catch up to us?"

"Diego, they are on horses. I can personally guarantee you that this car gets more than one horsepower."

Diego emptied the gas canister and threw himself in the front seat. He turned the ignition and slammed the gas. The car made a sound resembling their dad's yawn in the morning before taking off. As Katy predicted, they left the raiders behind in the dust. However, before they could clear much distance, they saw another man in armor race across the road, with a spike strip in tow. Diego hit the brakes, but not in enough time to prevent all four wheels from getting punctured.

"Shit," said Diego, "what now?"

"Don't panic, Diego."

"I'm not panicking."

"Good. I think I can talk them out of it. Let me try."

After a few torturous minutes of watching the raiders ride up on the only horses Diego had ever seen in his life, they stopped in front of them. They towered over the duo, causing Diego to instinctively shrink down. Katy stepped forward with her hands in the air. "We surrender all of our possessions to you," she said, "but please don't kill us. We have a family."

One of the raiders— the one who wore a golden crown, instead of a face shield— dismounted his horse to turn and face his men. "Look at these fellows!" he belted in a very obviously forged accent. "They think that we're going to kill them? Aren't they hilarious!" He laughed in a fake way that signaled the rest of the raiders to laugh along with him.

He turned back to Katy and Diego. He wore a very well-trimmed mustache and a smile that exposed his yellowing teeth. "No, no, no, we're not here to rob you. Why, we're doing quite the opposite! We're conscripting you!"

"Wait," Katy said, "you want us to join you? To… raid, people?"

"Raiding?" The king laughed again. "Why, we're the farthest thing from those God-scorned raiding savages. We're holy soldiers, in the war against the Industrial Revolution!"

A long and uncomfortable pause ensued. Diego looked over at Katy; for the first time in her life, she looked puzzled.

The king continued. "I haven't even told you my name! I'm King Lancelot Arthur Ex-Vee-Eye-Eye, leader of the Order of the Blue Jay!" He cawed. "And you, young man and woman, will participate in the greatest battle the world has ever seen! The raid against the Tower!"

"There's a tower, now?" Diego asked. His lower mandible had already dropped to the floor.

"Only the most unholy tower in the history of this sick world. It is the headquarters of the Foundationers, the people who secretly control this land. They want to restore the world, and bring it back to where it was. Don't they know that we'll simply bomb the world into a husk once again?" He cawed, and the rest of his squadron cawed with him, like some patriotic chant.

"Are…" Katy began, "are you—"

"Yes!" King Arthur interrupted "We are sure that these Foundationers are the utmost evil! The leaders of the world are their mere puppets! They send out their unholy black horses, and take away the people who merely question them. Why, our best man, Sir Caesar the First, was taken away by them, along with the most precious artifact in the world, the Mirror of Prophecy."

"Wait." Katy said, before pausing. She had an idea; I could see it in her lack of expression. "What if I could supply you with magical weapons? You could easily overtake the… Tower, then."

"An interesting proposal!" King Arthur responded, "…but possibly a trap! How can I trust you?"

"I am cursed to never tell a lie," Katy replied. She was using that story-telling voice. "I can tell you that, a very short distance from here, there is a place where the masters of old kept their greatest weapons. Weapons that could fell the Tower in one swift hit."

King Arthur considered his options. "We need the firepower to take down the Tower… alright! We will follow you to this supposed… place. But be warned! If you lie, you will wish you had never been born!"

"What were you talking about?" Diego whispered to Katy. They were both riding on the backs of horses, as the Order cheered at the thought of taking down their mortal foes.

"Where do you think we were going, genius?" Katy replied in a whisper. "There's an old military bunker off the highway soon. I found it when I was lost out here last summer. I was planning on hiding there and stocking up on weapons, but since I think we have the same enemy as these guys, we should take the more proactive approach."

"Then what? We attack this 'Tower', then what do you do?"

"Well, I was thinking—"

"What are you talking about back there?" King Arthur yelled.

"We're talking about how we can't wait to see the Foundationers brought to their knees!" Katy yelled back, before patriotically cawing.

The men all gave a mighty caw before they continued on the endless highway.

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