fixed #40

package.json

@@ -1,6 +1,6 @@
 {
   "name": "csgowtf",
-  "version": "0.29.2",
+  "version": "0.29.3",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/components/Nav.vue

@@ -10,7 +10,9 @@
         <ul class="list-unstyled">
           <li class="nav-item">
             <router-link class="navbar-brand" to="/" @click="closeNav('mainNav')">
-              CSGO<span class="text-up text-white fw-bold">WTF</span>
+              <img src="/logo.svg"
+                   alt="logo-nav"
+                   class="logo-nav">
             </router-link>
           </li>
           <li class="nav-item">
@@ -27,8 +29,8 @@
           <input id="search" v-model="data.searchInput" aria-label="Search"
                  autocomplete="off"
                  class="form-control bg-transparent border-0"
-                 placeholder="SteamID64, Profile Link or Custom URL"
-                 title="SteamID64, Profile Link or Custom URL"
+                 placeholder="Profile Link or ShareCode"
+                 title="SteamID64, Profile Link, Custom URL, ShareCode"
                  type="search">
           <button
               id="search-button"
@@ -51,7 +53,7 @@
 <script>
 import {reactive} from "vue";
 import {useStore} from 'vuex'
-import {closeNav, GetUser, GoToPlayer} from '../utils'
+import {closeNav, GetUser, GoToPlayer} from '@/utils'
 
 export default {
   name: 'Nav',
@@ -68,6 +70,7 @@ export default {
       const profileUrlPattern = 'https://steamcommunity.com/profiles/'
       const id64Pattern = /^\d{17}$/
       const vanityPattern = /^[A-Za-z0-9-_]{3,32}$/
+      // const shareCodePattern = /.*CSGO(?:-?[ABCDEFGHJKLMNOPQRSTUVWXYZabcdefhijkmnopqrstuvwxyz23456789]{5}){5}.*/
 
       store.commit({
         type: 'changeVanityUrl',
@@ -193,16 +196,16 @@ nav {
     display: flex;
 
     li, .navbar-brand {
+      .logo-nav {
+        height: 35px;
+        margin-bottom: 5px;
+      }
+
       font-size: 1.5rem;
       font-weight: lighter;
       margin: 22px 0 0 10px;
       cursor: pointer;
       transition: 100ms ease-in-out;
-
-      .text-up {
-        font-size: 40%;
-        vertical-align: top;
-      }
     }
 
     .navbar-brand {

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 {