Esta página es un par de cosas:
- La fuente del Tema Inkblot.
- Una guía para escribir para el Estudio Waldon.
- 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
[[include :lafundacionscp:theme:inkblot]]
[[module CSS]]
:root {
--inkblot-accent: transparent;
--header-title: "ESTUDIO WALDON";
--header-subtitle: "conocedores de lo desconocido";
}
[[/module]]
[[div class="inkblot-header"]]
[[div class="inkblot-title"]]
[[div class="title-1"]]
Título
[[/div]]
[[div class="title-2"]]
Título
[[/div]]
[[div class="title-3"]]
Título
[[/div]]
[[div class="title-4"]]
Título
[[/div]]
[[/div]]
[[div class="inkblot-info"]]
Una crítica de alguna mierda nerd.
Por algún nerd.
Lectura de XX. minutos..
⭐⭐⭐⭐★
[[div class="inkblot-image"]]
[[image pancakes.png]]
[[/div]]
[[/div]]
[[/div]]
Preámbulo
En el universo, el Estudio Waldon reemplaza ‘Guía Michelin Online, desarrollada en la Dark Web’ 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 escopeta, 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. 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:
- Añadir el tema.
- Configurar el tema.
- 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.
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:
[[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.
/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Prata&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;600&display=swap');
/* Set the font size back to normal */
#page-content { font-size: 1rem; }
body { font-family: 'Libre Baskerville', serif; }
/* Hide the page title. I'll make my own damned title */
#page-title { display: none; }
/* - == === CUSTOM SYNTAX === == - */
/* The inkblot header contains the title and the info box thingy */
.inkblot-header {
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
position: relative;
margin: 1rem 0 3rem;
width: 100%;
left: 0;
max-width: none !important; /* override #page-content div */
}
@media (min-width: 768px) {
/* On desktop, header expands over the top of the sidebar */
.inkblot-header {
width: calc(100% + 18 * 0.82rem);
left: calc(-18 * 0.82rem);
}
}
/* The inkblot title is a grid */
.inkblot-title {
flex: 1 1 0;
font-size: min(4rem, 10vw);
font-family: 'Prata', serif;
display: inline-grid;
grid-template-areas:
"one two"
"three four";
grid-gap: 0.1em;
max-width: 100%;
position: relative;
margin: 1rem;
}
.inkblot-title::before {
content: "";
border-radius: 74% 26% 27% 77% / 74% 38% 73% 38%;
background-color: var(--inkblot-accent, transparent);
position: absolute;
height: 40%; width: 100%; top: 50%; left: 50%;
transform: translate(-50%, -50%) skewY(-6deg);
max-width: min(50vw, 80%);
}
.inkblot-title > * { z-index: 1; white-space: nowrap; }
.inkblot-title .title-1 { grid-area: one; place-self: start end; }
.inkblot-title .title-2 { grid-area: two; place-self: start start; }
.inkblot-title .title-3 { grid-area: three; place-self: start end; }
.inkblot-title .title-4 { grid-area: four; place-self: start start; }
.inkblot-title p { margin: 0; line-height: 1em; text-align: center; }
/* Italics encroach to the right a bit, so push them back */
.inkblot-title > em, .inkblot-title .title-1 em, .inkblot-title .title-3 em {
position: relative;
left: -0.1em;
}
@media (max-width: 767px) {
.inkblot-title {
flex-basis: 100%;
}
}
/* The info box is itself a flex container */
.inkblot-info {
flex: 1 1 0;
text-align: center;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
.inkblot-info > p {
min-width: 12.5rem;
}
/* On desktop, if the header overflows onto two rows, it will overlap the sidebar.
* The max-width of the info thingy is reduced so it won't be wider than #page-content.
* justify-content:flex-end on .inkblot-header pushes it to the right.
* !important to override wikidot's default max-width on everything
*/
@media (min-width: 768px) {
.inkblot-info {
max-width: calc(100% - 18 * 0.82rem) !important;
}
}
/* The image should only be styled fancy inside the info section.
* It could be easily modified to allow a fancy image outside of the info
* section, but I don't want to do that, because this arrangement is necessary
* for proper line-wrapping on mobile, and the misformatted image acts as a
* good indicator that something has gone wrong.
*/
.inkblot-info .inkblot-image { flex: 0 1 10rem; min-width: 10rem; }
.inkblot-info .inkblot-image img {
border-radius: 65% 35% 43% 57% / 41% 35% 65% 59%;
box-shadow: 0.5rem 0 var(--inkblot-accent, transparent);
/* The height is 8rem, but I want it slightly bigger */
height: 10rem; width: 10rem;
margin: -1rem 0;
}
/* The inksplot class makes anything blobby */
.inksplot {
border-width: 0.5rem;
border-style: solid;
border-color: var(--inkblot-accent); /* if no accent, will not override */
padding: 2rem 4rem;
margin: 1rem -3rem;
border-radius: 38% 95% 94% 42% / 62% 56% 84% 75%;
}
/* On mobile, the inkblot is rectangular and boring to save space */
@media (max-width: 960px) and (min-width: 767px), (max-width: 650px) {
.inksplot {
padding: 1rem;
border-radius: 5rem / 3rem;
margin: 1rem -1rem;
}
}
/* - == === DISTRIBUTED BLOBS === == - */
/* I want some blobs of colour down the page.
* Thankfully, Wikidot gives me some extra dives to play with:
* 6 in #container-wrap-wrap and 3 in #container.
* They are #extra(c?)-div-[1-6]. That's a lot of selectors. */
#container-wrap-wrap, #container { position: relative; overflow: hidden; }
/* Based on CSS by Murray Smith (CC BY-SA 3.0)
* https://stackoverflow.com/a/14451916/4958427 */
[id^=extra][id*=-div-] {
position: absolute;
z-index: -1;
pointer-events: none;
--content-width: min(1040px, 100vw);
--content-margin: calc(50vw - var(--content-width) / 2);
--blob-width: 30rem;
--blob-radius: calc(var(--blob-width) * 0.67);
background-color: var(--inkblot-accent, transparent);
top: var(--top-offset);
transform: rotate(var(--rotation))
translate(calc(var(--sin-rotation) * 0.866 * var(--blob-radius) / 2),
calc(-1 * var(--cos-rotation) * 0.866 * var(--blob-radius) / 2))
skewX(-30deg)
scale(1, 0.866);
}
[id^=extra][id*=-div-]:before,
[id^=extra][id*=-div-]:after {
content: '';
position: absolute;
background-color: inherit;
}
[id^=extra][id*=-div-],
[id^=extra][id*=-div-]:before,
[id^=extra][id*=-div-]:after {
width: var(--blob-width); height: var(--blob-width);
border-top-right-radius: 95%;
}
[id^=extra][id*=-div-]:before {
transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707) translate(0,-50%);
}
[id^=extra][id*=-div-]:after {
transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%);
}
/* A lot of maths went into this.
* To centre a triangle onto its container, it needs the following translation:
* where A is the angle of rotation:
* x:
* sin(N)
* * 0.866 (scale offset)
* * radius
* / 2
* y:
* -1
* * cos(N)
* * 0.866 (scale offset)
* * radius
* / 2
* Triangles have an order of symmetry around 120deg, so any angles above that
* are pointless.
*/
#extra-div-1,
#extra-div-3,
#extra-div-5,
#extrac-div-1,
#extrac-div-3 {
right: calc(var(--blob-radius) * -2 + var(--content-margin));
}
#extra-div-2,
#extra-div-4,
#extra-div-6,
#extrac-div-2 {
left: calc(var(--blob-radius) * -2 + var(--content-margin));
}
#extra-div-1 {
--blob-width: 30rem;
--top-offset: 800px;
--rotation: 53.33deg; --sin-rotation: 0.802; --cos-rotation: 0.597;
}
#extra-div-2 {
--blob-width: 30rem;
--top-offset: 1600px;
--rotation: 40deg; --sin-rotation: 0.642; --cos-rotation: 0.766;
}
#extra-div-3 {
--blob-width: 20rem;
--top-offset: 2400px;
--rotation: 66.66deg; --sin-rotation: 0.918; --cos-rotation: 0.396;
}
#extra-div-4 {
--blob-width: 15rem;
--top-offset: 3200px;
--rotation: 13.33deg; --sin-rotation: 0.231; --cos-rotation: 0.973;
}
#extra-div-5 {
--blob-width: 40rem;
--top-offset: 4000px;
--rotation: 26.66deg; --sin-rotation: 0.448; --cos-rotation: 0.893;
}
#extra-div-6 {
--blob-width: 25rem;
--top-offset: 4800px;
--rotation: 106.66deg; --sin-rotation: 0.958; --cos-rotation: -0.286;
}
#extrac-div-1 {
--blob-width: 15rem;
--top-offset: 5600px;
--rotation: 93.33deg; --sin-rotation: 0.998; --cos-rotation: -0.058;
}
#extrac-div-2 {
--blob-width: 10rem;
--top-offset: 6400px;
--rotation: 120deg; --sin-rotation: 0.855; --cos-rotation: -0.500;
}
#extrac-div-3 {
--blob-width: 7rem;
--top-offset: 7200px;
--rotation: 80deg; --sin-rotation: 0.984; --cos-rotation: 0.173;
}
/* - == === HEADER === == - */
/* Replace the header background */
/* 324px is twice the height of the default header */
div#container-wrap { background: url(http://topia.wdfiles.com/local--files/cqb%3Areview-theme/inkblot-header.svg) top left/100% 648px no-repeat; }
#header { background: radial-gradient(circle at left 75px top 90px, var(--inkblot-accent, transparent) 42px, transparent 42.5px); }
/* Replace the header text */
/* Centre the text into the middle of the header */
#header h1, #header h2 { margin-left: 0; float: none; text-align: center; }
/* Move the subtitle down a smidge */
#header h2 { margin-top: 0.3rem; }
/* Hide the existing text */
#header h1 span, #header h2 span { font-size: 0; }
/* Style the new text */
#header h1 a::before, #header h2::before {
color: #333;
font-family: 'Montserrat', sans-serif;
text-shadow: none;
}
/* Set the new text's content from variable */
#header h1 a::before {
content: var(--header-title, "ESTUDIO WALDON");
font-weight: 300;
}
#header h2::before {
content: var(--header-subtitle, "conocedores de lo desconocido");
font-weight: 600;
}
/* Hide the search box and tuck the button next to the login */
#search-top-box { top: 10px; transform: translateY(-7%); }
#search-top-box-form > input[type=text] { display: none; }
#search-top-box-form > input[type=submit] {
background:
url(http://topia.wdfiles.com/local--files/cqb%3Areview-theme/magnifying-glass.svg) 50%/0.8rem no-repeat,
var(--inkblot-accent, transparent)
!important /* don't revert on mouseover */;
border: none;
border-radius: 50%;
font-size: 0;
height: 1.5rem; width: 1.5rem;
}
#login-status { right: calc(10px + 2rem); color: #333a; }
#login-status a { color: #b01a; }
/* - == === TOPBAR === == - */
#top-bar { display: flex; justify-content: center; right: 0; }
#top-bar a { color: #333d; }
/* - == === SIDEBAR === == - */
/* Move the side bar down, out of the way of the inkblot header */
@media (min-width: 768px) {
#side-bar { top: 12rem; }
}
/* Make the sidebar look pretty */
/* Keep the side block colours - I like them */
#side-bar .side-block {
border: none;
border-radius: 0.5rem;
box-shadow: none;
}
#side-bar .heading {
margin: 0.6rem 0 0.5rem;
padding: 0;
color: #000a;
height: 1rem;
display: flex;
justify-content: space-around;
align-items: center;
border: none;
}
#side-bar .heading::before, #side-bar .heading::after {
content: "";
height: 1px;
box-sizing: border-box;
border-bottom: 1px dotted #333;
margin: 0.1rem 0.5rem 0;
flex: 1 1 0;
}
#side-bar .menu-item > img {
visibility: hidden;
}
/* !important to override wikidot style */
.open-menu a {
border-radius: 1px;
border: none !important;
border-left: 0.25rem solid var(--inkblot-accent, #333) !important;
border-right: 1px dotted #333 !important;
}
@media (max-width: 767px) {
#side-bar {
background-image:
radial-gradient(
circle at left 10% top 90%,
var(--inkblot-accent, white) 25%,
transparent 25%
),
linear-gradient(-75deg, #ccc 30%, white 30%);
border-right: 4px dotted #444 !important;
background-clip: padding-box;
}
}
/* - == === RATING MODULE === == - */
.page-rate-widget-box { box-shadow: none; }
.page-rate-widget-box {
display: inline-flex;
justify-content: flex-end;
align-items: center;
border-radius: 0;
border-width: 1px 0;
border-style: dotted;
border-color: #333;
padding: 0.1rem;
margin-right: 3rem;
}
div.page-rate-widget-box .rate-points,
.page-rate-widget-box .cancel {
background-color: transparent !important;
border-radius: 0;
border: none;
color: #333 !important; /* override reset when bottom rating opened */
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown,
.page-rate-widget-box .cancel {
background-color: var(--inkblot-accent, transparent);
border-radius: 50%;
border: none;
color: #333;
height: 1.5rem; width: 1.5rem;
position: relative;
margin-left: 0.25rem;
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a,
.page-rate-widget-box .cancel a {
position: absolute;
display: block;
top: 0; left: 0; height: 100%; width: 100%;
text-align: center; line-height: 1.5rem;
color: #333;
padding: 0;
margin: 0;
font-weight: bold;
}
.page-rate-widget-box .cancel a { color: transparent; }
.page-rate-widget-box .cancel a::after {
content: "✖";
position: absolute;
color: #333;
top: 0; left: 0; height: 100%; width: 100%;
}
.page-rate-widget-box .rateup a:hover { background-color: limegreen; }
.page-rate-widget-box .ratedown a:hover { background-color: tomato; }
.page-rate-widget-box .cancel a:hover {
color: transparent;
background-color: transparent;
border-radius: 0;
}
/* Info module compatibility */
/* More specific because will probably be imported before the info module */
#page-content .rate-box-with-credit-button {
background: none;
border-radius: 0;
box-shadow: none;
border-width: 1px 0;
border-style: dotted;
border-color: #333;
display: flex;
align-items: center;
}
.rate-box-with-credit-button .page-rate-widget-box {
border: none;
}
.creditButton {
height: 1rem;
width: 1rem;
background-color: var(--inkblot-accent, transparent);
border-radius: 50%;
}
#page-content .creditButton p a {
color: #333;
border: none;
line-height: 1rem;
margin-left: 0;
}
/* - == === IMAGE BLOCKS === == - */
.scp-image-block {
border: none;
border-top: 1px dotted #333;
box-shadow: none;
}
.scp-image-block .scp-image-caption {
background: none;
border-top: solid 0.25rem var(--inkblot-accent, transparent);
padding-top: 0.5rem;
font-weight: normal;
}
.scp-image-block img {
padding: 0.5rem;
box-sizing: border-box;
}
@media (min-width: 768px) {
.scp-image-block.block-left {
margin-left: -100px;
}
}
@media (min-width: 1250px) {
.scp-image-block.block-right {
margin-right: -100px;
}
}
@media (max-width: 600px) {
.scp-image-block.block-left, .scp-image-block.block-right {
float: none; clear: both; margin-left: auto; margin-right: auto;
}
}
/* - == === OTHER STUFF === == - */
#page-content h1, #page-content h2, #page-content h3,
#page-content h4, #page-content h5, #page-content h6 {
font-family: 'Libre Baskerville', serif;
color: #333;
margin: 1em 0 0.5em 0;
letter-spacing: 0;
}
#page-content h1 {
font-family: 'Prata', serif; font-size: 3rem; text-align: center;
}
#page-content h2 { font-size: 2rem; font-weight: bold; }
hr {
margin: 3rem;
height: 1rem;
background: radial-gradient(circle at center, var(--inkblot-accent, transparent) 0.375rem, transparent calc(0.375rem + 0.5px));
display: flex;
justify-content: space-around;
align-items: center;
}
hr::before, hr::after {
content: "";
height: 1px;
box-sizing: border-box;
border-bottom: 1px dotted #333;
width: calc(50% - 3rem);
}
.page-tags span {
border-top: 1px dotted #333;
}
.footnotes-footer {
margin-top: 2rem;
}
#page-content {
margin-bottom: 2rem;
}
#footer {
background: transparent;
}
#footer a {
color: black;
}
#breadcrumbs {
text-align: right;
margin-right: 4rem;
font-style: italic;
}
.licensebox22 {
font-size: 0.82rem;
font-family: verdana, arial, helvetica, sans-serif;
margin: 1rem 0 -1.5rem;
}
span, a {
word-break: normal;
}
