| SCP-7417 |
By:  NDHeckfire |
| Published on 29 Sep 2022 02:36 |
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; }
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap);
/* Centered Header Sigma
* [2021 Wikidot Component]
* By Lt Flops (CC BY-SA 3.0)
* Forked from:
* Penumbra Theme by EstrellaYoshte
* Also based on:
* Centered Header BHL by Woedenaz
**/
/* ---- VARS ---- */
:root{
--titleColor: hsl(0, 0%, 95%);
--subtitleColor: hsl(60, 62%, 85%);
--lgurl: url(https://scp-wiki.wdfiles.com/local--files/component:pride-highlighter/lgbtqp_logo.svg);
}
/* ---- SITE BANNER ---- */
#header,
div#header{
background-image: none;
}
#header::before{
position: absolute;
width: 100%;
height: 100%;
content: "";
background-image: var(--lgurl);
background-position: center top;
background-repeat: no-repeat;
background-size: auto 9em;
opacity: .33;
}
#header h1,
#header h2{
float: none;
margin-left: 0;
text-align: center;
}
#header h1 span,
#header h2 span{
/* Hide the Existing Text */
display: none;
}
#header h1 a::before,
#header h2::before{
/* Style the New Text */
font-family: "Montserrat", "Arial", sans-serif;
text-shadow: none;
}
#header h1 a::before{
position: relative;
bottom: .15em;
color: var(--titleColor);
font-size: 115%;
font-weight: 700;
}
#header h2::before{
position: relative;
top: .1em;
color: var(--subtitleColor);
font-size: 130%;
font-weight: 600;
}
#header h1 a::before{
/* Set the New Text's Content From Variable */
content: var(--header-title, "SCP FOUNDATION");
}
#header h2::before{
content: var(--header-subtitle, "SECURE - CONTAIN - PROTECT");
}
/* ---- SEARCH ---- */
#search-top-box{
top: 1em;
right: 0;
}
#search-top-box-form input.button{
margin-right: 0;
}
#search-top-box-input,
#search-top-box-input:hover,
#search-top-box-input:focus,
#search-top-box-form input[type=submit],
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus{
border-radius: 0;
box-shadow: none;
font-size: 100%;
}
/* ---- TOP BAR ---- */
#top-bar{
right: 0;
display: flex;
justify-content: center;
}
#top-bar ul li ul{
border-bottom: 1px solid hsl(0, 0%, 40%);
box-shadow: none;
}
/* ---- LOGIN ---- */
#login-status{
top: 1.1em;
right: initial;
color: hsl(0, 0%, 87%);
}
#account-topbutton{
border-color: hsl(0, 0%, 87%);
font-size: 100%;
}
/* ---- PAGE TITLE ---- */
.meta-title,
#page-title{
text-align: center;
}
/* ---- BREADCRUMBS ---- */
.pseudocrumbs,
#breadcrumbs{
text-align: center;
}
/* ---- MOBILE DISPLAY ---- */
@media (max-width: 767px){
#search-top-box{
top: 1.85em;
width: unset;
}
.mobile-top-bar{
position: relative;
left: 0;
display: flex;
justify-content: center;
}
#login-status{
top: 0;
right: 0;
}
#header .printuser{
font-size: 0;
}
#header .printuser img.small{
margin: 0;
transform: translate(6px, 4px);
}
#my-account{
display: none;
}
#account-topbutton{
margin-left: 2px;
}
}
Containment Class:
euclid
Secondary Class:
{$secondary-class}
| Assigned Site |
Site Director |
Research Head |
Assigned Task Force |
| Site-400 |
Director Adam Desmond |
N/A |
N/A |
Special Containment Procedures: SCP-7417 is currently housed in a standard humanoid accommodation chamber at Site-400. Request for entertainment amenities such as books, board games, or video games is to be approved, with supervision from her current research head(s), presently Dr. Sebastian Lennox and Dr. Windsor Gladwyn.
Description: SCP-7417 is the designation given to Kristen Claudia, a Caucasian human adolescent female of British descent, currently 166 centimeters in height and possessing green eyes and long brown hair. Prior to containment, SCP-7417 was employed as a local kindergarten school teacher in Newcastle, Northern Ireland.
SCP-7417 possesses a unique form of functional precognition where, upon visually perceiving any object (including living entities), she is capable of viewing their physical appearance as how they are approximately one (1) year later. For example, upon looking at an apple (red delicious variant), SCP-7417 reported seeing it as merely being a pile of assorted fertilized soil.
Testing on how of it's possible to alter the "fate" of perceived objects is still ongoing.
Addendum 7417-1:
Interview Log
Date: 12/09/2018
Present: Dr. Sebastian Lennox
<Begin Log>
Dr. Lennox enters the interview room.
Dr. Lennox: Hello, 7417. My name's Dr. Lennox. I'm just here to ask you some quest-
Upon laying eyes on Dr. Sebastian, SCP-7417 suddenly jumps up from her chair and steps back.
SCP-7417: Oh God! Holy Christh!
Dr. Lennox: Woah, are you alright? What's wro-
SCP-7417: Get away from me! Oh God, ith horrible!
SCP-7417 retreats to a corner of the room and covers her face with both of her hands. Sobbing is audible.
Dr. Lennox: 7417? What's the matter? Why are you-
SCP-7417: (looks up) Your faith! Your fucking faith! Ith fucking gone! Get the fuck away from me!
Silence on recording.
Dr. Lennox exits the interview room.
<End Log>
Debriefing Log
Date: 12/09/2018
Present: Dr. Sebastian Lennox and Dr. Windsor Gladwyn
<Begin Log>
Dr. Lennox enters the observation chamber. Through a camera monitor, SCP-7417 can still be seen sitting in a corner and covering her face.
Dr. Gladwyn: Jesus. The hell was that? (pauses) You good?
Dr. Lennox: Uhhh, yeah, I'm fine. Just… confused?
Dr. Gladwyn: You're not the only one. (looks at the monitor) What was she screaming about anyway?
Dr. Lennox: Something about… my faith being gone? Like… I'm gonna lose my faith?
Dr. Gladwyn: Huh, weird. Are you… religious by any chance?
Dr. Lennox: Yeah. Catholic.
Dr. Gladwyn: Right, okay. (pauses) The doc doesn't say anything about 7417 having spiritual precognition. Might need to look into that more. (looks at Dr. Lennox) You sure you're alright? You don't look too good.
Dr. Lennox: I'm fine, really. A little bit shaken up is all.
Dr. Gladwyn: Hm.
<End Log>
In concern of further distressing SCP-7417, Dr. Windsor Gladwyn has requested the reassignment of Dr. Sebastian Lennox to another project. This request was approved.
Addendum 7417-2: On the 23rd of October, 2019, SCP-457 breached containment in Site-400, resulting in extensive damage to the West Wing and multiple injured Foundation personnel. During the breach, Dr. Sebastian Lennox (who was assigned to SCP-457 at the time) suffered varying degrees of burns throughout his face and torso. After SCP-457 was successfully recontained, Dr. Lennox was rushed to the on-site Health and Pathology Infirmary for immediate treatment.
Date: 23/10/2019
Present:
- Dr. Sebastian Lennox
- Dr. Windsor Gladwyn
<Begin Log>
Dr. Lennox can be seen wearing a hospital gown and resting in a health cot, his face entirely covered with bandages.
Dr. Gladwyn: Heya, bud. How you doing?
Dr. Lennox: I'll be lying if I said I was fine.
Dr. Gladwyn: Heh, yeah…
Silence on recording.
Dr. Lennox: Hey, uhhh… Remember 7417? Are you still assigned to her?
Dr. Gladwyn: Yup. Reintegration Program doin' wonders for her. Why do you ask?
Dr. Lennox: You still remember the only time I met her? Where, y'know, she cried about me losing my faith? I think that… she might be right. (sighs) I don't know. Right now, I'm asking myself a lot of things. Thinking about and reconsidering some stuff, y'know? Maybe that's why she was so scared.
Dr. Gladwyn: Oh, yeah, about that… I've, uhhh, been meaning to tell you…
Dr. Lennox: What?
Dr. Gladwyn: I regularly talked to her… and I'd assume you didn't notice when you first met her but…
Dr. Lennox: What is it, man? You're literally killing me here!
Dr. Gladwyn: It's not as non-literal as you thought it was. 7417 has a lisp.
<End Log>
