preparing template

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>

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>

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>

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>