Washer

Washer
By: (user deleted)
Published on 08 Aug 2021 18:12

What this is

A bunch of miscellaneous CSS 'improvements' that I, Croquembouche, 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):

• RSO Component — Rounderhouse

Personal styling themes (which are visual overhauls):

• Magnus Web Format — DrMagnus
• Flopstyle CSS — Lt Flops
• Blankstyle CSS — HarryBlank
• Placestyle CSS — Placeholder McD
• Jakstyle — JakdragonX

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; }

ITEM NUMBER: SCP-XXXX	LEVEL 3/XXXX
CONTAINMENT CLASS: keter	confidential

DISRUPTION CLASS: vlam

---

Special Containment Procedures: For the time being, SCP-XXXX-1 and SCP-XXXX-2 will remain in their place of discovery, a now fortified backroom within Site-43's Acroamatic Abatement Facility DBA-G. The room possesses an electronic lock and steel-rienforced walls; the old drywall has been removed and replaced accordingly. SCP-XXXX-3 is held in a standard Safe-class storage locker, located in the Applied Occultism section.

When not in use, SCP-XXXX-1 and -2 are to be disconnected from the Site's electricity and water systems. Before any experimentation is conducted, SCP-XXXX-2's plastic disk must be cleaned thoroughly, and any built-up substance disposed of. Usage of SCP-XXXX-1 and -3 to dilute or remove the properties of other anomalous objects is under consideration.

Recontainment efforts are ongoing. As it is believed SCP-XXXX-1, -2 and -3 are still present within the facility, methods to enter their containment chamber are being developed.

Context unknown. Presumed to be a photograph of SCP-XXXX-1 and -2, though SCP-XXXX-3 is missing.

Description: SCP-XXXX is the collective designation given to two white, cubic machines, and an orange milk container.

The first machine, SCP-XXXX-1¹, has a circular plastic window attached to its front-facing side, with a silver-painted ring around it. The ring possesses a handle, which can be used to open the window. This requires moderate physical strength to open and close, likely due to it being watertight.

A control panel is present on top of SCP-XXXX-1 near its back end; directly attached to the panel are three cables which feed into the Site's water and electricity systems. The panel itself possesses a dial and three buttons. Two of the three buttons are labeled "On/Off" and "Quick Wash," but the third button is unlabeled and nonfunctional².

The dial is surrounded by words such as "Cotton," "Drain," "Rinse," "Spin," and "Off," but only spinning the dial towards "Drain" has shown any effect on its functions. Between each word are degrees, ranging from 40 to 60.

The interior of SCP-XXXX-1 is a circular iron tube, with small holes across its entire surface. When activated, this space begins to fill with water, then spin counterclockwise for 30 minutes to an hour. This can only occur if the ring has been closed, sealed, and the "On/Off" button has been pressed once. If the "Quick Wash" button is pressed after the "On/Off" button has been pressed, then the length of its activation will reduce to only 20 minutes.

Pressing "Drain" while SCP-XXXX-1 is active will result in the water level lowering. It is presumed this function is used in the event of flooding or overflow, but this has not occurred as of writing.

The second machine, SCP-XXXX-2, possesses a similar structure to SCP-XXX-1. However, it lacks an openable window, only having a light hatch on its top side with no locks. A handle is present in a dip on the hatch's underside. When opened, there is a large slot present in front of its interior tube, which contains a tightly wound mesh net bound in a plastic disk³. SCP-XXXX-2 possesses a control panel similar to SCP-XXXX-1's, but it only possesses one cable connecting itself to an electric outlet.

The panel has one button reading "Power," while the dial's labels read "Casual," "Normal," "Delicate," and "Heavy Duty." These options do not appear to affect SCP-XXXX-2's functions. The interior tube does not possess holes like SCP-XXXX-1's, being smooth. It also does not fill with water upon activation; thermal imaging indicates it begins to heat up inside the tube through an unknown mechanism. SCP-XXXX-2 can only be activated if the "Power" button has been pressed once, and the lid has been closed. Opening the lid while it is active results in it immediately shutting down⁴.

Not cleaning the netting has resulted in the substance lighting on fire. This has caused the interior of SCP-XXXX-2 becoming slightly distorted due to its exposure to high temperatures. Personnel have reported a lingering scent of smoke, and occasionally hear "crackling" while in its vicinity.

The interior tubing of SCP-XXXX-2, photographed during a temporary disassembly.

Identical copper plaques are present on the undersides of SCP-XXXX-1 and -2, which read "█████ Industrial." Both plaques are corroded and covered in platina.

SCP-XXXX-3 is an orange plastic milk container; a paper label is present on its side, but the text has been smudged from water damage. SCP-XXXX-3 contains a blue liquid, which sequencing has indicated is composed of Dosidicus gigas⁵ digestive fluid, mixed with various blue food dyes. When the liquid is poured into SCP-XXXX-1, and SCP-XXXX-1 is activated, the liquid is able to ontologically absorb the properties of anything it touches⁶. This does not appear to effect SCP-XXXX-3. This can only occur if the liquid is in the presence of water, and the water is being mixed in a small space at a consistent speed. Though its properties can activated outside of SCP-XXXX-1, they are not as effective.

Discovery Log: During the initial implementation of an improved power grid within Site-43 by Chief Amelia Torosyan⁷,

Incident XXXX-001

---

[BEGIN LOG]

00:00:

[END LOG]

Footnotes

1. See image; the described anomaly is present on the left side of the photograph.

2. Personnel report a feeling of uneasiness after pressing it, which increases after repeated pressing. However, memetic screening has shown this is a natural response.

3. This netting, upon its initial discovery, was found to be covered in a black, fuzzy substance. Analysis indicates it is made of dead human skin cells and trace amounts of stardust.

4. Notably, the plastic disk will become covered in the black substance after each activation no matter what has been placed inside.

5. Humboldt squid.

6. In layman's terms, this means that traits possessed by the object (i.e. softness, warmth, green, etc.) are transferred to the liquid. However, as the amount of traits absorbed increases, they become incoherent to the point of being imperceptible.

7. Chief of the Janitorial and Maintenance Section.