From 1109ee6b6a1f798e359304777d3f11a86c7de101 Mon Sep 17 00:00:00 2001
From: Marius Riedl <marius.riedl99@gmail.com>
Date: Tue, 2 Nov 2021 15:16:52 +0100
Subject: [PATCH] Add app background, header and footer

---
 src/App.vue               | 46 ++++++++++++++++++++++++++++-----------
 src/components/Footer.vue | 18 +++++++++++++++
 src/components/Header.vue | 18 +++++++++++++++
 3 files changed, 69 insertions(+), 13 deletions(-)
 create mode 100644 src/components/Footer.vue
 create mode 100644 src/components/Header.vue

diff --git a/src/App.vue b/src/App.vue
index 058815a..3b9228f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,29 +1,49 @@
 <template>
   <div id="app">
-    <div id="nav"><router-link to="/">Home</router-link></div>
+    <Header />
     <router-view />
+    <Footer />
   </div>
 </template>
 
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import Header from "@/components/Header.vue";
+import Footer from "@/components/Footer.vue";
+
+@Component({
+  components: {
+    Header,
+    Footer,
+  },
+})
+export default class App extends Vue {}
+</script>
+
 <style lang="scss">
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: Segoe UI, Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
+  color: #fff;
+  white-space: pre-line;
 
-#nav {
-  padding: 30px;
+  display: flex;
+  flex-direction: column;
 
-  a {
-    font-weight: bold;
-    color: #2c3e50;
+  position: absolute;
+  inset: 0;
 
-    &.router-link-exact-active {
-      color: #42b983;
-    }
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
+    url("../src/assets/images/maps/de_inferno.jpg");
+
+  background-repeat: no-repeat;
+
+  background-size: cover;
+
+  a {
+    color: inherit;
+    text-decoration: none !important;
   }
 }
 </style>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000..5f88e92
--- /dev/null
+++ b/src/components/Footer.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="footer">Footer</div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+@Component({
+  components: {},
+})
+export default class Footer extends Vue {}
+</script>
+
+<style lang="scss" scoped>
+.footer {
+  background-color: #000;
+}
+</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 0000000..eee3bc1
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="header"><router-link to="/">Header</router-link></div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+@Component({
+  components: {},
+})
+export default class Header extends Vue {}
+</script>
+
+<style lang="scss" scoped>
+.header {
+  background-color: #000;
+}
+</style>
-- 
2.44.0