adding tailwind css

nginx/vue/src/components/Navbar.vue

@@ -16,11 +16,15 @@ const parentPath = computed(() => {
 </script>
 
 <template>
-    <nav class="left flex-col">
-        <RouterLink class="bdr-2 bg-primary" to="/">
-            <a>HOME</a>
+    <nav class="flex flex-col">
+        <RouterLink class="bdr-2 bg-bg_primary" to="/">
+            <a class="text-3xl">HOME</a>
         </RouterLink>
-        <RouterLink class="bdr-2 bg-primary" v-if="parentPath" :to="parentPath">
+        <RouterLink
+            class="bdr-2 bg-bg_primary"
+            v-if="parentPath"
+            :to="parentPath"
+        >
             <a>UP</a>
         </RouterLink>
     </nav>

nginx/vue/src/components/Radio.vue

@@ -5,7 +5,7 @@
     </div>
     <div v-else>
         <img src="/img/tmpen31z3pe.PNG" />
-        <div class="margin1">
+        <div class="m-1">
             <p>Stream is offline. Tune in Fridays @ 6:00pm, Monday @ 8:00am</p>
             <button @click="checkStream()">Check Stream</button>
         </div>

nginx/vue/src/components/admin/CreatePost.vue

@@ -23,7 +23,7 @@ async function post() {
 </script>
 
 <template>
-    <div v-if="auth.loggedIn" class="flex-col">
+    <div v-if="auth.loggedIn" class="flex flex-col">
         <h1>Create Post</h1>
         <input type="text" v-model="title" placeholder="Title" />
         <textarea v-model="content" placeholder="Content"></textarea>

nginx/vue/src/components/admin/CreateUser.vue

@@ -12,13 +12,13 @@ function handleLogin() {
 </script>
 
 <template>
-    <div v-if="auth.loggedIn" class="flex-col">
+    <div v-if="auth.loggedIn" class="flex flex-col">
         <h1>Logged in</h1>
         <p>{{ auth.user.id }}</p>
         <p>{{ auth.user.username }}</p>
         <p>{{ auth.user.admin }}</p>
     </div>
-    <div v-else class="flex-col">
+    <div v-else class="flex flex-col">
         <h1>Create User</h1>
         <input type="text" v-model="username" placeholder="Username" />
         <input type="password" v-model="password" placeholder="Password" />

nginx/vue/src/components/admin/Login.vue

@@ -16,14 +16,14 @@ function handleLogout() {
 </script>
 
 <template>
-    <div v-if="auth.loggedIn" class="flex-col">
+    <div v-if="auth.loggedIn" class="flex flex-col">
         <h1>Logged in</h1>
         <p>{{ auth.user.id }}</p>
         <p>{{ auth.user.username }}</p>
         <p>{{ auth.user.admin }}</p>
         <button @click="handleLogout">Log Out</button>
     </div>
-    <div v-else class="flex-col">
+    <div v-else class="flex flex-col">
         <h1>Login</h1>
         <input type="text" v-model="username" placeholder="Username" />
         <input type="password" v-model="password" placeholder="Password" />

nginx/vue/src/components/home/Collage.vue

@@ -38,7 +38,7 @@ onUnmounted(() => {
 <template>
     <Transition name="fade" mode="out-in">
         <div
-            class="image-viewer center-text"
+            class="image-viewer text-center"
             @click="nextImage"
             :key="currentIndex"
         >

nginx/vue/src/components/home/Favorites.vue

@@ -61,9 +61,9 @@ const favs = [
 </script>
 
 <template>
-    <div class="flex-col center-content">
+    <div class="flex flex-col items-center">
         <h2>favs</h2>
-        <div class="scroll fill">
+        <div class="overflow-scroll flex-1 border-box">
             <OptionalLinkTable class="scroll" :data="favs" />
         </div>
     </div>

nginx/vue/src/components/home/Feed.vue

@@ -40,16 +40,24 @@ onMounted(() => {
 </script>
 
 <template>
-    <div class="flex-col pad scroll-y left-content">
+    <div
+        class="flex flex-col p-1 overflow-scroll text-left items-start justify-start"
+    >
         <h2>{{ post.title }}</h2>
-        <Markdown class="fill wrap" :source="post.content" />
+        <Markdown class="flex-1 border-box text-wrap" :source="post.content" />
         <p>by: {{ post.author.username }}</p>
         <small
             >Created at: {{ new Date(post.createdAt).toLocaleString() }}</small
         >
-        <div class="flex-row fill-width">
-            <button class="fill" v-if="!leftCap" @click="prevPost">Prev</button>
-            <button class="fill" v-if="!rightCap" @click="nextPost">
+        <div class="flex flex-row w-full">
+            <button class="flex-1 border-box" v-if="!leftCap" @click="prevPost">
+                Prev
+            </button>
+            <button
+                class="flex-1 border-box"
+                v-if="!rightCap"
+                @click="nextPost"
+            >
                 Next
             </button>
         </div>

nginx/vue/src/components/home/Gym.vue

@@ -8,10 +8,10 @@ const gym = [
 </script>
 
 <template>
-    <div class="flex-col center-content">
+    <div class="flex flex-col items-center">
         <h2>Gym</h2>
         <p>I'm not a gym geek but I have a consistent routine:</p>
-        <div class="scroll fill">
+        <div class="overflow-scroll flex-1 border-box">
             <OptionalLinkTable :data="gym" />
         </div>
     </div>

nginx/vue/src/components/home/Intro.vue

@@ -1,5 +1,7 @@
 <template>
-    <div class="fill flex-col pad left-content">
+    <div
+        class="flex-1 border-box flex flex-col p-1 text-left items-start justify-start"
+    >
         <h2>Intro</h2>
         <p>
             Hi, I'm Adam, thank you for visiting my website. I'm currently a 20

nginx/vue/src/components/home/Links.vue

@@ -19,11 +19,11 @@ const social_links = [
 </script>
 
 <template>
-    <div class="flex-col space-between">
-        <div class="flex-col gap">
+    <div class="flex flex-col justify-between">
+        <div class="flex flex-col gap-1">
             <RouterTable :linkArr="site_links" />
         </div>
-        <div class="flex-col gap">
+        <div class="flex flex-col gap-1">
             <LinkTable :linkArr="social_links" />
         </div>
     </div>

nginx/vue/src/components/home/Listening.vue

@@ -32,7 +32,7 @@ onUnmounted(() => {
         <div
             @click="nextSong"
             :key="song.track.id"
-            class="flex-col center-content center-text"
+            class="flex flex-col items-center text-center"
         >
             <h2>Listening To</h2>
             <img :src="song.track.album.images[0].url" />

nginx/vue/src/components/home/Stamps.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="flex-col center-content">
-        <div class="flex-col">
+    <div class="flex-col items-center">
+        <div class="flex flex-col">
             <!-- <img src="/img/stamps/portal.gif" />
             <img src="/img/stamps/miku.gif" />
             <img src="/img/stamps/utau.gif" /> -->
-            <div class="flex-row center-content">
+            <div class="flex flex-row items-center">
                 <p>--> make webring w me --></p>
                 <a href="https://www.adam-french.co.uk">
                     <img
@@ -12,7 +12,7 @@
                     />
                 </a>
             </div>
-            <div class="flex-row center-content">
+            <div class="flex flex-row items-center">
                 <p>--> hit up bro --></p>
                 <a href="https://jacobbarron.xyz">
                     <img

nginx/vue/src/components/home/Watching.vue

@@ -56,9 +56,9 @@ const data = [
 </script>
 
 <template>
-    <div class="flex-col center-content">
+    <div class="flex flex-col items-center">
         <h2>Consumption</h2>
-        <div class="scroll fill">
+        <div class="overflow-scroll flex-1 border-box">
             <OptionalLinkTable :data="data" />
         </div>
     </div>

nginx/vue/src/components/quick/Chat.vue

@@ -14,12 +14,12 @@ onUnmounted(() => {
 
 <template>
     <div>
-        <div class="flex-col">
+        <div class="flex flex-col">
             <p v-for="message in messages" :key="message.id">
                 {{ message.content }}
             </p>
         </div>
-        <div class="flex-row">
+        <div class="flex flex-row">
             <input v-model="messageInput" @keyup.enter="sendMessage" />
             <button @click="sendMessage">Send</button>
         </div>

nginx/vue/src/components/quick/LinkTable.vue

@@ -13,7 +13,7 @@ const keys = ["name", "link"];
 
 <template>
     <a
-        class="bdr-2 bg-secondary"
+        class="bdr-2 bg-bg_primary"
         v-for="(row, rowIndex) in linkArr"
         :key="rowIndex"
         :href="row.link"

nginx/vue/src/components/quick/Markdown.vue

@@ -13,7 +13,7 @@ const props = defineProps({
 <template>
     <div
         v-html="mdIt.render(props.source)"
-        class="flex-col center-content"
+        class="flex flex-col items-center"
     ></div>
 </template>
 

nginx/vue/src/components/quick/MusicPlayer.vue

@@ -0,0 +1,92 @@
+<script setup>
+
+</script>
+
+<template>
+    <audio/>
+    <div class="musicPlayerGrid w-50">
+        <div class="album_cover">
+            <img src="/img/Untitled.png"></img>
+        </div>
+        <div class="controls">
+            <div class="sliders">
+                <div class="timeline"/>
+                <div class="volume"/>
+            </div>
+            <div class="buttons">
+                <div class="rewind"/>
+                <div class="playPause"/>
+                <div class="fastforward"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.musicPlayerGrid {
+    display: grid;
+    grid-gap: 5px;
+    grid-template-rows: repeat(4, 1fr);
+    background-color: blue;
+    align-items: stretch; /* rows (block axis) */
+    justify-items: stretch; /* columns (inline axis) */
+    padding: 5px;
+}
+img {
+    width: 100%;
+}
+
+.album_cover {
+    grid-row: 1 / span 3;
+    background-color: grey;
+    box-sizing: border-box;
+}
+
+.controls {
+    width: 100%;
+    grid-row: 4 / span 1;
+    box-sizing: border-box;
+
+    display: grid;
+    grid-template-rows: repeat(4, 1fr);
+    grid-gap: 5px;
+}
+
+.sliders {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 5px;
+}
+
+.timeline {
+    grid-column: 1;
+    background-color: white;
+}
+
+.volume {
+    grid-column: 2;
+    background-color: white;
+}
+
+.buttons {
+    background-color: black;
+    grid-row: 2 / -1;
+
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 5px;
+}
+
+.rewind {
+    grid-column: 1;
+    background-color: grey;
+}
+.fastforward {
+    grid-column: 4;
+    background-color: grey;
+}
+.playPause {
+    grid-column: 2/span 2;
+    background-color: grey;
+}
+</style>

nginx/vue/src/components/quick/RouterTable.vue

@@ -13,7 +13,7 @@ const keys = ["name", "link"];
 
 <template>
     <RouterLink
-        class="bdr-2 bg-secondary"
+        class="bdr-2 bg-bg_primary"
         v-for="(row, rowIndex) in linkArr"
         :key="rowIndex"
         :to="row.link"

nginx/vue/src/components/quick/Time.vue

@@ -23,7 +23,7 @@ setInterval(updateDateTime, 60000);
 </script>
 
 <template>
-    <div class="flex-col">
+    <div class="flex flex-col">
         <h4>{{ time }}</h4>
         <h4>{{ weekday }} {{ day }}, {{ month }}</h4>
     </div>

nginx/vue/src/components/quick/Timer.vue

@@ -62,20 +62,20 @@ function playFinishedSound() {
 </script>
 
 <template>
-    <div class="flex-col">
-        <h4 class="center-content">Timer</h4>
+    <div class="flex flex-col">
+        <h4 class="items-center">Timer</h4>
         <!-- Min input and Second input-->
-        <div v-if="finished && paused" class="flex-row">
+        <div v-if="finished && paused" class="flex flex-row">
             <input v-model="minutesInput" type="number" min="0" max="59" />
             <input v-model="secondsInput" type="number" min="0" max="59" />
         </div>
-        <div v-if="finished && !paused" class="flex-col">
+        <div v-if="finished && !paused" class="flex flex-col">
             <h1>Timer finished!</h1>
         </div>
         <div v-if="!finished && paused">
             <h1>Paused</h1>
         </div>
-        <div v-if="!finished && !paused" class="flex-col">
+        <div v-if="!finished && !paused" class="flex flex-col">
             <h1>
                 {{ minutes.toString().padStart(2, "0") }}:{{
                     seconds.toString().padStart(2, "0")
@@ -87,7 +87,7 @@ function playFinishedSound() {
                 }}
             </h1>
         </div>
-        <div class="flex-col">
+        <div class="flex flex-col">
             <button v-if="paused" @click="startTimer">Proceed</button>
             <button v-if="!finished && !paused" @click="pauseTimer">
                 Pause

nginx/vue/src/components/quick/ToggleLinkTable.vue

@@ -17,7 +17,7 @@ const show_links = ref(false);
 </script>
 
 <template>
-    <div class="flex-row">
+    <div class="flex flex-row">
         <h2>{{ title }}</h2>
         <button @click="show_links = !show_links">Toggle</button>
     </div>

nginx/vue/src/components/quick/Wip.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="a4page-portrait bdr-1 flex-col relative scroll-y">
+    <div class="a4page-portrait bdr-1 flex flex-col relative overflow-scroll">
         <RouterLink to="/" class="bdr-2">
             <img src="/img/memes/epic.jpeg" />
         </RouterLink>