Neolithic Containment Site
Neolithic Containment Site
Byㅤ TopDownUnderTopDownUnder
Published on 25 May 2022 13:06
rating: 0+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; }
/* 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;
    }
    }
}

rating: 0+x

SCP-6875

ITEM NUMBER:SCP-6875 LEVEL 5/6875
CONTAINMENT CLASS:SAFE top-secret

DISRUPTION CLASS: vlam


SPECIAL CONTAINMENT PROCEDURES


The main entrance to SCP-6875 has been sealed off. Personnel with 5/GENERAL clearance or other authorised individuals can enter SCP-6875. All other individuals attempting to enter SCP-6875 are to be detained and interrogated.


DESCRIPTION


SCP-6875 Painting

A faded painting of a red figure on a cave wall.

A drawing found on the walls of SCP-6875 near the entrance.

SCP-6875 is a cave located in northern Belarus, near the town of Miory in the Vitebsk region. The presence of tools and cave paintings indicate that SCP-6875 was inhabited by early humans roughly 100,000 years ago.

Several of the deeper portions of SCP-6875 have been carved out into small rooms, with large, heavy rocks being used as barricades for them. Many of these rocks seem to have been broken apart or forcibly thrown aside. Investigation of these carved rooms indicates that they were constructed by early humans as makeshift containment chambers for anomalous artefacts. Owing to the age and lack of care of this site, many of the artefacts that these chambers were made for are now lost. However, crude drawings outside the entrance of these chambers offer some insight into what anomalies may have been present there.


ADDENDUM.6875.1

CONTAINED ANOMALIES


Following is a curated list of known anomalies contained at SCP-6875, alongside any drawings found outside the art or any modifications made to the containment chamber. A full list of SCP-6875's anomalies can be accessed upon request.

Designation Description Chamber Modification Chamber Drawing
SCP-6875-Auroch The skeletal remains of a Bos primigenius (auroch) were found within this chamber. Vines have circled around many of the bones, keeping the remains largely intact and together. Analysis of the skeleton indicates that the animal died sometime in the early 20th century, making it the latest known living member of its species. Analysis also revealed the auroch to be well over 100,000 years old at the time of its death, meaning that it had an anomalously elongated life. A small chute was carved out next to the main entrance to the chamber, presumably to get food and water into the chamber without having to remove the stone door. The drawing outside shows a group of humans worshipping a large auroch, with rays of light coming out from its horns.
SCP-6875-Maker The chamber has a large hole granting access to the surface. Inspection of the hole indicates it was created by blunt force from the outside. The floor of the chamber is littered with the remains of dolls and toys meant for children. A small, makeshift wooden table at the far end of the room holds unfinished toys and worn tools. Some of the dolls have pieces of grass interwoven into them and occasionally animate, getting up and dancing around a bit before becoming inert once more. N/A A moustached man is depicted working at a table, with dolls dancing around him.
SCP-6875-Mesozoic The chamber's stone door was held in place by several smaller rocks prior to Foundation involvement. After removal of the door, a living specimen of Notatesseraeraptor was found within. It attacked Foundation personnel present and was shot at. Upon witnessing it slowly regenerating from the attack, on-site personnel quickly moved it into a portable containment chamber and transported it to a local Foundation facility for proper containment. A single viewport was carved next to the door. A theropod dinosaur, presumably SCP-6875-Mesozoic, was depicted being surrounded by ~50 men holding spears.
SCP-6875-Machine A mass of partially molten steel and tungsten is present in the corner of the chamber, next to the skeleton of a modern human. The skeleton was found dressed in a Foundation labcoat with a nametag identifying them as "Dr. Matthew Reeds" a member of the Department of Temporal Anomalies. No individual is currently employed by the Foundation nor ever has been. N/A An individual in a labcoat is shown emerging from a glowing box. A group of three men and women are approaching the box from behind.
SCP-6875-Fire Coal and charcoal litter the floor of the chamber, with much of the wall covered in soot and burn marks. An unburnt pile of wood is present in the corner. The ceiling of the chamber is filled with small holes leading to the surface. A raging fire is depicted burning down a village, with masses of people fleeing from the scene.


ADDENDUM.6875.2

FURTHER EXPLORATION



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