| SCP-7991 |
By:  Jack Waltz |
| Published on 05 Oct 2022 18:06 |
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):
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.
.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; }
/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
#top-bar .open-menu a {
position: fixed;
top: 0.5em;
left: 0.5em;
z-index: 5;
font-family: 'Nanum Gothic', san-serif;
font-size: 30px;
font-weight: 700;
width: 30px;
height: 30px;
line-height: 0.9em;
text-align: center;
border: 0.2em solid #888;
background-color: #fff;
border-radius: 3em;
color: #888;
pointer-events: auto;
}
@media not all and (max-width: 767px) {
#top-bar .mobile-top-bar {
display: block;
pointer-events: none;
}
#top-bar .mobile-top-bar li {
display: none;
}
#main-content {
max-width: 708px;
margin: 0 auto;
padding: 0;
transition: max-width 0.2s ease-in-out;
}
#side-bar {
display: block;
position: fixed;
top: 0;
left: -20em;
width: 17.75em;
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
z-index: 10;
padding: 1em 1em 0 1em;
background-color: rgba(0,0,0,0.1);
transition: left 0.4s ease-in-out;
scrollbar-width: thin;
}
#side-bar:target {
left: 0;
}
#side-bar:focus-within:not(:target) {
left: 0;
}
#side-bar:target .close-menu {
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin-left: 19.75em;
opacity: 0;
z-index: -1;
visibility: visible;
}
#side-bar:not(:target) .close-menu { display: none; }
#top-bar .open-menu a:hover {
text-decoration: none;
}
/* FIREFOX-SPECIFIC COMPATIBILITY METHOD */
@supports (-moz-appearance:none) {
#top-bar .open-menu a {
pointer-events: none;
}
#side-bar:not(:target) .close-menu {
display: block;
pointer-events: none;
user-select: none;
}
/* This pseudo-element is meant to overlay the regular sidebar button
so the fixed positioning (top, left, right and/or bottom) has to match */
#side-bar .close-menu::before {
content: "";
position: fixed;
z-index: 5;
display: block;
top: 0.5em;
left: 0.5em;
border: 0.2em solid transparent;
width: 30px;
height: 30px;
font-size: 30px;
line-height: 0.9em;
pointer-events: all;
cursor: pointer;
}
#side-bar:focus-within {
left: 0;
}
#side-bar:focus-within .close-menu::before {
pointer-events: none;
}
}
}
SCP-7991 — From Heaven I Watch
Written by 
Jack Waltz
Item #: SCP-7991
Object Class: Keter
Special Containment Procedures: MTF Psi-7 ("Home Improvement") is working with locally implanted surveillance agents and Foundation front companies to bring SCP-7991-affected households under Foundation control. Affected individuals may be interviewed by personnel who have attained a CRI score of 5.8/10 or higher.
| Image # 7991-0324 |
|
|
| Last location of Miss ████ ██████ (49), ██, US. |
| Taken — 08/29/09 |
Cover-up protocols are to be enacted as appropriate to handle the disappearances of SCP-7991-affected persons.
Description: SCP-7991 is a spontaneous and currently unpredictable occurrence that affects individuals who have been alone in their homes for a prolonged period of time, and who will continue to remain so for the duration of the phenomenon in spite of any and all unforeseeable circumstances. No pattern or link between affected individuals has been determined, however, SCP-7991 mainly appears to affect those in high-stress, urban environments.
Once afflicted by SCP-7991, the subject will complete their daily routine before returning to their bedroom. They will then move an object suitable for sitting down on next to a window, situated within the room, and will sit there for the remainder of the day with a sombre and relaxed expression.
During the length of SCP-7991, no adverse weather conditions will arise in the subject's immediate vicinity, with most cases almost always consisting of sunny and cloudy weather.
Over the course of the day, the subject will lose the ability to perceive the voices of individuals around them, though will display no distress towards this change. They also appear to become hypersensitive to other stimuli, with a fondness for natural sounds.
The affected individual is unable to engage in any meaningful conversation, often expressing confusion when such attempts are made. Upon noticing that they are being spoken to, the subject will glance between their surroundings, the initiator of the conversation, and the window they are seated near with visible tension. After several seconds, the individual then regains their composure, smiles, and politely waves the initiator off before they resume looking back towards the window.
The next morning, occurrences coinciding with the start of an SCP-7991 IRIDESCENT event will transpire. Attached below is a written transcript of a recorded IRIDESCENT event, experienced by an SCP-7991-affected subject henceforth only referred to as "Jane" due to privacy concerns.
[ BEGIN LOG ]
[Jane stares outside the window during the early hours of the morning.]
[She leans against her chair and tilts her head, tracking the slow cluster of clouds in the distance, hiding the sun behind them, only letting several small strands of light escape through.]
[She watches the clouds, intently, and slowly turns her attention to the shadow of a large oak tree in the back garden. Its old branches sway with the soft breeze blowing past and creak amidst the sound of the rustling leaves.]
[A frog hops towards the tree's base, having jumped out of the garden pond, and takes cover behind it. It croaks in unison with the few chirping crickets in the garden and the two yellow warblers, singing atop the tree's branches.]
| Image # 7991-0316 |
|
|
| Rainbow formed by the phenomena, prior to demanifestation. |
| Taken — 08/29/09 |
[A soft rain starts falling. Jane raises her head, looking at the light-grey clouds above.]
[The drizzle continues for a while. The warblers puff their feathers out and continue to sing. Jane yawns, listening to their songs mixed with the ambience of the soft rain patter on the window.]
[A small rainbow appears in the distance. Growing increasingly vivid, it towers up into the clouds. Jane's gaze rises towards it and she observes it with great interest, highly enamoured.]
[A splash is heard from the garden, the frog having jumped back into the pond. The number of chirping crickets, now having been reduced to one, rings quietly with the birdsong.]
[Jane smiles.]
[Leaning back into her chair, she exhales and closes her eyes. Her chest continues to rise and fall, rhythmically, as she falls into a deep sleep listening to the rain and the echoes of a clock monotonously ticking throughout the dull peeling walls of her home.]
[The clouds part, revealing the sun. Slowly, the sunlight penetrates the window, falling on Jane, lounging. With every passing second, it grows in intensity and brightness and the ray, golden and pristine, reflects off the slow particles of dust afloat beside Jane.]
[The camera is soon blinded, the last viewable frame still showing a genial smile on Jane's face.]
[A short period of time later, the light dims. The clouds begin blanketing the sun once more, and gradually the ray grows smaller.]
[An empty chair is revealed.]
[ END LOG ]
The subject invariably disappears in all recorded IRIDESCENT events.
Of note is that the subject's close family members are observed to overcome their grieving period, find closure, and return to their mundane routines significantly faster than anticipated through the cover-up process. These individuals will then completely forget about the subject over the coming months.
Cite this page as:
For more information, see Licensing Guide.
Licensing Disclosures
Filename: chair.jpg
Name: Black Country Living Museum - The Village Centre - Gregory’s General Store - door to the living room
Author: Elliott Brown
License: CC BY 2.0
Source Link: Flickr
Filename: rainbow.jpg
Name: Rainbow
Author: Stephen Hynds
License: CC BY-SA 2.0
Source Link: Flickr
Filename: thumbnail.png
Author: 
Felixou, Elliott Brown, Stephen Hynds
License: CC BY-SA 3.0
Source Link: SCP Foundation Wiki
Derivative of:
Name: Black Country Living Museum - The Village Centre - Gregory’s General Store - door to the living room
Author: Elliott Brown
License: CC BY 2.0
Source Link: Flickr
Name: Rainbow
Author: Stephen Hynds
License: CC BY-SA 2.0
Source Link: Flickr
Name: File:Grunge texture.jpg
Author: Georges Grondin
License: Public Domain
Source Link: Wikimedia Commons
For more information about on-wiki content, visit the Licensing Master List.
