Tema Inkblot

[[iftags +theme]]

What this is

A bunch of miscellaneous CSS improvements. "Improvements" is subjective. I do not care.

If you're not me, which you're not (I think), then you definitely shouldn't use this theme because it may break, disappear, or change in a way that you don't like at any time; and I promise you that if I want to add something to this I will without asking your permission or checking whether or not it breaks your article. There's a reason this isn't on the main wiki. But other than that go wild.

Usage

[[include :topia:cqb:css]]

Using this on a page tagged 'theme'? You'll need to manually stop all these usage instructions from appearing:

[[div style="display: none;"]]
[[include :topia:cqb:css]]
[[/div]]

Improvements

Reasonably-sized footnotes

Stops footnotes from being a million miles wide, so that you can actually read them.

.hovertip { max-width: 400px; }

I'd add a demonstration, but I've included this component to a bunch of other template pages and it messes them up. You'll just have to trust me on this one.

Monospace edit/code

Makes the edit textbox monospace, and also changes all monospace text to Fira Code, the obviously superior monospace font.

@font-face{
    font-family: 'Fira Code';
    src: url('https://raw.githubusercontent.com/tonsky/FiraCode/master/distr/eot/FiraCode-Regular.eot') format('embedded-opentype'),
    url('https://raw.githubusercontent.com/tonsky/FiraCode/master/distr/woff2/FiraCode-Regular.woff2') format('woff2'),
    url('https://raw.githubusercontent.com/tonsky/FiraCode/master/distr/woff/FiraCode-Regular.woff') format('woff'),
    url('https://raw.githubusercontent.com/tonsky/FiraCode/master/distr/ttf/FiraCode-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
: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}}).

tt {
  background-color: var(--swatch-something, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

Fuck off bigfaces

Stops big pictures from appearing when you hover over someone's avatar image, because they're stupid and I hate them.

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

Breaky breaky

Break links if I want them to

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

Code colours

Add my terminal's code colours as variables

: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 {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.5rem solid var(--c-comment);
  border-radius: 2rem;
}

Debug mode

Draw lines around anything inside .debug-mode.

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
}
.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; }

[[/iftags]]

El

Tema

Inkblot

Un tema para reseñas.
Por CroquemboucheCroquembouche.
Lectura de 5 minutos
⭐⭐⭐⭐★

pancakes.png
Puntuación: +1+x

Esta página es un par de cosas:

  1. La fuente del Tema Inkblot.
  2. Una guía para escribir para el Estudio Waldon.
  3. Una demostración de cómo se ve el tema en un contexto textual de forma larga.

El Tema Inkblot está diseñado para reseñas de restaurantes Ambrose según lo escrito por el Estudio Waldon, que es, supongo, un sub-GdI de Ambrose. Pero puedes usarlo para cualquier cosa.

Las instrucciones de uso están debajo del preámbulo


Preámbulo

En el universo, el Estudio Waldon reemplaza ‘Guía Michelin Online, desarrollada en la Dark Web1 en mi headcanon porque no me gusta mucho la idea de ser demandado por la verdadera Guía Michelin por infracción de la propiedad intelectual.

El formato de Ambrose, actualmente, se está haciendo un flaco favor. Muchos artículos de Ambrose consisten en un conjunto de elementos de menú no relacionados, seguidos de un conjunto de reseñas no relacionadas. Es un enfoque de escopeta2, es aburrido, no hay un hilo narrativo que seguir, no hay nada que te interese. Incentiva a sus lectores a ser desinteresados. Las listas repelen la atención. Incluso si lo haces bien y superas esas limitaciones, ¿por qué estar limitado en primer lugar?

Es una pena, porque el formato de Ambrose es muy prometedor. Las reseñas, si se entrelazan, podrían contar una historia interconectada. El menú es una idea fantástica, ¡ningún otro formato de GdI fomenta este tipo de creatividad! Esto es lo que el formato de Ambrose se suponía que era originalmente.3 Pero es difícil pensar en todos los pequeños detalles que hacen que este formato sea mágico, y mucho más fácil crear algo que se vea bien, pero que no lo sea.

El Estudio Waldon es una visión diferente del formato de Ambrose. El Estudio Waldon toma una cosa y la lleva a cabo: una compleja y profunda revisión de una sola cosa y todos sus aspectos. Un hilo en el que centrarse. Sin distracciones. Eso significa que en un formato de Ambrose escrito por el Estudio Waldon, verás sólo una reseña. Hay menos partes móviles que se interpongan en el camino de escribir una buena historia, mientras que se mantiene abierto para el mismo nivel de creatividad visual.

El Estudio Waldon no tiene un hub, porque me lo acabo de inventar, así que supongo que esto servirá. El Estudio Waldon es un pequeño equipo de críticos, tal vez diez personas como máximo, que intentan abrirse camino en la industria de las críticas (lo intentan y fracasan, pero nunca lo admiten). El jefe es el Sr. Waldon Pond. Se centran en críticas de alta calidad de cosas de alta calidad. Tienen una profunda apreciación de los pequeños detalles, a menudo a costa de los más grandes - como no darse cuenta de que el restaurante en el que han entrado es en realidad una trampa mortal anómala. A tal efecto, un tema de una reseña del Estudio Waldon podría ser el conflicto entre algo que es obvio para el lector, pero que el propio crítico del universo ignora totalmente.

Pero oye, es solo un tema. Puedes hacer lo que quieras.


Uso

Hay algunos pasos para usar este tema:

  1. Añadir el tema.
  2. Configurar el tema.
  3. Hacer el encabezado especial.

Añadir el tema.

Para añadir este tema a una página, copia el siguiente código en ella, idealmente cerca de la parte superior de la página junto con cualquier otro CSS.

[[include :lafundacionscp:theme:inkblot]]

[[module CSS]]
:root {
--inkblot-accent: transparent;
--header-title: "ESTUDIO WALDON";
--header-subtitle: "conocedores de lo desconocido";
}
[[/module]]

(Puedes hacer un div con forma de lo anterior añadiendo la clase inksplot a él.)

Configurar el tema

Para configurar el tema, cambia los valores de las tres variables CSS.

El —inkblot-accent determina el color de las pequeñas burbujas y cosas alrededor de la página. Si lo dejas fuera, o no lo cambias del código de arriba, el color por defecto es 'transparente', lo que significa que esas pequeñas burbujas y cosas son invisibles.

Tengo una petición: Por favor, no uses el mismo color de acento que otro artículo con Inkblot. Esta página temática usa el color 'coral**', así que está cogido. Escoje un nuevo color. No va a haber muchas páginas que usen este tema, así que no debería ser una elección difícil.

(Puedes ver qué páginas usan este tema yendo al final de la página, abriendo "+ Opciones" y haciendo clic en "Retroenlaces").

Intenta elegir un color sobre el que puedas ver el texto negro. Si debes elegir un color oscuro, asegúrate de ajustar el color de la fuente de los botones de votación para que sean visibles, y podrás averiguar cómo hacer que el encabezado de Inkblot funcione con él tú mismo.

Las otras dos variables cambian el texto del encabezado.

Hacer el encabezado de Inkblot

El Tema Inkblot oculta el título de la página por defecto, así que tendrás que hacerte el tuyo propio. Puedes poner el texto que quieras en él, pero te ruego, por favor, usa el mismo texto que el título de la página actual. Por favor.

Has visto un encabezado Inkblot normal en la parte superior de la página, así que aquí hay otro, excepto que ahora está etiquetado y cada elemento HTML tiene un esquema dibujado a su alrededor.

.inkblot-header

.inkblot-title

Pon

El Texto

Qué

quieras.

.inkblot-info

Esto es un comentario sobre la reseña.
Por algún imbécil.
Lectura de 5 minutos.
⭐★★★★

.inkblot-image

pancakes.png

Se puede ver, con suerte, que la parte del título del encabezado se compone de cuatro subsecciones, cada una de las cuales contiene una o dos palabras. Creo que esta es una forma bastante clara y visualmente interesante de dividir el título.

La sección de información debería contener alguna información sobre la reseña. Mi sugerencia… ¿De qué es esta reseña? ¿Quién la escribió? ¿Cuánto tiempo llevará leerla? ¿Y qué tan buena es la cosa que está siendo reseñada?

La imagen puede ser cualquier cosa. Probablemente es bastante normal que sea una foto de la persona que hace la reseña. Tal vez este tema fue hecho para tortitas. Yo evitaría hacer una foto de la cosa que se está revisando…

Este encabezado tendrá las tres secciones en una fila en el escritorio, pero en el móvil, el título tendrá una fila para sí mismo, y la sección de información y la imagen estarán en la siguiente fila.

Puedes ver cómo hacer el encabezado de arriba, incluyendo las cuatro subsecciones del título, abajo. Ten en cuenta que puedes perderte una de las secciones de título, y en su lugar habrá un hueco allí… eso es lo que hice para el título de esta página.

[[div class="inkblot-header"]]

[[div class="inkblot-title"]]
[[div class="title-1"]]
Pon
[[/div]]
[[div class="title-2"]]
**El Texto**
[[/div]]
[[div class="title-3"]]
Que
[[/div]]
[[div class="title-4"]]
//quieras//.
[[/div]]
[[/div]]

[[div class="inkblot-info"]]
Esto es un comentario sobre la reseña.
Por algún imbécil.
Lectura de 5 minutos.
⭐★★★★

[[div class="inkblot-image"]]
[[image pancakes.png]]
[[/div]]
[[/div]]
[[/div]]

Ten en cuenta que el uso de esta disposición de encabezado y título presenta un par de problemas.

  • Debes tener cuidado con la longitud de tu título, o con dividirlo en cuatro partes. Si es demasiado largo, una de las secciones del título podría envolverse en la siguiente línea, haciendo que la lectura sea confusa. Recomiendo tener un título corto que pueda ser fácilmente dividido en cuatro segmentos aproximadamente iguales.
  • Si el título es demasiado largo, o hay demasiado texto en la sección de información, eso podría desbordarse o superponerse también. Intenta no añadir demasiado.

No tienes que usar la extraña cuadrícula del título, o la sección de información, o tener una imagen. Puedes añadir y eliminarlos como quieras. Ni siquiera necesitas usar la clase .inkblot-header — todo lo que hace es mover el encabezado a la mitad del lado izquierdo de la página en el escritorio.

Aquí hay un ejemplo sin la cuadrícula del título, sin la información, sin la imagen y sin .inkblot-header:

Solo un título normal.

[[div class="inkblot-title"]]
//Solo// un título **normal**.
[[/div]]


¿Pero cómo hago un menú de Ambrose?

Esta es la cuestión. Este tema puede estar diseñado para las críticas de Ambrose, pero no viene con un menú de Ambrose.

¿Por qué?

Creo firmemente que la mitad de la diversión de escribir un formato Ambrose es hacer tu propio menú. Me encanta ver nuevos diseños de menús en cada formato de Ambrose. Así que la responsabilidad es tuya… quiero verte usar este tema con tu propio diseño de menú. ¡No importa si es terrible! Todo lo que tiene que ser es algo que te diviertas haciendo.

Si enviara un diseño de menú con este tema, no me mientas y dime que no lo usarías. Lo harías. Lo haría. Y, como diseñador de este tema, puedo hacer lo que quiera.

Si es realmente necesario, puedes copiar un menú de otro formato y ajustar los colores un poco. Pero debes saber que si lo haces, te golpearé con toda la fuerza de un gran negativo y una ligera crítica. Por favor, no lo hagas.


Código fuente

Bien, eso es todo lo que tengo que decir. Aquí está el código fuente.

Si no se indica lo contrario, el contenido de esta página se ofrece bajo Creative Commons Attribution-ShareAlike 3.0 License