fixed #40

src/views/Home.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="main-content content text-center">
     <div class="head pt-4 pb-4">
-      <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>
+<!--      <h1 class="text-warning fw-bold mt-lg-5">CSGO<span class="text-up text-white">WTF</span></h1>-->
+      <img src="/logo.svg"
+           alt="logo"
+           class="logo mt-lg-5 mt-3 mb-3">
+      <h3 class="mb-lg-4">Open source CSGO data platform</h3>
     </div>
     <div v-if="recentVisited !== null" class="recent-search mt-5 mb-5 row gap-2 justify-content-center">
       <div v-for="(player, id) in recentVisited" :key="player.steamid64" class="player-card" tabindex="0"
@@ -35,14 +38,20 @@
       <div class="col-sm-12 col-md-4 col-lg-3">
         <i class="fa fa-liberapay"></i>
         <h4 class="fw-light">Free of Charge</h4>
-        <p class="fw-light">This service is free of charge. If you want to support us, just contact us.</p>
+        <p class="fw-light">This service is free of charge. If you want to support us, just follow the donate button!</p>
+        <div>
+          <a href="https://liberapay.com/CSGOWTF/donate" target="_blank">
+            <img src="https://liberapay.com/assets/widgets/donate.svg"
+                 alt="Donate using Liberapay">
+          </a>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import {GoToPlayer, SaveLastVisitedToLocalStorage, setTitle} from "../utils";
+import {GoToPlayer, SaveLastVisitedToLocalStorage, setTitle} from "@/utils";
 import {onBeforeMount, ref} from "vue";
 import {useStore} from "vuex";
 
@@ -100,20 +109,18 @@ export default {
 
 .main-content {
   .head {
+    // display jpg
     background-image: url("../assets/images/map_screenshots/default.jpg");
+  }
+  .head {
+    // display webp if possible
     background-image: url("../assets/images/map_screenshots/default.webp");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
 
-    h1 {
-      font-size: 5rem;
-
-      &:before {
-        content: 'CSGO';
-        position: absolute;
-        text-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
-      }
+    .logo {
+      width: 300px;
     }
 
     .text-up {
@@ -180,11 +187,17 @@ export default {
       }
     }
   }
+  
+  @media screen and (max-width: 576px) {
+    .logo {
+      width: 200px !important;
+    }
+  }
 
   @media screen and (max-width: 768px) {
     .head {
-      h1 {
-        font-size: 4rem;
+      .logo {
+        width: 250px;
       }
 
       h3 {