updated nav, colors and layout

src/views/Home.vue

@@ -4,7 +4,7 @@
       <h1 class="text-warning fw-bold mt-lg-5">CSGO<span class="text-up text-white">WTF</span></h1>
       <h3 class="mb-lg-5">Open source CSGO data platform</h3>
     </div>
-    <div class="mt-n4">
+    <div class="mt-n4 img-sub">
       <span class="text-muted">Image by <a class="text-decoration-none text-warning"
                                            href="https://unsplash.com/photos/6ou8gWpS9ns"
                                            target="_blank">Fredrick Tendong</a></span>
@@ -63,7 +63,9 @@ export default {
   setup() {
     document.title = 'Home | csgoWTF'
 
-    const recentVisited = JSON.parse(localStorage.getItem('recent-visited')).reverse()
+    const recentVisited = JSON.parse(localStorage.getItem('recent-visited'))
+    if (recentVisited !== null)
+        recentVisited.reverse()
 
     return {recentVisited, GoToPlayer}
   }
@@ -101,18 +103,24 @@ export default {
     }
   }
 
+  .img-sub {
+    font-size: .8rem;
+    text-align: left;
+    margin-left: 10px;
+  }
+
   .recent-search {
-    max-width: 900px;
+    max-width: 1100px;
     margin: 0 auto;
 
     .player-card {
       width: 180px;
       height: 75px;
-      background: var(--bs-primary);
-      border-radius: 5% 30%;
+      background: var(--bs-blue);
+      border-radius: 15% 5%;
 
       &:hover {
-        background: var(--bs-secondary);
+        background: var(--bs-primary);
         cursor: pointer;
       }
 
@@ -124,12 +132,18 @@ export default {
 
       p {
         font-size: .9rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
   }
 
   @media screen and (max-width: 768px) {
     .recent-search {
+      max-height: 240px;
+      overflow: hidden;
+
       .player-card {
         height: 60px;
         img {