From 68f9fd8086642d47f12a66f24de8719836f7f7e6 Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Sun, 21 Jan 2024 16:07:40 +0300
Subject: [PATCH] feat: QR code to the mastodon post used for comments, chnage
 some classes to IDs

---
 sass/_comments.scss              |  5 ++++-
 sass/_johnvertisement.scss       |  2 +-
 sass/_not-found.scss             |  2 +-
 sass/_post-nav.scss              |  2 +-
 sass/_qrcode.scss                | 14 ++++++++++++++
 sass/style.scss                  |  1 +
 templates/404.html               |  2 +-
 templates/blog.html              |  2 +-
 templates/includes/comments.html |  2 ++
 templates/includes/footer.html   |  2 +-
 templates/page.html              |  2 +-
 11 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 sass/_qrcode.scss

diff --git a/sass/_comments.scss b/sass/_comments.scss
index f88f480..30418d6 100644
--- a/sass/_comments.scss
+++ b/sass/_comments.scss
@@ -10,7 +10,6 @@
   font-variant: normal;
   font-weight: normal !important;
   line-height: 1;
-  margin-inline-end: 0.25rem;
   text-transform: none;
   vertical-align: -0.125em;
 }
@@ -221,6 +220,10 @@ section#comments {
         &:active {
           transform: scale(var(--active));
         }
+
+        &::before {
+          margin-inline-end: 0.25rem;
+        }
       }
 
       .reblogs {
diff --git a/sass/_johnvertisement.scss b/sass/_johnvertisement.scss
index f3cce7c..0ca1a2d 100644
--- a/sass/_johnvertisement.scss
+++ b/sass/_johnvertisement.scss
@@ -1,4 +1,4 @@
-.johnvertisement {
+#johnvertisement {
   margin: 0 auto;
   display: block;
   width: min(728px, 100vw);
diff --git a/sass/_not-found.scss b/sass/_not-found.scss
index ccbb638..92cf903 100644
--- a/sass/_not-found.scss
+++ b/sass/_not-found.scss
@@ -1,4 +1,4 @@
-.not-found {
+#not-found {
   width: 100%;
   padding-top: 1rem;
   padding-right: 35%;
diff --git a/sass/_post-nav.scss b/sass/_post-nav.scss
index 968e710..d63a211 100644
--- a/sass/_post-nav.scss
+++ b/sass/_post-nav.scss
@@ -1,4 +1,4 @@
-.post-nav {
+#post-nav {
   display: flex;
 
   .post-nav-item {
diff --git a/sass/_qrcode.scss b/sass/_qrcode.scss
new file mode 100644
index 0000000..b7dd469
--- /dev/null
+++ b/sass/_qrcode.scss
@@ -0,0 +1,14 @@
+#qrcode {
+  background-color: white;
+  float: right;
+  height: 155px;
+  margin: 3rem 0 0 0;
+  padding: 15px;
+  width: 155px;
+
+  @media screen and (max-width: 720px) {
+    & {
+      display: none;
+    }
+  }
+}
diff --git a/sass/style.scss b/sass/style.scss
index b790008..05c9795 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -26,6 +26,7 @@
 @use "nav";
 @use "not-found";
 @use "post-nav";
+@use "qrcode";
 @use "statements";
 @use "tags";
 
diff --git a/templates/404.html b/templates/404.html
index 91e2237..f094e0b 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -3,7 +3,7 @@
 {% block content %}
 <picture>
   <source srcset="{{ get_url(path='404.png') }}" media="(prefers-reduced-motion: reduce)"></source> 
-  <img srcset="{{ get_url(path='404.gif') }}" class="pixels transparent no-hover not-found">
+  <img id="not-found" class="pixels transparent no-hover" srcset="{{ get_url(path='404.gif') }}">
 </picture>
 
 <h1>Page Not Found</h1>
diff --git a/templates/blog.html b/templates/blog.html
index 1deef11..9513841 100644
--- a/templates/blog.html
+++ b/templates/blog.html
@@ -78,7 +78,7 @@
 
 {% if page.lower or page.higher %}
   <hr>
-  <nav class="post-nav">
+  <nav id="post-nav">
   {% if page.higher %}
     <a class="post-nav-item post-nav-prev" href="{{ page.higher.permalink }}">
       <div class="nav-arrow">← Previous</div>
diff --git a/templates/includes/comments.html b/templates/includes/comments.html
index 6df4c17..f079e23 100644
--- a/templates/includes/comments.html
+++ b/templates/includes/comments.html
@@ -38,6 +38,8 @@ which were inspired by https://codeberg.org/jwildeboer/jwildeboersource/src/comm
 {% endif %}
 
 <section id="comments" class="article comments">
+  <img id="qrcode" class="no-hover pixels" src="https://api.qrserver.com/v1/create-qr-code/?data=https://{{ host }}/@{{ username }}/{{ id }}">
+
   <h2>Comments</h2>
   <p>Comment on this blog post by publicly replying to <a href="https://{{ host }}/@{{ username }}/{{ id }}">this Mastodon post</a> using a Mastodon or other ActivityPub/Fediverse account. Known non-private replies are displayed below.</p>
 
diff --git a/templates/includes/footer.html b/templates/includes/footer.html
index 11439d2..ac33632 100644
--- a/templates/includes/footer.html
+++ b/templates/includes/footer.html
@@ -14,7 +14,7 @@
   {% if config.extra.footer.show_johnvert %}
     <small>
       <details><summary>Johnvertisement</summary>
-        <iframe class="johnvertisement" title="Johnvertisement" src="https://john.citrons.xyz/embed?ref={{ config.extra.footer.johnvert_ref }}"></iframe>
+        <iframe id="johnvertisement" title="Johnvertisement" src="https://john.citrons.xyz/embed?ref={{ config.extra.footer.johnvert_ref }}"></iframe>
       </details>
     </small>
   {% endif %}
diff --git a/templates/page.html b/templates/page.html
index 023ecbe..3819241 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -1,11 +1,11 @@
 {% extends "base.html" %}
 
 {% block content %}
-{{ page.content | safe }}
 {% if page.extra.archive %}
   <div class="statement-container archive">
     <strong class="big">⚠ Archived</strong>
     {{ page.extra.archive | markdown | safe }}
   </div>
 {% endif %}
+{{ page.content | safe }}
 {% endblock content %}
\ No newline at end of file