Improve comments styles, use more fitting cursors

CHANGELOG.md

@@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased](https://codeberg.org/daudix/duckquill/compare/v4.7.1...main)
 
+### Added
+
+- Add `external` class to comment timestamp.
+- Add hover state to slider thumb.
+- Add loading animation to "Load Comments" button.
+- Add zoom-on-hover to custom comment emojis.
+- Style mentions and hashtags.
+
+### Changed
+
+- Add margin between comment author name and timestamp.
+- Make comment timestamp more subtle.
+- Set socials icons as CSS variables and not inline styles.
+- Tweak padding of verified instance badge.
+- Use more fitting cursors in some contexts.
+
 ## [4.8.0](https://codeberg.org/daudix/duckquill/compare/v4.7.1...v4.8.0)
 
 ### Added

content/_index.md

@@ -155,6 +155,7 @@ Files named `favicon.png` and `apple-touch-icon.png` are used as favicon and app
 - [enriquekesslerm.com](https://enriquekesslerm.com)
 - [gregorni.gitlab.io](https://gregorni.gitlab.io)
 - [ikergimenez.neocities.org](https://ikergimenez.neocities.org)
+- [kaipeacock.com](https://kaipeacock.com)
 - [luciengheerbrant.com](https://luciengheerbrant.com)
 - [lukoktonos.com](http://www.lukoktonos.com)
 - [mourelask.xyz](https://mourelask.xyz)

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

@@ -17,6 +17,17 @@ disclaimer = """
 - Don't interact with asbestos and moon rocks.
 """
 [extra.comments]
+# Long thread with image
+#
+# host = "mastodon.social"
+# user = "brownpau"
+# id = "104529877688537579"
+#
+# Thread with multiple images per post
+#
+# host = "mastodon.blaede.family"
+# user = "cassidy"
+# id = "112774854109302186"
 host = "toot.community"
 user = "sungsphinx"
 id = "111789185826519979"

sass/_comments.scss

@@ -1,18 +1,15 @@
 #comments {
 	#qrcode {
-		float: right;
+		float: inline-end;
 		box-sizing: content-box;
-		margin: 3rem 0 0 1rem;
+		margin-inline-start: 1rem;
+		margin-block-start: 3rem;
+		margin-block-end: 0;
 		background-color: white;
 		padding: 0.75rem;
 		width: 7.8125rem;
 		height: 7.8125rem;
 
-		:root[dir*="rtl"] & {
-			float: left;
-			margin: 3rem 1rem 0 0;
-		}
-
 		@media only screen and (max-width: 720px) {
 			display: none;
 		}
@@ -22,6 +19,36 @@
 		justify-content: start;
 		gap: 0.25rem;
 		margin-block-start: 2rem;
+
+		#load-comments {
+			background-image: linear-gradient(to right,
+					var(--fg-muted-1) 50%,
+					var(--primary-color-alpha) 75%,
+					var(--fg-muted-1) 100%);
+			background-size: 200%;
+			background-color: transparent;
+
+			&:disabled {
+				animation: loading-fill var(--transition-long) ease-in-out alternate infinite;
+				transition: none;
+				cursor: not-allowed;
+
+				&:hover {
+					background-color: transparent;
+					color: var(--fg-muted-5);
+				}
+
+				&:active {
+					transform: none;
+				}
+
+				@keyframes loading-fill {
+					to {
+						background-position-x: -200%;
+					}
+				}
+			}
+		}
 	}
 
 	#comments-wrapper {
@@ -111,7 +138,7 @@
 
 					&.op {
 						background-color: var(--primary-color-alpha);
-						padding: 0.375rem 0.75rem 0.375rem 0.5rem;
+						padding-inline-start: 0.625rem;
 						color: var(--primary-color);
 
 						&:hover {
@@ -151,18 +178,59 @@
 				display: inline-block;
 				vertical-align: middle;
 				transition: var(--transition);
+				cursor: zoom-in;
 				width: 1.5em;
 				height: 1.5em;
 
 				&:hover {
 					transform: scale(2);
-					cursor: zoom-in;
+				}
+			}
+
+			.mention {
+				display: inline-block;
+				transition: var(--transition);
+				box-shadow: var(--edge-highlight);
+				border-radius: var(--rounded-corner-small);
+				background-color: var(--primary-color-alpha);
+				padding: 0.125rem 0.375rem;
+				line-height: 1.25;
+				text-decoration: none;
+
+				&:hover {
+					background-color: var(--primary-color);
+					color: var(--contrast-color);
+				}
+
+
+				&:active {
+					transform: scale(var(--active));
+				}
+
+				&.hashtag {
+					background-color: var(--fg-muted-1);
+					color: var(--fg-muted-5);
+
+					&:hover {
+						background-color: var(--fg-muted-5);
+						color: var(--fg-contrast);
+					}
 				}
 			}
 
 			time {
 				grid-area: time;
+				margin-block-start: 0.5rem;
 				font-size: 0.875rem;
+				line-height: 1.25;
+
+				a {
+					color: var(--fg-muted-5);
+
+					&:after {
+						background-color: var(--fg-muted-5);
+					}
+				}
 			}
 
 			main {

sass/_footer.scss

@@ -97,6 +97,8 @@
 			}
 
 			.icon {
+				-webkit-mask-image: var(--icon);
+				mask-image: var(--icon);
 				transition: var(--transition);
 				background-color: var(--fg-muted-4);
 				width: 1.5rem;

sass/_input.scss

@@ -5,6 +5,7 @@ input[type="color"] {
 	position: relative;
 	appearance: none;
 	transition: var(--transition);
+	cursor: pointer;
 	border: 0.15rem solid var(--fg-muted-2);
 	background-color: var(--fg-muted-1);
 	width: 1rem;
@@ -119,6 +120,7 @@ input[type="range"] {
 	-webkit-appearance: none;
 	appearance: none;
 	transition: var(--transition);
+	cursor: pointer;
 	box-shadow: var(--edge-highlight);
 	border-radius: 999px;
 	background: var(--primary-color);
@@ -128,23 +130,42 @@ input[type="range"] {
 	&::-webkit-slider-thumb {
 		-webkit-appearance: none;
 		appearance: none;
-		cursor: pointer;
+		transition: var(--transition);
+		cursor: grab;
 		box-shadow: var(--shadow);
 		border-radius: 999px;
 		background-color: white;
 		width: 1.5rem;
 		height: 1.5rem;
+
+		&:hover {
+			transform: scale(1.1);
+			box-shadow: var(--shadow-raised);
+		}
+
+		&:active {
+			cursor: grabbing;
+		}
 	}
 
 	&::-moz-range-thumb {
-		-webkit-appearance: none;
 		appearance: none;
-		cursor: pointer;
+		transition: var(--transition);
+		cursor: grab;
 		box-shadow: var(--shadow);
 		border: none;
 		border-radius: 999px;
 		background-color: white;
 		width: 1.5rem;
 		height: 1.5rem;
+
+		&:hover {
+			transform: scale(1.1);
+			box-shadow: var(--shadow-raised);
+		}
+
+		&:active {
+			cursor: grabbing;
+		}
 	}
 }

sass/_pre-container.scss

@@ -34,6 +34,7 @@
 			background-color: transparent;
 			padding: 0.5rem;
 			line-height: 0;
+			cursor: copy;
 
 			&:hover {
 				box-shadow: var(--edge-highlight);

templates/partials/comments.html

@@ -81,6 +81,7 @@
 
 			let loadCommentsButton = document.getElementById("load-comments");
 			loadCommentsButton.innerHTML = "{{ macros_translate::translate(key='loading', default='Loading', language_strings=language_strings) }}…";
+			loadCommentsButton.disabled = true;
 
 			fetch("https://{{ host }}/api/v1/statuses/{{ id }}/context")
 				.then(function (response) {
@@ -200,6 +201,7 @@
 							let timestamp = document.createElement("time");
 							timestamp.setAttribute("datetime", status.created_at);
 							timestamp.appendChild(permalink);
+							permalink.classList.add("external");
 
 							let main = document.createElement("main");
 							main.setAttribute("itemprop", "text");
@@ -351,6 +353,12 @@
 					}
 
 					loadCommentsButton.innerHTML = "{{ macros_translate::translate(key='reload', default='Reload', language_strings=language_strings) }}";
+				})
+				.catch(function (error) {
+					console.error('Error loading comments:', error);
+				})
+				.finally(function () {
+					loadCommentsButton.disabled = false;
 				});
 		}
 	</script>

templates/partials/footer.html

@@ -58,7 +58,7 @@
 			{%- for link in config.extra.footer.socials %}
 				<li>
 					<a href="{{ link.url | safe }}" rel="{{ rel_attributes }} me" title="{{ link.name }}">
-						<i class="icon" style='mask-image: url("data:image/svg+xml,{{ link.icon }}"); -webkit-mask-image: url("data:image/svg+xml,{{ link.icon }}")'></i>
+						<i class="icon" style='--icon: url("data:image/svg+xml,{{ link.icon }}")'></i>
 						<span>{{ link.name }}</span>
 					</a>
 				</li>