RTL fixes and anchor restyle

CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased](https://codeberg.org/daudix/duckquill/compare/v5.2.0...main)
 
+### Changed
+
+- Restly the heading anchors.
+
+## Fixed
+
+- Fix various RTL issues (broken toggles, article list arrow, unmirrored icons).
+
 ## [5.2.0](https://codeberg.org/daudix/duckquill/compare/v5.1.0...v5.2.0)
 
 ### Added

content/_index.md

@@ -1,5 +1,5 @@
 +++
-insert_anchor_links = "right"
+insert_anchor_links = "left"
 title = "Home"
 +++
 

content/blog/_index.md

@@ -6,4 +6,4 @@ page_template = "article.html"
 paginate_by = 2
 +++
 
-Welcome to my quack'in blog, I quack about various stuff, but mostly I'm a demo
+Welcome to my quack'in blog, I quack about various stuff, but mostly I'm a demo.

content/blog/the-quill-of-duck/index.md

@@ -1,5 +1,5 @@
 +++
-authors = ["Duck Quack", "Scrooge McDuck"]
+authors = ["Scrooge McDuck", "Darkwing Duck"]
 title = "The Quill of Duck"
 description = "This is a Duckquill post example, this post has nothing but a bunch of text and random formatting, acting like a demo."
 date = 2023-08-31

sass/_article-list.scss

@@ -26,6 +26,10 @@
 			a:hover::after {
 				transform: none;
 				opacity: 1;
+
+				:root[dir*="rtl"] & {
+					transform: scaleX(-1);
+				}
 			}
 
 			a::after {
@@ -40,6 +44,10 @@
 				width: 1rem;
 				height: 1rem;
 				content: "";
+
+				:root[dir*="rtl"] & {
+					transform: scaleX(-1) translateX(-0.25rem);
+				}
 			}
 		}
 

sass/_article.scss

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

sass/_comments.scss

@@ -32,7 +32,7 @@
 			background-color: transparent;
 
 			&:disabled {
-				animation: loading-fill var(--transition-long) ease-in-out alternate infinite;
+				animation: loading-shimmer var(--transition-long) ease-in-out alternate infinite;
 				transition: none;
 				cursor: not-allowed;
 
@@ -45,7 +45,7 @@
 					transform: none;
 				}
 
-				@keyframes loading-fill {
+				@keyframes loading-shimmer {
 					to {
 						background-position-x: -200%;
 					}

sass/_input.scss

@@ -118,6 +118,10 @@ input[type="checkbox"] {
 			&::before {
 				transform: translateX(1rem);
 				background-color: var(--contrast-color);
+
+				:root[dir*="rtl"] & {
+					transform: translateX(-1rem);
+				}
 			}
 		}
 

sass/_pre-container.scss

@@ -55,11 +55,15 @@
 				transition: var(--transition);
 				width: 1rem;
 				height: 1rem;
+
+				:root[dir*="rtl"] & {
+					transform: scaleX(-1);
+				}
 			}
 		}
 
 		&.active {
-			animation: active-fill var(--transition-long);
+			animation: active-shimmer var(--transition-long);
 
 			button {
 				box-shadow: var(--edge-highlight);
@@ -71,7 +75,7 @@
 				}
 			}
 
-			@keyframes active-fill {
+			@keyframes active-shimmer {
 				to {
 					background-position-x: -200%;
 				}

sass/_zola-anchor.scss

@@ -5,16 +5,31 @@ h4,
 h5,
 h6 {
 	&:hover .zola-anchor {
+		transform: translateY(-0.125em);
 		opacity: 1;
+
+		:root[dir*="rtl"] & {
+			transform: translateY(-0.125em);
+		}
 	}
 }
 
 .zola-anchor {
-	display: inline-block;
+	position: absolute;
+	transform: translateX(0.5rem) translateY(-0.125em);
 	opacity: 0;
 	transition: var(--transition);
-	margin: 0 0.25em;
+	margin-inline-start: calc(-1em + -0.5rem);
 	color: var(--fg-muted-4);
+	line-height: 1;
+
+	@media only screen and (max-width: 832px) {
+		display: none;
+	}
+
+	:root[dir*="rtl"] & {
+		transform: translateX(-0.5rem) translateY(-0.125em);
+	}
 
 	&:hover {
 		color: var(--accent-color);
@@ -34,6 +49,10 @@ h6 {
 		transition: var(--transition);
 		width: 1em;
 		height: 1em;
+
+		:root[dir*="rtl"] & {
+			transform: scaleX(-1);
+		}
 	}
 }
 

templates/partials/articles.html

@@ -76,7 +76,6 @@
 				{%- 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>
 	{%- endfor %}
 </div>