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;