SCP-7807
SCP-7807
Byㅤ ESB2109ESB2109
Published on 29 Dec 2023 23:51

rating: +6+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: +6+x

Please read before continuing

Item#: 7807
Level2
Containment Class:
euclid
Secondary Class:
{$secondary-class}
Disruption Class:
vlam
Risk Class:
notice

Circumscription Procedural Order:
Divergence-7807 specimen are to be contained within 35x35x35cm polycarbonate containment units during capture, transportation and containment. Units are to be stored and contained at the Avis Storage Facility in Singapore, officially Commonwealth-Site-12. Units are to be well lit at all times.

Reports of divergence-7807 specimens by any local or national authority is to be responded to with immediate effect, with operations led by SOG-1644 "Avian Flu" in conjunction with local authorities.

The specimens must be fed once per day. The diet must consist of solely raw avian breast. The caretakers must never be seen by specimens, or they will be reminded of the outside world.

Description:
Divergence-7807 specimens are an anomaly resembling a "Treron vernans", referred to commonly as the "Pink-necked green pigeon". They differ as the specimens do not have bones, instead incredibly lightweight flesh fills to spaces. As a result, they are incredibly quick during flight and have been notoriously difficult to contain.

Divergence-7807 was first recognised by Dr. Jack Armagh in 1912 in the Crown Colony of Labuan. Since identification, 237 separate accounts have been recorded, within Malaysia, Singapore, Brunei and Sri Lanka, during times as colonies and later independent states. Reports have also been made by the Dutch East Indies, and later the Indonesian Governments.

Instances where Divergence-7807 has been seen in the wild, it often has been hostile to other species, including native and non-native species. It is indiscriminate on whom it attacks.

Incident Report: 23/02/1999
Incident: Power Failure at Commonwealth-Site-12. 16 Divergences escaped containment as a result. Divergences became aggressive and used force against caretakers.
6 Caretakers terminated and 8 injured - 2 hospitalised & 6 treated for minor wounds.
Action Taken: Caretakers issued L131A1 semi-automatic pistols and L74A1 "Remington 870" Pump-Action Shotguns. Containment cell doors no longer to be electrically powered.

Biological Study of Divergence-7807:
In 2007, Dr. Albert Victorious would be granted permission from Site Manager ██████████████ to perform a dissection on a specimen. In his study, Dr. Victorious would have the specimen terminated and dissected. He would come to the conclusion the "meaty bone", as described by Dr. Victorious is constantly decaying at rapid rates, which would be argued to be the cause for their constant hunger for more protein.

File Maintenance - Login

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