Byㅤ basirskipreaderbasirskipreader
Published on 15 Oct 2022 01:14
rating: +66+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: +66+x


Item #: SCP-7148

Object Class: Keter

Special Containment Procedures: Various oases are to be established and sustained around the Fertile Crescent, with provisions of food and water for stranded persons to deter manifestations of SCP-7148. Recording instruments like video cameras, microphones, Akiva radiation trackers, thermometers, etc., are set up therein to track and monitor SCP-7148. Its presence in the desert is to be explained through dissemination of Cover Story 6F3 ("Religious Pilgrim").

All instances of SCP-7148-F offered by SCP-7148 are to be confiscated and, if cleared of anomalous traits, distributed.

Description: SCP-7148 is a Levantine human male covered in scars roaming in a 5 kilometer radius around and within the Negev Desert. It speaks in an unknown dialect of the Hebrew language. Despite this, when a person is spoken to directly by SCP-7148, they comprehend its words as if spoken to in their native language.

When a person suffering from dehydration or starvation comes into contact with SCP-7148, they are given a supply of goat's milk stored in a leather pouch given separately together with a tiny seed-shaped white substance wrapped in leather and sinew (hereby referred to as SCP-7148-FH and -FM). SCP-7148 will offer a trade for any object, prioritizing plant seeds and fresh soil, in exchange for SCP-7148-FH and -FM. Refusal of the offer has no consequences and will still lead to SCP-7148 giving out SCP-7148-FH and -FM.

Carbon dating of SCP-7148-FH and -FM reveals that it dates back to around the Late Bronze Age, while temporal degradation analysis of SCP-7148-FH and -FM demonstrate that it is enough to last for 40 years. Anomalous particulate and caloric analysis of SCP-7148-FH and -FM demonstrates that both have faint traces of Akiva radiation and zero calories.

Addendum: MTF Dalet-603 ("Desert Foxes") ran out of food supplies during an expedition into the Arabian Desert. Due to moderate starvation within the group, SCP-7148 manifested within 5 meters of Dalet-603. After approaching the MTF, SCP-7148 attempted to give them an instance of SCP-7148-F, but SCP-7148 found that it was lacking in both SCP-7148-FH and -FM. It brought out a knife, carved out 1 square meter of its skin, and drained a litre of blood from itself while grunting in pain. The skin and blood turned into SCP-7148-FH and SCP-7148-FM instances, respectively. MTF Dalet-603 took this opportunity to chip SCP-7148, for better tracking of its manifestations in the future.

Addendum: Below is the most recent log of SCP-7148, post-chipping.

[SCP-7148 is spotted near a Foundation desert oasis. It is carrying SCP-7148-F instances. To better observe SCP-7148, a camera closer to it is chosen.]

[An unknown individual, later identified as civilian Jacob Leibowitz, approaches SCP-7148. They are mildly dehydrated. SCP-7148 notices them and approaches with an SCP-7148-F instance]

Leibowitz: Thanks for the drink.

[Inaudible murmuring from SCP-7148]

Leibowitz: Seeds? I have a bunch of figs here, is that enough?

[SCP-7148 nods. Leibowitz smiles]

Leibowitz: Probably would have collapsed out there if it wasn't for your food. Stay safe!

[Leibowitz leaves the area. SCP-7148 brings out a pouch filled with various seeds of various plants. It grabs a handful of seeds and buries them into the sandy soil, then gathers the wood near the oasis and forms a fence around the seeds. SCP-7148 eats the figs, but quickly suffers an extremely severe bout of emesis.]

[Ten kilometers away from SCP-7148, Foundation anemometers detect a sandstorm.]

[The sandstorm is 500 meters away from SCP-7148. It notices the sandstorm. It starts digging in the sand with his bare hands.]

[The sandstorm is 100 meters away from SCP-7148. It has made a small hole to hide in. SCP-7148-FH covers the hole.]

[For 40 days, cameras cannot see anything due to the sandstorm. Microphones near the hole detect sobbing and cracking sounds.]

[SCP-7148 climbs out of the hole after the sandstorm has subsided. The Foundation-issued oasis is fully covered in sand, and the planted seeds and fence are nowhere to be found. SCP-7148 collapses on the sand and cries. The hole is covered in high-quality SCP-7148-FH and SCP-7148-FM instances. SCP-7148 is covered in more scars.]

[After crying, SCP-7148 gathers the created SCP-7148-FH and -FM instances and swallows them. SCP-7148 walks again. Microphones near SCP-7148 detect a voice.]

SCP-7148: …איפה נבו…1

Afterword: During the sandstorm, Foundation instruments detected abnormally high levels of Akiva radiation.

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