W świecie duchów u Drzonego 13

Strony autorskie » W świecie duchów u Drzonego 13

W świecie duchów u Drzonego 13
Byㅤ Drzony13
Published on 26 May 2022 21:58

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):

RSO Component — Rounderhouse

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: -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;
    }
    }
}

W świecie duchów u Drzonego 13
Autorka Drzony13
Opublikowane 26.05.2022

To jestem ja.

Hej hej hej, jestem Drzony13, ale możecie mnie nazywać Drzony13! Jestem cool epickim bad boy duchem, wandalizującym naszą PRAWDZIWĄ POLSKĄ FILIĘ.

Piszę tutaj gdzieś tak od ponad roku. Co prawda niewiele tu zdziałałem, ale podoba mi się tutaj!

Na początku dołączyłem tutaj z zamiarem pisania horrorów, ale skończyło się na tym, że piszę bardziej zróżnicowane rzeczy. Skojarzyć mnie możecie z np. raportu o Jermie986, czy gnojka. Ale przyznam szczerze, że w opowiadaniach czuję się o wiele bardziej komfortowo, niż w raportach ze względu na o wiele większą wolność w formie i treści. Dlatego też mam tu o wiele więcej opowiadań, niż raportów.

Prywatnie natomiast studiuję grafikę na ASP i w przyszłości mam zamiar zajmować się ilustracją. Głównie chcę ilustrować książki i książeczki dla dzieci. Co mogę powiedzieć, projektowanie jest fajne, ale najbardziej uwielbiam właśnie rysować!

Cóż, to by było na tyle! Przechodząc dalej:

Moje pracki:

Poniżej są moje oryginalne prace z komentarzem. Polecam nie czytać komentarzy bez przeczytania samych prac¹.

Oliwia

O serii

Części:

Ultra Fajny Prolog!

Komentarz autora

Art is Dead

Raporty SCP:

SCP-PL-291 — Jerma Dollhouse 2

Komentarz autora

Essa

Jest to mój pierwszy raport na witrynie. Za cholere bym nie pomyślał, że będzie to raport o Jermie, ale nie narzekam. Jestem z tej pracy mega zadowolony.

Na Emporium Wyzwań, jako wyzwanie unikatowe wybrałem raport o streamerze Jerma985. Samo wyzwanie wybrałem tak dla jaj, ale jednak chciałem podejść do tego na poważnie.

Koncepcja fabuły i anomalii zmieniała się co chwila. Pierwotnie miałem zrobić sus guya³, ale Zygard mnie całe szczęście przed tym powstrzymał. Wysłał mi kilka godzin materiału o Jermie, abym zrobił coś ciekawszego, za co cholernie mu dziękuję.

Po tym długo kminiłem, jaka ma być jego anomalia, zanim zdecydowałem się zabrać za Jerma Dollhouse. Ale tu też kminiłem, w jakim celu Fundacja przeprowadziła Jerma Dollhouse.

Moją inspiracją do ostatecznego pomysłu na fabułę raportu było SCP-PL-234 od Charonides. To właśnie dzięki temu raportowi wpadłem na pomysł, żeby zamiast czynić samego Jermę anomalnym, dam serię anomalnych zdarzeń wokół niego, i tak właśnie narodziło się Jerma Dollhouse 2.

Żeby napisać ten raport, obejrzałem całe Jerma Dollhouse. Jak w pełni zaplanowałem wstępną fabułę, pierwsze cztery streamy oraz przesłuchanie, tak ze względu na charakter Jerma Dollhouse⁴, samo Jerma Dollhouse 2 było bardzo improwizowane. Jak przed pisaniem miałem ogólny pomysł na zakończenie, tak podczas pisania za cholerę nie wiedziałem, jak to się skończy, bo mój pomysł na zakończenie zmieniał się za każdym razem, kiedy siadałem do pisania.

Również dodanie Anny nie było planowane. Jeszcze zanim zabrałem się do pisania, przeglądałem wyzwania, a losowość Jerma Dollhouse pozwalała mi na dodawanie nowych postaci w locie. I tu też miałem wymówkę do podjęcia się wyzwania Plugging⁵.

Pierwotnie Anna miała być losową wariatką z furby, a jej postać w dollhouse miała być niepowiązana z Listem do Mikołaja. A dopiero po pierwszym jej pojawieniu się w raporcie wpadłem na pomysł, że zabije ona Ednę. I wtedy miała ona być główną antagonistką całej pracy. Wariatka, która chce mieć Jermę tylko dla siebie, więc chce spalić cały dom. Potem pomimo bycia wariatką, miała ona jednak być głosem rozsądku na swój sposób. Ostatecznie zdecydowałem się na bezpośrednie powiązanie Anny z Listem do Mikołaja i zrobienie, że ona tylko udawałą wariatkę, a w rzeczywistości chciała ona uratować Jermę przed Dollhouse 2.

Kilka koncepcji zakończenia, jakie miałem:

Jerma ma dość udawania, że dobrze się bawi w dollhouse i dochodzi do finalnej konfrontacji z postaciami. Ostatecznie stwierdzają, że są usatysfakcjonowane zabawianiem się nim i wychodzą, ale wrócą.
Jerma zaprzyjaźnia się z postaciami, lecz Dollhouse się kończy⁶ i nadchodzi czas, aby się z nimi pożegnać. Odchodzą, ale kiedyś znowu go odwiedzą i będą mogli znowu spędzić miło czas razem.
Anna zostaje samotnie spalona w domu i tym samym powstrzymana od zabicia reszty postaci. Dom zostaje spalony, a Jerma żegna się ze swoimi przyjaciółmi, którzy odchodzą.
Anna jako psychotyczny głos rozsądku znów zostaje powstrzymana. Ale tym razem w negatywnym sensie. Dochodzi do finalnej konfrontacji jej z Jermą, gdzie wyśmiewa go i próbuje uświadomić, że te postacie nie są prawdziwe, lecz Jerma jej nie słucha. Spalił Annę razem z domem i dalej brnie w fikcję, jaką jest Dollhouse.

Dopiero pod koniec, kiedy zdecydowałem, że Anna będzie tutaj dobra, uznałem, że hej! Dam jej to szczęśliwe zakończenie.

SCP-PL-305 — Mały wredny gnojek

Komentarz autora

Essa

Cóż, mój drugi oryginalny raport oraz kolejna praca konkursowa, napisana na Konkurs PL-300. Przyznam, że pomimo że praca nie jest jakaś genialna, czy zaskakująca, ciężko mi się ją pisało. Najciężej było wpaść na pomysł. Od samego początku miałem zamiar dać motyw presji czasu, ale nie wiedziałem, w jakim kierunku z tym pójdę. Pierwotnie myślałem o anomalnej chorobie, ale było to zbyt trudne i nie wiedziałem, jak się za to zabiorę.

Innym pomysłem było to, że nagle jeden ośrodek zaczął się roztapiać, po czym pracowników i anomalie ewakuowano do czterech innych ośrodków. Potem nie dość, że te cztery ośrodki też zaczęły sie roztapiać, to jeszcze i pracownicy oraz anomalie. Ale to też było dla mnie zbyt trudne i uznałem, że mnie przerośnie.

I nagle, siedząc sobie w aucie i czekając w kolejce w drive thru od kfc, olśniło mnie i wpadłem na pomysł małego gnojka wpierdalającego bazy danych i uznałem to za strzał w dziesiątkę. Nie dość, że mam pomysł, jak się za to zabrać, to jeszcze będę mógł zrobić obrazki! Kurwa, nie po to studiuję grafikę na asp, żeby nie wykorzystywać obrazków w storytellingu!

Sam gnojek był tutaj bardzo inspirowany farmerem z SCP-5045, który jak to określił sam autor: "Powinno się go bardziej traktować jako takiego stereotypowego kreskówkowego złoczyńcę, który nie ma żadnego innego motywu niż to, ze lubi być zły". Swoją drogą, kontur gnojka pierwotnie miał być fioletowy, ale zdecydowałem się na zielony, bo połączenie czarnego z zielonym bardziej oddaje cyfrowy klimat. Chociaż raczej nie powinienem był używać organicznego pędzla do konturu.

Pisanie było dosyć żmudnym procesem, bo mimo wszystko nie jestem dobry w pisaniu raportów⁷, a na dodatek pisałem to w pośpiechu, żeby zdążyć na konkurs. W ogóle, pierwotnie gnojek nie miał zniszczyć baz danych Fundacji. Pierwotnie udało się go pokonać w logu terminacji i nic więcej. Potem dopiero zdecydowałem się o dodaniu aktualizacji w collapsie i papierowego dokumentu. Również, pierwotnie akcja miała się rozgrywać w 2019, a po decyzji o zniszczeniu baz danych Fundacji, zmieniłem to na 2030.⁸

Papierowy dokument natomiast zrobiłem w indesignie, po czym wydrukowałem go i zeskanowałem.⁹ Swoją drogą, wydrukowana wersja obok identyfikatora miała pięć alternatywnych numerów, abym po ogłoszeniu wyników mógł śmiało w edycji pozamieniać numerki, żeby nie musieć znowu drukować i skanować. Wgl, w druku obrazek z gnojkiem wyglądał okropnie, więc w edycji, na skan nałożyłem cyfrową wersję i zmniejszyłem krycie, aby obrazek był bardziej wierny, ale wciąż dawał wrażenie skanu. Również dałem pod nim lekki cień, aby sprawiał wrażenie, jakby razeczywiście nakładał się na kartkę, a nie że był wydrukowany razem z tekstem.

Chociaż jestem całkiem zadowolony z tej pracy, to mimo wszystko uważam to za moją najsłabszą pracę.¹⁰ Ale w przyszłości mam zamiar się bardziej postarać.

Powiem tyle, że mimo wszystko cieszę się, że mogłem uczestniczyć w Konkursie PL-300.

SCP-PL-173-EXE — scp.exe

Formaty GOI:

(Nie ma i prawdopodobnie nie będzie. Sorki, nie znam się na gojach.)

Tłumaczenia:

SCP-5045 — Przyzwyczaisz się
SCP-715 — Twarz, którą mógłbym mieć
SCP-5403 — A/N: to jezd moj pierwszy post wiec PLISKA NIE HEJCIC!!!1
SCP-003-id — Twoja waifu jest prawdziwa ziom
Propozycja Ralliston — Gambit Królowej — We współpracy z Jasiu06
SCP-5761 — Kiedy Impostor Jest Sus II: Godzina Koszmaru
SCP-#### — Smutny Facet
How I destroyed the Tower of Babel
Time for writing!