feat: added tags display at the bottom of article details page in mobile and tablet (#84)

layout/article-content.ejs

@@ -40,6 +40,16 @@
             </div>
         <% } %>
 
+        <% if (page.tags.length) { %>
+            <ul class="post-tags-box">
+                <% page.tags.forEach((tag) => { %>
+                    <li class="tag-item">
+                        <a href="<%- url_for(tag.path) %>">#<%= tag.name %></a>&nbsp;
+                    </li>
+                <% }); %>
+            </ul>
+        <% } %>
+
         <% if (page.prev || page.next) { %>
             <div class="article-nav">
                 <% if (page.prev) { %>

source/css/layout/_partial/article-meta-info.styl

@@ -27,18 +27,15 @@
     }
   }
 
+  .article-min2read, .article-tags {
+    +keep-tablet() {
+      display: none;
+    }
+  }
 
-  .article-wordcount, .article-tags {
+  .article-wordcount {
     +keep-mobile() {
       display: none;
     }
   }
-
-  .article-min2read, .article-categories {
-
-    +keep-tablet() {
-      display: none;
-    }
-
-  }
 }

source/css/layout/article-content.styl

@@ -103,11 +103,28 @@ $article-title-font-size = 1.6rem;
     color: var(--default-text-color);
   }
 
+
+  .post-tags-box {
+    display: none;
+    margin-top: 1.3rem;
+    justify-content: center;
+    font-size: 1.1rem;
+
+    +keep-tablet() {
+      display: flex;
+    }
+
+    .tag-item {
+      margin: 0 0.25rem;
+    }
+  }
+
   .post-copyright-info {
     margin-top: $component-spacing-value;
     width: 100%;
   }
 
+
   .article-nav {
     height: 40px;
     margin-top: $component-spacing-value;