Beautify the pin label on home page

Author: cotes2020

_data/label.yml

@@ -4,16 +4,17 @@
 # © 2017-2019 Cotes Chung
 # MIT Licensed
 
-
 panel:
-  lastmod: "Recent Update"
-  trending_tags: "Trending Tags"
-  toc: "Contents"
+  lastmod: Recent Update
+  trending_tags: Trending Tags
+  toc: Contents
 
 post:
-  relate_posts: "Further Reading"
+  relate_posts: Further Reading
   button:
     next: Newer
     previous: Older
 
-search_hint: "Search"   # text show on search bar
+search_hint: Search   # text show on search bar
+
+pin_prompt: Pinned   # pinned prompt

_layouts/home.html

@@ -49,38 +49,46 @@
 {% for post in posts %}
 
   <div class="post-preview">
-    <div class="d-flex justify-content-between pr-xl-2">
-      <h1><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h1>
-      {% if post.pin == true %}
-        <i class="fas fa-thumbtack fa-fw text-muted mt-1 ml-2 mt-xl-2" data-toggle="tooltip" data-placement="left"
-        title="Pinned"></i>
-      {% endif %}
-    </div>
+    <a href="{{ post.url | relative_url }}">
+      <h1>{{ post.title }}</h1>
+    </a>
+
     <div class="post-content">
       <p>
         {% include no-linenos.html content=post.content %}
         {{ content | markdownify | strip_html | truncate: 200 }}
       </p>
     </div>
 
-    <div class="post-meta text-muted">
-      <!-- posted date -->
-      <i class="far fa-calendar fa-fw"></i>
-      {% include timeago.html date=post.date tooltip=true %}
-
-      <!-- time to read -->
-      <i class="far fa-clock fa-fw"></i>
-      <span>{% include read-time.html content=post.content %}</span>
-
-      <!-- page views -->
-      {% if site.google_analytics.pv.enabled %}
-      <i class="far fa-eye fa-fw"></i>
-      <span id="pv_{{-post.title-}}" class="pageviews">
-        <i class="fas fa-spinner fa-spin fa-fw"></i>
-      </span>
+    <div class="post-meta text-muted d-flex justify-content-between">
+
+      <div>
+        <!-- posted date -->
+        <i class="far fa-calendar fa-fw"></i>
+        {% include timeago.html date=post.date tooltip=true %}
+
+        <!-- time to read -->
+        <i class="far fa-clock fa-fw"></i>
+        {% include read-time.html content=post.content %}
+
+        <!-- page views -->
+        {% if site.google_analytics.pv.enabled %}
+        <i class="far fa-eye fa-fw"></i>
+        <span id="pv_{{-post.title-}}" class="pageviews">
+          <i class="fas fa-spinner fa-spin fa-fw"></i>
+        </span>
+        {% endif %}
+      </div>
+
+      {% if post.pin %}
+      <div class="pin">
+        <i class="fas fa-thumbtack fa-fw"></i>
+        <span>{{ site.data.label.pin_prompt }}</span>
+      </div>
       {% endif %}
 
-    </div>
+    </div> <!-- .post-meta -->
+
   </div> <!-- .post-review -->
 
 {% endfor %}

assets/css/_colors/dark-typography.scss

@@ -51,6 +51,8 @@
   --btn-text-color: var(--text-color);
   --btn-paginator-border-color: var(--btn-border-color);
   --btn-paginator-shadow: var(--main-wrapper-bg);
+  --pin-bg: rgb(34 35 37);
+  --pin-color: iherit;
 
   /* Posts */
   --toc-highlight: rgb(116, 178, 243);

assets/css/_colors/light-typography.scss

@@ -53,6 +53,8 @@
   --btn-text-color: #f8f8f8;
   --btn-paginator-border-color: #f1f1f1;
   --btn-paginator-shadow: #4b92d2;
+  --pin-bg: #f5f5f5;
+  --pin-color: #999fa4;
 
   /* Posts */
   --btn-share-hover-color: var(--link-color);

assets/css/home.scss

@@ -20,25 +20,22 @@
     h1 {
       font-size: 1.4rem;
       margin: 0;
-      ~i { // pinned icon
-        font-size: 0.86rem;
-      }
     }
 
     .post-meta {
       i {
         font-size: 0.73rem;
-        &:not(:first-child) { // post-meta icons on the homepage
-          margin-left: 1rem;
-        }
+      }
+      span:not(:last-child) {
+        margin-right: 1.2rem;
       }
     }
 
     .post-content {
       margin-top: 0.6rem;
       margin-bottom: 0.6rem;
       color: var(--post-list-text-color);
-      >p {
+      > p {
         /* Make preview shorter on the homepage */
         margin: 0;
         overflow: hidden;
@@ -49,6 +46,17 @@
       }
     }
 
+    .pin {
+      > i {
+        transform: rotate(45deg);
+        padding-left: 3px;
+        color: var(--pin-color);
+      }
+      > span {
+        display: none;
+      }
+    }
+
   } // .post-preview
 
 } // #post-list
@@ -107,12 +115,6 @@
 
 } // .pagination
 
-@media all and (max-width: 576px) {
-  #post-list .post-meta>span i:not(:first-child) {
-    margin-left: 1rem;
-  }
-}
-
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
   .pagination {
@@ -125,6 +127,21 @@
 
   #post-list {
     margin-top: 1.5rem;
+    .post-preview .post-meta {
+      .pin {
+        background: var(--pin-bg);
+        border-radius: 5px;
+        line-height: 1.4rem;
+        height: 1.3rem;
+        margin-top: 3px;
+        padding-left: 1px;
+        padding-right: 6px;
+
+        > span {
+          display: inline;
+        }
+      }
+    }
   }
 
   .pagination {

assets/js/_utils/pageviews.js

@@ -145,7 +145,7 @@ function displayPageviews(data) {
 
   if ($("#post-list").length > 0) { /* the Home page */
     $(".post-preview").each(function() {
-      var path = $(this).children("div").children("h1").children("a").attr("href");
+      var path = $(this).find("a").attr("href");
       tacklePV(rows, path, $(this).find(".pageviews"), hasInit);
     });