feat: QR code to the mastodon post used for comments, chnage some classes to IDs

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 {

sass/_johnvertisement.scss

@@ -1,4 +1,4 @@
-.johnvertisement {
+#johnvertisement {
   margin: 0 auto;
   display: block;
   width: min(728px, 100vw);

sass/_not-found.scss

@@ -1,4 +1,4 @@
-.not-found {
+#not-found {
   width: 100%;
   padding-top: 1rem;
   padding-right: 35%;

sass/_post-nav.scss

@@ -1,4 +1,4 @@
-.post-nav {
+#post-nav {
   display: flex;
 
   .post-nav-item {

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

sass/style.scss

@@ -26,6 +26,7 @@
 @use "nav";
 @use "not-found";
 @use "post-nav";
+@use "qrcode";
 @use "statements";
 @use "tags";
 

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>

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>

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>
 

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

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