perf(ui): improve web accessibility (#447)

- Make color and contrast meets WCAG 2 AA and above
- Fixes `aria-label` on button "copy link" in posts

_sass/addon/commons.scss

@@ -176,6 +176,8 @@ footer {
   font-size: 0.8rem;
   background-color: var(--main-bg);
 
+  @extend %text-color;
+
   div.d-flex {
     height: $footer-height;
     line-height: 1.2rem;
@@ -185,7 +187,7 @@ footer {
   }
 
   a {
-    @extend %text-color;
+    @extend %text-highlight;
 
     &:hover {
       @extend %link-hover;
@@ -243,7 +245,6 @@ i {
   .post-tag {
     line-height: 1.05rem;
     font-size: 0.85rem;
-    border: 1px solid var(--btn-border-color);
     border-radius: 0.8rem;
     padding: 0.3rem 0.5rem;
     margin: 0 0.35rem 0.5rem 0;
@@ -494,9 +495,10 @@ i {
   display: inline-block;
   min-width: 2rem;
   text-align: center;
-  border-radius: 0.3rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--btn-border-color);
   padding: 0 0.4rem;
-  color: inherit;
+  color: var(--text-muted-color);
   line-height: 1.3rem;
 
   &:not(:last-child) {
@@ -745,19 +747,20 @@ $btn-mb: 0.5rem;
     font-size: 1.75rem;
     line-height: 1.2;
     letter-spacing: 0.25px;
-    color: rgba(134, 133, 133, 0.99);
     margin-top: 1.25rem;
     margin-bottom: 0.5rem;
 
     a {
       @extend %clickable-transition;
       @extend %sidebar-link-hover;
+
+      color: var(--site-title-color);
     }
   }
 
   .site-subtitle {
     font-size: 95%;
-    color: var(--sidebar-muted-color);
+    color: var(--site-subtitle-color);
     margin-top: 0.25rem;
     word-spacing: 1px;
     -webkit-user-select: none;
@@ -915,7 +918,7 @@ $btn-mb: 0.5rem;
 
   #breadcrumb {
     font-size: 1rem;
-    color: gray;
+    color: var(--text-muted-color);
     padding-left: 0.5rem;
 
     a:hover {
@@ -1102,7 +1105,6 @@ $btn-mb: 0.5rem;
 /* --- main wrapper --- */
 
 #main-wrapper {
-  background-color: var(--main-bg);
   position: relative;
   min-height: calc(100vh - $footer-height-mobile);
 

_sass/addon/module.scss

@@ -107,7 +107,7 @@
 }
 
 %sidebar-links {
-  color: rgba(117, 117, 117, 0.9);
+  color: var(--sidebar-muted-color);
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -122,6 +122,11 @@
   -webkit-box-orient: vertical;
 }
 
+%text-highlight {
+  color: inherit;
+  font-weight: 600;
+}
+
 /* ---------- scss mixin --------- */
 
 @mixin mt-mb($value) {

_sass/addon/syntax.scss

@@ -63,6 +63,7 @@ html {
     font-size: $code-font-size;
     line-height: 1.4rem;
     word-wrap: normal; /* Fixed Safari overflow-x */
+    color: var(--code-snippets-color);
   }
 
   table {