17 Phoenix Street
17 Phoenix Street
Byㅤ DrDapperDrDapper
Published on 28 Dec 2022 17:22
rating: +14+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('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; }

NIGHTFALL Hub » 17 Phoenix Street

rating: +14+x

17 Phoenix Street

It was at the top of the hour when the man reached 17 Phoenix Street. The chilling November rain assaulted his coat and hat as he stepped up onto the cobblestone stairs. His eyes wandered to the wooden sign on the left side of the door.

Thompson Private Eye.

Confirming he was in the right place, he turned and rapped the knuckle of his right index finger against the door. It opened several seconds later, with an elderly woman standing on the other side of the frame.

"Hello, sir." The woman said in a fragile voice. "Are you here to meet with Miss Thompson?"

"I am."

"Right this way, dear." The woman stepped to the side, allowing the man to slip past her and into the foyer.

It was nothing fancy, a dark red carpet stretched the length of the long yet thin room. The floor boards visible under it were light brown and polished. An ugly yellow wallpaper, of which desperately needed replaced, surrounded them. A few chairs sat off to the right, along with a coffee table with the evening paper on it. A grandfather clock stood directly in front of the man on the far wall, with a stairwell just next to it. The time on the clock read 11:00.

"I hope I'm not too late for convenience." The man said, apologetically.

"Oh, not at all." The woman replied, picking up a lit candle that sat on the coffee table. "Miss Thompson works at all times, even throughout the late hours."

Together, the two of them began ascending the stairwell. Creaks and groans wailed from the boards as the man's heavy feet sunk down into the wood. At the top of the stairs was a hallway, much wider than the one they had just left, with two doors on each of the three walls away from the stairs. Six in total. The woman made her way to the second most right one and gently tapped at the door.

Several seconds went by without an answer.

"Miss Thompson." She said, tapping again.

This time there came a shuffling from the other end of the door. It opened a second later, and a woman (whom the man assumed to be Thompson) peaked her head from around the door.

"Sofia, I told you not to disturb me while I'm working." Thompson said in a slightly irritated tone.

Strands of her blonde hair hung down in front of her eyes, giving her a partially disheveled look. She appeared to be somewhere in her late 20's or early 30's, and the darkness around her eyes combined with the little bit of red in her sclera further confirmed that she was a woman of little sleep. Still, her blue irises showed an acuit awareness to everything going on, dashing any thought that she was tired physically or mentally.

"You have a client." The woman replied, turning to the man. "Mr…"

"Darke." The man said, tipping his head. "And I find myself in need of your services."

Thompson's eyes softened as she opened the door entirely.

"Well why didn't you start with that?" She said, sidestepping. "Come in, Mr. Darke."

Darke wasted no time in stepping into the room with Thompson. It was a fair sized chamber, large enough to call a single room apartment, but small enough to be entirely lit by the blazing flames in the fireplace to the far right. Directly in front of Darke were two large windows that looked out over the street he entered from, with a work desk hugging the wall between them. Parchment, letters, envelopes, and some other kind of paper he couldn't quite make out all sat atop the desk, along with an ink jar and pen. A couple comfy looking chairs were arranged in front of the fireplace, turned to face one another. Another chair of the same make was to Darke's left, and was looking towards the adjacent wall.

Darke's eyes wandered to the wall in which the chair faced, and found himself performing a double take. Completely covering the surface were photographs, of which there must have been no less than thirty. Most of them were just of random objects or corners of a room that couldn't be made out. However, one of the photos seemed to depict a cadaver laying in a pool of some dark liquid.

"That's a case I'm working on on the side."

Darke turned to see Thompson standing beside him. The door leading out into the hallway was closed now.

"I hope I'm not interfering in some grander project you're working on."

Thompson waved her hand. "I'm an excellent multi-tasker. Now come, let's sit and discuss what it is you require of me."

She made her way over to one of the chairs in front of the fireplace and sat down. Darke turned and did the same. The chairs, he thought, weren't nearly as comfortable as they appeared.

"So what seems to be your problem."

Darke showed hesitation in opening his mouth.

"Before I continue, do I have your word that the details of my predicament will remain confidential?"

"Unless you admit to or threaten to commit a crime, I am bound by law to secrecy."

He shuffled uneasily in his chair.

"Alright. I'm taking your word for it. This case is of upmost importance and urgency, and must be kept as far from the public eye as possible. I come from a wealthy family up north, and one with a lot of skin in regional politics. Every November, me and my father visit his brother for a week or two. We went up to his mountain estate last week, and planned to stay there until the new year. But two days ago, we all awoke to the most horrific sight. My father was found dead in his bedroom."

"So a classic murder?" Thompson replied. "Aren't I a bit overqualified for this kind of thing?"

"I have yet to share the most mysterious part of it." Darke said. He glanced around him, before leaning in closer to the detective. "He was killed by a werewolf."

Thompson raised an eyebrow upon hearing this.

"Are you sure? Typically when people are killed by werewolves, they're done so OUTSIDE the confides of their house."

"I must admit, no one staying at our estate has half the deduction skills as even an amateur detective, but there's no doubt in any of our minds this was the doing of a werewolf. Claw marks the size of rowing oars and deeper than the volume of a watering bucket were slashed all about the room and my poor father's figure. I come to you as a man humbled by the sight of death begging you to find the perpetrator of this vile crime and bringing them to justice."

Thompson sighed and slouched into her chair.

"I'm not a monster hunter, Mr. Darke. What exactly do you expect me, a private eye, to do about a werewolf?"

"The werewolf…" Darke said slowly. "Is someone staying at the estate."

"And what makes you so sure?" Thompson said picking her head up in mild interest, though the tone of her voice was still dripping with skepticism.

"The mansion is isolated. There's no village or homestead close enough for it to be the cause of a third party. But even if there was, you have the word of our esteemed and decorated guardsmen that no one, man or beast, breached the estate border the night of the death. No… this was from someone within our walls."

Thompson laid her elbows on the arms of the chair and pressed her fingers together.

"I'll admit this sounds like an interesting case…" She began after a few moments of silent thinking. "But the Fundamentum can solve your problem in a quarter of the time for a third of the price. Why come to a private detective?"

Darke grimaced at the word 'Fundamentum.'

"The Fundamentum would make everything public. This entire situation would ruin our family name. Like I said, we have a lot of skin in regional politics."

Thompson tapped her lips with her still connected fingers as she thought in silence.

"Just so I'm understanding this correctly… your father was found murdered by a werewolf in his bedroom, and you believe the perpetrator is one of your family members staying with you. You want me to find out who it is, and keep quite about it so your family reputation isn't tarnished."

"If you can do this all to our satisfactory, we're prepared to pay you no less than 20,000 Airgead."

Thompson let out a deep exhale of contemplation upon hearing this. Neither of them said a word for several minutes. The only noise that could be heard was the light tapping of rain against the windows and the crackling of the fire.

"I accept your proposition to handle this case." Thompson said, standing so quick Darke had been caught off guard. "You said this happened up north?"

"Yes Miss." Darke stammered. "Up in Beinn. Just a day's ride by train, and half a day by carriage."

"Very well." She said. "It's late, and I do like to get some sleep before starting a new case. We shall catch the first train leaving for Beinn tomorrow in the early hours. In the meantime Mr. Darke, I suggest finding a hotel."

Nodding, Darke stood and made his way over to the door.

"Thank you, Miss Thompson." He said, raising his hat as he opened the door. "The Darke family will forever hold respect for you if you solve this mystery."

And with that, he turned and left the room.

NIGHTFALL Hub | Coming Soon! »

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