Merge pull request #61 from spacenomads/post/ex-libris

Post/ex libris

.eleventy.js

@@ -96,7 +96,6 @@ module.exports = function (config) {
 
 
 	config.addNunjucksFilter('filterByYear', function(collection, year) {
-
 		return collection
 			.filter(post => {
 				return year === post.data.date.getFullYear();
@@ -127,7 +126,20 @@ module.exports = function (config) {
 	});
 
 
+	config.addNunjucksFilter('getWordGender', function(str) {
+		const strAbbr = str.toUpperCase();
+		const GENDER = {
+			M: 'Nombre masculino',
+			H: 'Nombre femenino'
+		};
+		if (!GENDER[strAbbr]) return '';
+		return `<abbr title="${GENDER[strAbbr]}">${ str }.</abbr> `;
+	});
+
 
+	config.addNunjucksFilter('getWordSynonyms', function(list) {
+		return `<abbr title="Sinónmimo o afín">Sin.</abbr>: ${list.join(', ')}.`;
+	});
 
 
 	return {

_src/_templates/components/post/macros.njk

@@ -39,6 +39,19 @@
 	</figure>
 {%- endmacro -%}
 
+{%- macro word(config) -%}
+	<figure class="post__word">
+		<dl class="post__word-block">
+			<dt class="post__word-title">{{ config.word }}</dt>
+			{%- if config.note -%}<dt class="post__word-note">{{ config.note }}</dt>{%- endif -%}
+			{%- for item in config.content -%}
+			<dd class="post__word-definition">{{ item.gender | getWordGender | safe }}{{ item.def }}</dd>
+			{%- endfor -%}
+		</dl>
+		{%- if config.synonyms -%}<p class="post__word-synonyms">{{ config.synonyms | getWordSynonyms | safe }}</p>{%- endif -%}
+	</figure>
+{%- endmacro -%}
+
 
 {%- macro img(config) -%}
 <figure class="post__media post__media--{{ config.mode }}">

_src/assets/_scss/components/_home-posts.scss

@@ -378,11 +378,12 @@
 		.home-posts__item {
 			&:nth-child(1) {
 				grid-row: span 2;
-				grid-column: span 6;
+				grid-column: span 4;
 			}
-			&:nth-child(2) {
-				grid-row: span 3;
-				grid-column: span 6;
+			&:nth-child(2),
+			&:nth-child(3) {
+				grid-row: span 2;
+				grid-column: span 4;
 			}
 		}
 	}
@@ -394,8 +395,12 @@
 				grid-column: span 6;
 			}
 			&:nth-child(2) {
-				grid-row: span 4;
-				grid-column: span 6;
+				grid-row: span 2;
+				grid-column: span 4;
+			}
+			&:nth-child(3) {
+				grid-row: span 2;
+				grid-column: span 2;
 			}
 		}
 	}

_src/assets/_scss/components/_post.scss

@@ -10,6 +10,7 @@
 //    5. TL;DR
 //    6. Quotes
 //    7. YA image
+//    8. Word
 //
 // ***
 
@@ -522,3 +523,128 @@
 	width: core.rem(core.$unit * 7);
 	height: core.rem(core.$unit * 7);
 }
+
+
+
+
+
+// 8. Word
+// ---
+.post__word {
+	margin: core.rem(core.$unit * 3) 0;
+	padding: 0 0 0 core.rem(core.$unit * 2);
+	position: relative;
+	@include core.font(paragraph);
+
+	@include core.mq(core.$bp-tablet-v) {
+		margin: core.rem(core.$unit * 4) 0;
+		padding: 0 0 0 core.rem(core.$unit * 3);
+		grid-area: content;
+	}
+
+	@include core.mq(core.$bp-desktop) {
+		margin: core.rem(core.$unit * 7) 0;
+		padding: 0 0 0 core.rem(core.$unit * 5);
+	}
+
+	&::before {
+		background: core.$color-white;
+		border-left: core.rem( calc(core.$unit / 2)) solid core.$color-correct-blue;
+		box-sizing: border-box;
+		content: '';
+		height: 100%;
+		left: 50%;
+		position: absolute;
+		top: 0;
+		transform: translateX(-50%);
+		width: 100%;
+		pointer-events: none;
+		z-index: -1;
+	}
+
+	abbr {
+		color: core.$color-correct-blue;
+	}
+}
+
+.post__word-content {
+
+}
+
+.post__word-title {
+	@include core.font(h1);
+	display: flex;
+	align-items: center;
+	gap: core.rem(core.$unit);
+
+	&::before {
+		content: '';
+		width: core.rem(core.$unit * 3);
+		height: core.rem(core.$unit * 3);
+		background: core.img('book-white.svg', core.$theme-icons) center no-repeat core.$color-correct-blue;
+		background-size: 60% auto;
+		display: block;
+		border-radius: 50%;
+
+		@include core.mq(core.$bp-tablet-v) {
+			width: core.rem(core.$unit * 4);
+			height: core.rem(core.$unit * 4);
+		}
+
+		@include core.mq(core.$bp-desktop) {
+			width: core.rem(core.$unit * 5);
+			height: core.rem(core.$unit * 5);
+		}
+	}
+}
+
+.post__word-note {
+	margin-inline-start: core.rem(core.$unit * 4);
+	font-style: italic;
+	margin-block: core.rem(core.$unit);
+	color: core.$color-correct-blue;
+
+	@include core.mq(core.$bp-tablet-v) {
+		margin-inline-start: core.rem(core.$unit * 5);
+	}
+
+	@include core.mq(core.$bp-desktop) {
+		margin-inline-start: core.rem(core.$unit * 6);
+	}
+}
+
+.post__word-definition {
+		margin-inline-start: core.rem(core.$unit * 8);
+		margin-block-start: core.rem(core.$unit * 3);
+		position: relative;
+		counter-increment: section;
+
+		@include core.mq(core.$bp-tablet-v) {
+			margin-inline-start: core.rem(core.$unit * 9);
+		}
+		@include core.mq(core.$bp-desktop) {
+			margin-inline-start: core.rem(core.$unit * 11);
+		}
+
+		&::before {
+			content: counter(section) '.';
+			color: core.$color-correct-blue;
+			position: absolute;
+			inset-inline-start: 0;
+			transform: translateX(calc((100% + (core.$unit * 1px)) * -1));
+		}
+}
+
+.post__word-synonyms {
+	margin-inline-start: core.rem(core.$unit * 4);
+	margin-block-start: core.rem(core.$unit * 4);
+
+	@include core.mq(core.$bp-tablet-v) {
+		margin-inline-start: core.rem(core.$unit * 5);
+	}
+
+	@include core.mq(core.$bp-desktop) {
+		margin-inline-start: core.rem(core.$unit * 6);
+	}
+}
+

_src/blog/2025/mi-primer-exlibris-chispas/index.md

@@ -0,0 +1,101 @@
+---
+title: Mi primer Exlibris, ¡Chispas!
+featured_image: cover.jpg
+featured_alt: Simulación de cómo quedará el exlibris sobre una textura de papel. Dibujo a línea. En un marco rectangular de bordes redondeados, estamos mi gato y yo abajo, yo con un libro y él (dormido) con un eReader sin batería. sobre nosotros hay una bombilla feliz colgando y, en el centro, el texto del Exlibris con nuestros nombres y el año en números romanos.
+featured_color: d4d4d4
+ya_image: stamp.png
+ya_alt: Icono blanco de silueta de sello de madera, con la parte de caucho en negro, sobre círculo amarillo.
+reading_time: 5
+date: 2025-01-19
+draft: false
+categories: [bookcrossing, design, hobbies]
+tags: [exlibris, grabado, linóleo, sello, diseño, trazado, ilustración, boceto]
+excerpt: Como ya estoy leyendo de forma habitual y me siento un poco más seguro y menos impostor, me he propuesto hacerme mi primer Exlibris, a mis 51.
+clickbait: ¿Tienes un Exlibris?
+cover_credits:
+  link:
+  author: Chuck!
+  site: sidiostedalimones
+---
+{% import "components/post/macros.njk" as macros %}
+
+Como ya estoy leyendo de forma habitual y me siento un poco más seguro y menos impostor, **me he propuesto hacerme mi primer Exlibris**, a mis 51.
+
+
+
+{% set quoteConfig = {
+  word: 'Exlibris',
+  note: 'Del lat. exlibris; literalmente \'de entre los libros\'.',
+  content: [
+      {
+        gender: 'm',
+        def: 'Etiqueta o sello grabado que se estampa en el reverso de la tapa de los libros, en la cual consta el nombre del dueño o el de la biblioteca a que pertenece el libro.'
+      }
+    ],
+  synonyms: ['ex libris']
+} %}
+{{ macros.word(quoteConfig) }}
+
+Empecé buscando ejemplos y hay desde simplezas hasta maravillas barrocas. Leí también que había medidas máximas y mínimas a tener en cuenta, pero que eran más unas guías.
+
+Luego **encontré a mogollón de gente que se hacía los grabados** y tiene que molar, pero eso para el siguiente.
+
+## El boceto
+
+Este primero decidí que lo iba a hacer menos artesanalmente. Y empecé con un boceto de esos **de papel y lápiz**.
+
+{% set imgConfig = {
+  src: './img/sketch.jpg',
+  alt: 'Boceto sobre papel de la idea para el Exlibris',
+  mode: 'center',
+  caption: 'Boceto a lápiz: aparecemos mi gato y yo leyendo en papel y eReader, y una bombilla por encima nuestro.'
+} %}
+{{ macros.img(imgConfig) }}
+
+De primeras quería hacer algo totalmente diferente, algo con más diseño y con líneas más finas. Algo que tuviese más pinta de **sello serio**.
+
+¿Cómo es la mente, eh? Tras varios días viendo Exlibris de todas las formas sigo como catalogando lo que he hecho de "**dibujo**" y no como algo "**serio**". Le he estado dando bastantes vueltas y lo hago independientemente de la cantidad de horas que haya invertido. Y cuando lo enseño **intento verlo a través de los ojos de la otra persona**, de verdad que lo intento, pero.
+
+Bueno, el caso es que te pones a garabatear y probar y sucede una mezcla de "**la cabra tira al monte**" y "**la vida te lleva por donde te lleva**": me gustó la idea de los dos leyendo y que la biblioteca fuese compartida.
+
+El detalle que más hizo que el dibujo tomase forma fueron **los bocadillos de diálogo**. Intentaba hacer unos bocadillos muy concretos que no conseguí recordar y luego los espacios no me cuadraban del todo, y la bombilla colgando que quería centrada, no podía estarlo y que cupiese todo, así que probando opciones acabé con la forma recuadrando la escena y eliminando los bocadillos.
+
+## Primera versión
+
+El sello iba a ser de 7x7 <abbr title="Centímetros">cm</abbr>. y lo acabé dibujando un poco más pequeño de 6 cm. En donde van a hacer el sello revisaron la imagen y algunos detalles eran demasiado chicos y se iban a perder, como el icono de la batería baja del eReader.
+
+Ellos lo podían hacer más grande al trazarlo porque, aunque la imagen les valía, al final del día se necesita un archivo vectorial. **De ninguna manera quiero que se trace automáticamente**.
+
+## Trazado en vectorial
+
+A ver, que los sistemas de trazado han cambiado muchísimo desde que lo hacía con Corel, creo que 7, pero que hemos venido a jugar, y de alguna manera me sentí un poco mal por no haberlo pensado en un primer momento, así que **lo he re-dibujado en vectorial**.
+
+Y tengo un pequeño vídeo del proceso:
+
+<div style="position: relative; padding-top: 56.25%;" class="post__media"><iframe title="Exlibris: trazado-vectorial" width="100%" height="100%" src="https://veedeo.org/videos/embed/ea1cd078-64d2-4b35-b7f1-7e81136256f9" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" style="position: absolute; inset: 0px;"></iframe></div>
+
+**Me ha costado sangre y lágrimas**. Durante unos años he estado como "cultivando" un estilo y luego he estado año y pico, o dos, sin dibujar y la mano se resiente. Vaya si se resiente.
+
+Creo que lo que más me ha costado del dibujo ha sido **controlar la presión** para que la línea vaya "engordando" y luego cierre con cierta gracia, pero es que no entiendo la gestión de la presión como antes o no es mi mano. Me ha costado, lo que decía sangre y lágrimas.
+
+Tras varias pruebas, conseguí hacer las líneas con un pincel más chico y varios trazos. Y esta es otra tara que llevo porque siento que esa línea la tengo que hacer de un solo trazo aunque **haya visto miles de vídeos de entintadores trabajando la línea pues como han ido necesitando**.
+
+## Ajustes finales
+
+Una vez que tengo los vectores queda tocar un poco la línea y trabajar el archivo.
+
+Hay algunas curvas que tenía que **refinar** para que la curva quedase suave. Y también quería **agrupar** bien los elementos y **colocar** mejor algunos, y asegurarme que no quedaban formas a medio cerrar o con huecos. No es un trabajo muy emocionante, pero es lo suficientemente mecánico para poder concentrarme bien, **que no es poca cosa**.
+
+{% set imgConfig = {
+  src: './img/ex-libris-v0-3-0.jpg',
+  alt: 'Diseño final a línea. En un marco rectangular de bordes redondeados, estamos mi gato y yo abajo, yo con un libro y él (dormido) con un eReader sin batería. sobre nosotros hay una bombilla feliz colgando y, en el centro, el texto del Exlibris con nuestros nombres y el año en números romanos.',
+  mode: 'center',
+  max_width: 400
+} %}
+{{ macros.img(imgConfig) }}
+
+El viernes pasado envié el archivo final y estoy deseando ir a recogerlo y plasmarlo en ese primer libro. ¡**Que todavía no he elegido**!
+
+***
+
+En mi ciudad hay unas **casetillas y estanterías públicas** para dejar libros y que otra persona los pueda disfrutar. El **bookcrossing** de toda la vida, pero en oficial, y quiero participar con algunos libros que me han gustado. **Y ahora los tendré sellados**.