SCP-4428 |
---|
By: |
Published on 01 Aug 2022 10:55 |
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):
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-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; } } }
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap); /* Centered Header Sigma-9 * [2021 Wikidot Component] * By Lt Flops (CC BY-SA 3.0) * Forked from: * Penumbra Theme by EstrellaYoshte * Also based on: * Centered Header BHL by Woedenaz **/ /* ---- VARS ---- */ :root{ --titleColor: hsl(0, 0%, 95%); --subtitleColor: hsl(60, 62%, 85%); --lgurl: url(https://scp-wiki.wdfiles.com/local--files/component%3Acentered-header-sigma-9/logo.svg); } /* ---- SITE BANNER ---- */ #header, div#header{ background-image: none; } #header::before{ position: absolute; width: 100%; height: 100%; content: ""; background-image: var(--lgurl); background-position: center top; background-repeat: no-repeat; background-size: auto 10.55em; opacity: .33; } #header h1, #header h2{ float: none; margin-left: 0; text-align: center; } #header h1 span, #header h2 span{ /* Hide the Existing Text */ display: none; } #header h1 a::before, #header h2::before{ /* Style the New Text */ font-family: "Montserrat", "Arial", sans-serif; text-shadow: none; } #header h1 a::before{ position: relative; bottom: .15em; color: var(--titleColor); font-size: 115%; font-weight: 700; } #header h2::before{ position: relative; top: .1em; color: var(--subtitleColor); font-size: 130%; font-weight: 600; } #header h1 a::before{ /* Set the New Text's Content From Variable */ content: var(--header-title, "SCP FOUNDATION"); } #header h2::before{ content: var(--header-subtitle, "SECURE - CONTAIN - PROTECT"); } /* ---- SEARCH ---- */ #search-top-box{ top: 1em; right: 0; } #search-top-box-form input.button{ margin-right: 0; } #search-top-box-input, #search-top-box-input:hover, #search-top-box-input:focus, #search-top-box-form input[type=submit], #search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus{ border-radius: 0; box-shadow: none; font-size: 100%; } /* ---- TOP BAR ---- */ #top-bar{ right: 0; display: flex; justify-content: center; } #top-bar ul li ul{ border-bottom: 1px solid hsl(0, 0%, 40%); box-shadow: none; } /* ---- LOGIN ---- */ #login-status{ top: 1.1em; right: initial; color: hsl(0, 0%, 87%); } #account-topbutton{ border-color: hsl(0, 0%, 87%); font-size: 100%; } /* ---- PAGE TITLE ---- */ .meta-title, #page-title{ text-align: center; } /* ---- BREADCRUMBS ---- */ .pseudocrumbs, #breadcrumbs{ text-align: center; } /* ---- MOBILE DISPLAY ---- */ @media (max-width: 767px){ #search-top-box{ top: 1.85em; width: unset; } .mobile-top-bar{ position: relative; left: 0; display: flex; justify-content: center; } #login-status{ top: 0; right: 0; } #header .printuser{ font-size: 0; } #header .printuser img.small{ margin: 0; transform: translate(6px, 4px); } #my-account{ display: none; } #account-topbutton{ margin-left: 2px; } }
Dr Michaels
Departament Nieporozumień Hub » Dr Michaels
INFORMACJA OD DEPARTAMENTU
NIEPOROZUMIEŃ FUNDACJI
Zadaniem Departamentu Nieporozumień (DoMc) jest zajmowanie się całą dokumentacją i porozumiewaniem się z Dr. Michaelsem, a także przestrzeganie ściśle spisanych zasad. Zasady te są niemożliwe do bezpośredniego stwierdzenia; jednakże, zaprojektowaliśmy ten dokument w sposób taki, aby je wyraźnie zasugerować.
—Eli Forkley, Dyrektor DoMc
NOTATKA DOMC: Ten plik wymaga kompleksowej, nieanomalnej szczepionki.
Dr Michaels to Dr Michaels. | Dr Michaels to nie Dr Michaels. |
Ziemia jest okrągła. | Ziemia jest płaska. |
Niebo jest niebieskie. | Niebo jest zielone. |
[✔] Szczepienie ukończone. Możesz kontynuować.
IDEKS KOMUNIKACYJNOŚCI: W celu przestrzegania Kodeksu Lingwistycznej Integralności personelu DoMc, informacje zapisane w poniżej są w 100% prawdziwe i łatwe w zrozumieniu poprzez pisemne, piktograficzne, wzrokowe, słuchowe lub podprogowe środki. Personel wzbudzający podejrzenia musi zostać skierowany do Medycznego Skrzydła Ośrodka 96, w celu podania środków prawdomówiących Klasy A,1 a jeżeli to konieczne, następnie podać środki amnezyjne Klasy C. |
Identyfikator: Dr Michaels | Klasa przechowawcza: Bezpieczne |
Specjalne Czynności Przechowawcze: Dr Michaels nie jest w niebezpieczeństwie. Zapewnione musi być dobro osobiste Dr. Michaelsa. Z tego powodu Dr Micheals jest przechowywany Ośrodku 96 i ma zakaz wchodzenia w interakcję z personelem, o ile nie jest to bezpośrednio powiązane z jego badaniem i zabezpieczeniem.
Zespół ds. rozlokowywania będzie podążał za Dr. Michaelsem przez cały dzień i odkażał obszar po tym, jak go opuści. Żaden z członków tego zespołu nie może rozmawiać o swoich obowiązkach lub o sytuacji otaczającej ich.
Opis: Doktor Jeremy Feldson Michaels jest nieanomalnym mężczyzną o brytyjsko-indyjskim pochodzeniu, obecnie zatrudniony jako Badacz Poziomu 3 w Ośrodku 96. Dr Michaels ma 33 lata i pracuje w Fundacji od 8 lat. Jest nieżonaty i jedynakiem, a poza rodzicami nie ma żadnych innych krewnych.
DODATKOWE MATERIAŁY
I. Personalny Szacunek Aferalnego Bezpieczeństwa
LOG WIDEO
DATA: 20.10.2019
CZAS: 08:16 UTC
PRZEDSŁOWIE: Dr Michaels jest ważny dla Fundacji przez swoje kompetencje w dziedzinach lingwistyki i nieporozumień. Wykorzystanie Personalnego Szacunku Aferalnego Bezpieczeństwa (w skrócie PSAB) jest niezbędne do określenia zagrożenia jego dobra osobistego. Wyznaczony personel przeprowadził PSAB wewnątrz zamkniętej komory przechowawczej, aby określić problemy w zdrowiu psychicznym Dr. Michaelsa.
[POCZĄTEK LOGU]

Niedawno zrobione zdjęcie Dr. Michaelsa. Zredagowane zostało bezpośrednie otoczenie.
Przesłuchujący: Okej, więc po prostu powiedz mi jak się nazywasz — jak w protokole — i możemy zaczynać. Pasuje?
Dr Michaels: [Bierze głęboki oddech.] Okej, nazywam się Doktor Jeremy Feldson Michaels.
Przesłuchujący: Świetnie, zatem–
[Przesłuchujący wpatruje się w punkt nad głową Dr. Michaelsa i siada inaczej na swoim krześle.]
Przesłuchujący: Um, wybacz. W każdym razie, zgłosiłeś się wczoraj do Psychiatry Ośrodka. To miało być w swego rodzaju twoja wizyta kontrolna. Możesz mi opowiedzieć o tym, jak poszło?
Michaels: Tak, cóż, ostatnimi czasy byłem trochę przybity. Wiesz jak to jest — wszyscy się z tym borykamy, kiedy pracujemy daleko od naszych rodzin, co nie?
Przesłuchujący: Hmm, mógłbyś być bardziej dokładny? Jak się to "przybicie" objawiało?
Michaels: Mam stale utrzymujące się przeczucie, którego nie mogę się pozbyć z głowy. Jakby coś nie chciało mnie puścić. Oczywiście mówię metaforycznie.
Przesłuchujący: Czy mógłbyś mi powiedzieć, kiedy to uczucie się pojawiło?
Michaels: Powiedziałbym, że po tym, jak straciliśmy D-4428-3. Jakby w ciągu sekundy.
Przesłuchujący: [Zapisuje w notatniku.] Racja, okej, więc miałeś traumatyczne przeżycie.
Michaels: Coś w tym stylu.
Przesłuchujący: Ten konkretny członek Klasy D był częścią twojego osobistego zespołu badawczego, mam rację?
Michaels: Tak.
Przesłuchujący: Ktoś jeszcze w nim był?
Michaels: Cóż, w żadnej szczególnej kolejności, to byli Agent Rosewood,2 D-4428-1,3
D-4428-2,4 Inżynier Przechowawczy Howard Winters,5 i Badaczka Gabi Kalpana.6
Przesłuchujący: Rozumiem. Więc Jeremy, czy powiedziałbyś, że te uczucia są nawracające?
Michaels: Nie. Cóż, pojawiają się i znikają. Czasami wprowadzają mnie w głębszy dołek, niż mogę się spodziewać.
Przesłuchujący: W porządku. Twoje dokumenty twierdzą, że twoja rodzina nie ma odnotowanych traumatycznych doznań — ah, poza twoim bratem. Masz brata, Jeremy?
Michaels: Zgadza się, mam brata.
Przesłuchujący: Doktor określił go jako “czynnik stresujący”. Mógłbyś to wyjaśnić? Co się z nim stało?
Michaels: Cóż, nie mógłbym ci powiedzieć, gdzie dokładnie jest teraz. To nie tak, że ja nie wiem. Po prostu nie chciałbym o nim mówić.
Przesłuchujący: Popraw mnie, jeżeli jestem błędzie… Twój brat był przyczyną całej tej wrogości wobec ciebie.
Michaels: Był dupkiem, zgadza się, ale w jego przypadku było to bardziej zdradliwe. Moi rodzice przygarnęli go, kiedy był jeszcze dzieckiem. Był moim przybranym bratem i dobrze się dogadywaliśmy. Jednak kiedy dorastaliśmy, coś w nim pękło. Po tym wszystko, co robił, było obciążeniem dla naszej rodziny.
Przesłuchujący: I od tamtego czasu był wrogi?
Michaels: Nie był konfrontacyjny — zupełnie inaczej — jakby był bezwładnym ciężarem dla nas wszystkich, szczególnie dla mnie. Mimo wszystko dorastaliśmy razem i był najbardziej przywiązany do mnie. Aczkolwiek, kiedy wyjechałem na studia, on– Cóż, nie pozwolił mi odejść.
Przesłuchujący: Notatki doktora twierdzą, że nazwałeś go e– Co to było? Nazwałeś go “pasożytem”.
Michaels: [Napina się na chwilę, po czym wzdycha i uspokaja się.] Chciałem po prostu żyć na swoim, nic więcej. Jednak kiedy się przeprowadziłem, kilka tygodniu po jego ostatnim spotkaniu, on tam już był. Byłem tysiące kilometrów od niego, a on tam jakoś był. Robił to także innym. Ja– Nie byliśmy pierwsi.
Przesłuchujący: Jasne. [Przerzuca kartki w swoim notatniku.] To teraz Jeremy, jaki jest twój ulubiony kolor?
Michaels: Fio– Nie, czekaj, może pominiemy to pytanie?
Przesłuchujący: Jesteś– Eh, jesteś pewien?
Michaels: Przejdź do następnego pytania. Proszę.
Przesłuchujący: [Przerywa i przykłada rękę do swojego ucha, zakrytego przed urządzeniem nagrywającym.] Właściwie, Dr. Michaels, byłeś tutaj po zapasowe ścieki, czyż nie?
[Dr Michaels przytakuje.]
Przesłuchujący: Niedawno dostałem w zasadzie zgłoszenie, że znaleźli tego źródło. Ktoś z personelu ochronnego — znalazł dużą, pękniętą rurę w jednym z opuszczonych podpoziomów piwnicy. Tam na dole była dosłownie powódź. Aczkolwiek nikt nie jest pewny przyczyny.
Michaels: Teraz?
Przesłuchujący: Nie, coś ponad tydzień temu. Wysłali tam formację operacyjną i stracili jednego w błocie, a kiedy wrócił ich poszukać, wyglądali jakby byli unieruchomieni. Wszystko było w porządku z nimi, ale poruszali się zbyt wolno.
Michaels: Okej.
Przesłuchujący: [Robi ostry wdech i pochyla się do przodu na swoim krześle.] Formacja mówiła, że czuli to samo zamglenie, co ty.
Michaels: Naprawdę? Heh, cóż za zbieg okoliczności.
Przesłuchujący: Zgadzam się.
[KONIEC LOGU]
II. Końcowa Notatka
NOTATKA BADACZA
Starałem się wyrazić najjaśniej ,jak tylko mogłem w tym dokumencie. Wszystko ze mną w porządku, aczkolwiek nie wiem, ile mogę jeszcze to znieść. Proszę, jeżeli to czytasz i rozumiesz, że nic mi nie jest: Tak długo już być nie może. Któregoś dnia ktoś może zwiać albo to mogę być nawet ja i… Nie zrobię tego sobie, ani mojej rodzinie, ani moim współpracownikom. Departament Nieporozumień robi świetną robotę, a to już cud, że udało im się mnie z tego wyciągnąć, jednak tylko tyle mogę z tego wytrzymać.
Ostatecznie? Wszystko u mnie w porządku, rozumiecie? Proszę, proszę, zrozumcie i znajdźcie sposób, żeby to rozgryźć.
Dr Jeremy Michaels Badacz Ośrodka 96 20.10.2019 |
[KONIEC PLIKU]