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;
}
@media (min-width: 768px) {
#top-bar .mobile-top-bar {
display: block;
}
#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-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;
}
}
}
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap);
/* Centered Header Sigma-9
* [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%3Acentered-header-sigma-9/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 10.55em;
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;
}
}
Terminal #6576
------
Welcome, Dr. Akabi Hayk
------
Good morning Hayk! You have (4) unread messages! What would you like to do today?
> open messages
Opening SCiPNet Messenger…
You have (4) unread messages:
(1). Monthly Site Memo - Site Director Everest
(2). SCP-6876 - O5-3
(3). sorry about yesterday - J. Researcher Daya
(4). New Revisions on SCP-6776 - Automated Alert System
Which one would you like to open? Enter (E) to go back to start menu.
> ????
Sorry, I didn't understand that. Please reenter your input.
> 2
Opening SCP-6876 from O5-3…
NOTICE: Confidential data detected. Please re-input credientials to confirm identity.
> u: ahayka34@scip.net
> p: alldogsgotoheaven
Identity confirmed. Opening message…
To: Dr. Akabi Hayk (ten.pics|43akyaha#ten.pics|43akyaha)
From: O5-3 (ten.pics|3-5o#ten.pics|3-5o)
Subject: SCP-6876
Date: 23/10/24
Hayk. I know how much 19 means to you. You're the one who started it, after all. With my new promotion and all, I've been given access to a lot more. And, well.
They've been keeping something about it from us, Hayk.
It's been expanding.
📎 Open attached .scp file?
We're having an O5 Summit tomorrow, and 6876 is one of the topics we're discussing. I'll keep you updated.
Don't let anyone know I sent you this. Thank you for your time.
Intiating Secured Terminal Protocol
Success. Opening 6876.scp file. Happy Reading, Hayk.
Item #: SCP-6876
Object Class: Safe
Special Containment Procedures: Site-76 has been christened for the sole purpose of overseeing containment of SCP-6876. Site Director Ed Hatley has been cleared for requesting direct funding from O5 Command for containment of SCP-6876.
All residential buildings near SCP-6876 have been purchased by a Foundation front company. Foundation personnel have been stationed in these houses, and are tasked with monitoring SCP-6876 for any activity or trespassers.
SCP-6876-2 is currently contained in an Incorporeal Entity Vacuum Chamber located within Site-76's Administrative Wing. Testing on SCP-6876-2 is strictly forbidden, and any requests for interviews are to be sent to Dir. Hatley.
Under no circumstances should STF Epsilon-55, Dr. Akabi Hayk, Dr. Frederick Heiden O5-3 or any other individuals associated with the Site-19 Recuperation Committee be made aware of SCP-6876. MTF Beta-5 ("Hunting Mothers") has been assigned the task of surveying the North American continent for more phenomena resembling SCP-6876.
Archived Containment Procedures from before July 12th, 2024 are available upon request.
Description: SCP-6876 is an abandoned, 2-story, wooden house located in Lincolnton, North Carolina.
Prior to July 12th, 2024, SCP-6876 served as the location of a series of spectral phenomena which began in 1950. SCP-6876 was home to two Class III Spectral Entities (classified as SCP-6876-1 and -2) which, once every six months, would clean and repair the house as needed. In the timespan between their manifestations, various Class I and Class II Spectral Entities would be seen entering and exiting SCP-6876, never staying for more than two days. None of these entities have been seen since July 12th, 2024.
On that date the Pueraria Montana.Kudzu. surrounding SCP-6876 rapidly grew over the house, covering any entrances into it and obscuring most of its windows. SCP-6876-1 was inside the house when this occurred, while SCP-6876-2 was outside tending to a small garden. SCP-6876-2 was able to avoid the expansion of the Pueraria Montona, but -1 was left inside. SCP-6876-2 tracked down the local task force, who were currently at a local restaurant, alerted them to the event, and brought them to SCP-6876. The task force contacted the closest Foundation Site, which at that point was Area-34 in Boone, North Carolina, and requested a containment team be sent to the location.
Further investigation of the event revealed it to have occurred at the same time as an expedition into SCP-6776 entered the facility. It is currently unknown if these two events are related, but is considered to be highly likely.
Incoming transmission from O5-3. View feed? (Y/N)
> y
Affirmitive. Connecting to live feed.
ERROR: No video detected. Playing audio.
End of transmission.
> access messages
Opening SCiPNet Messenger…
You have (3) unread messages:
(1). Monthly Site Memo - Site Director Everest
(2). sorry about yesterday - J. Researcher Daya
(3). New Revisions on SCP-6776 - Automated Alert System
Which one would you like to open? Enter (E) to go back to start menu.
> 3
Opening New Revisions on SCP-6776 from Automated Alert System…
Redirect detected. Opening link…
Containment Class:
esoteric
Secondary Class:
thaumiel
Photograph of Site-19's Tertiary Evacuation Point.
Special Containment Procedures: No changes detected.
Description: No changes detected.
Addendum.6776.1: Abandonment of SCP-6776
No changes detected.
Addendum.6776.2: Site-19 Recuperation Committee
No changes detected.
Addendum.6776.3: 2024 Survey
No changes detected.
Addendum.6776.4: Proliferation MARKED FOR DELETION, DATA BEING TRANSFERED TO RAISA ARCHIVE
SCP-6776 came under the investigation of the Department of Essophysics following the events of Addendum.6776.3, as existing data indicated the presence of an essophysical entity. Multiple essophysical researchers were sent from Site-17 to test for the presence of one. Through observing the local conceptual space of SCP-6776 and deploying irritants known to affect essophysical entities, the existence of an essophysical entity within SCP-6776 was confirmed.
Further investigation pending O5 approval.
Incoming transmission from O5-3. Play audio? (Y/N)
> y
Affirmitive. Connecting to live feed.
> access scp db
Accessing SCiPNet Database
Search via (T)ags, or (N)umber? Choose (T/N)
> n
Please input Search Inquiry:
> 6876
Sorry, this slot appears to be beyond your current clearance level. Would you like to send a request to RAISA to view this slot? (Y/N)
> n
> access info db
Accessing Information Database
Search via (T)itle, (A)author, (S)ite of Origin, or (P)ublication Date? Choose (T/A/S/P)
> T
Please input Search Inquiry:
> Essophysics
Generating Search Results…
(1). List of Known Essophysical Entities - Department of Essophysics, et al.
(2). Essophysics For Beginners - Department of Essophysics
(3). Practical Uses of Essophysics (Or; How Can We Manipulate Essophysics?) - Anonymous
Related SCPs:
(S1). SCP-4260
(S2). SCP-4936
(S3). SCP-6820
(S4). SCP-6996
Which one would you like to access? Enter (E) to go back to start menu.
> 2
Opening essay…
Excerpt opened in side window.
hetgs
|
|
| Essophysics refers to the study of embodiments of universal concepts. These embodiments are akin to gods as they're capable of affecting the concepts they embody, but changes in that concept can also affect them. |
Cite this page as:
For more information, see Licensing Guide.
Licensing Disclosures
Filename: reclaimed.jpg
Name: "Regan Vest, Main entrance to secret bunker"
Author: morten812
License: CC BY 2.0
Source Link: Flickr
Filename: house.jpg
Author: 
TopDownUnder
License: CC BY-SA 3.0
Source Link: SCP Wiki
For more information about on-wiki content, visit the Licensing Master List.
