fixing styles

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 {

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>

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>

nginx/vue/src/components/spotify/Recent.vue

@@ -1,12 +1,14 @@
 <template>
-    <div
+    <div class="flex-row">
-        v-for="(song, idx) in played"
+        <div
-        :key="song.track.id || idx"
+            v-for="(song, idx) in played"
-        class="tile1"
+            :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>
+            <img :src="song.track.album.images[0].url" />
-        <p><strong>Artist:</strong> {{ song.track.artists[0].name }}</p>
+            <p><strong>Song:</strong> {{ song.track.name }}</p>
+            <p><strong>Artist:</strong> {{ song.track.artists[0].name }}</p>
+        </div>
     </div>
 </template>
 

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>