Hub del Equipo Pájaro

Hub del Equipo Pájaro
Autora: Lt Flops
Traductor: morhadow
Publicado el 23 Sep 2018 20:26

Qué es esto

Un puñado de "mejoras" CSS varias que yo, Croquembouche, utilizo en un montón de páginas porque creo que las hace más fáciles de manejar.

Los cambios que hace este componente son un montón de modificaciones realmente triviales para facilitar la experiencia de escritura y para hacer la documentación de los componentes/temas un poco más fácil (lo que hago mucho). No cambia nada de la página visualmente para el lector — los cambios son para el escritor.

No esperaría que las traducciones de los artículos que usan este componente también lo usen, a menos que al traductor le guste y quiera usarlo de todos modos.

Este componente probablemente no entrará en conflicto con otros componentes o temas, e incluso si lo hace, probablemente no importará demasiado.

Uso

En cualquier wiki:

[[include :lafundacionscp:component:croqstyle]]

Este componente está diseñado para ser utilizado en otros componentes. Cuando lo utilice en otro componente, asegúrese de añadir esto dentro del bloque de [[iftags]] del componente, para que los usuarios de su componente no se vean obligados a utilizar también Croqstyle.

Componentes relacionados

Otros componentes de estilo personal (que sólo cambian un par de cosas):

• Componente RSO — Rounderhouse

Temas de estilo personal (que son revisiones visuales):

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

Cambios de CSS

Notas a pie de página de tamaño razonable

Evita que las notas a pie de página sean de un tamaño excesivo, para que se puedan leer realmente.

.hovertip { max-width: 400px; }

Edición/código monoespaciado

Hace que el cuadro de texto de edición sea monospace, y también cambia todo el texto monospace a Fira Code, la fuente monospace obviamente superior.

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

Fondos de teletipo

Añade un fondo gris claro a los elementos <tt> ({{text}}), para que los fragmentos de código destaquen más.

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 más caras grandes

Evita que aparezcan imágenes grandes cuando pasas el ratón por encima de la imagen de avatar de alguien, porque son estúpidas y realmente molestas y puedes hacer clic en ellas si quieres ver la versión grande.

.avatar-hover { display: none !important; }

Salto saltito

Cualquier texto dentro de un div con clase nobreak tiene un ajuste de línea entre cada letra.

.nobreak { word-break: break-all; }

Colores del código

Añade los colores del código de mi terminal como variables. Tal vez cambie esto a un tema de terminal más común como Monokai o algo así en algún momento, pero por ahora es sólo mi tema personal, que se deriva de Tomorrow Night Eighties.

Además, al añadir la clase .terminal a un bloque de código falso como [[div class="code terminal"]] le da una especie de aspecto de pseudo-terminal con un fondo oscuro. No funciona con [[code]], porque Wikidot inserta un montón de resaltado de sintaxis que no puedes cambiar tú mismo sin un montón de CSS. Utilízalo solo para fragmentos de código sin [[code]].

Herramienta rápida para colorear un ejemplo de uso de un componente "estándar" de Wikidot con las variables anteriores: 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;
}

Modo de depuración

Dibuje líneas alrededor de cualquier cosa dentro de .debug-mode. El color de las líneas es rojo, pero depende de la variable CSS --debug-colour.

También puede añadir div.debug-info.over y div.debug-info.under dentro de un elemento para anotar las cajas de depuración - aunque tendrá que asegurarse de dejar suficiente espacio vertical para que la anotación no se superponga a lo que está por encima o por debajo.

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

/* fuente: 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;
    }
    }
}

▷ Mostrar Código ◁

@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap);
 
/* Encabezado Centrado Sigma-9
 * [2021 Wikidot Component]
 * Por Lt Flops (CC BY-SA 3.0)
 * Bifurcado de:
* Tema Penumbra por EstrellaYoshte
 * También basado en:
   * Encabezado Centrado BHL por Woedenaz
**/
 
/* ---- VARS ---- */
 :root{
     --titleColor: hsl(0, 0%, 95%);
     --subtitleColor: hsl(60, 62%, 85%);
     --lgurl: url(https://lafundacionscp.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, "FUNDACIÓN SCP");
}
 
 #header h2::before{
     content: var(--header-subtitle, "SEGURIDAD - CONTENCIÓN - PROTECCIÓN");
}
 
/* ---- 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;
    }
}

¡Banner por cortesía del maravilloso Mendelssohn!
> Echa un vistazo a más de su arte aquí. <

—

Porque de alguna manera, los dioses egipcios, el universo SPC, los misteriosos dispositivos para aspirar el alma, los malos juegos de palabras y científicos gaviotas pueden coexistir felizmente en la misma historia. No es de extrañar que se llamaran a sí mismos Equipo Pájaro, la lluvia de ideas de la trama se debe haber hecho mientras todos estaban muy drogados.

— Modulum, mandamás de SCPDeclassified

—

Escenario de Fin de la Consciencia "Migración" de Clase-BE

Eta-4 ("Begone Thoth")

¿Sabías que los pájaros tienen sus propios dioses? Bueno, "dioses" es un término que no debemos usar. Se supone que debemos usar "Entidad Pluripotente Dominante", pero no hay nadie para imponer eso, así que ¿por qué molestarse?

De todos modos, un día, hicimos algo para cabrear a uno de los dioses. Se enojó tanto que bajó de su gran e imponente trono en quién sabe dónde y trató de borrar a la población humana de la faz de la Tierra dándoles mentes de pájaro. Funcionó, y ahora creo que todos estamos jodidos.

¿Quiénes somos? Somos el DM-Eta-4, también conocido como "Begone Thoth"¹. Juro por Medila que voy a buscar y picotear a quien haya decidido ese nombre. Estoy divagando. Es nuestro trabajo mantener la misión de la Vieja Fundación. Setenta y cinco pájaros contra siete mil millones de humanos, un dios, y Medila sabe cuántas anomalías (algunas de ellas del propio Thoth). Las probabilidades son escasas, lo sé. Pero tenemos cerebro, determinación y mucho mano de pájaro. Si lo hacemos bien, podremos detener este apocalipsis.

Que Medila nos ayude a todos nosotros.
— Dr. Frederick Hoygull,
Jefe de la División Aviar

—

PRIMERA TEMPORADA

THE BIRDEMIC²

La Historia Principal

LECTURA OBLIGATORIA

SCP-3095: Pájaro es la Palabra

by notgull

PARTE UNO: Juicio Final

1.	SCP-3662: El Reloj del Juicio Final	por Ayers
2.	SCP-3296: El Náufrago	por notgull
3.	Relato: Uníos a la Bandada	por notgull
Recomendado: SCP-2785: Autómata Auto Replicante por notgull
4.	Relato: Relatos del Autómata: El Gran Pájarocalipsis	por notgull
5.	SCP-3362: Un Self-Insert Forzado	por notgull

INTERLUDIO

6.

Formato GdI: SPC-507: ANIQUILABISMOS ÁVIDO

por Lt Flops

PARTE DOS: Migración

7.	EE-3570: El Umbral del Ultimátum	by Lt Flops
8.	Formato GdI: El Sagrado Dyehuty	por Lt Flops y Ayers
9.	SCP-3632: Nibirdu	por Quantum Physician
10.	Relato: Antología Aviar I	por Equipo Pájaro
11.	Relato: SECUENCIA_MIGRATORIA_DEL_UMBRAL.txt	por Lt Flops
12.	Relato: Antología Aviar II	por Equipo Pájaro

Equipo Pájaro = todo el maldito equipo

---

INTERMISIÓN

Historias del Multiverso del Equipo Pájaro

---

Relato: El Aroma de una Tostadora		por notgull
Relato: Mi Imperio de Pájaros		por notgull
Formato GdI: El Guion De Codornices del Destino		por Uncle Nicolini
SCP-4688: Cascos de Bicicleta Manipulativos		por Mew-ltiverse y notgull
Relato: Diario de Eric		por Mew-ltiverse y notgull
Relato: Un Objetivo Determinado		por The_Spider_Queen
Relato: Reseñas de Bill: El Pájaro es la Palabra		por YellowISlol

---

SEGUNDA TEMPORADA

“BIRDEMIC 2: SHOCK AND TERROR”

Una Antología del Equipo Pájaro

---

SCP-4248: Alfabeto y Omega		por notgull
Relato: Documento recuperado de un Universo Paralelo		por notgull
Precuela: SCP-4795: Amigos Emplumados / Endemoniados		por Mew-ltiverse y Lt Flops
Relato: A 1 Metro Bajo Tierra I		por notgull
Relato: A 1 Metro Bajo Tierra II		por notgull
Relato: A 1 Metro Bajo Tierra III		por notgull

---

TEMPORADA 3

"THE SKY MAY BE"³

10.000 años después del Apocalipsis

---

Relato: Persiguiendo Soles		por notgull
Relato: Hacia Abajo		por notgull
Relato: Santuario Olvidado		por notgull

—

---

PÁGINA DE ARTE DEL EQUIPO PÁJARO

¡Por la magnificiente The_Spider_Queen!

---

EE-3570 por The_Spider_Queen

> ¡Mírala! <

—

¿Qué pasa si no puedo/no quiero leer todas estas páginas?

El Orden Machete⁴ oficial del Equipo Pájaro es el siguiente:

SCP-3095 ► EE-3570 ► Antología Aviar I ► SECUENCIA_MIGRATORIA_DEL_UMBRAL.txt ► Antología Aviar II

EE-3570 resumirá el escenario para ti, y las Antologías Aviarias + Secuencia del Umbral es donde está toda la acción. Si quieres, o si realmente no tienes tiempo, también puedes saltarte SCP-3095, ya que se puede resumir como "aves que son científicos que trabajan para la Fundación".

Sin embargo, si tienes tiempo, te recomendamos que leas el resto del material. Esto te dará más contexto a este universo, ¡y todo es realmente, realmente buen material!

—

BLASÓN DE LA DIVISIÓN AVIAR

¡Diseño del logotipo de la División Aviar por la asombrosa EstrellaYoshte!
> Página de Arte <

_{Hub creado por Lt Flops y notgull.
Obras de arte seleccionadas creadas por Mendelssohn, The_Spider_Queen y EstrellaYoshte.
EQUIPO PÁJARO MEJOR EQUIPO}

Footnotes

1. N del T: El nombre del DM, es una referencia al meme Begone Thot, que se usa para despreciar o alejar a una thot u otros sinónimos de mujer promiscua. En este contexto, el DM se ha formado para vencer a Thoth, el antagonista principal de este escenario.

2. N del T: El título de las dos primeras temporadas, hacen referencia a la película Birdemic: Shock and Terror, una película de bajo presupuesto "inspirada" en la película Los Pájaros de Alfred Hitchcock. Trata sobre una pareja que consuma su relación mientras descubre signos de una bandada de halcones y buitres mutados por el cambio climático, expulsando ácido y explotando en llamas al morir.

3. N del T: El título de esta temporada proviene de un WAD creado en 1997 del mismo nombre de temática semihumorística con mayor información aquí. El título de los relatos son el título de los tres primeros mapas del WAD Sunlust. Más información sobre Sunlust se puede encontrar aquí y una pequeña definición de WAD aquí.

4. N del T: Argot para orden definitivo. Popularizado por una forma de ver Star Wars