From d8b038dc9c964d3e2732ff46b5e09b7e74c7b1e1 Mon Sep 17 00:00:00 2001
From: Raymonzut <40148684+Raymonzut@users.noreply.github.com>
Date: Sun, 31 May 2020 22:32:58 +0200
Subject: [PATCH 1/3] Reset padding, margin and width for entire bg

---
 client/public/index.html | 8 ++++++++
 1 file changed, 8 insertions(+)
diff --git a/client/public/index.html b/client/public/index.html
index f0d623a..17d0c2b 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -6,6 +6,14 @@
   <meta http-equiv="X-UA-Compatible" content="IE-edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Personal Website</title>
+
+  <style>
+  body, html {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+  }
+</style>
 </head>
 
 <body>

From aab9885242353e8098bdc727eb638b4710fad54a Mon Sep 17 00:00:00 2001
From: Raymonzut <40148684+Raymonzut@users.noreply.github.com>
Date: Sun, 31 May 2020 22:42:14 +0200
Subject: [PATCH 2/3] Add theme switching button

---
 client/src/App.vue | 61 +++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 52 insertions(+), 9 deletions(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index 2579ba5..52c0f7c 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,28 +1,71 @@
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/posts">Posts</router-link> |
-      <router-link to="/qa">QA</router-link>
-    </div>
-    <router-view />
+<div id="app" :class="theme">
+  <div id="nav">
+    <router-link to="/">Home</router-link> |
+    <router-link to="/posts">Posts</router-link> |
+    <router-link to="/qa">QA</router-link>
   </div>
+  <router-view />
+  <div>
+  <button @click="toggleTheme">{{ themeToggleVerb }} my eyes</button>
+  </div>
+</div>
 </template>
 
 <script>
 
 export default {
   name: 'App',
+  data() {
+    return {
+      theme: 'dark'
+    }
+  },
+  computed: {
+	themeToggleVerb: function() {
+          return this.theme === 'light' ? "Save" : "Hurt"
+        }
+  },
+
+  methods: {
+    toggleTheme() {
+      const themes = ['light', 'dark']
+      this.theme = themes[(themes.indexOf(this.theme) + 1) % themes.length]
+    }
+  },
 }
 </script>
 
 <style>
+
+.light {
+  --primary-color: #ffffeb;
+  --text-color: #272736;
+}
+
+.dark {
+  --primary-color: #272736;
+  --text-color: #ffffeb;
+}
+
+.dark a {
+  color: #7e7e8f;
+}
+
+body {
+  background-color: var(--primary-color);
+}
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  color: var(--text-color);
+  padding-top: 60px;
+  background-color: var(--primary-color);
+  min-height: 100vh;
 }
+
 </style>
+

From dd4e2ca9fbf29a54686a96323a90fac90564eb70 Mon Sep 17 00:00:00 2001
From: Raymonzut <40148684+Raymonzut@users.noreply.github.com>
Date: Mon, 1 Jun 2020 16:53:40 +0200
Subject: [PATCH 3/3] Style theme switching button

---
 client/src/App.vue | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index 52c0f7c..a903e65 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -5,10 +5,10 @@
     <router-link to="/posts">Posts</router-link> |
     <router-link to="/qa">QA</router-link>
   </div>
-  <router-view />
   <div>
-  <button @click="toggleTheme">{{ themeToggleVerb }} my eyes</button>
+    <button id="toggleThemeButton" @click="toggleTheme">{{ themeToggleVerb }} my eyes</button>
   </div>
+  <router-view />
 </div>
 </template>
 
@@ -67,5 +67,21 @@ body {
   min-height: 100vh;
 }
 
+#toggleThemeButton {
+  background: var(--primary-color);
+  border: 0px;
+  color: var(--text-color);
+  margin: 0 auto;
+
+  margin-right: 0px;
+}
+
+@media (min-width:420px) {
+  #toggleThemeButton {
+    float:right;
+    margin-right: 10px;
+  }
+}
+
 </style>
 
