SCP-PL-345
SCP-PL-345
Byㅤ PiesolloPiesollo
Published on 23 May 2023 17:13
ocena: +5+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;
        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: -18rem;
        width: 15.25rem;
        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;
    }
    }
}

ocena: +5+x


Identyfikator podmiotu: SCP-PL-345

Klasa podmiotu: Bezpieczne


Specjalne Czynności Przechowawcze: Wejście do SCP-PL-345 znajduje się na lewo od kafeterii, na drugim piętrze wschodniego skrzydła Ośrodka PL-55. Podmiot nie wymaga Specjalnych Czynności Przechowawczych ze względu na swoją specyfikę i brak zastosowania dla Ośrodka.

Co każde dwa tygodnie w Ośrodku PL-55 można zauważyć nieznaną sobie osobę o zmiennych cechach fizycznych wchodzącą do środka SCP-PL-345, która już z niej nie wychodzi. Należy takie przypadki zignorować i pozwolić tym osobom na wejście do środka, a najlepiej nie należy podejmować z nimi żadnych interakcji. Nie należy się o nich obawiać.

Próby wejścia do SCP-PL-345 są jedynie stratą czasu. Należy zignorować istnienie podmiotu i w zamian udać się na przykład do kafeterii. Jest przecież tuż obok.


Opis: SCP-PL-345 jest pokojem oddzielonym za pomocą zwykłych drewnianych drzwi. Tym, co wyróżnia podmiot, jest fakt, że każda osoba, która weszła do środka, a następnie z niego wyszła, zdaje się natychmiast zapominać, że w ogóle w nim była, a także co się w nim znajdowało. Ponadto częstym zjawiskiem dla takich osób jest brak jakiegokolwiek zainteresowania ponownym zbadaniem pokoju. Jest możliwe, że każda osoba stale pracująca w Ośrodku PL-55 już wielokrotnie była w SCP-PL-345 i nie pamięta, co zobaczyła wewnątrz niego. Wchodzenie do środka jest bezcelowe.

Niemożliwe jest stwierdzenie, czy podmiot istniał od zawsze, czy pojawił się nagle. Został on odkryty podczas rutynowego mapowania Ośrodka. Kiedy grupa wysłanych na miejsce ochroniarzy wyszła z SCP-PL-345, wszyscy jej członkowie zdawali się nie pamiętać, w jakim celu się tam zjawili.

Nie uważa się, by podmiot krył w sobie cokolwiek istotnego, bądź wartego uwagi. Należy skupić się na czymkolwiek innym. Ten pokój nic w sobie nie kryje. Należy o nim zapomnieć.


Dodatek 345.01: Eksperyment 345/I

Członkowi klasy D wyposażonemu w kamerę cyfrową polecono wejście do SCP-PL-345 i dokładne nagranie wnętrza obiektu. Dodatkowo zalecono, by członek klasy D zakończył nagrywanie chwilę przed wyjściem z pomieszczenia.

Po około 7 minutach członek personelu wyszedł z SCP-PL-345 wyraźnie zdziwiony faktem, że w rękach trzyma kamerę i nie wiedzący, gdzie się przed chwilą znajdował. Członkowi personelu udało się nagrać swój pobyt wewnątrz podmiotu i całość nagrania jest dostępna poniżej.

[ USUNIĘTO Z ROZKAZU RADY NADZORCZEJ ]





O ile nie zaznaczono inaczej, treść tej strony objęta jest licencją Uznanie autorstwa — na tych samych warunkach 3.0 unported