Merge branch 'feature/improve-meta-display'

# Conflicts:
#	_sass/addon/commons.scss

_sass/addon/commons.scss

@@ -116,8 +116,6 @@ footer {
   padding: 0 1rem;
   height: $footer-height;
   font-size: 0.8rem;
-  color: #7a7b7d;
-  background-color: var(--footer-bg-color);
 
   > div.d-flex {
     line-height: 1.2rem;
@@ -132,7 +130,7 @@ footer {
   }
 
   a {
-    color: var(--footer-link);
+    @extend %text-color;
 
     &:link {
       @include no-text-decoration;
@@ -367,10 +365,6 @@ img[data-src] {
     margin-bottom: 1rem;
   }
 
-  em { // MarkDown italic
-    padding-right: 0.2rem;
-  }
-
   a {
     &.img-link {
       @extend %no-cursor;
@@ -389,7 +383,6 @@ img[data-src] {
         @extend %link-hover;
       }
     }
-
   } // a
 
 }
@@ -403,8 +396,6 @@ img[data-src] {
   word-spacing: 1px;
 
   a {
-    @extend %link-underline;
-
     &:not(:last-child) {
       margin-right: 2px;
     }
@@ -413,6 +404,10 @@ img[data-src] {
       @extend %link-hover;
     }
   }
+
+  em {
+    @extend %normal-font-style;
+  }
 }
 
 .post-content {
@@ -533,10 +528,6 @@ img[data-src] {
 
 /* --- 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/colors/dark-typography.scss

@@ -83,10 +83,6 @@
   --timeline-color: rgb(63, 65, 68);
   --timeline-year-dot-color: var(--timeline-color);
 
-  /* Footer */
-  --footer-bg-color: var(--main-wrapper-bg);
-  --footer-link: rgb(171, 171, 171);
-
   .post-content img {
     filter: brightness(90%);
   }
@@ -138,7 +134,6 @@
         rgb(39, 39, 45),
         rgb(26, 26, 30)
       );
-
   }
 
   color-scheme: dark;

_sass/colors/light-typography.scss

@@ -75,7 +75,4 @@
   --timeline-node-bg: #c2c6cc;
   --timeline-year-dot-color: #ffffff;
 
-  /* Footer */
-  --footer-bg-color: #ffffff;
-  --footer-link: #424242;
 } // light-scheme

_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,17 +16,26 @@
   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;
 }
 
+%text-color {
+  color: var(--text-color);
+}
+
 h1 + .post-meta {
-  > div:nth-child(2) {
-    > span:not(:first-child)::before {
-      @include dot;
+  span + span::before {
+    @include dot;
+  }
+
+  em {
+    @extend %text-color;
+
+    a {
+      @extend %text-color;
     }
   }
 }
@@ -45,6 +54,10 @@ img.preview-img {
   margin-top: 6rem;
   border-bottom: 1px double var(--main-border-color);
   font-size: 0.85rem;
+
+  .post-meta a {
+    @extend %link-underline;
+  }
 }
 
 .post-tags {
@@ -166,6 +179,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);
@@ -175,7 +192,7 @@ nav[data-toggle=toc] {
     transition: all 0.3s ease-in-out;
 
     h3 {
-      color: var(--text-color);
+      @extend %text-color;
     }
 
     &:hover {
@@ -309,7 +326,7 @@ nav[data-toggle=toc] {
   line-height: 1.2rem;
 
   > a {
-    font-weight: 600;
+    color: var(--text-color);
 
     &:hover {
       @extend %link-hover;
@@ -343,23 +360,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 {