Spruce Mist
Spruce Mist
Byㅤ ZygardZygard
Published on 02 Jul 2022 21:04
rating: +1+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; }

Spruce Reindeer » Spruce Mist

Spruce Mist

rating: +1+x
Image Unavailable


"You think this is something? You think this is bad? This? This chicanery? He’s done worse. That billboard! Are you telling me that a man just happens to fall like that? No! He orchestrated it! Jimmy! He defecated through a sunroof! And I saved him" said an angered male voice from the monitor screen.

In front of the monitor itself sat a security guard staring at the screen. He was holding a bowl of popcorn in his hand, but due to the intensity of the scene that was playing in front of him, his hand was just lying there. But slowly he moved it, shifted his hand into a spatula, and put a few pieces of popcorn in his mouth. He watched the series on one of the monitors, and on the other he could see the screens of the monitoring cameras in the facility. The booth in which the security guard was located was at the side gate of the Site PL-49, and now it was 2:39pm. Not only that, it was a side gate, so a late hour did not herald too many people passing through this gate, so the security guard decided to spend some time with the series.

"And HE gets to be a lawyer? What a sick joke! I should’ve stopped him when I had the chance! …And you, you have to stop him! You-" the voice did not finish, the screen went blank for a moment.

The security guard put the bowl of popcorn down next to monitor and checked what happened. The electricity stopped working in the booth, which immediately shut down the computer, but it returned immediately. The security guard turned the computer back on. In the moment of darkness with the monitor turned off, he looked around. The forest surrounding the facility was strangely quiet, the weather foggy. What caught the attention of the guard, however, was the appearance of the fog, it was not normal. The fog was dark in color, slightly resembling spruce needles. Concerned about this, he took the communicator and spoke to the security guard at the main gate.

"Otter, do you have such a fog too?" he asked, then took his finger off the button. He waited a second, then two, three. No one answered him. He decided to ask again "Otter, I hope you're awake. Is there such a fog also in your place?" Again no one replied. He decided to wait two minutes and picked up his communicator again trying to get a second guard. No answer.

He put down the communicator, hung up the note that the gate was closed, then locked it completely. He turned off the computer in the booth, took the flashlight and communicator with him, and then left the booth and locked it. He got on his slightly old red bike and started driving towards the main gate. The fog was now somewhat denser than before, although the side gate was not far away, he could not even see the outlines of Site PL-49 or its lights.

Suddenly he heard branches snapping in the distance. He started pedaling as hard as he could in his legs towards the main gate. When he got there, he saw the gate broken in half, the booth door lying two meters from it. He got off the bike and slowly pulled the gun out.

"Base, this is Beaver. The gates of the main gate were broken, I repeat, break in the main gate" the security guard said nervously, but only white noise answered him.

He unlocked the pistol and switched on its built-in flashlight.

"Is anybody out there?!" he shouted questioningly at the booth, but no one answered.

He went to the entrance of the booth and saw second guard, his body lying unconsciously on the chair, the glass in front of him was broken. The guard's body turned woody, and his hair slowly began to look like spruce needles. His heart was pierced right through, and a spruce-colored mist was escaping from the wound. His face was frozen in panic and terror. The security guard leaned against the booth. It was the first time he had seen anything like this. He put a hand to his mouth and walked more to the side, towards the trees. He couldn't help but leaned in and vomited, leaving the aftertaste of popcorn he had eaten and vomit in his mouth.

He heard the snap of a branch in the distance again, but that was not what his mind was engulfing now. He was constantly faced with the image of the massacred guard, the fog pouring from him, the terror in his face. His throat tightened again and he released another stream of vomit to the ground. He wiped his mouth and leaned against the pine growing next to him. He was gasping for breath, trying to bring his thoughts to order. He heard another snap of a branch behind him. He turned slowly, still gasping for breath. At the sight of what he saw, he stopped dead, he felt as if his heart stopped and his hair stood on end. In his entire life, he had seen nothing as frightening as what was in front of him now. The creature, difficult to describe by the guard, which resembled the unnaturally bent branches of spruce, but it was also not an accurate description. Every movement of the beast made a branch-snapping sound, like bone shattering. Despite the fact that the creature was made of wood, it was muscular like a bull. Guard tried to scream, but couldn't. He was completely paralyzed, his pistol was pointed, more or less at the center of the beast because even that was hard to say, but his fingers did not listen to him.

Eventually, however, the adrenaline rush allowed him to pull the trigger. A series of shots filled the silence in the forest. The security guard emptied his magazine by firing at the creature, but the bullets simply got stuck in the hardwood. Suddenly, reality began to blur, he no longer knew what was real and what was not. The forest changed its appearance, the gate and the security booth were gone. Giant wooden Behemoths broke through the forest, from the human perspective they were terrifying beasts crushing everything in their path, cruel and ruthless. From their perspective, humanity was only like ants, insects, accidentally trampled on during a walk in the forest. He turned to the other side, saw a path along which spruces grew. When he looked up, he noticed that people were hung, stripped and flogged on the spruces. All races, ages, and sexes.

He walked along this path until he found a circle of stones. Tall, white-haired people with red eyes sat on the stones. Their skin was pale as snow. In the center of the circle was a pile of dead bodies of people of many races. It burned with intense green light, releasing black smoke towards an equally dark sky. The people performing this ritual spoke the words synchronously, in an unknown language, far beyond the concept of the human mind. When they finished, the earth shook, and one of the mountains in the distance, covered in spruce forest, began to rise, revealing merely a humanoid figure.

Guard closed his eyes and let out a scream. He screamed, not knowing to whom. He screamed without knowing why. His scream continued until his lungs were completely empty, his throat was completely torn, yet he continued screaming. He opened his eyes to catch his breath, but the sight of where he was frightened him even more. He was lying on a bed as white as the skin of those people, in a white room with a white door. There was only a red Foundation logo on the wall. He immediately tried to get up, but now he noticed that he was strapped to the bed. He let out a scream, crying for help. He heard a muffled voice outside the door.

"Director Aris, with all due respect, but I don't think it's a good time to visit the patient-" he heard a female voice.

A woman with red eyes, white skin and the same white hair entered the room, dressed in a white jacket. Behind her came a nurse with a syringe, heading towards his bed. Guard froze at the sight of it again and let out a scream, he wanted to warn them, he wanted to talk about the beast, about the cult and the behemoths, but it all gathered into one mass of words stuck together into one. Terrified that no one would understand him, he let out a scream again and began to struggle to free himself. Then he felt a needle prick his neck. His eyes were covered with darkness again, like clouds and fog.

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