That's no blurhash, that's blurnail!

content/demo/index.md

@@ -198,7 +198,7 @@ Alternatively, you can append the following URL anchors. It can be more handy in
 <br />
 <figure>
 
-![Toolbx header image](https://containertoolbx.org/assets/toolbx.gif#full#pixels#transparent#no-hover)
+[![Toolbx header image](https://containertoolbx.org/assets/toolbx.gif#full#pixels#transparent#no-hover)](https://containertoolbx.org)
 <figcaption>Full-width image with an alt text, pixel-art rendering, no shadow and rounded corners, and no zoom on hover</figcaption>
 </figure>
 

sass/_article-list.scss

@@ -321,13 +321,13 @@
 			padding-block-start: 0.5rem;
 		}
 
-		.blurhash {
+		.blurnail {
 			position: absolute;
 			opacity: var(--dim-opacity);
 			z-index: -2;
-			filter: var(--blurhash-blur);
+			filter: var(--blurnail-blur);
 			inset: 0;
-			background-image: var(--blurhash);
+			background-image: var(--blurnail);
 			background-position: center;
 			background-size: cover;
 		}

sass/_article.scss

@@ -84,12 +84,24 @@
 			transform-origin: bottom right;
 			animation: toc-dropdown-open var(--transition);
 
+			:root[dir*="rtl"] & {
+				transform-origin: bottom left;
+				animation: toc-dropdown-open-rtl var(--transition);
+			}
+
 			@keyframes toc-dropdown-open {
 				from {
 					transform: scale(50%) translate(1rem, 1rem);
 					opacity: 0;
 				}
 			}
+
+			@keyframes toc-dropdown-open-rtl {
+				from {
+					transform: scale(50%) translate(-1rem, 1rem);
+					opacity: 0;
+				}
+			}
 		}
 
 		summary {

sass/_variables.scss

@@ -34,7 +34,7 @@
 		--yellow-fg: rgb(248 228 92);
 
 		// FILTERS
-		--blurhash-blur: brightness(25%) blur(1rem);
+		--blurnail-blur: brightness(25%) blur(1rem);
 
 		color-scheme: dark;
 	}
@@ -73,7 +73,7 @@
 
 		// FILTERS
 		--blur: saturate(180%) blur(0.75rem);
-		--blurhash-blur: contrast(25%) brightness(175%) blur(1rem);
+		--blurnail-blur: contrast(25%) brightness(175%) blur(1rem);
 
 		// FONT SIZES
 		--font-size-xx-small: 0.625rem;

templates/partials/articles.html

@@ -73,8 +73,8 @@
 				</div>
 			{%- endif -%}
 			{%- if page.extra.banner -%}
-				{%- set blurhash = resize_image(path=page.colocated_path ~ page.extra.banner, width=16, height=8, op="fill", format="webp") -%}
-				<div class="blurhash" style="--blurhash: url('{{ blurhash.url }}')"></div>
+				{%- set blurnail = resize_image(path=page.colocated_path ~ page.extra.banner, width=16, height=8, op="fill", format="webp") -%}
+				<div class="blurnail" style="--blurnail: url('{{ blurnail.url }}')"></div>
 			{%- endif -%}
 
 		</article>