create dark mode

components/Card.vue

@@ -4,7 +4,7 @@
       p {{title}}
     .card--body
       p {{desc}}
-      a(:href="url" target='_blank') {{url}}
+      a(:href="url" target='_blank') Visit Website
 </template>
 
 <script>
@@ -16,23 +16,27 @@ export default {
 
 <style lang="scss" scoped>
 .card {
-  background: #eee;
+  background: #2D3748;
   border-radius: .3rem;
   padding: 1rem;
 
   &--title {
-    font-weight: 900;
-    margin-bottom: .5rem;
+    p{
+      font-weight: 900;
+      margin: 0;
+    }
   }
 
   &--body {
     p {
-      font-size: 12px;
-      color: #8795A1;
-      margin-bottom: .5rem;
+      font-size: 13px;
+      color: white;
+      margin: 0 0 .7rem 0;
+      line-height: 1.3;
+      letter-spacing: .5px;
     }
     a {
-     font-size: 9px;
+     font-size: 12px;
      line-height: 1;
     }
   }

components/Logo.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   nuxt-link(to="/").logo
-    img(src="~/assets/icons-1.png")
+    img(src="~/assets/logo.svg")
 </template>
 
 
@@ -8,7 +8,6 @@
 .logo {
   display: flex;
   align-items: center;
-  justify-content: center;
 }
 img {
   padding: .2rem;

components/Sidebar.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  aside
+  aside.nav
     .sidebar
       nuxt-link(to="/general") General
       nuxt-link(to="/html") HTML
@@ -21,11 +21,11 @@
 
   a {
     padding: .5rem 1rem .5rem 1rem;
-    text-decoration: none;
+    font-weight: 600;
   }
 }
 
-@media (max-width: 600px) {
+@media (max-width: 400px) {
   .sidebar {
     display:grid;
     grid-template-columns: repeat(auto-fit, minmax(6rem,1fr));