Moved banner to a separate component.

src/components/GeneratePage.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="container">
-    <router-link to="/" class="header-link">
-      <h1 class="top-banner">knowit</h1>
-    </router-link>
+    <banner />
     <h1>Loddgenerator</h1>
     <p>Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'</p>
     <div class="input-line">
@@ -34,7 +32,12 @@
 </template>
 
 <script>
+import Banner from "@/ui/Banner";
+
 export default {
+  components: {
+    Banner
+  },
   data() {
     return {
       numberOfBallots: 0,

src/components/VinlottisPage.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="outer">
-    <h1 class="top-banner">
-      <img src="/public/assets/images/knowit.svg" />
-    </h1>
+    <banner />
     <div class="container">
       <h1>Vinlotteri</h1>
       <router-link to="generate" class="generate-link">
@@ -28,6 +26,7 @@ import PurchaseGraph from "@/ui/PurchaseGraph";
 import TotalBought from "@/ui/TotalBought";
 import Highscore from "@/ui/Highscore";
 import WinGraph from "@/ui/WinGraph";
+import Banner from "@/ui/Banner";
 import Wines from "@/ui/Wines";
 
 export default {
@@ -36,6 +35,7 @@ export default {
     TotalBought,
     Highscore,
     WinGraph,
+    Banner,
     Wines
   }
 };
@@ -74,12 +74,6 @@ h1 {
   font-weight: 300;
 }
 
-.top-banner {
-  margin-top: 0px;
-  padding: 20px 0;
-  background-color: #dbeede;
-  box-shadow: 0 0 10px 0px #0000003a;
-}
 
 .generate-link {
   color: #333333;

src/ui/Banner.vue

@@ -0,0 +1,18 @@
+<template>
+  <router-link to="/">
+    <div class="top-banner">
+      <img src="/public/assets/images/knowit.svg" />
+    </div>
+  </router-link>
+</template>
+
+<style>
+.top-banner {
+  text-align: center;
+  width: 100vw;
+  margin-top: 0px;
+  padding: 20px 0;
+  background-color: #dbeede;
+  box-shadow: 0 0 10px 0px #0000003a;
+}
+</style>