Świerkowa Mgła
Świerkowa Mgła
Byㅤ ZygardZygard
Published on 02 Jul 2022 15:25
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;
}
 
@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;
    }
    }
}

Świerkowy Renifer » Świerkowa Mgła

Świerkowa Mgła

ocena: +5+x
Image Unavailable

Ośrodek PL-49

— You think this is something? You think this is bad? This? This chicanery? He’s done worse. That billboard! Are you telling me that a man just happens to fall like that? No! He orchestrated it! Jimmy! He defecated through a sunroof! And I saved him — powiedział zirytowany męski głos z ekranu monitora.

Na przeciwko samego monitora siedział pilnie wpatrzony w ekran ochroniarz. Trzymał w ręku miskę z popcornem, jednakże przez intensywność sceny jaka się przed nim odgrywała jego ręka po prostu leżała. Powoli jednak ją ruszył, przesunął zamieniając dłoń w łopatkę i włożył kilka kawałków popcornu do ust. Na jednym z monitorów oglądał serial, na drugim zaś mógł widzieć ekrany z kamer monitoringu w Ośrodku. Budka w której się znajdował ochroniarz była przy bramie bocznej Ośrodka PL-49, a aktualnie była godzina 2:39. Mało tego, że była to brama boczna, to jeszcze tak późna godzina nie zwiastowała zbyt wielu ludzi przejeżdżających przez tą bramę, dlatego ochroniarz postanowił umilić sobie czas serialem.

— And HE gets to be a lawyer? What a sick joke! I should’ve stopped him when I had the chance! …And you, you have to stop him! You- — głos nie dokończył, ekran na chwilę zgasł.

Ochroniarz odłożył miskę z popcornem obok i sprawdził co się stało. Prąd przestał działać w budce, co natychmiastowo wyłączyło komputer, jednak od razu wrócił. Ochroniarz włączył ponownie komputer. Przy chwili ciemności od wyłączonego monitora rozejrzał się dookoła. Las otaczający placówkę był dziwnie cichy, pogoda była mglista. To, co jednak zwróciło uwagę ochroniarza, to wygląd mgły, nie był on normalny Mgła była koloru ciemnego, z lekka przypominającego igły świerkowe. Zaniepokojony tym wziął komunikator i odezwał się do ochroniarza przy bramie głównej.

— Wydra, u ciebie też taka mgła? — zapytał, po czym opuścił palec z przycisku. Czekał sekundę, następnie dwie, trzy. Nie odpowiedziało mu nic. Postanowił zapytać ponownie — Wydra, mam nadzieję że nie śpisz. Czy u ciebie też jest taka mgła? — Ponownie nie odpowiedział nikt. Postanowił odczekać dwie minuty i ponownie wziął komunikator próbując wywołać drugiego ochroniarza. Brak odpowiedzi.

Odłożył komunikator, wywiesił kartkę, że brama nieczynna, po czym całkowicie ją zablokował. Wyłączył komputer w budce, zabrał ze sobą latarkę oraz komunikator po czym wyszedł z budki i zamknął ją na klucz. Wsiadł na swój nieco stary czerwony rower i zaczął jechać w stronę bramy głównej. Mgła teraz była nieco gęstsza niż wcześniej, pomimo tego iż brama boczna nie była daleko, nie był w stanie z niej zobaczyć nawet zarysów Ośrodka PL-49, ani jego świateł.

Nagle usłyszał w oddali trzaskające gałęzie. Zaczął pedałować ile sił w nogach w stronę bramy głównej. Gdy dojechał tam, ujrzał bramę wyłamaną w pół, drzwi od budki leżały dwa metry od niej. Zszedł z roweru i wyjął powoli pistolet.

— Baza, tutaj Bóbr. Wrota bramy głównej zostały przełamane, powtarzam, przełamanie w bramie głównej — powiedział nerwowym głosem ochroniarz, jednakże odpowiedział mu tylko biały szum.

Ochroniarz odbezpieczył pistolet i włączył wbudowaną w nim latarkę.

— Jest tam kto?! — krzyknął pytająco w stronę budki, lecz nic mu nie odpowiedziało.

Podszedł do wejścia od budki i ujrzał drugiego ochroniarza, jego ciało leżało bezwiednie na krześle, szyba przed nim była wybita. Ciało ochroniarza stawało się zdrewniałe, włosy zaczęły powoli przypominać igły. Serce jego było przebite na wylot, zaś z rany ulatywała mgła świerkowego koloru. Twarz zastygła była w panice i przerażeniu. Ochroniarz oparł się o budkę. Był to pierwszy raz kiedy widział coś takiego. Zasłonił dłonią usta i odszedł bardziej w bok, w stronę drzew. Nie mógł się powstrzymać, pochylił się i zwymiotował, zostawiając w swoich ustach posmak jedzonego wcześniej popcornu oraz wymiocin.

Ponownie usłyszał trzask gałęzi w oddali, ale nie to pochłaniało teraz jego umysł. Stale miał przed sobą obraz zmasakrowanego ochroniarza, mgły ulatniającej się z niego, przerażenia w jego twarzy. Poczuł znowu ucisk w gardle i uwolnił kolejny strumień wymiocin na ziemię. Otarł usta i oparł się o rosnącą obok sosnę. Ciężko łapał oddech próbując przywołać swoje myśli do porządku. Usłyszał kolejny trzask gałęzi za sobą. Powoli się odwrócił jeszcze łapiąc oddech. Na widok tego co ujrzał stanął jak wryty, poczuł jakby serce mu się zatrzymało a włosy stanęły dęba. W całym swoim życiu nie widział nic tak przerażającego jak to, co znajdowało się teraz przed nim. Ciężka do opisania przez ochroniarza kreatura najbliższe co przypominała to nienaturalnie pogięte gałęzie drzew iglastych, jednak również to nie był dokładny opis. Każdy ruch bestii powodowal odgłos łamania gałęzi, przypominający gruchotanie kości. Pomimo tego iż kreatura była zbudowana z drewna, była umięśniona niczym byk. Ochroniarz chciał wydać z siebie krzyk, lecz nie mógł. Był całkowicie sparaliżowany, pistolet jego był wycelowany, mniej więcej w środek bestii gdyż nawet to ciężko było określić, lecz jego palce się go nie słuchały.

W końcu jednak przepływ adrenaliny pozwolił mu nacisnąć na spust. Ciszę w lesie wypełniła cała seria wystrzałów. Ochroniarz opróżnił swój magazynek strzelając do kreatury, pociski jednak zwyczajnie utknęły w twardym drewnie. Nagle rzeczywistość zaczęła się rozmywać, nie wiedział już co było prawdziwe a co nie. Las zmienił swój wygląd, bramy oraz budki ochroniarskiej nie było. Przez las przedzierały się gigantyczne drewniane Behemoty, z perspektywy ludzkiej były to przerażające bestie miażdżące wszystko na swojej drodze, okrutne i bezwzględne. Z ich zaś, ludzkość była tylko jak mrówki, owady zdeptane przypadkiem w trakcie spaceru w lesie. Odwrócił się w drugą stronę, ujrzał ścieżkę wzdłuż której rosły świerki. Gdy spojrzał do góry, zauważył że na świerkach wisieli powieszeni, rozebrani i wychłostani ludzie. Wszystkich ras, w każdym wieku i z obydwu płci.

Zaczął iść wzdłuż tej ścieżki, aż trafił na krąg ułożony z kamieni. Na kamieniach siedzieli wysocy, białowłosi ludzie o czerwonych oczach. Ich skóra również była blada jak śnieg. Na środku kręgu znajdował się stos złożony z martwych ciał ludzi wielu ras. Płonął on intensywnym zielonym światłem uwalniając czarny dym ku równie ciemnemu niebu. Ludzie odprawiający ten rytuał wypowiadali synchronicznie słowa, w nieznanym języku, daleko poza pojęciem ludzkiego umysłu. Kiedy skończyli, ziemia się zatrzęsła, jedna z gór w oddali pokryta świerkowym lasem zaczęła się podnosić ukazując zaledwie przypominającą humanoida postać.

Ochroniarz zamknął oczy i wydał z siebie wrzask. Krzyczał, nie wiedząc do kogo. Krzyczał, nie wiedząc dlaczego. Wrzask jego trwał aż do całkowitego opróżnienia płuc, gardło jego było całkowicie zdarte, pomimo tego dalej krzyczał. Otworzył oczy aby złapać oddech, jednak widok tego gdzie był przeraził go jeszcze bardziej. Leżał on na białym jak skóra tamtych ludzi łóżku, w białym pomieszczeniu z białymi drzwiami. Na ścianie znajdowało się tylko czerwone logo ze strzałkami. Natychmiast spróbował wstać jednak teraz zauważył że był przypięty pasami do łóżka. Wydał z siebie krzyk wołając o pomoc. Usłyszał głos stłumiony za drzwiami.

— Dyrektor Aris, z całym szacunkiem, ale uważam że nie jest to dobry moment aby odwiedzić pacjenta- — usłyszał damski głos.

Do pomieszczenia weszła ubrana w białą marynarkę kobieta o czerwonych oczach, białej skórze i tak samo białych włosach. Za nią weszła pielęgniarka ze strzykawką kierując się do łóżka. Ochroniarz na ten widok ponownie zamarł i wydał z siebie krzyk, chciał ich ostrzec, chciał powiedzieć o bestii, o kulcie i behemotach jednak to wszystko zebrało się w jedną masę słów zlepioną w jedność. Przerażony tym że nikt nie jest w stanie go zrozumieć wydał z siebie ponownie krzyk i zaczął się miotać w celu uwolnienia. Wtedy poczuł ukłucie igły w szyję. Znów jego oczy zakryła ciemność, przypominająca chmury oraz mgłę.

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