many new components, renames and yays

nginx/vue/src/views/Home.vue

@@ -12,22 +12,11 @@ import Feed from "@/components/home/Feed.vue";
 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 Consumption from "@/components/home/Consumption.vue";
 </script>
 
 <template>
-    <div class="background halftone">
-        <img src="/img/memes/fire-woman.gif" class="br w-80" />
-        <div class="flex flex-col tr sidebar">
-            <Time />
-            <Timer />
-            <!-- <Chat class="bdr-2 bg-bg_primary" /> -->
-            <MusicPlayer />
-        </div>
-    </div>
-    <div class="-z-10 halftone" />
-
-    <main class="items-center flex flex-col">
+    <main class="halftone justify-center flex flex-row w-full h-full p-10">
         <div class="page a4page-portrait bdr-1 homeGrid relative">
             <Intro class="intro" />
             <Listening class="listening" />
@@ -35,27 +24,31 @@ import Watching from "@/components/home/Watching.vue";
             <Feed class="feed" />
             <Links class="links" />
             <Collage class="collage" />
-            <Watching class="watching" />
+            <Consumption class="consumption" />
             <Favorites class="favorites" />
             <Gym class="gym" />
         </div>
+        <div
+            class="flex flex-col w-1/12 sidebar border-primary place-content-between h-full sticky m-10"
+        >
+            <div class="flex flex-col">
+                <Time />
+                <Timer />
+                <!-- <Chat class="bdr-2 bg-bg_primary" /> -->
+                <!-- <MusicPlayer /> -->
+            </div>
+            <img src="/img/memes/fire-woman.gif" class="w-80" />
+        </div>
     </main>
 </template>
 
 <style scoped>
-.page > * {
+.homeGrid > * {
     @apply border-2 border-dotted;
     border-color: var(--primary);
     background-color: var(--bg_primary);
 }
 
-.sidebar > * {
-    @apply border-2;
-    background-color: var(--bg_primary);
-    border: 7px solid;
-    border-image: url("/img/borders/border4.gif") 7 round;
-}
-
 .homeGrid {
     display: grid;
     grid-gap: 5px;
@@ -63,14 +56,15 @@ import Watching from "@/components/home/Watching.vue";
     grid-template-rows: repeat(10, 1fr);
 }
 
-@media (max-width: 850px) {
+@media (max-width: 1000px) {
     .homeGrid {
         width: 100%;
         display: flex;
         flex-direction: column;
     }
     .tr,
-    .br {
+    .br,
+    .sidebar {
         display: none;
     }
 }
@@ -105,7 +99,7 @@ import Watching from "@/components/home/Watching.vue";
     grid-row: 5 / span 4;
 }
 
-.watching {
+.consumption {
     grid-column: span 4;
     grid-row: span 2;
 }