mogging

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>