Join the Flock
Join the Flock
By: notgullnotgull
Published on 19 May 2018 19:57
rating: +157+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; }

rating: +157+x


We have analyzed the interviews with subjects that come out of SCP-3662. Though all of their experiences vary wildly, there has been an interesting constant. All subjects have reported seeing a large bird, often orange in coloration. This includes subjects who were avid bird watchers to subjects who lived in areas without an abundance of birds.

We haven't been able to isolate what, exactly, the bird is. However, recent subjects have reported that it's getting larger, and one subject even reported being attacked by it. We're still trying to figure out what this means, and the interviews are still in progress.

- Researcher C. Calvin

Sergeant Michael talked softly to the D-class subject. She had just exited SCP-3662 and entered the body of another D-class, and he wanted to know what, exactly, went on in SCP-3662.

"So," Sergeant Michael said, making sure not to raise his voice, "try to describe your experience inside of the device."

"It was like a black, blank void," said the young woman in an even softer voice, "sort of like a raven's coat of feathers. Do you like birds, sir?"

"Yes, yes I do," Sergeant Michael said. He thought that it might have been slightly odd that she brought up birds; didn't she get attacked by one? At least, that's what she said in the other interview. These kinds of anomalies rarely had any consistent rules. He decided to ignore it and continue his questioning.

After the interview was done, Michael said his goodbyes and left the room. On his way out, he ran into one of his old friends, Dr. Marco.

"Hey there, pal," said Dr. Marco, "how was the interview?"

"Meh," Sergeant Michael replied, "now if you'll excuse me, I have to take my leave. Early bird gets the worm, you know what they say!"

Dr. Marco chuckled a little bit. "Oh, you!" Dr. Marco was an avid bird watcher, and Sergeant Michael liked to make fun of that fact.

Dr. Marco eventually clocked out and went home to his wife, with whom he talked about a bird he saw on the way home that had blue and black stripes. Mrs. Marco pretended to be interested in his hobby before going to bed. In the morning, Mrs. Marco met with her book club and talked somewhat excessively about the birds and the symbolism in To Kill a Mockingbird. Everybody went home to their husbands, and talked about some bird related subject.

"Ma'am, there's something wrong with my monitor."

"What do you mean?" Technical Assistant Marie walked over to the research assistant's cubicle. As expected, the young man was browsing Twitter. She was supposed to issue reprimands for this, but at this point, she was more apathetic than not.

"As you can see," the research assistant continued, "there's a smudge on my monitor. I've tried to wipe it off, but it's stuck. I think it's somehow in the computer."

Marie leaned over and looked at the monitor. A user had taken a picture of a rather non-photogenic bluebird. Marie scrolled up, and the blur stuck to the picture.

Marie's expression changed from pure disinterest to that of concern. She took out a cell phone and dialed a number. "Hello, site command? Could you please seal off Computer Center 26, Hall 3, please? We've got a meme in here and I think we've all been exposed."

This was the life for Sam. Sitting on the dock, smelling the lake, and fishing with his best friend, George. He couldn't have asked for a better vacation.

"We're blessed in this life, right, George?" said Sam.

"Uh-huh. I love the birds here" replied George.

After a short silence, George made another comment. "Boy, we haven't seen a fish in hours. Where do you think they all are?"

"I wish I could catch birds with this pole" replied George.

"Say, what's with birds, today?" questioned Sam, "It's all you've been talking about since we got here."

"What can I say? I guess I'm a bit bird-brained."

Sam chuckled. "Alright, you know that was terrible."

"Hey, I like terrible jokes too. You know, birds of a feather flock together."

Sam chuckled again and said no more. He continued to fish, but he paid a little extra attention to the flock of birds flying overhead.

Dr. Frederick Hoygull, despite the fact that he was a bird, had earned a PhD and a well-paying research position in the SCP Foundation. Hoygull wasn't his real name, which didn't roll off the tongue; one of his colleagues had given him the name of Hoygull at one point, and it stuck. Right now, Dr. Hoygull was sitting across from Site Director Browning as he jabbed his finger at a multicolored map.

"All of the red dots," Director Browning yelled, "are people we know are infected. Now, if the agents had done the quarantine properly, all of the dots would be here." Director Browning pointed at a significant cluster of dots around the town of Wakeford. "However, some chucklefuck didn't do his job, and another chucklefuck posted the meme on the internet, which is why we've got dots all over the goddamn country!"

"Why don't we just quarantine America, then?" replied Hoygull, writing his reply on a sheet of paper in lieu of vocal cords.

"It's too late for that. We've already got reports of infection in Europe and China. This is on the internet now; we can't take this down, at least not alone. So we have to pass this on to our peers in other countries. That's your job. You know about your natural immunity, right?"

Dr. Hoygull nodded. For whatever reason, SCP-3095-1 were not able to catch nor spread the bird meme.

"Get the message out to them. I don't want to lose more personnel, or more importantly, myself, to whatever this thing is."

"Welcome back to CNN. Today, we have some breaking news. Michael?"

"Thank you, Cheryl. Today, an episode of Family Guy titled 'I Dream of Jesus', has been taken down from all streaming services and television rosters. Fox has refused to respond to any contact from CNN about this incident."

Scene cuts to 'I Dream of Jesus'. In this scene, main character Peter Griffin is performing a dance to the tune of The Trashmen's 'Surfin' Bird '. A male voice narrates.

"The episode 'I Dream of Jesus' contains Peter Griffin dancing to a 60's song titled 'Surfin' Bird", before he meets Jesus Christ and turns him into a celebrity. It is unclear whether Fox was under pressure for the inclusion of Christ, or for another reason. However, it is unknown why this happened over ten years after its release, and not earlier."

"Thank you, Bill. What do you thi-"

At this point, Foundation officials detected the presence of SCP-████ in the broadcast, and hijacked broadcast equipment to disrupt the broadcast. Over 1.3 million people are suspected to have been infected. Quarantine operations ongoing.

Gregory sat at the poker table, holding a few cards in his hand. He had a royal flush lined up to be played, and he was trying to read his opponents for anything that might help him in his play. He looked at Kens, who had a pretty good poker face, and was therefore hard to read. He shifted his gaze over to Frank, whose eyes were glazing over as if he was dozing off. Finally, he switched his sights to Donald, who… also seemed to be dozing off.

Looking back to Kens, Gregory saw his eyes were losing focus as well. He stood up; the fish-eyes of his friends followed him. They dropped their cards (which were less than stellar) on the table and stood up with him. Then they started screeching, accompanied by the screeches of people all throughout the neighborhood.

Gregory instinctively clutched his ears as a million questioning thoughts ran through his head. What are they doing? Why is everybody doing it? Do I hear a bird? What's going on? Are they fucking with me? Why can't I be a bird? Are they hypnotized? Who are the birds? Wh… How can I become a bird? What, exactly, is a bird? Why shouldn't I be a bird?

Gregory felt his eyes losing focus.

"This is your captain speaking. We've just, uh, received an order from the national government. Stay in the air, at all costs, and try to find an uninhabited place to land. Now, uh, we have no idea what's going on on the surface, but, if they're making us, uh, stay up here, it's probably pretty bad. Now, stay on board, and we're going to await further instructions. Thanks for flying Southwest, and we, uh, apologize for this inconvenience."

Sam barricaded the door with the mahogany dining table. He could still hear the incessant screaming of not just his former friend George, but of the thirty or so other people that had begun to roam the area. Was it an overreaction? Possibly. It wasn't like they were doing anything other than screaming. All Sam needed was a pair of headphones to keep it out.

I wonder if the birds are alright…

As Sam realized what he was thinking, he tried to push the thought aside to address more important matters. But it stuck there, like it was bolted to his mind.

Hey, don't they sound kind of like birds?

The second thought then anchored itself into his brain. He tried to move it, but Sam just couldn't stop thinking about how the screaming outside resembled the call of a wild seagull. A third thought arrived that posed the question of whether or not humans were just unwinged birds, and then a fourth, and a fifth, and a sixth, until all that was on Sam's mind was birds.

Sam felt his eyes lose focus.

Director Browning sat across from twenty-three other suited men at the circular table. Usually, it would be up to the O5 Council to make this decision; however, the bird meme got spread at one of their meetings. In their absence, the Site Director's Executive Committee of the Whole was the highest authority in the Foundation. These people were the last remnants of the chain of command that had managed to avoid the meme.

"It appears that the meme has somehow been altered to modify the brain chemistry of its infectees," lectured Director Frant while pointing at a diagram, "which is what's causing this behavior. Now, if we look at this diagram…" Frant clicked a button that switched over to a different slide, showing another, similarly colored brain. "This is the brain of a bird. If we compare these two brains together, one can see that they are very, very similar. I submit for your consideration that this meme is transforming people, on a mental level, into birds. Now…" Frant clicked the button again, showing a picture of a crowded street filled with litter and glass from broken windows. "A good portion of humanity appears to just be infected. The remainder are either hiding in their homes, attempting to escape the area, or going on looting sprees."

Director Browning wiped the sweat from his forehead. "Is the Memetics Division working on a countermeme?"

"I'm afraid there isn't really a Memetics Division anymore," Director Frant replied, "aside from us, we have one hundred, maybe two hundred, researchers and agents under our command. None of them have any training in Memetics whatsoever. At this point, over seventy-five percent of America is infected. It's going to be hard to recover anybody who can work for us, now."

"What about the Avian Division?" Browning replied.

"They're over half of our remaining workforce, and the only ones immune to the avian meme, it seems. They're working double shifts for us, but even then they can only do so much."

A silence crept over the room before Director Moose spoke up. "What's our plan?"

"I don't think we have a plan, at this point," said Director Bright while he was pinching the bridge of his nose, "over half the world is already infected, and I doubt anything we do will help. I'd suggest waiting until certain contingency options are available to us before we take action."

"Are you talking about-" began Director Browning, before realizing the taboo of talking about it aloud, "that could take a thousand years before it's operational again!"

Everybody at the table looked down, despondent. Nothing was left to do.

Tim threw the brick through the window of the supermarket. The police were too busy fending off the hordes of screeching people, and it was pretty obvious that the world was going to shit, so Tim wanted to stockpile enough supplies to live comfortably in his basement for at least until the whole thing blew over to the point where he could get more supplies. As he stepped through the window, he picked up a suitcase and went to work, picking up canned foods, appliances, and weapons before anybody else could get them.

Tim took a bag of sunflower seeds off of the shelf. I wonder if I could feed this to the birds… he thought as he tucked it into his suitcase. Suddenly, he realized that he'd thought about feeding the birds before he thought about feeding himself. I hate birds. he thought to himself, remembering a point in his childhood where a pigeon managed to land a shit on his head. For some reason, that memory seemed almost appealing now.

Assuming that the apocalypse was fucking with his head, Tim quickly shoved the bag in his suitcase and speed-walked away.

Tim stumbled upon the jackpot: a hunting rifle, complete with ammunition and a manual. As he picked it up, he wondered how he could use it to not shoot down the birds.

Once again, Tim stopped himself at that thought. Why am I thinking about birds so much? Because they're cool. Tim ran through a list of reasons why birds were cool in his mind. Resisting was futile; every time he tried to refute a reason, his mind would come back with a greater reason as to why he was wrong.

Tim felt himself starting to caw like a bird, as he felt a talon pushing him far, far back into his mind.

Dr. Frederick Hoygull, head of the Avian Division and therefore the remainder of the Foundation, looked out over what used to be New York City. From a distance, it still looked relatively untouched. Once you got closer, you could see the broken windows, turned dumpsters, and broken streetlights left over from some amount of rioting and looting. Then you saw that the people walking the streets wore dirty clothes, and did nothing but screech if you got close to them.

Hoygull sat at a distance from the commotion, next to two of his associates: Linda Duck and James Crowl.

"Shouldn't it be more crowded?" questioned Crowl.

"I think they're all… migrating, for lack of a better word," replied Hoygull, "I've sent some scouts out to try and figure out where they're going. If anything, it looks like they're moving west, for some reason."

"This is bad," commented Duck.

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