Refine the footer

www/layouts/default.vue

@@ -34,17 +34,19 @@
       </b-collapse>
     </b-navbar>
     <Nuxt />
-    <b-row class="row-space footer">
-      <b-col md="3" offset-md="3">
-        <span class="copyright">
-          © 2020 toozhao.com
-        </span>
-      </b-col>
-      <b-col md="3" class="contact-me">
-        <a href="mailto:me@toozhao.com" class="contact">Contact me</a>
-      </b-col>
-      <b-col md="3"><a href="https://github.com/wahyd4/badger-issues/">Report issues</a></b-col>
-    </b-row>
+    <footer class="pt-md-5 text-muted">
+      <b-row class="row-space">
+        <b-col md="2" offset-md="3">
+          <span class="copyright">
+            © 2021 toozhao.com
+          </span>
+        </b-col>
+        <b-col md="2" class="contact-me">
+          <a href="mailto:me@toozhao.com" class="contact">Contact me</a>
+        </b-col>
+        <b-col md="2"><a href="https://github.com/wahyd4/badger-issues/">Report issues</a></b-col>
+      </b-row>
+    </footer>
     <template #overlay>
       <div class="text-center" v-if="hasError">
         <!-- <b-icon icon="stopwatch" font-scale="3" animation="cylon"></b-icon> -->
@@ -135,27 +137,16 @@ html {
   min-height: 80vh;
 }
 
-.footer {
+footer {
   margin-top: 5vh;
-  font-size: 13px;
-  background: #eee;
+  font-weight: 400;
   padding: 5vh 0;
-  .copyright,
-  .contact-me {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .my-badge {
-    display: inline;
-    margin-left: 5px;
-  }
-  .contact {
+  font-size: .85rem;
+  background: #eee;
+  text-align: center;
+  a {
     text-decoration: none;
-    color: #212529;
-  }
-  .contact:hover {
-    text-decoration: underline;
+    color: #6c757d;
   }
 }
 *,