From 66ab270bcd6e82a97a12348fc5897c9602113ddf Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Sat, 29 Nov 2025 01:31:19 +0000
Subject: [PATCH] fixing styles

---
 nginx/vue/public/css/styles.css             | 11 ++++++++++
 nginx/vue/src/components/Navbar.vue         |  9 +-------
 nginx/vue/src/components/Radio.vue          | 17 ++-------------
 nginx/vue/src/components/spotify/Recent.vue | 18 +++++++++-------
 nginx/vue/src/views/Home.vue                | 23 ++++++---------------
 5 files changed, 30 insertions(+), 48 deletions(-)

diff --git a/nginx/vue/public/css/styles.css b/nginx/vue/public/css/styles.css
index 6e7c5be..575f89b 100644
--- a/nginx/vue/public/css/styles.css
+++ b/nginx/vue/public/css/styles.css
@@ -104,6 +104,17 @@ video {
 .flex-row {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1rem;
+}
+
+.flex-col {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1rem;
 }
 
 .album-img {
diff --git a/nginx/vue/src/components/Navbar.vue b/nginx/vue/src/components/Navbar.vue
index add30f1..df212ae 100644
--- a/nginx/vue/src/components/Navbar.vue
+++ b/nginx/vue/src/components/Navbar.vue
@@ -1,7 +1,7 @@
 <template>
     <nav class="no-print flex-row">
         <RouterLink to="/"><h1>HOME</h1></RouterLink>
-        <RouterLink to="/cv"><h1>CV</h1></RouterLink>
+        <!-- <RouterLink to="/cv"><h1>CV</h1></RouterLink> -->
     </nav>
 </template>
 
@@ -9,11 +9,4 @@
 nav {
     height: 10vh;
 }
-a {
-    rotate: -50deg;
-    height: 100%;
-    background: white;
-    padding: 4px;
-    border: 2px solid black;
-}
 </style>
diff --git a/nginx/vue/src/components/Radio.vue b/nginx/vue/src/components/Radio.vue
index 236639f..245da37 100644
--- a/nginx/vue/src/components/Radio.vue
+++ b/nginx/vue/src/components/Radio.vue
@@ -1,9 +1,9 @@
 <template>
-    <div v-if="streamLive" class="stream-live">
+    <div v-if="streamLive">
         <img src="/img/tmpen31z3pe.PNG" />
         <audio controls :src="streamUrl" ref="audio"></audio>
     </div>
-    <div v-else class="stream-not-live">
+    <div v-else>
         <img src="/img/tmpen31z3pe.PNG" />
         <p>Stream is currently offline.</p>
         <button @click="checkStream()">Check Stream</button>
@@ -40,16 +40,3 @@ onMounted(() => {
     setInterval(checkStream, 30000);
 });
 </script>
-
-<style scoped>
-.stream-live {
-    background: white;
-    border: 2px solid black;
-    text-align: center;
-}
-.stream-not-live {
-    background: white;
-    border: 2px solid black;
-    text-align: center;
-}
-</style>
diff --git a/nginx/vue/src/components/spotify/Recent.vue b/nginx/vue/src/components/spotify/Recent.vue
index aac151d..2435bef 100644
--- a/nginx/vue/src/components/spotify/Recent.vue
+++ b/nginx/vue/src/components/spotify/Recent.vue
@@ -1,12 +1,14 @@
 <template>
-    <div
-        v-for="(song, idx) in played"
-        :key="song.track.id || idx"
-        class="tile1"
-    >
-        <img :src="song.track.album.images[0].url" />
-        <p><strong>Song:</strong> {{ song.track.name }}</p>
-        <p><strong>Artist:</strong> {{ song.track.artists[0].name }}</p>
+    <div class="flex-row">
+        <div
+            v-for="(song, idx) in played"
+            :key="song.track.id || idx"
+            class="tile1 bg-white border2 shadow1"
+        >
+            <img :src="song.track.album.images[0].url" />
+            <p><strong>Song:</strong> {{ song.track.name }}</p>
+            <p><strong>Artist:</strong> {{ song.track.artists[0].name }}</p>
+        </div>
     </div>
 </template>
 
diff --git a/nginx/vue/src/views/Home.vue b/nginx/vue/src/views/Home.vue
index de96ac5..8f9a971 100644
--- a/nginx/vue/src/views/Home.vue
+++ b/nginx/vue/src/views/Home.vue
@@ -5,9 +5,9 @@ import Radio from "@/components/Radio.vue";
 </script>
 
 <template>
-    <main>
+    <main class="flex-row">
         <div class="border1 tile1">
-            <div class="border2">
+            <div class="border2 bg-white shadow1">
                 <img src="/img/epic.jpeg" />
                 <h1>Welcome</h1>
                 <p>Hi im Adam</p>
@@ -15,7 +15,7 @@ import Radio from "@/components/Radio.vue";
         </div>
 
         <div class="border1 tile1">
-            <div class="border2">
+            <div class="border2 bg-white shadow1">
                 <!-- <video>
                     <source src="/img/memes/1761540684738196.webm" />
                 </video> -->
@@ -50,26 +50,15 @@ import Radio from "@/components/Radio.vue";
         </div> -->
 
         <div class="border1 tile1">
-            <SpotifyListening class="border2 bg-white" />
+            <SpotifyListening class="border2 bg-white shadow1" />
         </div>
 
         <div class="border1 tile1">
-            <Radio />
+            <Radio class="border2 bg-white shadow1" />
         </div>
 
         <div class="border1 tile3">
-            <SpotifyRecent class="border" />
+            <SpotifyRecent />
         </div>
     </main>
 </template>
-
-<style scoped>
-main {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    /*align-items: center;*/
-    justify-content: center;
-    gap: 1rem;
-}
-</style>