Three Feet Under III
Three Feet Under III
By: notgullnotgull
Published on 22 Apr 2020 01:44
rating: +18+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.

Usage

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;
    }
 
    /* FIREFOX-SPECIFIC COMPATIBILITY METHOD */
    @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: +18+x

Dr. Hoygull sipped at his coffee as he perused the forms in front of him. He knew the habit was destructive for him; not just because coffee was bad for birds, but because having a billion ravenous bird-men gobble up everything that looked like a bean meant that the coffee supply was dangerously low. However, playing a key role in the restructuring of the world over the past six years had taken a toll on Hoygull. Most birds didn't even live this long. His heart felt ready to drop right out of his chest.

What really didn't help was the breach alarms going off and his senior security advisor bursting into the room. Hoygull nearly had a heart attack.

"Sir, we have about thirty hostiles attacking the Tower. They appear to be raiders—"

"Then that shouldn't be any trouble, isn't it?" Hoygull's translation device had difficulty emphasizing the stress in his tone. He'd kept some of the raider groups around primarily because it wasn't worth sending good men and good bullets after them. He'd found ways to turn some of the more annoying ones into his puppets, just like he'd done with the leaders of the local communes.

"It is, actually. They have rocket launchers. They've already gotten past the fence."

"I'm sorry, did you say that the raiders are armed with rocket launchers?" Hoygull's translation device had difficulty emphasizing the anger in his voice.

"Yessir."

"How did they get military-grade weapons? I thought we'd cleaned out all of the military bases in this hemisphere?"

"I said most of them. There's a chance we missed some. Also, there's always the possibility they're in contact with Eurasia." Anything outside of the hemisphere was an unknown territory to the new Foundation. For all Hoygull knew, it was anarchy over there. Granted, it was practically anarchy over here, but Hoygull liked to think that the GOC somehow survived and kept the order in the other hemisphere. "You said they'd made it past the fence?"

"Yessir, and I'd like authorization to use anomalous weaponry."

"What? Why? They're raiders, and we have the best rifles in the country."

"Truth be told, Hoygull, our 'military' is held together by a thread. They're mostly volunteers, and they're demoralized from our restoration plan falling behind schedule. You said we'd have the national governments back in place by this point."

"Everyone's been rejecting the puppets we're trying to put into place. It's a lot harder than it looks." Hoygull took another sip of coffee.

"The point is, we need a morale edge. The opportunity to take out the Light Cannons will certainly excite everyone."

"Alright, alright, sure. Make sure you get rid of these guys, ok?"

"I won't let you down, sir."

Once Dr. Kastra left the room, Hoygull buried his head in his wings. "Why?" he muttered to himself. "Why did you give me this position, Calvin?" He wanted badly to resign, but he knew that his presence was what kept the fledgling Foundation together. He choked up his feelings, chugged what was left of his coffee, and went down the hall to get a better look.


Once the Order had broken through the front gates, Katy and Diego had an easy time slipping in. The sound of yelling, detonation of rockets, and small arms fire rung through the hallways. On the contrary to the Order of the Blue Jay, who seemed to enjoy the opportunity to use the 'magic missiles', Diego was skittish to take a weapon. He'd never held a gun in his life; the only reason he had a pistol buried in his cloak was because Katy made him take one.

"We need to find Dr. Andrea," Katy repeated to herself. "Shit. I wish I had a map of this place. Where do they keep the prisoners?"

They eventually stumbled upon what looked like a prison cell. The door was locked, but the plastic explosive Katy had found at the military base made short work of the lock. Inside, rather than any prisoners, was a golden hand mirror on a velvet pillow.

"Weren't the knight guys talking about that mirror?" Diego asked.

"I think they were." Katie took the mirror out of the pedestal and took a good look into it. "We should probably take it back. The Order is going to be pissed if they lose people to this; I told them that the weapons would make them invincible. We can use this to soften the blow. Besides, I think I look pretty in it."

That was the first time Diego had heard Katy refer to herself as 'pretty'. That moment of surprise was quickly supplanted by another, as they heard a robotic voice yell "Freeze!" at them.

They turned around to see a bird, wearing a lab coat and some kind of metal device around its neck, being escorted by a man in a business suit holding a shotgun.

Katy drew her pistol and pushed its barrel against the mirror. "If you take one more step, I break the mirror."

"Please, break the mirror," Hoygull said. It cawed softly into the device, which then output the cold, robotic voice. "We have spent the past month trying to break it. If your gun is stronger than a hydraulic press and 30 pounds of TNT, I invite you to shoot the mirror."

Katy processed this information in her head, before pulling the trigger with the intent to call the seagull's bluff. The bullet ricocheted off the mirror and embedded itself somewhere in the foam walls of the room.

"Now, please dispose of your weapons," said Hoygull. It was at this point that Katy took a deep breath, pointed the gun at Dr. Kastra, and fired. She managed to fire off two shots before Kastra fired his shotgun, knocking her to the ground.

"Katy!" yelled Diego. He crouched down next to her, to try to feel her pulse. Before he could make any accurate assessments, he felt the barrel of a shotgun digging into the side of his head.

"Are you okay, Dr. Kastra?" asked Hoygull.

"I'm fine, don't worry. She wasn't that good of a shot. My shoulder's gonna be bruised for a week or so, but I'm fine."

Diego looked into the mirror. Katy had clutched it as she fell to the ground. In the mirror, he didn't see himself. It was hard to describe what he saw. It was like a place combined with an idea. He saw Katy, and his dad, and his mom, and the Order, and a blue aura that seemed to cover it all. Looking at it made him feel content. Like he didn't have a shotgun barrel impressed onto his head.

"Put down the mirror!" yelled Dr. Kastra.

Diego hadn't even realized he was holding it.

"No, I don't want to kill two people in one day," said Hoygull, "hold his back and I'll pry it from his hands."

The guard wrapped his arms around Diego, hoisting him up. The seagull fluttered up to Diego's chest and seized the mirror with its talons. Although the bird was quite old, with the help of Dr. Kastra, the mirror seemed to slip right out of his hands. The seagull then tried carrying it over to the pillow where it was originally stored, but he suddenly passed out and fell to the ground.

"Are you okay, Hoygull?" asked Dr. Kastra. Suddenly, Hoygull started glowing. In tandem, the mirror began to emit the sound of metal scratching against metal. Diego found himself with a splitting migraine, and he began to scream in response. Before he passed out, he saw something emerging from the mirror: some kind of humanoid figure that glowed along with the rest of the room.

Diego's vision blacked out as he heard a deafening caw sound across the world.

The moon turned blue.


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