mogging

nginx/vue/public/css/styles.css

@@ -45,9 +45,9 @@
     /* BACKGROUND COLORS */
     --bg-body: #111;
     --bg_primary: #fff;
-    --bg_secondary: #444;
+    --bg_secondary: #ffa;
-    --bg_tertiary: #666;
+    --bg_tertiary: #aaa;
-    --bg_quaternary: #888;
+    --bg_quaternary: #999;
 
     --margin: 3px;
     --padding: 3px;
@@ -68,16 +68,19 @@ body {
 }
 
 a {
+    text-align: center;
     text-decoration: none;
     padding: 0px;
     margin: 0px;
-    background-color: var(--bg_primary);
+    background-color: var(--bg_secondary);
 }
 
 h1,
 h2,
 h3,
 h4 {
+    background-color: var(--bg_primary);
+    border-bottom: 1px solid var(--bg_secondary);
     color: var(--primary);
     font-family: var(--font_heading);
     margin: var(--margin);
@@ -222,8 +225,10 @@ tr {
 
 .center-content {
     align-items: center;
+}
+
+.center-text {
     text-align: center;
-    justify-content: center;
 }
 
 .left-content {
@@ -239,6 +244,10 @@ tr {
     margin: 0px;
 }
 
+.flex-center {
+    justify-content: center;
+}
+
 .scroll {
     overflow: scroll;
 }
@@ -264,6 +273,10 @@ tr {
     padding: 2px;
 }
 
+.inline {
+    display: inline;
+}
+
 .space-around {
     justify-content: space-around;
 }
@@ -320,13 +333,15 @@ tr {
         margin: 0 auto; /* center horizontally */
         box-sizing: border-box;
     }
-    .a3page-portrait {
+}
+@media (max-width: 600px) {
+    .a5page-portrait {
         width: 100%; /* fill mobile width */
         height: auto; /* adjust height automatically */
         margin: 0 auto; /* center horizontally */
         box-sizing: border-box;
     }
-    .a3page-landscape {
+    .a5page-landscape {
         width: 100%; /* fill mobile width */
         height: auto; /* adjust height automatically */
         margin: 0 auto; /* center horizontally */
@@ -334,3 +349,78 @@ tr {
     }
 }
 /* END OF PHONE */
+
+/* BACKGROUND */
+.overlay {
+    position: fixed; /* not absolute */
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.wfull {
+    width: 100%;
+}
+
+.w-10vw {
+    width: 10vw;
+}
+
+.tl {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+}
+
+.tr {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+}
+
+.bl {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+}
+
+.br {
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+}
+
+.background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+    pointer-events: none;
+}
+
+.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%
+    );
+}

nginx/vue/src/components/Navbar.vue

@@ -16,16 +16,21 @@ const parentPath = computed(() => {
 </script>
 
 <template>
-    <nav class="flex-row">
+    <nav class="left flex-col">
-        <RouterLink class="bdr-2" to="/"><h1>HOME</h1></RouterLink>
+        <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 {
+.left {
-    padding: 10px;
+    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>

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="background halftone" />
-        <div class="a5page-portrait bdr-1 grid">
+        <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>