hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add hover state to comments QR code for easier scanning

Browse Source
This commit is contained in:
daudix
2024-09-06 20:02:59 +03:00
parent 971148b3d6
commit 87df5f3ce1
4 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -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 footer's "Powered by" links.
- Add active state to footnotes' go back button. - Add active state to footnotes' go back button.
- Add active state to slider thumb. - Add active state to slider thumb.
- Add hover style to comments QR code for easier scanning.
- Add loading animation to "Load Comments" button. - Add loading animation to "Load Comments" button.
- Add special `switch` class for checkboxes (#70). - Add special `switch` class for checkboxes (#70).
- Add zoom-on-hover to custom comment emojis. - Add zoom-on-hover to custom comment emojis.

21
sass/_comments.scss
View File

@ -1,14 +1,31 @@
#comments { #comments {
#qrcode { #qrcode {
float: inline-end; float: inline-end;
transform-origin: right;
cursor: none;
box-sizing: content-box; box-sizing: content-box;
margin-inline-start: 1rem; margin-inline-start: 1rem;
margin-block-start: 3rem; margin-block-start: 3rem;
margin-block-end: 0; margin-block-end: 0;
outline-color: transparent;
outline-style: dashed;
outline-width: 0.125rem;
background-color: white; background-color: white;
padding: 0.75rem; padding: 0.75rem;
width: 7.8125rem; width: 7.8125rem; // 125px
height: 7.8125rem; 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) { @media only screen and (max-width: 720px) {
display: none; display: none;

6
sass/_media.scss
View File

@ -39,24 +39,22 @@ video {
&.start, &.start,
&[src*="#start"] { &[src*="#start"] {
float: left; float: inline-start;
transform-origin: left; transform-origin: left;
margin-inline-end: 1rem; margin-inline-end: 1rem;
:root[dir*="rtl"] & { :root[dir*="rtl"] & {
float: right;
transform-origin: right; transform-origin: right;
} }
} }
&.end, &.end,
&[src*="#end"] { &[src*="#end"] {
float: right; float: inline-end;
transform-origin: right; transform-origin: right;
margin-inline-start: 1rem; margin-inline-start: 1rem;
:root[dir*="rtl"] & { :root[dir*="rtl"] & {
float: left;
transform-origin: left; transform-origin: left;
} }
} }

2
templates/partials/comments.html
View File

@ -20,7 +20,7 @@
<section id="comments"> <section id="comments">
{%- if config.extra.comments.show_qr -%} {%- 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 -%} {%- endif -%}
<h2>{{ macros_translate::translate(key="comments", default="Comments", language_strings=language_strings) }}</h2> <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> <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>