mogging

nginx/vue/src/components/Navbar.vue

@@ -16,16 +16,21 @@ const parentPath = computed(() => {
 </script>
 
 <template>
-    <nav class="flex-row">
-        <RouterLink class="bdr-2" to="/"><h1>HOME</h1></RouterLink>
+    <nav class="left flex-col">
+        <RouterLink class="bdr-2" to="/">
+            <a>HOME</a>
+        </RouterLink>
         <RouterLink class="bdr-2" v-if="parentPath" :to="parentPath">
-            <h1>UP</h1>
+            <a>UP</a>
         </RouterLink>
     </nav>
 </template>
 
 <style scoped>
-h1 {
-    padding: 10px;
+.left {
+    width: 5vw;
+    position: sticky;
+    top: 0;
+    left: 0;
 }
 </style>

nginx/vue/src/components/Overlay.vue

@@ -1,16 +0,0 @@
-<template>
-    <div class="overlay">
-        <slot />
-    </div>
-</template>
-
-<style scoped>
-.overlay {
-    position: fixed; /* not absolute */
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    pointer-events: none;
-}
-</style>

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

@@ -28,5 +28,6 @@ async function post() {
         <input type="text" v-model="title" placeholder="Title" />
         <textarea v-model="content" placeholder="Content"></textarea>
         <button @click="post">Upload</button>
+        <!-- make textarea take up most the space -->
     </div>
 </template>

nginx/vue/src/components/backgrounds/Halftone.vue

@@ -1,39 +0,0 @@
-<template>
-    <div class="halftone" />
-</template>
-
-<style scoped>
-div {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: -1;
-    object-fit: cover; /* optional if it’s an img background */
-}
-
-.halftone {
-    --dot_size: 1px;
-    --bg_size: 3px;
-    --bg_pos: calc(var(--bg_size) / 2);
-    --blur: 0%;
-    --dot_color: #033;
-    --bg_color: #000;
-
-    background-color: var(--bg_color);
-    background-image: radial-gradient(
-        circle at center,
-        var(--dot_color) var(--dot_size),
-        transparent var(--blur)
-    );
-    background-size: var(--bg_size) var(--bg_size);
-    background-position: 0 0;
-
-    mask-image: linear-gradient(
-        30deg,
-        rgba(1, 1, 1, 1) 0%,
-        rgba(1, 1, 1, 0.9) 100%
-    );
-}
-</style>

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

@@ -37,14 +37,14 @@ onMounted(() => {
             v-if="fetched"
             :key="song"
             v-on:click="nextSong"
-            class="flex-col center-content"
+            class="flex-col center-content center-text"
         >
             <h2>Listening To</h2>
             <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 v-else class="flex-col center-content">
+        <div v-else class="flex-col center-content center-text">
             <h2>Listening To</h2>
             <img src="/img/Untitled.png" />
             <p><strong>Song:</strong> >_<</p>

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

@@ -18,6 +18,6 @@ const keys = ["name", "link"];
         :key="rowIndex"
         :href="row.link"
     >
-        <h2>{{ row.name }}</h2>
+        <p>{{ row.name }}</p>
     </a>
 </template>

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

@@ -18,6 +18,6 @@ const keys = ["name", "link"];
         :key="rowIndex"
         :to="row.link"
     >
-        <h2>{{ row.name }}</h2>
+        <p>{{ row.name }}</p>
     </RouterLink>
 </template>