Alexander
Alexander
Byㅤ TopDownUnderTopDownUnder
Published on 01 May 2022 22:31

rating: 0+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; }

rating: 0+x

SCP-XXXX

ITEM #: SCP-####

LEVEL-

CONTAINMENT CLASS: EUCLID

DISRUPTION CLASS: VLAM

ITEM: SCP-####

LEVEL-

CONTAINMENT
CLASS:
EUCLID

DISRUPTION
CLASS:
VLAM


SPECIAL CONTAINMENT PROCEDURES



DESCRIPTION


SCP-XXXX

A middle-aged man of Greek descent.

Taken during preliminary screening.

SCP-XXXX is a man of unknown ethnicity. SCP-XXXX appears to be in their late twenties or early thirties. SCP-XXXX is highly muscular and appears to have undergone military training. SCP-XXXX does not speak any known modern languages, instead speaking a mixture of Attic Greek and Hatamtite. SCP-XXXX is incredibly uncooperative with Foundation personnel and has demonstrated hostility in the past.

SCP-XXXX possesses the anomalous ability to quickly understand the function and use of any "weapon" it uses. The exact definition of a weapon used for this ability is unknown, as unconventional weaponry, such as broken glass and cement blocks, were subject to it. Following Foundation containment, SCP-XXXX largely refuses to utilize this anomalous property, leading to the pre-emptive cancellation of its Integration. This allows SCP-XXXX to quickly use any weaponry given to it to its fullest extent.

SCP-XXXX-A is the group designation for the armour, weapons and other pieces of technology found on SCP-XXXX at the time of its capture. Included among SCP-XXXX-A are:

  • A long spear-like weapon with a head made from a metal capable of inhibiting psionic activity.
  • An iron shield capable of expanding to five times its size without increasing in weight.
  • A Phrygian helmet with a digital screen over the eyes. This screen is capable of displaying the location of nearby living organisms via the E.V.E that they give of.
  • A broken piece of technology vaguely resembling a cellular phone. The exact function of the device is unknown.

All of SCP-XXXX-A are modelled after and contain design elements from the weapons and technology of Ancient Macedonia, the Achaemenid Empire, and the Argead Dynasty of Egypt. All of them also contain obtuse and unwieldy methods of using them, indicating that they were specially designed for SCP-XXXX or someone with a similar anomalous property.


DISCOVERY


SCP-XXXX was discovered in the outskirts of Mexico City, Mexico, following reports of a "group of heavily-armoured men" entering houses and attacking residents in the area. A Foundation task force was sent to investigate and, following a sudden, short spike in E.V.E radiation - discovered SCP-XXXX, who attacked them. SCP-XXXX was promptly subdued and taken into Foundation custody.


ADDENDUM.XXXX.1

INTERVIEW


Following its capture, SCP-XXXX was transferred to Area-34. After the language it spoke was identified, an interview was held with the assistance of a translator.

SCP-XXXX ENTRANCE INTERVIEW

Interviewed: SCP-XXXX
Interviewer: Dr. Akabi Hayk
Translator: Makis Zareas


[SCP-XXXX is restrained to a metal chair screwed into the ground. Its hands are covered by large metal clamps to prevent use of them. These measures were put in place to reprimand SCP-XXXX for attacking security personnel during its transfer to Area-34.

Dr. Akabi Hayk: Hello, SCP-XXXX. I apologise for the state we have you in, but I'm sure you understand.

SCP-XXXX (translated): [Grunts] These chains could not hold even the weakest of slaves of my King's Legion. I will soon free myself and claim this realm for my lord. Submit and I may make it swift.

Dr. Hayk: I… see. Is there a name you would like me to refer to you by? I understand being referred to by a number can be dehum-.

SCP-XXXX: I have no title low enough for the likes of you to refer to me by.

Dr. Hayk: Alr-.

SCP-XXXX: But you may address me as Kiril.

Dr. Hayk: Okay, Kiril, tell me about yourself. Where did you come from?

SCP-XXXX: I am [Lieutenant?]1 Kiril of New Babylon, Subjagator of the Fae2, Suppressor of the Meek. My legion and I come from beyond the veil of stars, through the realm of Culsans, from a land foreign to here.

Dr. Hayk:… Oh, right, you're "legion," the other men people reported seeing you with. Where are they?

SCP-XXXX: [Sighs]. My squadron is far from here, announcing the existence of this world to our general. I would have been long gone with them, but, alas, my transporter received some damage during our scouting mission in this backwater realm.

Dr. Hayk: Hmm…. So you're from a different universe?

SCP-XXXX: Yes, I am sure that the concept of different worlds from this one may be difficult to comprehend bu- Wait, pardon? This realm is aware of others?

Dr. Hayk: Well, yeah. For a good couple of decades now.

SCP-XXXX: Impossible, with how undeveloped your culture and technology is… I must get this information back. I demand you release me at once.

Dr. Hayk: Now, Kiril, we can't exactly do that, bu-

[SCP-XXXX screams and struggles in his chair, managing to break it off the concrete wall. Markis Zareas kicks him in the stomach, allowing time for him and Dr. Hayk to escape and shutdown the room.]

THE TELESCOPIC

WANDERING DEVICE USERS: LANDSCAPE RECOMMENDED


Issue No. 𐤈𐤆 𐤇𐤅𐤃

/A.

ELEPHANT TEAM CONSCRIPTED

THE UNIVERSITY'S WAR ELEPHANT TEAM HAS BEEN CONSCRIPTED FOR BATTLE AGAINST THE INVADING SAVAGES. TEAM STAR ORSIPHANTES HAS ALREADY BEGUN THE MARCH TO THE BATTLE WITH THE REST OF THE TEAM FOLLOWING FORM.

TALKS ARE HELD OF ALSO CONSCRIPTING THE UNIVERSITY'S PHALANX TEAMS. TEAMS ARE MORE THAN EAGER TO JOIN THE BATTLE AND PROVE THEIR WORTH.

ALEXANDRIA SYLVANOS WILL NOT FALL.

Legio_V_Alaudae.gif

BE WARNED!

INCURSIONS HAVE BEEN TOLD OF IN THE NORTH REGIONS OF ALEXANDRIA SLYVANOS. THOSE WHO LIVE THERE ARE ASKED TO VACATE AND MAKE WAY FOR CAESAR'S ARMY. HOMESTEADS WILL BE RETURNED ONCE THE INVADING FORCE HAS BEEN DECIMIATED.



























DO YOU WANT TO WRITE FOR THE TELESCOPIC? WRITE THREE AUDITION ARTICLES AND PLACE THEM UNDER YOUR PILLOW. WE'LL LET YOU KNOW WHAT WE THINK.

THE TELESCOPIC IS A STUDENT-MANAGED PROJECT OF ALEXYLVA UNIVERSITY


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