Wiedźmy
Wiedźmy
Byㅤ ZygardZygard
Published on 18 Jun 2022 13:42
ocena: +2+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;
    }
    }
}

Wiedźmy

ocena: +2+x

Ciemna spokojna noc, grupka ludzi zaczęła wchodzić do nieco podniszczonego kościoła, byli to zarówno kobiety i dzieci, młodzi, jak i starsi. Ławy kościelne zostały wcześniej wyniesione, w środku była pusta otwarta przestrzeń. Wśród zebranych ludzi można było zobaczyć zarówno prostych rolników, osoby bardziej wykształcone, jak i kilku ludzi w ubraniach z logiem lokalnej fabryki broni. Na środek wyszły dwie kobiety ubrane w szkarłatną czerwień, które zaczęły malować czerwoną farbą krąg na środku pomieszczenia, dookoła zebrał się cały tłum. Po ostrożnym i dokładnym namalowaniu kręgu z odchodzącymi od niego niby kłami odeszły w bok.

Sam kościół nie wyglądał na typowy, aktualnie był nieco podniszczony, jednak był dawniej okres jego świetności. Szczegół, który mógł wytrącać go z normalności to witraże, przedstawiały one ułożone z czerwonych szkiełek bestie zbudowane z mięsa, oczu, kłów oraz pojedynczych macek. Pośród nich jednak wyróżniał się jeden witraż. Znajdował się on na samym środku budynku, aktualnie przez niego świeciło światło księżyca, wpadając do środka, malując niemalże swój obraz na kręgu. Na tymże witrażu znajdowała się na swój sposób piękna, dostojna kobieta, wyglądająca podobnie jak poprzednie monstra. Trzymała ona w jednym ręku berło, w drugim zaś pokazywała gestem na klęczącą istotę z mięsa aby powstała.

Na środek namalowanego kręgu weszła młoda, na oko 20 letnia blond włosa naga kobieta. Poprzednie dwie kobiety w szkarłatnych szatach podeszły do niej malując czerwoną farbą wzory, malując od stóp do głów. Następnie odsunęły się. Do kościoła weszła starsza kobieta, ubrana szaty o nieco ciemniejszej czerwieni. Podpierając się laską podeszła bliżej do dziewczyny na środku. Splunęła na krąg, po czym ucałowała dziewczynę w czoło. Przeszła za nią poza krąg i stuknęła laską o podłogę, dokładnie 13 razy wypowiadając niezrozumiałe słowa pod nosem. Wszyscy zgromadzeni w pomieszczeniu usiedli na kolanach wokół kręgu i zaczęli powtarzać słowa mówione przez starszą kobietę.

Dziewczyna na środku gwałtownie się wyprostowała i odwróciła w stronę witraża. Wyciągnęła w jego stronę rękę, zauważyła, iż tą zaczęły pokrywać tkanki mięsne. To samo zaczęło się dziać na reszcie jej ciała. W miejscach, gdzie były namalowane czerwone wzory, te same wzory pojawiały się na nowej mięsnej powłoce, lecz w kolorze czerni. Odwracając głowę w stronę starszej kobiety zauważyła, że jej włosy również zmieniły kolor, z jasnego blondu przeszły teraz w intensywny rudy kolor.

Nagle poczuła coś, niezwykle ciężkiego do opisania. Obecność drugiego głosu w głowie, praktycznie drugiej osoby. Która ją przytłaczała. Złapała się za głowę, wydając nieziemski ryk z siebie. Starsza kobieta dalej mówiła tekst z pamięci niewzruszona, a grupa ludzi dookoła za nią powtarzała. Dwie kobiety w szkarłatnych szatach położyły przed dziewczyną na środku uśpione dwugłowe krowie cielę. Następnie jedna z nich wyjęła biały, kościany sztylet i je zabiła. Cielę natychmiast zaczęło się zmieniać w silnie wysuszone, rozkładające się zwłoki. Krew z niego zaś zaczęła wypływać w strumień, malując w kręgu wzory. Małe koło dookoła stóp dziewczyny w środku, od którego odchodziły cztery, pokrętne ostro zakończone ramiona w cztery strony świata. Pomiędzy każdym z tych ramion znajdowało się jedno krótsze, sięgające zaledwie do połowy promienia okręgu.

Po skończeniu ramion kręgów ciele zamieniło się w pył, który wiatr wywiał z kościoła. Następnie krąg zaświecił się intensywnym, niemalże oślepiającym czerwonym światłem. Starsza kobieta uderzyła laską w podłogę dokładnie 13 razy, światło zaczęło powoli gasnąć. Sama dalej kontynuowała mówienie zdań o wielkiej mocy w nieznanym języku. Z pleców dziewczyny wyrosły cztery mięsiste macki, jej tęczówki zaś zmieniły kolor na intensywną, niemalże świecącą czerwień.

Kolumny i podłoga w środku budynku zaczęły pokrywać się kościstymi strukturami, ściany i sufit zaś zaczęły porastać tkankowatą, mięsną strukturą. Sufit został pokryty czarnymi wzorami w stylistyce podobnej jak krąg, w którym stała dziewczyna. Czterech mężczyzn z grupy ludzi w środku wyszło na środek pomieszczenia, dwie kobiety w szkarłacie podeszły do nich i zaczęły ich rozbierać. Po tym uklęknęli przed dziewczyną na środku. Zaczęli być pokrywani mięsnymi strukturami, ich ciała stały się bardziej umięśnione, tęczówki oczu zmieniły kolor na krwistoczerwony. Następnie powstali ze swojego miejsca, kobiety w szkarłacie przekazały im zrobione z kości oraz mięsa włócznie. Przemienieni mężczyźni stanęli przy kolumnach, odwróceni w stronę wejścia do kościoła, niby strażnicy.

Ambona kościelna zaczęła się zmieniać, całkiem przekształciła swoją strukturę. Na początku tworząc kościsty szkielet, po czym pokrywając się mięsem. Po chwili zaczęła tworzyć wysoki tron na końcu kościoła, przyozdobiony kłami oraz oczami o szkarłatnej tęczówce. Dziewczyna zeszła ze środka kręgu i zaczęła iść w stronę tronu, przejechała po nim delikatnie ręką, aż w końcu usiadła w nim. Wszyscy zgromadzeni w kościele oddali przed nią pokłon. Zebrani ludzi oprócz kobiet w szkarłacie oraz starszej kobiety podciągnęli rękawy przy lewej ręce, pojawił się na nich wyglądający na tatuaż symbol, wyglądający jak krąg w którym stała dziewczyna.

























































OD: Doktor Ryszard Kot
DO: Dyrektor Ośrodka PL-49 i tymczasowa Dyrektor Ośrodka PL-48 Amelia Aris
Temat: Nietypowe zachowanie SCP-PL-139 w Ośrodku PL-48


"Wypalacze" w trakcie ostatniego wykonywania procedury 139-NM zaobserwowali nietypową rzecz, obszar działania obiektu znacznie się zmniejszył, przestał atakować dalsze piętra. Również SCP-PL-139-1 zaprzestały ataków, jak raportował "Chudy", zwyczajnie stoją w miejscu, będąc spalanym przez naszych MFO. Jeśli dobrze pamiętam raporty Joanny i chłopaków z Omikron 10 "Skażony Feniks", agent Zalewski też nie zgłaszał głosów od SCP-PL-139-2 przy próbach zbliżenia się do obszaru jej działania. Według naszych kalkulacji powinniśmy w pełni odzyskać Ośrodek PL-48 w ciągu następnych dwóch miesięcy, jednakże coś jest definitywnie nie tak z SCP-PL-139.

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