From 33ff18ac9a313708bed90bf072c69e7d2c02442a Mon Sep 17 00:00:00 2001
From: GraemeElliott <graeme.elliott@dimedout.com>
Date: Tue, 19 Mar 2024 23:07:18 +0100
Subject: [PATCH] Footer does not overlap. Home page updated.

---
 src/App.vue                        | 14 +-----
 src/components/partials/Footer.vue |  2 +-
 src/components/partials/NavBar.vue | 73 ++++++++++++++++--------------
 src/pages/Home.vue                 | 12 ++---
 4 files changed, 47 insertions(+), 54 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e9c0828..ca92971 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,21 +1,11 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue';
 import { useDarkModeStore } from '@/store/store';
 import NavBar from './components/partials/NavBar.vue';
 import Footer from './components/partials/Footer.vue';
 
 const darkModeStore = useDarkModeStore();
 
-onMounted(() => {
-  const handleResize = () => {
-    darkModeStore.initializeDarkMode(); // Re-initialize to force reactivity update
-  };
-  window.addEventListener('resize', handleResize);
 
-  onUnmounted(() => {
-    window.removeEventListener('resize', handleResize);
-  });
-});
 </script>
 
 <template>
@@ -24,10 +14,10 @@ onMounted(() => {
       'bg-white text-black': !darkModeStore.darkMode,
       'bg-gray-900 text-white': darkModeStore.darkMode,
     }"
-    class="min-h-screen"
+    class="flex flex-col min-h-screen"
   >
     <NavBar />
-    <router-view />
+    <router-view class="flex-grow"/>
     <Footer />
   </div>
 </template>
diff --git a/src/components/partials/Footer.vue b/src/components/partials/Footer.vue
index 3255fbc..3f2240b 100644
--- a/src/components/partials/Footer.vue
+++ b/src/components/partials/Footer.vue
@@ -8,7 +8,7 @@ const darkMode = toRef(darkModeStore, 'darkMode');
 </script>
 
 <template>
-  <div class="flex flex-row fixed bottom-0 h-20 items-center ml-4">
+  <div class="flex flex-row relative bottom-0 h-20 items-center ml-4 mt-auto">
     <div class="logo">
       <el-image
         :src="url"
diff --git a/src/components/partials/NavBar.vue b/src/components/partials/NavBar.vue
index 2f7bf45..ec4cc02 100644
--- a/src/components/partials/NavBar.vue
+++ b/src/components/partials/NavBar.vue
@@ -62,38 +62,39 @@ const toggleMenu = () => {
       </div>
     </div>
     <!-- Mobile Menu (Dropdown) -->
-    <div
-      :class="{
-        block: isMenuOpen,
-        hidden: !isMenuOpen,
-        'bg-white text-black': !darkMode,
-        'bg-gray-900 text-white': darkMode,
-      }"
-      class="md:hidden flex flex-col items-center absolute w-full"
-    >
-      <router-link to="/" class="block px-3 py-2 uppercase bebas-neue-regular"
-        >Home</router-link
-      >
-      <router-link
-        to="/articles"
-        class="block px-3 py-2 uppercase bebas-neue-regular"
-        >Articles</router-link
-      >
-      <router-link
-        to="/about"
-        class="block px-3 py-2 uppercase bebas-neue-regular"
-        >About</router-link
-      >
-      <router-link
-        to="/contact"
-        class="block px-3 py-2 uppercase bebas-neue-regular"
-        >Contact</router-link
-      >
-      <!-- Theme switch -->
-      <div class="flex items-center space-x-2">
-        <ThemeSwitch class="mt-2" />
-      </div>
-    </div>
+<div
+  :class="{
+    'block': isMenuOpen,
+    'hidden': !isMenuOpen,
+    'bg-white text-black': !darkMode,
+    'bg-gray-900 text-white': darkMode,
+  }"
+  class="md:hidden flex flex-col items-center absolute w-full z-50"
+  style="top: 4rem; left: 0;"
+>
+  <router-link to="/" class="block px-3 py-2 uppercase bebas-neue-regular"
+    >Home</router-link
+  >
+  <router-link
+    to="/articles"
+    class="block px-3 py-2 uppercase bebas-neue-regular"
+    >Articles</router-link
+  >
+  <router-link
+    to="/about"
+    class="block px-3 py-2 uppercase bebas-neue-regular"
+    >About</router-link
+  >
+  <router-link
+    to="/contact"
+    class="block px-3 py-2 uppercase bebas-neue-regular"
+    >Contact</router-link
+  >
+  <!-- Theme switch -->
+  <div class="flex items-center space-x-2">
+    <ThemeSwitch class="mt-2 pb-2" />
+  </div>
+</div>
     <!-- Desktop and Tablet Navbar -->
     <div class="hidden md:flex md:items-center md:justify-between px-4 py-3 pt">
       <!-- Logo -->
@@ -126,14 +127,16 @@ const toggleMenu = () => {
 </template>
 
 <style scoped>
+
+
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
 .inverted {
   filter: invert(1);
 }
-
-@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
 .bebas-neue-regular {
   font-family: 'Bebas Neue', sans-serif;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
+  font-size: 2rem;
 }
 </style>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index f6edc6b..a22d148 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -5,18 +5,18 @@ import url3 from '@/assets/homepage-images/thursday-full-collapse-1200x1200.jpeg
 </script>
 
 <template>
-  <div class="flex flex-col h-100 px-28">
+  <div class="flex flex-col h-100 items-center">
     <h1>Latest Articles</h1>
-    <div class="flex flex-row justify-center">
-      <div class="flex flex-row space-x-9">
+    <div class="flex flex-row">
+      <div class="flex flex-col">
         <div class="millencolin">
-          <el-image :src="url" class="object-fit w-96 h-auto" lazy />
+          <el-image :src="url" class="object-fit w-72 h-auto" lazy />
         </div>
         <div class="thegaslightanthem">
-          <el-image :src="url2" class="object-fit w-96 h-auto" lazy />
+          <el-image :src="url2" class="object-fit w-72 h-auto" lazy />
         </div>
         <div class="thursday">
-          <el-image :src="url3" class="object-fit w-96 h-auto" lazy />
+          <el-image :src="url3" class="object-fit w-72 h-auto" lazy />
         </div>
       </div>
     </div>