Down Through
Down Through
By: notgullnotgull
Published on 27 May 2022 02:44
rating: +9+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: +9+x


March 13th, 593 A.A.R.

Site-10 Bakersfield Building, Major Incidents Unit

5:43 A.M.

Diane stared down at the sprawl of paperwork across her desk. Invoices, complaints and reprimands formed an endless ocean across her desk. Each one meant a new level of exhaustian. She’d spent the past five hours in hot water with the chain of command above her, and fielding questions from the ones below. It had been 19 hours since she last slept. Her entire mind felt like a tangled mess. She put her head in her hands and exhaled through her nose.

The latest incident had been what some would call a career-ending move. Cutting through several layers of authority to send an agent into an anomaly, only to have that agent go rogue, wasn't a great look. In fact, she was repressing the very real urge to panic. She was lucky if a minute went by without a new angry email. The *doo dee doo* of the email notification formed the chrous of the frantic song playing in her mind.

Diane sat back in her chair and composed herself. Breath in. Breath out. Everything was under control. With some finesse, she could turn this around for herself.

Researcher Sebastian Hardin opened the door and walked into her office. He was a five-foot-ten skinny mass of flesh with a hunk of metal on top. The most striking thing about him, naturally, was the computer he had for a head. A solid sphere of metal with a camera for an eye rested on top of his shoulders.

Diane tried to ignore that. She'd gotten as far as she had by avoiding those kinds of snap judgements. As her mother always said, the best way to judge someone’s character was their shoes. He had fleshy human legs just like the rest, covered in khakis terminating in a pair of fine black dress shoes. The overcoat he wore reached down to his ankles, making him look akin to a cyborg Columbo.

"Good morning, Mr. Hardin," Diane said, frankly.

"Good morning, Agent Frisk," Sebastian replied. His voice was synthesized like a robot’s, but its tone was still distinctly human, like talking through a broken walkie-talkie. "How was your camping trip?"

Diane was shocked; she compromised her posture and lurched forward.

Sebastian took that as a cue and pointed towards the floor. "I saw pine needles on the floor. Site-10 is right in the middle of the desert. You would have to had traveled somewhere else to get these scattered all over the floor. I remembered that you had a picture of Lake Malhold in your secretary’s office. It’s a popular camping spot, and it has quite a few pine trees."

Diane was floored. Sure, he was showing off, but that was incredible. Sebastian had become legendary in his short time at the Foundation thanks to his powers of observation. He was able to see and think faster than any human ever could. Diane remembered hearing that he once walked into a containment chamber, and immediately knew more about the anomaly than the head researcher. *Of course* he could pick up on a few pine needles.

Diane collected herself. She was the one in charge here.

"There’s no need to show off, Hardin," Diane said. "Take a seat."

"Oh," Sebastian muttered under his breath, before sitting in the hardback chair across from Diane.

"Have you already read the briefing?" she asked. That was more of a rhetorical question. Before she finished her sentence, Sebastian could’ve read it back-to-front 300 times.

Sebastian nodded, and then summarized the incident. "At 800 hours on March 3rd, Agent Louis revealed to you that he was a former member of GoI-509, and that there was an undiscovered basement area underneath the Gerouru Castle, containing as-of-yet undocumented anomalies. Then, at 2000 hours on March 13th, you and Myers mounted an incursion into the castle, during which he disconnected all of his monitoring equipment and entered a spatial anomaly."

"Yes," Diane said. "That's the gist of it. A rogue agent with potential access to anomalies. Embarrassing to High Command. They’d like to resolve this as soon as possible."

"That’s why I’m—" Sebastian stopped mid sentence, like someone had just hit "pause" on a recording. Diane looked at him; he seemed to be functioning properly. He just sat there for a second, staring out into space. After that, he took out a radio from his overcoat.

"Control, this is Researcher Hardin, clearance code 7-Alpha-422. Over."

"Ten-four, Hardin," the Site-10 control operator responded. "Please report. Over."

"SCP-4A7E has breached containment. It’s in the west wing of the Lavandin building. Over."

"I see. Sending a team right away. Over."

Sebastian put away the radio. "I’m sorry. I’m obligated to report containment breaches as soon as I notice them."

"Alright," Diane said. "I’ll bite. The Lavandin building is a quarter mile away. How did you do that?"

Sebastian leaned back in his chair, touching his thumbs and index ingers together. "On my way up here, I walked through the building. I noticed that some people were in a daze. Then I heard a thumping from inside the ceiling, two rooms over. That's when I became suspicious. SCP-4A7E’s attack patterns include hiding in the ceiling and hypnotizing its prey."

"So why did you decide to report it just now? Just wanted to impress me?"

Sebastian leaned forwards. "I can’t make a report until I’m 100% sure. Two rooms over, I remembered that Dr. Sydney and Dr. Ngo were having a conversation. I’ve been listening to them this entire time. They’ve had that conversation for a half hour, repeating themselves over and over. They've been hypnotized."

"Have you worked with SCP-4A7E before?"

"No, ma'am." He tapped the side of his head, producing a metallic echo sound. "I just had the file in here."

Diane leaned forwards, clasping her hands together. Sebastian had just spotted a containment breach of an anomaly he'd never heard of, from two buildings over. She was genuinely blown away.

*Composure, compsure,* a voice in her head reminded her. She sat up straight and looked Sebastian in the eye.

"You see," Diane said. "Twenty years ago, we sent a surveying team into Gerouru Castle. They obviously missed quite a bit."

Sebastian nodded. "Our standards weren't as thorough then."

"I could request another surveying team," Diane continued, "but they'd take weeks to explore every little part of the castle. I don't want to wait weeks for subpar results. I want a sure thing."

"I'm your sure thing?"

"The closest thing we have to one. The boat there leaves in a half hour. I've already cleared it with your supervisor, but I'll still offer you the choice. You don't have to come if you don't want to."

Sebastian thought for a moment. "I'll need to be sure I won't get hurt."

"Gerouru Castle has been abandoned for decades," Diane lied. "Even so, you'll be among thirty veteran Foundation agents. They've fought anomalies on three different continents. They're better than personal bodyguards."

Sebastian thought for a moment. Maybe he was thinking, maybe he was just pausing to make it look like he was. "That sounds safe enough," Sebastian replied. "You can count me in."

"Great," Diane said, standing up to shake Sebastian's hand. Before she could, the breach klaxons shattered the relative silence.

"Attention all personnel," the operator said over the PA, barely audible behind the ear-splitting alarm. "A Keter-class anomaly is confirmed to have breached containment. The site is entering lockdown."

Sebastian groaned. "We don't have time for this!"

"I can bypass the lockdown," Diane said. "Let's get to the boat, A-SAP."


March 13th, 593 A.A.R.

Ravensam Ocean

6:33 A.M.

Diane frequently had fantasies of being in an airplane. It seemed so serene to fly above the clouds, watching the earth turn below as you moved at a million miles a minute. Ever since the Migration, all flying technology was strictly forbidden.

The fledgling sunrise illuminated the ocean water with a brilliant orange. As the mechanical beast of a boat churned onwards, Diane had to admit that the ocean, too, was just as serene as she imagined.

The boat itself was a disguised freighter. After they'd arrived in the truck, the captain had instructed the unit to wait below deck. This was a covert mission, after all; being spotted would make it all for naught. Regardless, Diane had gotten tired of counting the stains on the wall and playing Aisleriot, so she went and got some fresh air.

Diane heard a squeaking noise behind her, followed by the rusty groan of the ship's old hinges. Someone had come to see her. Sebastian opened the boat's hatch and came out onto the ship’s railing. He made a beeline straight for Diane. Clearly, he wasn’t here to see the sights. He had something he wanted.

"I forgot how beautiful the ocean is," Sebastian said disarmingly.

Diane nodded. "It certainly is." She loved to watch the ripples from the boat dissipate into the ocean, to disappear forever. She tried to focus on the ebb and flow of the waves and the robotic heartbeat of the freight ship. It put her into an almost-meditative state, and nearly made her forget the mind-unraveling stress she was under.

"Who are the Gerouru?" Sebastian asked suddenly. "Your documents mention them, but don’t go into detail."

Diane turned to face Sebastian. His single cyborg eye made it difficult to read his face, so Diane had to resort to body language. His loose shoulders and pocketed hands indicated he was more curious than serious.

"They were a cult dedicated to worshipping the sun, who built the castle we're about to visit," Diane said. "*Were*. Years ago, we found out they were enhancing themselves with a biological anomaly. We managed to take care of them before they became an issue."

"Biological experimentation? Wasn't Myers a member? How did Myers pass the Foundation entry exam? Wouldn’t they pick up on that?"

"We dismantled the cult before Myers came of their age. I don’t think he was ever experimented on."

"I see," Sebastian remarked. "Do you have any documents for Gerouru? I’d like to look into their philosophy."

"It's on a strictly need-to-know basis."

"But-"

Diane pivoted towards Sebastian, and looked him right in the eye. She saw him jump a little out of shock. "That’s a question for the discretion officer, hmm…" Diane struggled to remember her name. "Agent Franco."

Sebastian paused, and let his posture slowly return to normal. "Thank you," he said. He turned around and walked away. Before he reentered the ship’s cabin, he stopped in his place, like a deer in the headlights.

"You were in a relationship, right?" Sebastian asked, without turning around. "How did it end?"

Diane glared at Sebastian. How did he know? His lack of a face hid his true intention. Was he teasing her, grandstanding, or just curious? Neither of them spoke for a second for a few moments. The tension in the air was punctuated only by the gentle swaying of the ocean and the distant chatter of some sea animal. Dolphins, perhaps.

When it became clear that Sebastian wasn’t leaving without an answer, Diane spoke softly. "It ended a long, long time ago. Ask me that question again, and they’ll need robot knees to replace your broken ones."

Sebastian stood there for a second, and then nodded. His body language was tight and imposing. Diane couldn’t tell if it was fear or just acknowledgement. Then he turned around and reentered the ship’s cabin.

Diane tuned back to the ocean and sighed. On top of Myers stabbing her in the back and having to set up a freak task force to get him back, now one of the freaks knew about George. Just great.

Today was going to be the longest day of her life.


March 13th, 593 A.A.R.

Gerouru Castle

9:08 A.M.

"I always wanted to see a bird in real life," Sebastian said, pointing to the gargantuan carving of a bird above the tunnel. Vines and foliage had reclaimed the walls of this particular shrine, but its meaning was still obvious after twenty years. The ceiling of the tunnel had collapsed, causing a cave-in. Two dozen Foundation employees were standing around, since their only means to get inside was now inaccessible. Not even the radio-controlled drone could fit through the stone and debris.

"We know the cathedral is underneath the main plaza," Diane spoke into her radio. "How long would it take to get a drill here?"

"The closest warehouse is at Site-49," Agent Thomas Hach, her boss, replied. "It’s a day away by convoy. Two, if the Winds pick up. Remember that your deadline to recover Agent Myers is a week."

"The tunnel's caved in," Diane replied. "According to the schematics, that’s the only way to the lower levels."

"Figure something out, Agent," Thomas replied. "I already stuck my neck out for you once. I’m not going to do it again."

Diane pinched the bridge of her nose and groaned. She’d been handed an impossible task, likely by design. Thomas was probably just trying to throw her under the bus. This castle would be her career's tomb.

Sebastian walked up behind her. "There might be another way down," Sebastian said.

"How?" Diane replied.

Sebastian was walking down the pathway. The path weaved between a stone-brick altar and dried-up pool, both of gothic design. A sophisticated glass light transport system was built into the metal border of the path. It captured the light of the sun and emitted an orange glow that illuminated the entire shrine. The glow emphasized the creases in Sebastian’s khakis and the cleanliness of his overcoat.

"Every cult leader to ever exist has one thing in common," Sebastian said.

"Charisma?" Agent Shafranovich asked.

"Fair enough. I was thinking 'crippling paranoia'. With rivals everywhere you turn, anyone would turn into a lunatic.

"If you're a highly paranoid man, and you live underground in a secret society, at some point, you’d worry about the tunnel collapsing in." Sebastian pointed towards the tunnel. "Like what just happened there. So, naturally, you’d have a backup plan. A secret, second tunnel."

"We've searched this entire place," Diane said. "If there was a secret tunnel, we would have found it."

"I'm pretty sure you would’ve said the same thing about the secret underground bunker," Sebastian replied. "I just think we need to look a little closer."

Sebastian continued walking along the path. "This area's been decaying for a lot longer than 20 years. From the foliage, I’d guess it’s closer to 75." Sebastian kicked aside a pebble. It rolled into the overgrown grass. "That means there’s a lot of debris scattered about here. Except, for some reason, in this particular spot."

Sebastian stomped down on the bricks with his dress shoe. The sound echoed. There was empty space under there.

"These bricks are packed in tight. Does anyone have a crowbar?"

"Is the tunnel under there?" Shafranovich asked.

"I’d wager that it is," Sebastian replied. "If you had a secret tunnel, it was probably last used when we deployed an army into this castle. So there would be less debris on it then the rest of this place."

The agent pried the bricks open. Underneath, a steel, cylindrical tunnel was hidden. Diane walked over to get a closer look. A metal ladder led down deep into the consuming darkness. She couldn’t see the bottom.

"Well, Hardin, you’ve officially earned your keep here." Diane said, "great work."

"I appreciate it," Sebastian replied.


March 13th, 593 A.A.R.

Gerouru Castle

9:53 A.M.

Although it was all in the schematics, Diane underestimated just how huge the castle really was, especially once you went underground. Paths, stairwells, and massive rooms expanded in every direction, each more intricately detailed than the last. Not being exposed to the elements prevented the decay that was evident on the outside. She couldn’t help but stare at the cloth murals of birds battling and the wrought gemstones representing the sun. She’d been inside of temples before; the pre-Migration ones that still stood, like the Vatican. Gerouru Castle made them look like office spaces in comparison.

"We're getting close," Agent Buchanan said. "The temple is right up ahead."

"He’s right," Sebastian said. He’d been walking alongside Diane. "I see a lot more IR radiation down here. That’s a sign of a spatial anomaly."

"If I need something from you, I’ll ask," Buchanan replied sternly. He didn't even look up from his PDA.

Sebastian leaned in close to Diane. "What’s his problem?"

"That’s Agent Grant Buchanan," Diane replied, "code name: Trapezoid Man. He’s one of the special agents we selected for the task force, just like you."

Buchanan’s head was shaped distinctly like a trapezoid, like a toddler had mushed it into shape.

"What’s wrong with his head?" Sebastian asked.

"He was the product of a failed genetic engineering experiment," Diane said. "Don’t underestimate him, he’s one of the best soldiers the Foundation has. He has an IQ of 180, and he once wrestled a bear to death."

"I was meaning to ask. You said there were five special agents here. Aside from me and… him, it doesn’t seem like there's anyone else 'special' here."

"One's nocturnal, he’s sleeping on the boat. The other two are indisposed right now. They'll be here as soon as possible."

Sebastian nodded, and they went back to walking. The quiet emphasized the echo of their footsteps.

They descended down a spiral staircase, wrought with a double-helix railing and stained glass windows. The glass tubes from earlier brought light down here, making it seem that sunlight was beaming out through the window. They arrived at the destination, a cathedral large enough to fit three houses side by side. Diane hadn't expected an architectural marvel; she was stunned for a minute. The pathway to the altar was laden with a red crystalline material, and the walls were decorated with majestic stained-glass murals. Some depicted a battle between two birds, but the at the center depicted a bird holding the sun between its wings. It defied comprehension that something like this could exist so far under the ground.

The hatch leading to the portal was still open. The team descended the staircase, taking them to the cellar. The portal, a golden rip in space leading to some ancient locale, was still open. It gave off a humming noise not dissimilar to electricity.

"Technician?" Diane yelled. "Send the remote drone in."

"Yes, ma'am!" Technician Cleveland yelled. He was the oldest person there by far. Suspenders held the bottom part of his yellow jumpsuit up. He took the remote drone, attached a retrieval cable to it, and sent it through the anomaly.

"I’ve been analyzing the inscriptions that we found in the temple," Sebastian said. "I have a good idea of Gerouru's mythology, at least on a surface level."

"The discretion officer didn’t let you have anything, huh?" Diane replied.

Sebastian ignored her. "It consists of two birds," Sebastian continued, "one represents the sun, one represents the moon. Good and evil. They fought, and the moon one won, but the sun bird still exists."

"That sounds about right," Diane said.

"There’s also a machine, that served a purpose during the fight. It appears in nearly all of the inscriptions, but I can’t tell what it’s supposed to represent."

"Holy crap on a cracker," Cleveland said aloud.

"What is it?" Diane asked.

"I finally got a video feed up on the remote drone. It’s…" Cleveland took a deep breath.

Diane looked over his shoulder. The sight caused her heart to drop into her stomach. Inside the anomaly, there was a grand temple. It was littered with hundreds of corpses. All of them were a fusion of bird and man.


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