updated webp-images, lazyloaded map images, added fontawesome icons

src/components/Nav.vue

@@ -18,15 +18,13 @@
         </ul>
         <form class="d-flex" data-bs-target="#mainNav.show" @keydown.enter.prevent="parseSearch">
           <label for="search">
-            <svg class="bi bi-search" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-              <path
-                  d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
-            </svg>
+            <i class="bi bi-search"></i>
           </label>
 
           <input id="search" v-model="data.searchInput" aria-label="Search"
                  class="form-control bg-transparent border-0"
                  placeholder="SteamID64, Profile Link or Custom URL"
+                 title="SteamID64, Profile Link or Custom URL"
                  type="search">
           <button
               class="btn border-2 btn-outline-info"
@@ -144,6 +142,7 @@ nav {
 
   label {
     padding-top: 6px;
+    font-size: 1.4rem;
   }
 
   input[type="search"] {
@@ -195,16 +194,30 @@ nav {
       }
 
       form {
+        max-width: 87vw;
+        margin-left: -40px;
+
         label {
           display: none;
         }
 
         input[type="search"] {
           margin-bottom: 15px;
-          width: 100%;
+          max-width: 100%;
+          min-width: 82%;
+          font-size: 1rem;
+
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+
+          &::placeholder {
+            background: var(--bs-body-bg);
+          }
         }
 
         button {
+          margin-left: 10px;
           display: block;
           margin-top: -15px;
         }