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;
}
}
}
⚠ NOTICE FROM THE DEPARTMENT OF PATAPHYSICS ⚠
Some of the contents described within this file may possess multiple embedded narrativohazard vectors that, if perceived by non-inoculated individuals, have the capability of causing severe damage to themselves and the baseline narrative, along with the intersecting subnarratives associated with it. As such, only personnel from the Department of Pataphysics are allowed to view this file.
The Patasphere's signature mapping, along with the six subnarratives associated with it.
Item №: SCP-6921
Object Class: Thaumiel
Special Containment Procedures: SCP-6921's perpetual function is currently being maintained by the Department of Pataphysics. Usage of SCP-6921 outside of testing is only allowed with the approval of the current Pataphysics Director and the majority of the Overseer Command.
In the event SCP-6921 is somehow rendered ineffective or otherwise unusable, the extradimensional Pickman-Reynders Narrative Fluctuation Anchor is to be immediately activated in order to avoid on-site sub-reality failure of anomalies affected by SCP-6921.
Description: SCP-6921 is the designation given to an artificial metafictional construct created by the Department of Pataphysics capable of terminating or nullifying the progression of authorial interference with baseline reality; or in simpler terms, capable of halting the continued development of the expanding in-universe narrative.
SCP-6921 can be metaphysically applied to any sort of anomaly, including anomalous objects, entities, locations, and phenomena. Once an anomaly is chosen and applied, SCP-6921 will cause a pataphysical effect that would cause the anomaly in question to no longer be further developed in other realities by either the same or a different authorial figure (henceforth referred to as SWN-001 entities). This would result in the anomaly being functionally "inert".
The exact method of how this effect function is as-of-yet unknown, though it is theorized by Foundation pataphysicists that SCP-6921 somehow discharges a highly-influential memetic hazard (an "omni-meme"), capable of breaching the Patasphere mantle and affecting multiple SWN-001 entities. The memetic hazard would hypothetically trigger a psychological condition in the SWN-001 entities, in which they would experience a perpetual "creative slowdown" or "writer's block".
Utilization Addendum:
Since its initial creation in 2028, the Foundation has utilized SCP-6921 on several occasions, and after careful consideration, it was decided by the majority of the Overseer Council that the Department of Pataphysics began commencing Project BURNOUT, an operation that's mainly aimed to apply SCP-6921 to as many anomalies under Foundation observation as possible.
Project BURNOUT was proven to be successful, with over ~5000 anomalies no longer showing signs of narrative development, thus preventing multiple containment breaches and manifestations of new anomalous properties. Additionally, the Analytics Division has noted a staggering decline in the discovery/recovery of new anomalies, along with an all-time low in workplace conflict and stress among Foundation personnel.
By 2030, it is believed that the Foundation would finally achieve a REN-Class "Quiet Days" Scenario.
Attached Update:
The current Pataphysics Director, Dr. Placeholder McDoctorate, decided that SCP-6921 would be put through the same process as Project BURNOUT, meaning that SCP-6921's effect would be applied to itself. According to Dr. PH. McDoctorate, this was done in order to remove any sort of SWN-001 interference associated with SCP-6921.
Once SCP-6921 was applied to the chosen anomaly, it culminated in the connected SWN-001 entity (known simply as 
NDHeckfire) undergoing SCP-6921's effects, thus removing its control and authorial dominance over SCP-6921's expanding in-universal narrative.
This seems to have resulted in |
