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

Diego hovered slightly below the tree line, being careful not to make noise. He was on lookout duty; a useless position, in his opinion. It wasn't like anyone would willingly wander into the deserted forest at day, when there was work to be done. He wished that he hadn't agreed to come; the trees just made him sad. The incinerated trunks were a callback to a simpler time. He would challenge himself by climbing up and finding the most interestingly shaped leaf. Even when his grandfather had been buried here, he tried his best to find the right leaf for him.

Somehow, the gravestone had survived the bombs. As he watched Katy shovel the dirt away, he felt a pang of guilt from her disturbing the otherwise unperturbed grave site.

Click. Plop. Click. Plop. The dirt made the click of metal-hitting-metal when Katy embedded the shovel into the ground, and an unnerving plop when the dirt was cast into a pile. For whatever reason, the dirt had a metallic look and feel. The sound always approached Diego's sleep-deprived mind as footsteps, and he kept checking behind himself, as if there was someone waiting to jump out at him.

"I really think you're crazy, Katy," Diego commented, "Dad's gonna kill us if he finds out you've done this."

"I think you're wrong," Katy replied. She continued along without hesitation. As she penetrated the initial layer of dirt, the shovel started to click less. The layer of soil below seemed to part without much resistance.

"Let me get this straight. You're exhuming our dead grandfather, because you think secret agents kidnapped the town scientist? Are you insane?"

"They killed Mr. Dan, too. Besides, Grandpa's been dead for years at this point; it's not like he's going to jump out at us. I brought you to keep watch, not to complain." That was a lie. Diego knew that the only reason Katy brought him along was because she was an egotistical asshole who needed someone to witness her moments of genius.

"Just because Dr. Andrea moves out, doesn't mean we're going to get kidnapped."

"Do you still think she moved out? She moved out and left her husband's urn?" Katy stopped for a moment and turned towards Diego. She had cold, analytical eyes that never showed excitement or fear. "I saw her getting pulled away into a van. Not like any van we have. An outsider's van."

"And what does digging up our grandpa's grave do to help?"

"Patience is a virtue, Diego. You'll see." As Katy turned back to her work, Diego could see her muttering something. He could guess that it was Grandpa's last words: Rhubarb Forest. Three hundred meters north of the schoolhouse. View of the cliff. Three feet under.

Grandpa had been an engineer, and he'd calculated his burial site as the most impactful location in his life. The schoolhouse was where he'd undertook most of his education, and developed his love for algebra. The cliff was where he kissed Grandma for the first time. Later, he proposed to her on the same cliff. If you went three hundred meters north, you'd find the old river, where he tested a home-made water wheel that became his first invention. Five hundred meters east, there was the old house that he'd inherited from his parents and lived in for most of his life. Unfortunately, the only thing left of it was its foundation. The bombs made sure of that.

It turned out that, because of how hilly the forest was, all these spots were at different altitudes. When Grandpa averaged them all together, the result was three feet under the ground. And they'd made sure Grandpa was three feet under the ground; Diego remembered his dad measuring with a yard stick and saying, in his remarkable Atlantic accent: "Bingo. It's three feet under."

Rhubarb Forest. Three hundred meters north of the schoolhouse. View of the cliff. Three feet under.

It turns out that spot would be the site of just one more impactful event.

After an agonizing amount of time listening to nothing but eerie silence and the rhythmic motion of the shovel, Katy hit something. "I think we've found it. Diego, help me get the dirt off."

As Katy neglected to bring a shovel for Diego, his contribution consisted of grabbing handfuls of dirt off the coffin's surface and throwing it aside. It was decorated with people, flying over clouds. Even if her face didn't say it, the shakiness of Katy's hands conveyed either dread or excitement. She pried off the coffin's cover, revealing what the duo came all this way for: a decaying skeleton.

"Jesus Christ, yuck. Alright, why am I looking at my grandfather's maggot-infested corpse?"

"Take a look at him and think, Diego. What's missing from this picture?"

"Any sense of morality?"

"Where are his wings?" Katy reached out and grabbed the bone in Diego's wings. He stepped back and shook her hands off. She was right; he didn't have wings.

"Maybe they just cut them off? It's a pretty small coffin; you couldn't fit his wings in there."

Katy seemed to expect that question. "He always wanted to be buried whole; you know he was against organ donation. Besides, all of this came out of his own account. He was the kind of person who would splurge on an appropriately sized coffin."

"Well, maybe someone came by and took the wings? You can use them for some cannibalism soup thing, right?"

"No one's been here in the past…" Katy paused to calculate the numbers in her head. "…past seven years. Since before the bombs. The dirt was undisturbed. There's no possible way anyone could have come by, unearthed Grandpa, took his wings, and reburied him. Diego, I took a class. You're looking up and left. That means you're trying to come up with new memories, to try and disprove me. Is it so hard to admit that I'm right, for once?"

"What are you even trying to prove? You've committed a cardinal sin."

"Listen. The bombs drop. For whatever reason, all the books about anthropology disappear. In response, Dr. Andrea does an anthropological study about wings. She comes to the conclusion that wings are an extremely recent development. Extremely recent. The next day, the van arrives at her house, and she's 'moved away'. Her neighbor, Mr. Smith, publicly announces that she was close to a 'riveting' breakthrough about the nature of evolution. Two days later, he's dead in a ditch. Apparently, it's suicide, but Mayor Sturgis wouldn't let anyone do an autopsy."

"So you're saying that people didn't have wings?"

"Yes, and there's someone who doesn't want us to know that. And that 'someone' is coming after us, so we should be leaving. Now."

"Are you sure you're not just being paranoid? Why would they go after us?"

"Because we know about them. I've actually seen them outside at night, trying to figure out the best way to get in."

"You know Dad would never let them in."

"They have machine guns. I've read about them. We don't stand a chance." Katy looked upwards. "It's about noon. Dad is still probably in the commune meeting. If we can take the old car out the back roads, he wouldn't even notice we're gone until the meeting's up."

Diego looked back at the rotting, unearthed carcass of his grandfather. "Dad would be even more pissed off."

"They're after you and me, not him. If we leave now, and get as far away as we can, we're doing him a favor by getting them off his back."

"Alright. Can't we bury Grandpa again? It just seems disrespectful to leave him like this."

"We need to get away from this place. Now. No time to weep for the dead."

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