src/styles/main.css

@@ -5,30 +5,6 @@ body {
     font-size: 16px;
 }
 
-.global-header {
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding-top: 40px;
-}
-
-.global-header h1 {
-    display: inline-block;
-    margin: 0;
-    line-height: 1;
-    background: linear-gradient(to right, #689BDB, #5F8DDC, #5077C7, #4562BE, #374FA5, #22298F);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    font-size: 6rem;
-}
-
-.slogan{
-    margin: 0;
-    font-size: small;
-}
-
 form {
     display: flex;
     justify-content: center;

src/views/SearchView.vue

@@ -3,14 +3,42 @@ import Searchbar from '../features/search/components/Searchbar.vue'
 </script>
 
 <template>
-    <header class="global-header">
+    <div class="content-background">
-        <h1>Seekra</h1>
+        <header class="global-header">
-        <span class="slogan">
+            <h1>Seekra</h1>
-            Built to search.
+            <span class="slogan">
-        </span>
+                Built to search.
-    </header>
+            </span>
+        </header>
         
-    <form id="search-form">
+        <form id="search-form">
-        <Searchbar />
+            <Searchbar />
-    </form>
+        </form>
+    </div>
 </template>
+
+<style>
+.global-header {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 40px;
+}
+
+.global-header h1 {
+    display: inline-block;
+    margin: 0;
+    line-height: 1;
+    background: linear-gradient(to right, #689BDB, #5F8DDC, #5077C7, #4562BE, #374FA5, #22298F);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-size: 6rem;
+}
+
+.slogan{
+    margin: 0;
+    font-size: small;
+}
+</style>