From 87df5f3ce1d9bc088d41d4b52865ebacec288390 Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Fri, 6 Sep 2024 20:02:59 +0300
Subject: [PATCH] Add hover state to comments QR code for easier scanning

---
 CHANGELOG.md                     |  1 +
 sass/_comments.scss              | 21 +++++++++++++++++++--
 sass/_media.scss                 |  6 ++----
 templates/partials/comments.html |  2 +-
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a6e8102..518c086 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add active state to footer's "Powered by" links.
 - Add active state to footnotes' go back button.
 - Add active state to slider thumb.
+- Add hover style to comments QR code for easier scanning.
 - Add loading animation to "Load Comments" button.
 - Add special `switch` class for checkboxes (#70).
 - Add zoom-on-hover to custom comment emojis.
diff --git a/sass/_comments.scss b/sass/_comments.scss
index c6793c5..60e6cc5 100644
--- a/sass/_comments.scss
+++ b/sass/_comments.scss
@@ -1,14 +1,31 @@
 #comments {
 	#qrcode {
 		float: inline-end;
+		transform-origin: right;
+		cursor: none;
 		box-sizing: content-box;
 		margin-inline-start: 1rem;
 		margin-block-start: 3rem;
 		margin-block-end: 0;
+		outline-color: transparent;
+		outline-style: dashed;
+		outline-width: 0.125rem;
 		background-color: white;
 		padding: 0.75rem;
-		width: 7.8125rem;
-		height: 7.8125rem;
+		width: 7.8125rem; // 125px
+		height: 7.8125rem; // 125px
+
+		:root[dir*="rtl"] & {
+			transform-origin: left;
+		}
+
+		&:hover {
+			transform: scale(2);
+			outline-color: var(--primary-color);
+			outline-offset: 0.25rem;
+			border-radius: var(--rounded-corner-small);
+			padding: 0.5rem;
+		}
 
 		@media only screen and (max-width: 720px) {
 			display: none;
diff --git a/sass/_media.scss b/sass/_media.scss
index a31e85a..c973c4b 100644
--- a/sass/_media.scss
+++ b/sass/_media.scss
@@ -39,24 +39,22 @@ video {
 
 	&.start,
 	&[src*="#start"] {
-		float: left;
+		float: inline-start;
 		transform-origin: left;
 		margin-inline-end: 1rem;
 
 		:root[dir*="rtl"] & {
-			float: right;
 			transform-origin: right;
 		}
 	}
 
 	&.end,
 	&[src*="#end"] {
-		float: right;
+		float: inline-end;
 		transform-origin: right;
 		margin-inline-start: 1rem;
 
 		:root[dir*="rtl"] & {
-			float: left;
 			transform-origin: left;
 		}
 	}
diff --git a/templates/partials/comments.html b/templates/partials/comments.html
index f8b974e..23fdf8b 100644
--- a/templates/partials/comments.html
+++ b/templates/partials/comments.html
@@ -20,7 +20,7 @@
 
 <section id="comments">
 	{%- if config.extra.comments.show_qr -%}
-		<img id="qrcode" class="no-hover pixels" title="{{ macros_translate::translate(key='comments_qr', default='QR code to a Mastodon post', language_strings=language_strings) }}" {%- if config.markdown.lazy_async_image -%}decoding="async" loading="lazy"{%- endif -%} src="https://api.qrserver.com/v1/create-qr-code/?data=https://{{ host }}/@{{ username }}/{{ id }}" />
+		<img id="qrcode" class="pixels" title="{{ macros_translate::translate(key='comments_qr', default='QR code to a Mastodon post', language_strings=language_strings) }}" {%- if config.markdown.lazy_async_image -%}decoding="async" loading="lazy"{%- endif -%} src="https://api.qrserver.com/v1/create-qr-code/?data=https://{{ host }}/@{{ username }}/{{ id }}" />
 	{%- endif -%}
 	<h2>{{ macros_translate::translate(key="comments", default="Comments", language_strings=language_strings) }}</h2>
 	<p>{{ macros_translate::translate(key="comments_description", default="You can comment on this blog post by publicly replying to this post using a Mastodon or other ActivityPub/Fediverse account. Known non-private replies are displayed below.", language_strings=language_strings) }}</p>