Add hover state to comments QR code for easier scanning

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.

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;

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;
 		}
 	}

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>