SCP-3309
SCP-3309
By: DgcttDgctt
Published on 14 Jan 2021 19:26
voto: +6+–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;
    }
    }
}

▷ Show Code ◁
 
voto: +6+–x
blank.png

Crediti

Articolo: SCP-3309 - Where We Go When We Fade, Fade Away
Autori: Lt FlopsLt Flops & PhamtomGuyPhamtomGuy
Traduzione: TheBoxOfFunTheBoxOfFun & DgcttDgctt

scp-heritage-v3.png
voto: +6+–x
voto: +6+–x

AVVISO DALL’AMMINISTRAZIONE DELLA SICUREZZA DELL’INFORMAZIONE E DEI REGISTRI DELLA FONDAZIONE

Il file a cui stai accedendo, “SCP-3309,” descrive un'imprevedibile anomalia narrativa che si interseca con molteplici strati subnarrativi. È richiesta l'inoculazione narrativica, in quanto questo documento contiene diversi rischio-narrativi1 incorporati. Il personale privo di inoculazione contro tali anomalie può subire un evento di parafrasi narrativa.

Desideri continuare?

Diffusione dell'inoculazione narrativa.

A volte non svaniamo finché non è troppo tardi.

Finché non siamo appassiti, appassiti, fino all'osso. E alla fine, non c'è più niente. È tutto dimenticato. Ricordi, speranze, sogni; siamo tutti dimenticati. Come possiamo sapere che la gente ha anche questi ricordi, queste speranze, questi sogni? Chi potrebbe dimenticarci se non c'era nulla, tanto per cominciare? Noi svaniamo dalla mente degli altri, ma non dalla nostra. Ci conviviamo finché non riusciamo più a vivere. Finché non dimentichiamo che non c'è mai stato un modo per vivere in pace. Ed è a quel punto che svaniamo.

Svaniamo, svaniamo nel nulla.

Inoculazione completata! Puoi continuare.

ELEMENTO: SCP-3309 LIVELLO 5/3309
CLASSE DI CONTENIMENTO: keter top-secret

CLASSE DI DISTURBO: amida

Procedure Speciali di Contenimento: Tutta la documentazione relativa alle anomalie colpite da SCP-3309 deve essere conservata in formato parafrasato e conservata all'interno della Banca Dati dell'Archivio ASIR. Dopo il contenimento di un'istanza, tutto il personale assegnato all'anomalia colpita deve essere sottoposto a un trattamento amnestico e trasferito in progetti non correlati.

Descrizione: SCP-3309 è un fenomeno in cui le anomalie catalogate scompaiono spontaneamente. Gli oggetti affetti da SCP-3309 includono oggetti anomali, entità, luoghi e strutture concettuali. Le anomalie colpite da questo fenomeno sembrano mancare di una relazione causale; l'attività di SCP-3309 è indicata da una lettera di origine sconosciuta (indicata come SCP-3309-1).

Tra le 24 e le 36 ore prima della scomparsa di un'anomalia, SCP-3309-1 appare in allegato al file dell'articolo. I documenti sottoposti a SCP-3309 vengono cancellati da tutti i sistemi conosciuti, compresi gli Archivi Protetti del Sito-01 e dell'ASIR. In seguito, l'anomalia stessa diventa di fatto neutralizzata o altrimenti scompare.

Il contenuto di SCP-3309-1 è il seguente:

Se non sei l'autore e vuoi riscrivere questo articolo, puoi rispondere a questo post chiedendo l'opportunità di farlo. Si prega di ottenere il permesso dall'autore.

SCP-3309 influisce sui backup creati in caso di una scomparsa dei documenti. SCP-3309 colpisce anche i documenti di elementi anomali che incontrano SCP-3309; circa il 71% dei documenti che scompaiono sono collegati ad altre anomalie non colpite. Questo porta ad un indebolimento della rete di contenimento delle anomalie della Fondazione, che potrebbe portare a uno scenario di classe ADK "Completa Destabilizzazione Anormale".

Footnotes

MATERIALE AGGIUNTIVO

I. Tribunale del Comitato Etico

  ▷ TS/3309/LETTURA RISERVATA

II. Progetto: LANCIA AFFUSOLATA

   ▷ TS/3309/LETTURA RISERVATA

III. [ ]

Il suo cuore è un cratere, e noi l'abbiamo riempito.

voto: +6+–x
Transparent.gif

/

SCP-3309

Transparent.gif

L'Abisso Fissa a Sua Volta

« SCP-3308 | SCP-3309 | SCP-3310 »

autori-multiplicomitato-eticoconcettoenmetanarrativooontocineticoricercatore-smallsscenario-classe-kscpthaumiel
versione della pagina: 30, ultima modifica: 07 Oct 2021 17:54
Modifica Vota (+6) Tag Commenti (0) Cronologia File Stampa Strumenti del sito + Opzioni
Salvo diversa indicazione, il contenuto di questa pagina è sotto licenza Creative Commons Attribution-ShareAlike 3.0 License