Redesign the post meta layout

- posted date
- updated date
- read time
- license statement of post bottom
- also refactor the `timeago.js`

_sass/addon/commons.scss

@@ -332,23 +332,6 @@ i { // fontawesome icons
   }
 }
 
-.post {
-  h1 {
-    margin-top: 3rem;
-    margin-bottom: 1rem;
-  }
-
-  em { /* MarkDown italic */
-    padding-right: 0.2rem;
-  }
-
-  a:hover {
-    code {
-      @extend %link-hover;
-    }
-  }
-}
-
 /* --- Begin of Markdown table style --- */
 
 .table-wrapper { // it will be created by Liquid
@@ -390,6 +373,19 @@ i { // fontawesome icons
 
 /* --- post --- */
 
+.post {
+  h1 {
+    margin-top: 3rem;
+    margin-bottom: 1rem;
+  }
+
+  a:hover {
+    code {
+      @extend %link-hover;
+    }
+  }
+}
+
 .pageviews .fa-spinner {
   font-size: 80%;
 }
@@ -409,6 +405,10 @@ i { // fontawesome icons
       @extend %link-hover;
     }
   }
+
+  em {
+    @extend %normal-font-style;
+  }
 }
 
 .post-content {
@@ -575,10 +575,6 @@ i { // fontawesome icons
 
 /* --- Effects classes --- */
 
-.semi-bold {
-  font-weight: 600 !important;
-}
-
 .loaded {
   display: block !important;
 

_sass/addon/module.scss

@@ -63,6 +63,10 @@
   cursor: pointer;
 }
 
+%normal-font-style {
+  font-style: normal;
+}
+
 /* ---------- scss mixin --------- */
 
 @mixin no-text-decoration {
@@ -88,10 +92,6 @@
   opacity: 0.6;
 }
 
-@mixin semi-bold {
-  font-weight: 600;
-}
-
 @mixin label($font-size: 1rem, $font-weight: 600, $color: var(--label-color)) {
   color: $color;
   font-size: $font-size;

_sass/layout/home.scss

@@ -74,10 +74,14 @@
     .post-meta {
       i {
         font-size: 0.73rem;
+
+        &:not(:first-child) {
+          margin-left: 1.2rem;
+        }
       }
 
-      span:not(:last-child) {
-        margin-right: 1.2rem;
+      em {
+        @extend %normal-font-style;
       }
     }
 

_sass/layout/post.scss

@@ -16,18 +16,19 @@
   border-color: var(--btn-border-color);
 }
 
-@mixin dot($pl: 0.2rem, $pr: 0.4rem) {
+@mixin dot($pl: 0.25rem, $pr: 0.25rem) {
   content: "\2022";
-  color: rgba(158, 158, 158, 0.8);
   padding-left: $pl;
   padding-right: $pr;
 }
 
 h1 + .post-meta {
-  > div:nth-child(2) {
-    > span:not(:first-child)::before {
-      @include dot;
-    }
+  span + span::before {
+    @include dot;
+  }
+
+  em {
+    color: var(--text-color);
   }
 }
 
@@ -165,6 +166,10 @@ nav[data-toggle=toc] {
     @include label(1.1rem, 600);
   }
 
+  em {
+    @extend %normal-font-style;
+  }
+
   .card {
     border-color: var(--card-border-color);
     background-color: var(--card-bg);
@@ -308,7 +313,7 @@ nav[data-toggle=toc] {
   line-height: 1.2rem;
 
   > a {
-    font-weight: 600;
+    color: var(--text-color);
 
     &:hover {
       @extend %link-hover;
@@ -338,23 +343,6 @@ nav[data-toggle=toc] {
   }
 }
 
-@media all and (min-width: 768px) {
-  #core-wrapper {
-    h1 + .post-meta {
-      > div:not(:first-child)::before {
-        @include dot(0.5rem, 0.2rem);
-      }
-
-      &.flex-column {
-        -webkit-box-orient: horizontal !important;
-        -webkit-box-direction: normal !important;
-        -ms-flex-direction: row !important;
-        flex-direction: row !important;
-      }
-    }
-  } // .post
-}
-
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
   .post-navigation {