From 9f5fd7f240d5cbdf59b46c92ab10d7e7d8c2747d Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Fri, 28 Nov 2025 00:49:00 +0000
Subject: [PATCH] preparing template

---
 nginx/vue/src/App.vue               | 15 ++++++---
 nginx/vue/src/components/Navbar.vue |  8 ++---
 nginx/vue/src/views/CV.vue          |  6 ++--
 nginx/vue/src/views/Home.vue        | 50 ++++++++++++++++++++---------
 4 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/nginx/vue/src/App.vue b/nginx/vue/src/App.vue
index eeb5a1c..2ba9ee5 100644
--- a/nginx/vue/src/App.vue
+++ b/nginx/vue/src/App.vue
@@ -5,11 +5,18 @@ import Footer from "@/components/Footer.vue";
 </script>
 
 <template>
-    <Navbar />
+    <Navbar style="height: 10vh" />
 
-    <RouterView />
+    <RouterView :class="$route.name" />
 
-    <Footer />
+    <Footer style="height: 10vh" />
 </template>
 
-<style scoped></style>
+<style>
+.home {
+    height: 80vh; /* takes full window height */
+    overflow: hidden; /* removes scrolling */
+    display: flex;
+    flex-direction: column;
+}
+</style>
diff --git a/nginx/vue/src/components/Navbar.vue b/nginx/vue/src/components/Navbar.vue
index 90fcb40..ebc8d2b 100644
--- a/nginx/vue/src/components/Navbar.vue
+++ b/nginx/vue/src/components/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-    <nav class="no-print">
+    <nav class="no-print flex-row">
         <RouterLink to="/">Home</RouterLink>
         <RouterLink to="/cv">CV</RouterLink>
     </nav>
@@ -7,10 +7,6 @@
 
 <style>
 nav {
-    position: fixed;
-    width: 100%;
-    left: 0;
-    top: 0;
-    background: var(--background);
+    height: 10vh;
 }
 </style>
diff --git a/nginx/vue/src/views/CV.vue b/nginx/vue/src/views/CV.vue
index da88f05..c3e510c 100644
--- a/nginx/vue/src/views/CV.vue
+++ b/nginx/vue/src/views/CV.vue
@@ -1,7 +1,5 @@
 <template>
     <main>
-        <RouterLink class="no-print" to="/">Home</RouterLink>
-
         <div
             class="no-print"
             style="width: 100%; text-align: center; margin: 20px 0"
@@ -350,4 +348,8 @@
 
 <style scoped>
 @import url("/css/cv_styles.css");
+
+main {
+    overflow-y: scroll;
+}
 </style>
diff --git a/nginx/vue/src/views/Home.vue b/nginx/vue/src/views/Home.vue
index c58ef48..e1bfb26 100644
--- a/nginx/vue/src/views/Home.vue
+++ b/nginx/vue/src/views/Home.vue
@@ -4,31 +4,49 @@ import Radio from "@/components/Radio.vue";
 </script>
 
 <template>
-    <Spotify class="floating" style="left: 10vw; top: 10vh" />
-    <Radio class="floating" style="left: 90vw; top: 10vh" />
+    <main>
+        <div class="bordered-1">
+            <h1>Welcome</h1>
+            <img src="/img/epic.jpeg" />
 
-    <main class="a4page">
-        <h1>Welcome</h1>
-        <img src="/img/epic.jpeg" />
+            <h2>whoami?</h2>
+            <p>Hi im Adam</p>
+        </div>
 
-        <h2>whoami?</h2>
-        <p>Hi im Adam</p>
+        <div class="bordered-1">
+            <h2>cv</h2>
+            <RouterLink to="/cv">cv</RouterLink>
+        </div>
 
-        <h2>cv</h2>
-        <RouterLink to="/cv">cv</RouterLink>
+        <div class="bordered-1">
+            <h2>bookmarks</h2>
+            <RouterLink to="/bookmarks">bookmarks</RouterLink>
+        </div>
 
-        <h2>bookmarks</h2>
-        <RouterLink to="/bookmarks">bookmarks</RouterLink>
-
-        <div>
+        <div class="bordered-1">
             <h2>Shrines</h2>
             <RouterLink to="/shrines/gto">gto</RouterLink>
-            <RouterLink to="/shrine/demoman">demoman</RouterLink>
+            <RouterLink to="/shrines/demoman">demoman</RouterLink>
             <RouterLink to="/shrines/skipskipbenben">skipskipbenben</RouterLink>
             <RouterLink to="/shrines/evangelion">evangelion</RouterLink>
         </div>
+
+        <div class="bordered-1">
+            <Spotify class="border" />
+        </div>
+        <div class="bordered-1">
+            <Radio />
+        </div>
     </main>
 </template>
 
-<styles scoped>
-</styles>
+<style scoped>
+main {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+}
+</style>