SCP-PL-302

SCP-PL-302
By: JNColossus
Published on 31 Jul 2023 23:27

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

• Magnus Web Format — DrMagnus
• Flopstyle CSS — Lt Flops
• Blankstyle CSS — HarryBlank
• Placestyle CSS — Placeholder McD
• Jakstyle — JakdragonX

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

▷ Show Code ◁

@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap);
 
/* Centered Header Sigma
 * [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:pride-highlighter/lgbtqp_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 9em;
     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;
    }
}

Info

---

Titolo: SCP-PL-302: Silenzio Tomba
Autore: KubKac
Originale: SCP-PL-302
Traduttore: JNColossus

▸ Di più da questo autore ◂

---

---

SCP-PL-302 visto tramite un visualizzatore.

Elemento №: SCP-PL-302

Classe dell'Oggetto: Safe

Procedure Speciali di Contenimento: A causa dell'informazione contenuta nell'Addendum PL-302/2, all'imbarcazione KENNEDY-3848-XK è proibito rispondere a qualunque trasmissione radio.

Descrizione: SCP-PL-302 è un segnale radio ricevuto in risposta di numerosi tentativi da parte dell'equipaggio di KENNEDY-3848-XK di stabilire comunicazione nello spazio profondo alla ricerca di forme di vita extraterrestre intelligente.

SCP-PL-302 è codificato in una lingua sconosciuta, per ciò si stanno correntemente eseguendo tentativi di tradurre il messaggio, come di tracciare l'origine del sistema planetario esatto da cui è stato inviato. Durante il messaggio registrato non si può sentire alcuna traccia caratteristica che possa essere utilizzata per indicarne il mittente.

Gli effetti anomali dell'oggetto si manifestano dopo che esso viene ascoltato da un essere umano. In questo momento, l'ascoltatore non sarà capace di vocalizzare per un breve periodo di tempo; le corde vocali dei soggetti non risultano danneggiate in alcun modo.

Addendum PL-302/1: Ricezione

SCP-PL-302 è stato scoperto durante l'esplorazione-colonizzazione di pianeti capaci di sostenere la vita al di fuori del Sistema Solare da parte dell'Imbarcazione da Colonizzazione della Fondazione KENNEDY-3848-XK. Col passare del tempo, si è svolto un tentativo di stabilire comunicazioni con qualunque civilizzazione aliena così da rifornire le scorte alimentari. Il messaggio è stato modificato anormalmente così da tradursi istantaneamente alla lingua natia dell'ascoltatore. La seguente è una trascrizione del messaggio inviato dall'equipaggio della KENNEDY-3848-XK.

MESSAGGIO D'EMERGENZA DALLA KENNEDY-3848-XK

---

A chiunque giunga questo messaggio. Il mio nome è George Mallory e sono a capo dell'Imbarcazione da Colonizzazione KENNEDY-3848-XK. Per favore rispondete prontamente non appena ricevuto. Stiamo esaurendo le scorte di cibo e di acqua. A bordo ci sono donne e bambini. Imploriamo aiuto ed un messaggio di risposta immediato.

---

— George Mallory
Capitano della KENNEDY-3848-XK

In seguito alla trasmissione h-24, il personale della KENNEDY-3848-XK ha riportato d'aver ricevuto un messaggio di risposta di origine ignota con proprietà anomale.

Addendum PL-302/2: Traduzione completa

Il 28/11/2045, il Dipartimento di Ligustica ha completato la traduzione del contenuto di SCP-PL-302. A causa del contesto allarmante del messaggio, il comando della ricerca sulla KENNEDY-3848-XK ha deciso di mutare la direzione della rotta e di non rispondere al messaggio. Quanto segue è il contenuto di SCP-PL-302.

Contenuto tradotto di SCP-PL-302

Fate silenzio o vi sentiranno.

‡ Licenza / Citazione

Cita questa pagina come:

"SCP-PL-302" di KubKac, dalla SCP Wiki. Sorgente: https://scp-wiki.wikidot.com/scp-pl-302. Sotto licenza CC-BY-SA.

Per ulteriori informazioni, vedasi la Guida alle Licenze.
Informative di Licenza

Nome File: Sonic_visualiser_less_than_zero.JPG
Nome: Sonic visualiser less than zero.JPG
Autore: N/A
Licenza: GNU General Public License
Fonte: Wikimedia Commons

Per ulteriori informazioni riguardo il contenuto presente sulla wiki, visitare la Licensing Master List.