use emojis for engagements

_includes/head.html

@@ -101,7 +101,7 @@
             );
             document.getElementById(
               "page-replies"
-            ).innerHTML = `• ${replies.length} replies`;
+            ).innerHTML = `• 💬 ${replies.length}`;
 
             // render to replies section
             const repliesTable = document.createElement("table");
@@ -134,7 +134,7 @@
           if (likes.length)
             document.getElementById(
               "page-likes"
-            ).innerHTML = `• ${likes.length} likes`;
+            ).innerHTML = `• 👍 ${likes.length}`;
 
           const reposts = mentions.filter(
             (m) => m["wm-property"] === "repost-of"
@@ -142,7 +142,7 @@
           if (reposts.length)
             document.getElementById(
               "page-reposts"
-            ).innerHTML = `• ${reposts.length} reposts`;
+            ).innerHTML = `• 🔁 ${reposts.length}`;
         })
         .catch((err) => console.log("err", err));
     }

_layouts/post.html

@@ -30,9 +30,9 @@ layout: default
           default: "%b %-d, %Y" %} {{ page.date | date: date_format }}
           </span>
         </time>
-      <span id="page-replies"></span>
-      <span id="page-likes"></span>
-      <span id="page-reposts"></span>
+      <span class="blog-post__header__meta__engagement" id="page-replies"></span>
+      <span  class="blog-post__header__meta__engagement" id="page-likes"></span>
+      <span  class="blog-post__header__meta__engagement" id="page-reposts"></span>
     </div>
     {% if page.image %}
       <img

assets/main.scss

@@ -332,11 +332,7 @@ table.image caption {
 
     &__meta {
       font-size: small;
-      margin: 10px 0 10px;
-
-      &__author {
-        font-weight: bold;
-      }
+      margin: 0.5em 0;
     }
 
     &__image {
@@ -441,7 +437,7 @@ table.image caption {
   }
   &__replies {
     margin: 1em 0;
-
+    max-width: fit-content;
     .reply-block {
       display: block;
       margin: 0 0 1em;
@@ -512,12 +508,6 @@ table.image caption {
   }
 }
 
-@media not all and (min-resolution: 0.001dpcm) {
-  .jumbotron {
-    display: none;
-  }
-}
-
 @media only screen and (min-width: 0px) and (max-width: 350px) {
   div.subscription-message-div {
     display: none !important;