mogging

nginx/vue/src/views/Admin.vue

@@ -2,26 +2,17 @@
 import Login from "@/components/admin/Login.vue";
 import CreateUser from "@/components/admin/CreateUser.vue";
 import CreatePost from "@/components/admin/CreatePost.vue";
-
-import Halftone from "@/components/backgrounds/Halftone.vue";
 </script>
 
 <template>
     <main class="center-content flex-col">
-        <Halftone />
-        <div class="a5page-portrait bdr-1 grid">
+        <div class="background halftone" />
+        <div class="a5page-portrait bdr-1 flex-col">
             <Login class="bdr-2 bg-secondary" />
+            <!--
             <CreateUser class="bdr-2 bg-secondary" />
+            -->
             <CreatePost class="bdr-2 bg-secondary" />
         </div>
     </main>
 </template>
-
-<style scoped>
-.grid {
-    display: grid;
-    grid-gap: 10px;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(2, 1fr);
-}
-</style>

nginx/vue/src/views/Bookmarks.vue

@@ -64,6 +64,7 @@ const art_links = [
 
 <template>
     <main class="center-content flex-col">
+        <div class="background halftone" />
         <div class="a4page-portrait bdr-1 flex-col relative scroll-y gap">
             <h1>Radio Links</h1>
             <LinkTable :linkArr="radio_links" />

nginx/vue/src/views/CV.vue

@@ -464,6 +464,7 @@ h1,
 h2,
 h3,
 h4 {
+    border: none;
     color: var(--primary);
     font-family: var(--font-heading);
     text-transform: capitalize;

nginx/vue/src/views/Home.vue

@@ -1,4 +1,6 @@
 <script setup>
+import Timer from "@/components/quick/Timer.vue";
+
 import Intro from "@/components/home/Intro.vue";
 import Stamps from "@/components/home/Stamps.vue";
 import Listening from "@/components/home/Listening.vue";
@@ -8,23 +10,17 @@ import Collage from "@/components/home/Collage.vue";
 import Favorites from "@/components/home/Favorites.vue";
 import Gym from "@/components/home/Gym.vue";
 import Watching from "@/components/home/Watching.vue";
-
-import Halftone from "@/components/backgrounds/Halftone.vue";
-import Overlay from "@/components/Overlay.vue";
 </script>
 
 <template>
-    <Halftone />
+    <div class="overlay">
+        <img src="/img/memes/fire-woman.gif" class="br w-10vw" />
+        <Timer class="tr bdr-2 bg-primary" />
+    </div>
+    <div class="background halftone" />
+
     <main class="center-content flex-col">
         <div class="a4page-portrait bdr-1 grid relative">
-            <!-- <Overlay> -->
-            <!-- <img src="/img/memes/star.gif" class="ov1" /> -->
-            <!-- <img src="/img/memes/welcome2.png" class="ov2" /> -->
-            <!-- <img src="/img/memes/pidgeon.gif" class="ov3" /> -->
-            <!-- <img src="/img/memes/no_slip.png" class="ov5" /> -->
-            <!-- <img src="/img/memes/beer.png" class="ov6" /> -->
-            <!-- </Overlay> -->
-
             <Intro class="intro bdr-primary bg-primary" />
             <Listening class="listening bdr-primary bg-primary" />
             <Stamps class="stamps bdr-primary bg-primary" />
@@ -36,7 +32,6 @@ import Overlay from "@/components/Overlay.vue";
             <Gym class="gym bdr-primary bg-primary" />
         </div>
     </main>
-    <img src="/img/memes/fire-woman.gif" class="ov4" />
 </template>
 
 <style scoped>
@@ -46,12 +41,6 @@ import Overlay from "@/components/Overlay.vue";
     grid-template-columns: repeat(10, 1fr);
     grid-template-rows: repeat(10, 1fr);
 }
-.ov4 {
-    position: fixed; /* instead of absolute */
-    bottom: 0;
-    right: 0;
-    width: 250px; /* keeps size fixed */
-}
 
 @media (max-width: 850px) {
     .grid {
@@ -59,9 +48,6 @@ import Overlay from "@/components/Overlay.vue";
         display: flex;
         flex-direction: column;
     }
-    .ov4 {
-        width: 100px; /* keeps size fixed */
-    }
 }
 
 .intro {
@@ -107,46 +93,4 @@ import Overlay from "@/components/Overlay.vue";
     grid-column: span 3;
     grid-row: span 2;
 }
-
-.ov1 {
-    rotate: 10deg;
-    width: 100px;
-    position: absolute;
-    top: -90px;
-    left: 0px;
-}
-.ov2 {
-    width: 100px;
-    position: absolute;
-    top: -102px;
-    right: 0px;
-}
-.ov3 {
-    width: 200px;
-    position: absolute;
-    bottom: -50px;
-    left: -200px;
-}
-.ov5 {
-    height: 100px;
-    position: absolute;
-    top: 100px;
-    right: -100px;
-}
-.ov6 {
-    height: 250px;
-    position: absolute;
-    top: 450px;
-    right: -200px;
-    animation: floatY 5s ease-in-out infinite alternate;
-}
-
-@keyframes floatY {
-    from {
-        transform: translateY(0);
-    }
-    to {
-        transform: translateY(-500px);
-    }
-}
 </style>

nginx/vue/src/views/Notes.vue

@@ -8,6 +8,7 @@ const note_links = [
 
 <template>
     <main class="center-content flex-col">
+        <div class="background halftone" />
         <div class="a4page-portrait bdr-1 flex-col relative scroll-y gap">
             <RouterTable :linkArr="note_links" />
         </div>

nginx/vue/src/views/Shrines.vue

@@ -10,6 +10,7 @@ const shrine_links = [
 
 <template>
     <main class="center-content flex-col">
+        <div class="background halftone" />
         <div class="a4page-portrait bdr-1 flex-col relative scroll-y gap">
             <RouterTable :linkArr="shrine_links" />
         </div>