changing styles

nginx/vue/public/css/styles.css

@@ -37,18 +37,20 @@
     --portal_light_blue: #00a2ff;
 
     /* MAIN COLORS */
-    --primary: #fff;
+    --primary: #000;
     --secondary: #000;
     --tertiary: #5a6952;
     --quaternary: #424542;
 
     /* BACKGROUND COLORS */
     --bg-body: #111;
-    --bg_primary: #244;
+    --bg_primary: #fff;
     --bg_secondary: #444;
     --bg_tertiary: #666;
     --bg_quaternary: #888;
 
+    --margin: 3px;
+
     /* FONTS USED */
     --font-heading: big_noodle_titling;
     --font-text: CreatoDisplay;
@@ -67,7 +69,7 @@ a {
     text-decoration: none;
     padding: 0px;
     margin: 0px;
-    background-color: var(--bg_secondary);
+    background-color: var(--bg_primary);
 }
 
 h1,
@@ -76,10 +78,12 @@ h3,
 h4 {
     color: var(--primary);
     font-family: var(--font-heading);
+    margin: var(--margin);
 }
 
 p {
     color: var(--secondary);
+    margin: var(--margin);
 }
 
 video {
@@ -93,18 +97,11 @@ button {
 
 table {
     border: 1px solid var(--primary);
-}
+    border-collapse: collapse;
-
-th {
-    border: 1px solid var(--primary);
 }
 
 tr {
-    border: 1px solid var(--primary);
+    border-bottom: 1px solid var(--primary);
-}
-
-td {
-    border: 1px solid var(--primary);
 }
 
 /* END OF ELEMENTS */
@@ -233,8 +230,7 @@ td {
 /* SIZING */
 
 .fill {
-    width: 100%;
+    flex: 1;
-    height: 100%;
     box-sizing: border-box;
 }
 
@@ -261,15 +257,20 @@ td {
     margin: 0px;
 }
 
+.scroll {
+    overflow: scroll;
+}
+
 .flex {
     display: flex;
+    padding: 2px;
 }
 
 .flex-col {
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
-    margin: 0px;
+    padding: 2px;
 }
 
 .floating {

nginx/vue/src/components/Navbar.vue

@@ -1,6 +1,14 @@
 <template>
     <nav class="flex-row">
-        <RouterLink class="bdr-2" to="/"><h1>HOME</h1></RouterLink>
+        <RouterLink class="bdr-primary margin1" to="/"
+            ><h1>HOME</h1></RouterLink
+        >
         <!-- <RouterLink to="/cv"><h1>CV</h1></RouterLink> -->
     </nav>
 </template>
+
+<style scoped>
+h1 {
+    padding: 10px;
+}
+</style>

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

@@ -14,11 +14,11 @@ div {
 
 .halftone {
     --dot_size: 1px;
-    --bg_size: 5px;
+    --bg_size: 3px;
     --bg_pos: calc(var(--bg_size) / 2);
     --blur: 0%;
-    --dot_color: #044;
+    --dot_color: #033;
-    --bg_color: #114;
+    --bg_color: #000;
 
     background-color: var(--bg_color);
     background-image: radial-gradient(
@@ -32,7 +32,7 @@ div {
     mask-image: linear-gradient(
         30deg,
         rgba(1, 1, 1, 1) 0%,
-        rgba(1, 1, 1, 0.85) 100%
+        rgba(1, 1, 1, 0.9) 100%
     );
 }
 </style>

nginx/vue/src/components/home/Favorites.vue

@@ -1,8 +1,9 @@
 <template>
-    <div>
+    <div class="flex-col">
-        <p class="margin1">My favs</p>
+        <h2>favs</h2>
-        <div class="flex-row bdr-primary">
+        <div class="fill flex-row center-content scroll">
             <table>
+                <tbody>
                     <tr>
                         <th>Color</th>
                         <td>Aqua</td>
@@ -11,10 +12,6 @@
                         <th>Pet</th>
                         <td>Cat</td>
                     </tr>
-                <tr>
-                    <th>Food</th>
-                    <td>Eggs</td>
-                </tr>
                     <tr>
                         <th>Subject</th>
                         <td>Math</td>
@@ -27,32 +24,15 @@
                         <th>Sport</th>
                         <td>Running</td>
                     </tr>
-            </table>
-            <table>
                     <tr>
                         <th>Color</th>
                         <td>Aqua</td>
                     </tr>
                     <tr>
-                    <th>Pet</th>
+                        <th>Ingredient</th>
-                    <td>Cat</td>
-                </tr>
-                <tr>
-                    <th>Food</th>
                         <td>Eggs</td>
                     </tr>
-                <tr>
+                </tbody>
-                    <th>Subject</th>
-                    <td>Math</td>
-                </tr>
-                <tr>
-                    <th>Drink</th>
-                    <td>Monster</td>
-                </tr>
-                <tr>
-                    <th>Sport</th>
-                    <td>Running</td>
-                </tr>
             </table>
         </div>
     </div>

nginx/vue/src/components/home/Gym.vue

@@ -1,6 +1,23 @@
 <template>
-    <div>
+    <div class="flex-row center-content">
-        <img src="/img/epic.jpeg" />
+        <h2>Gym</h2>
+        <p>I'm not a gym geek but I have a consistent routine:</p>
+        <table>
+            <tbody>
+                <tr>
+                    <th>Row</th>
+                    <td>30 min</td>
+                </tr>
+                <tr>
+                    <th>Run</th>
+                    <td>5k</td>
+                </tr>
+                <tr>
+                    <th>Pushup & Squat</th>
+                    <td>50</td>
+                </tr>
+            </tbody>
+        </table>
     </div>
 </template>
 

nginx/vue/src/components/home/Intro.vue

@@ -1,11 +1,8 @@
 <template>
     <div class="fill flex-col">
         <div class="div">
-            <h1>Welcome</h1>
+            <h1>Hello</h1>
-            <p>This is my website, currently under construction.</p>
+            <p>Nice to meet you</p>
-            <p>THANKS FOR VISITING ^_^</p>
-            <p>THANKS FOR VISITING ^_^</p>
-            <p>THANKS FOR VISITING ^_^</p>
         </div>
     </div>
 </template>

nginx/vue/src/components/home/Links.vue

@@ -1,10 +1,24 @@
 <template>
     <div class="flex-col">
-        <RouterLink class="bdr-2" to="/cv">
+        <RouterLink class="bdr-secondary" to="/cv">
             <h1>CV</h1>
         </RouterLink>
-        <RouterLink class="bdr-2" to="/admin">
+        <RouterLink class="bdr-secondary" to="/admin">
             <h1>ADMIN</h1>
         </RouterLink>
+        <a
+            class="bdr-secondary"
+            href="https://steamcommunity.com/id/SteveThePug"
+            ><h1>Steam</h1></a
+        >
+        <a href="https://github.com/SteveThePug" class="bdr-secondary"
+            ><h1>Github</h1></a
+        >
+        <a
+            href="https://open.spotify.com/user/stevethepug"
+            class="bdr-secondary"
+        >
+            <h1>Spotify</h1></a
+        >
     </div>
 </template>

nginx/vue/src/components/home/Watching.vue

@@ -1,6 +1,56 @@
 <template>
-    <div>
+    <div class="flex-col center-content">
-        <img src="/img/epic.jpeg" />
+        <h2>Watching/Playing</h2>
+        <div class="scroll fill">
+            <table>
+                <tbody>
+                    <tr>
+                        <th>Movie</th>
+                        <td>Funny Pages</td>
+                    </tr>
+                    <tr>
+                        <th>Series</th>
+                        <td>Curb Your Enthusiasm</td>
+                    </tr>
+                    <tr>
+                        <th>Game</th>
+                        <td>Hatsune Miku: Project Mirai DX</td>
+                    </tr>
+                    <tr>
+                        <th>Anime</th>
+                        <td>Welcome to the NHK</td>
+                    </tr>
+                    <tr>
+                        <th>Movie</th>
+                        <td>Redline</td>
+                    </tr>
+                    <tr>
+                        <th>Anime</th>
+                        <td>Neon Genesis Evangelion</td>
+                    </tr>
+                    <tr>
+                        <th>Game</th>
+                        <td>Persona 5</td>
+                    </tr>
+                    <tr>
+                        <th>Anime</th>
+                        <td>GTO</td>
+                    </tr>
+                    <tr>
+                        <th>Anime</th>
+                        <td>Revolutionary Girl Utena</td>
+                    </tr>
+                    <tr>
+                        <th>Anime</th>
+                        <td>Chainsaw Man</td>
+                    </tr>
+                    <tr>
+                        <th>Anime</th>
+                        <td>Azumanga Daioh</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
     </div>
 </template>
 

nginx/vue/src/views/CV.vue

@@ -476,7 +476,8 @@ h1 {
 
 h2 {
     margin: 0px;
-    border-bottom: 2px solid var(--primary);
+    margin-bottom: 3px;
+    border-bottom: 1px solid var(--primary);
 }
 
 p {
@@ -490,14 +491,15 @@ table {
     color: var(--secondary);
     width: 100%;
     border-collapse: collapse;
+    border: 1px solid black;
 }
 
 td {
     /* border: 2px solid var(--tertiary); */
     border-top: 1px solid var(--tertiary);
-    padding: 1px 0px 1px 10px;
+    padding: 1px 10px 1px 10px;
     font-size: var(--font-size-text);
-    text-align: center;
+    text-align: left;
 }
 
 th {
@@ -571,7 +573,7 @@ textarea {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 2px solid var(--primary);
+    border-bottom: 1px solid var(--primary);
 }
 
 .contact-details {

nginx/vue/src/views/Home.vue

@@ -18,23 +18,22 @@ import Overlay from "@/components/Overlay.vue";
     <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/star.gif" class="ov1" /> -->
-                <img src="/img/memes/welcome2.png" class="ov2" />
+                <!-- <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" />
+                <!-- <img src="/img/memes/beer.png" class="ov6" /> -->
             </Overlay>
 
-            <h1>hello</h1>
             <Intro class="intro bdr-primary bg-primary" />
             <Listening class="listening bdr-primary bg-primary" />
             <Stamps class="stamps bdr-primary bg-primary" />
             <Feed class="feed bdr-primary bg-primary" />
             <Links class="links bdr-primary bg-primary" />
             <Collage class="collage bdr-primary bg-primary" />
+            <Watching class="watching bdr-primary bg-primary" />
             <Favorites class="favorites bdr-primary bg-primary" />
             <Gym class="gym bdr-primary bg-primary" />
-            <Watching class="watching bdr-primary bg-primary" />
         </div>
     </main>
     <img src="/img/memes/fire-woman.gif" class="ov4" />
@@ -78,7 +77,7 @@ import Overlay from "@/components/Overlay.vue";
     grid-row: 5 / span 4;
 }
 
-.favorites {
+.watching {
     grid-column: span 4;
     grid-row: span 2;
 }
@@ -87,7 +86,7 @@ import Overlay from "@/components/Overlay.vue";
     grid-row: span 2;
 }
 
-.watching {
+.favorites {
     grid-column: span 3;
     grid-row: span 2;
 }
@@ -108,7 +107,7 @@ import Overlay from "@/components/Overlay.vue";
 .ov3 {
     width: 200px;
     position: absolute;
-    bottom: -150px;
+    bottom: -50px;
     left: -200px;
 }
 .ov4 {
@@ -120,8 +119,8 @@ import Overlay from "@/components/Overlay.vue";
 .ov5 {
     height: 100px;
     position: absolute;
-    top: -100px;
+    top: 100px;
-    right: 200px;
+    right: -100px;
 }
 .ov6 {
     height: 250px;