src/assets/logo.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="758.75" height="192.5">
+<defs><linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:#4ba8eb"/><stop offset="100%" style="stop-color:#043485"/></linearGradient></defs>
+<path stroke="url(#gradient)" stroke-width="15" fill="none" d=" M94 51 a43.75 43.75 0 0 0 -43.75 -43.75 a43.75 43.75 0 0 0 -43.75 43.75 a43.75 43.75 0 0 0 43.75 43.75 a43.75 43.75 0 0 1 43.75 43.75 a43.75 43.75 0 0 1 -43.75 43.75 a43.75 43.75 0 0 1 -43.75 -43.75  M138.75 95.25 h43.75 a43.75 43.75 0 0 0 43.75 -43.75 a43.75 43.75 0 0 0 -43.75 -43.75 a43.75 43.75 0 0 0 -43.75 43.75 v43.75 v43.75 a43.75 43.75 0 0 0 43.75 43.75 a43.75 43.75 0 0 0 43.75 -43.75  M270 95.25 h43.75 a43.75 43.75 0 0 0 43.75 -43.75 a43.75 43.75 0 0 0 -43.75 -43.75 a43.75 43.75 0 0 0 -43.75 43.75 v43.75 v43.75 a43.75 43.75 0 0 0 43.75 43.75 a43.75 43.75 0 0 0 43.75 -43.75  M401.25 0 v192.5 m0 -96.125 l87.5 -87.5 m-87.5 87.5 l87.5 87.5  M532.5 192.5 v-192.5 m0 51.25 a43.75 43.75 0 0 1 43.75 -43.75 a43.75 43.75 0 0 1 43.75 43.75  M663.75 50.25 a43.75 43.75 0 0 1 43.75 -43.75 a43.75 43.75 0 0 1 43.75 43.75 v43.75 v43.75 v43.75 m0 -43.75 a43.75 43.75 0 0 1 -43.75 43.75 a43.75 43.75 0 0 1 -43.75 -43.75 a43.75 43.75 0 0 1 43.75 -43.75 a43.75 43.75 0 0 1 43.75 43.75 v50"/></svg>

src/features/nav/components/Navbar.vue

@@ -15,12 +15,14 @@ limitations under the License.
 -->
 <script setup>
 import { inject } from 'vue';
+import logo from '@/assets/logo.svg';
+
 const isDark = inject('isDark');
 </script>
 <template>
     <nav class="global-nav">
         <RouterLink to="/" class="link button link">
-            <span id="logo">Seekra</span>
+        <img :src="logo" alt="Seekra" class="nav-logo" />
         </RouterLink>
     <ul class="right-links">
         <li>
@@ -75,4 +77,8 @@ const isDark = inject('isDark');
 .dark-mode-toggle:hover {
     background: var(--light-d-2);
 }
+.nav-logo {
+    height: 24px;
+    width: auto;
+}
 </style>

src/views/SearchView.vue

@@ -16,9 +16,9 @@ limitations under the License.
 
 <script setup>
 import Searchbar from '../features/search/components/Searchbar.vue';
-
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
+import logo from '@/assets/logo.svg';
 
 const router = useRouter();
 
@@ -32,7 +32,7 @@ const submitSearch = function () {
 <template>
     <div class="search-content">
     <header class="global-header">
-            <h1>Seekra</h1>
+        <img :src="logo" alt="Seekra" class="header-logo" />
         <span class="slogan">
             Built to search.
         </span>
@@ -60,20 +60,9 @@ const submitSearch = function () {
     padding-top: 40px;
 }
 
-.global-header h1 {
+.header-logo {
-    display: inline-block;
+    width: 320px;
-    margin: 0;
+    max-width: 100%;
-    line-height: 1;
-    background: linear-gradient(
-        to right,
-        var(--primary-color-l-4),
-        var(--primary-color),
-        var(--primary-color-d-4)
-    );
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    font-size: 6rem;
 }
 
 .slogan{