Chasing Suns
Chasing Suns
By: notgullnotgull
Published on 17 May 2022 04:20
rating: +20+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: +20+x

March 12th, 593 After Avian Removal (A.A.R.)

Gerouru Castle Grounds

6:43 PM

Louis shuddered when the castle finally crept out from behind the tree line. For the past 20 years, he’d told himself that it was larger in his mind. No, the castle was actually that large.

"Come in, Myers," Diane said over the radio. "Do you see the castle yet?"

The years had not been kind. Entire parts of the brick wall had collapsed in. The central spire, which Louis had always thought to pierce the heavens, had crumbled and caved in long ago. It left behind a dilapidated skeleton. Even so, Louis still found its form imposing. The metal binding the castle together was infused with dashed glass lighting, giving the entire structure an eerie orange glow in the evening sun.

Louis realized his hands were clamming up. Was he really that shocked to see the castle again? He reached down, picked up the radio, steeled himself, and depressed the button.

"This is Myers," he said. "I see it. Over."

Diane replied posthaste. "Great. I’ve got visual, audio and positioning up. Enter the site through its south entrance." She paused for a moment. "Don’t fuck me over here, Agent."

Louis felt his equipment whir as his body camera and GPS tracker came to life. Diane would know his every move; it was her form of insurance to ensure he wouldn’t try anything.

The castle was carved into the mountainside. Louis knew that more of the castle was inside of the mountain than out. The mountain was dotted with ominous structures, each consisting of a crossbeam situated atop a large pillar. Something was meant to be hung off of them. A man-made canyon divided the forest from the castle’s walls. Louis parked his car at the edge of the canyon.

He got out, circled the car, and opened the trunk. A Foundation-issue MSR assault rifle and a tactical knife. This was typical equipment that he carried around every day.

"No one's been here in decades," Louis said. He knew Diane would be listening. "Why do I need this?"

"It’s a precaution," Diane said over the radio. "Hurry up. We have about two hours before the skeleton team arrives."

The only way across the canyon was a gothic metal bridge approaching a dark grated gate. In Louis' day, there would be one man who would raise and lower the bridge, and another with a sawed-off shotgun to ward off intruders. Both of those men had died a long, long time ago.

Twenty years earlier, the Foundation had begun a military operation to take the castle from its previous owners. The Gerouru fought valiantly, but in the end were no match for the Foundation’s coldness and brutality. The ones who weren't killed were imprisoned in black sites for the rest of their lives. The castle had since been occupied by a skeleton crew of Foundation agents. Through Diane’s efforts, they’d scheduled a rotation such that these guards were gone. Gone for long enough for Louis to find what he needed.

Melancholy thoughts ran through Louis' head as he crossed the bridge, careful not to fall though the holes. He’d left behind this world so many years ago. It was like stepping into a recurring dream.

"How are you holding up?" Diane asked.

"I’m alright," Louis replied. "Just a shock, seeing everything again."

"You’re not here to sightsee. Get on with it."

Electing not to respond, Louis ducked under the gate, entering the courtyard.

Describing the courtyard as "grand" would be a disservice. Even after twenty years of disuse, the courtyard was still as intricate and sprawling as Louis remembered. A beige stone brick path, bordered by metal, weaves between a dozen towers, barracks and bunkers. They’d withered away, but even so it was obvious how much effort had been put into their creation. If Louis squinted, he could still divine the meanings of the carvings, as ancient as they were. A specialized glass lighting system illuminated all of this, using nothing but the residual light of the sun.

What truly made Louis stagger, however, was the tunnel into the mountainside, down through the rest of the castle. Above it was a slab of stone as tall as a building. A massive bird holding the sun was carved into it.

From Louis' perspective, it was looking right down as him.


September 15th, 573 A.A.R.

Gerouru Castle Grounds

5:32 P.M.

Louis wanted to scream.

He was balled up in a space where he could touch both walls with his elbows. The space was suffocating; he could barely breathe. Worst of all, the only thing between him and certain death was a flimsy piece of rock.

Normally, the castle was quiet, aside from the murmur of conversation and the whisper of running water. In the past few hours, it had been quickly replaced by shouting, gunfire and the roar of the helicopter engines.

Three hours earlier, a priest had rushed him into the compartment. Before he closed the door, he’d given Louis one last piece of wisdom.

"If you open this door for any reason, you will die."

Suddenly, Louis heard the sound of breaking wood, much closer this time. After that, he heard the sound of a scream. He recognized it as once of the woodworkers. In the panic, he'd probably hid himself in this room.

"Don’t shoot!" the woodworker yelled. "I’m just-"

He was quickly silenced by a trio of gunshots. Louis winced and shrunk further into his hole. He felt a pain in his chest. It was as if he was the one who was shot. He held back tears.

Louis heard an electronic mumbling sound. Then, he heard the assailant reply.

"This is Zeta-4-15. I’ll be there ASAP."

It wasn’t until the soldier had left the room that Louis realized he had been holding his breath the entire time. As he breathed, he broke into tears.

Louis cried for the rest of the night. Later, he would escape, and wander through the woods until he reached the nearest town. He would lie his way into an orphanage. It was the first day of the rest of his life.


March 12th, 593 A.A.R.

Gerouru Castle

7:03 PM

"Myers, what are you doing?" Diane asked.

Louis realized he’d been staring at the hole in the floor for almost five minutes. A side path of the tunnel took you to an overpass over the mountain’s aquifer. Metal grating separated him from the rushing river underneath. A false floor disguised a secret compartment in the overpass, just large enough to fit a 13-year-old boy.

"Sorry," Louis said. "I just…" His mind trailed off.

"For the last time, we're on a mission." She sighed. "Tell me the truth, Myers. Is there really a secret underground in the castle, or did you just want to visit home?"

"The cathedral’s just up ahead." Louis neglected to answer the question.

"Then get on with it. We don’t have much time."


March 12th, 593 A.A.R.

Gerouru Castle

7:07 PM

Stepping into the cathedral was like taking a step back in time. The sun still shone through the stained glass windows. Louis imagined the families lining the pews, the other children looking at him and smiling as he walked in with his mom. He saw the priest standing up in front of the altar, readying his cants for the day. He saw… the altar. So often with a person tied to it. So often stained with blood.

Not all of Louis' memories here were happy. Most weren’t. Anything they did, they did to make him into a better person.

Louis stepped up to the altar. A revulsion came over him, seeing the wooden bowl pressed into the stone and metal table. The bottom half of the bowl’s inside was stained a crimson red from the fluid it once contained. In another day, to open the door, someone would have to fill it with their blood, and let the sun judge them. Louis just pressed down on the bowl.

The floor opened up next to him, falling away like a trapdoor. The stairway led down to the lower levels.

"I’ve just opened the passage," Louis said.

"I’ve lost video," Diane said. "Describe it."

"It’s… it goes down deep. If I remember right, there’s another altar at the bottom."

"10-4. Proceed."

Each stair reacted with a slight groan as Louis descended the staircase. He could barely stop himself from involuntarily grinning. He’d been down here three times before. It was a rite of passage of the Gerouru, before their untimely demise. Coming down here was a rarity, a time for celebration.

Twenty god-damn years of waiting later, Louis had a fourth time.

The sunlight amplification system barely reached down in the cellar. The cellar was the size of a cheap studio apartment. In the evening glow, Louis could see the four stone brick pillars holding up the ceiling. In the center of the room, Louis could see the glint of the steel making up the portal. It consisted of a grate built into the floor, with four conduits sticking up out of it. Another, similar grate was situated above, with various metal charms hanging from attached steel beams. Across from the portal was a giant lever.

Louis grabbed the rod of the rusty lever, and grunted as he threw his body into pushing it. After a few seconds of effort, Louis slammed the lever from its former position, and sunlight flooded the room.

He could now see the portal in all of its glory. The baseplate was made of an otherworldly yellow metal, set into a steel frame. The four catalysts absorbed the sunlight and began glowing radiantly. A pillar of light connected the floor baseplate and the grate above. The grate itself opened up, creating an unexpectedly bright source of light. The activation emitted a screeching noise much like metal on metal, alerting Diane to his activities.

"What’s going on over there?" she yelled over the radio.

In the center of the portal, a tear in reality opened into a distant temple. It gave off a warm glow. There was no going back now; Louis was finally about to come home. The first day of the rest of his life.

"I’m sorry," he said to no one in particular.

He stepped through the portal, sending him further down than anyone could’ve thought.


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