Fixed styles on main and nav

src/App.vue

@@ -16,9 +16,19 @@ export default {
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap');
 
+:root {
+  --bg-color: #192236;
+  --bg-alt-color: #151d2f;
+  --fg-color: #fff;
+  --padding: 20px;
+}
+
+body {
+  background-color: var(--bg-color)
+}
+
 html, body, #app {
   scroll-behavior: smooth;
-  background-color: #192236;
 }
 
 #app {
@@ -26,11 +36,12 @@ html, body, #app {
   flex-direction: column;
   max-width: 1920px;
   margin: auto;
-  padding: 0px 20px;
+  padding: var(--padding);
 }
 
 * { 
   margin: 0;
   padding: 0;
+  box-sizing: border-box; 
 }
 </style>

src/components/NavBar.vue

@@ -1,24 +1,39 @@
 <template>
-  <div class="navbar">
+  <nav>
     <h1>Keyemail</h1>
-    <ul class="navContents" v-if="!(isMobile() || smallScreen)">
+    <ul v-if="!(isMobile() || smallScreen)">
-      <li><router-link to="/">Home</router-link></li>
+      <li>
-      <li><router-link to="/gallery">Gallery</router-link></li>
+        <router-link to="/">Home</router-link>
-      <li><router-link to="/socials">Socials</router-link></li>
+      </li>
-      <li><a href="https://git.keyemail.dev/explore/">Projects</a></li>
+      <li>
+        <router-link to="/gallery">Gallery</router-link>
+      </li>
+      <li>
+        <router-link to="/socials">Socials</router-link>
+      </li>
+      <li>
+        <a href="https://git.keyemail.dev/explore/">Git</a>
+      </li>
     </ul>
-    <div class="mobileNavButton" v-else>
+    <i class="fa-solid fa-x" @click="mobileUI(); handleResize();" v-else-if="turnOnMobileUI"></i>
-      <i class="fa-solid fa-x" @click="mobileUI(); handleResize();" v-if="turnOnMobileUI"></i>
     <i class="fas fa-bars" @click="mobileUI();" v-else></i>
-    </div>
+  </nav>
-  </div>
+
-  <div class="mobileNav" v-if="turnOnMobileUI">
+  <div id="mobileNav" v-if="turnOnMobileUI">
-    <div class="mobileNavContents">
+    <div>
       <ul>
-        <li><router-link to="/" @click="mobileUI()">Home</router-link></li>
+        <li>
-        <li><router-link to="/gallery" @click="mobileUI()">Gallery</router-link></li>
+          <router-link to="/" @click="mobileUI()">Home</router-link>
-        <li><router-link to="/socials" @click="mobileUI()">Socials</router-link></li>
+        </li>
-        <li><a href="https://git.keyemail.dev/explore/">Projects</a></li>
+        <li>
+          <router-link to="/gallery" @click="mobileUI()">Gallery</router-link>
+        </li>
+        <li>
+          <router-link to="/socials" @click="mobileUI()">Socials</router-link>
+        </li>
+        <li>
+          <a href="https://git.keyemail.dev/explore/">Git</a>
+        </li>
       </ul>
     </div> 
   </div>
@@ -66,7 +81,7 @@ export default {
 </script>
 
 <style scoped>
-.navbar{
+nav {
   position: relative;
   display: flex;
   align-items: center;
@@ -74,20 +89,19 @@ export default {
   color: white;
   font-family: 'Rubik', sans-serif;
   font-weight: 500;
-  margin-top: 20px;
 }
 
-.navbar h1{
+nav h1{
   width: fit-content;
   z-index: 10;
 }
 
-.navContents {
+nav ul {
   list-style: none;
   float: right;
 }
 
-.navContents li{
+nav ul li{
   display: inline;
   cursor: pointer;
   margin-left: 10px;
@@ -95,31 +109,28 @@ export default {
   transition: color 0.3s;
 }
 
-.navContents a {
+nav ul a {
   text-decoration: none;
   color: inherit;
 }
 
-.navContents li:hover{
+nav ul li:hover{
   color: #8ee8fc;
 }
 
-.mobileNavButton {
+nav i {
-  z-index: 10;
-}
-
-.mobileNavButton i {
   float: right;
   font-size: 35px;
   cursor: pointer;
   transition: 0.3s color;
+  z-index: 10;
 }
 
-.mobileNavButton i:hover {
+nav i:hover {
   color: #74d2f1;
 }
 
-.mobileNav {
+#mobileNav {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -129,21 +140,21 @@ export default {
   z-index: 9;
 }
 
-.mobileNav i {
+#mobileNav i {
   float: right;
   font-size: 35px;
   cursor: pointer;
   transition: 0.3s color;
 }
 
-.mobileNavContents {
+#mobileNav div {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
 }
 
-.mobileNavContents li {
+#mobileNav div li {
   cursor: pointer;
   margin-left: 10px;
   font-weight: 400;
@@ -154,13 +165,13 @@ export default {
   margin: 10px;
 }
 
-.mobileNavContents a {
+#mobileNav div a {
   color: white;
   text-decoration: none;
   transition: 0.3s color;
 }
 
-.mobileNavContents a:hover {
+#mobileNav div a:hover {
   color: #74d2f1;
 }
 </style>

src/views/HomePage.vue

@@ -7,27 +7,27 @@
       <h1>Keyemail</h1>
       <ul>
         <li @mouseover="showActiveBadge = true" @mouseleave="showActiveBadge = false">
-         <img src="@/assets/badges/code.svg" aria-label="CODE" width="25px" height="25px"/>
+         <img src="@/assets/badges/code.svg" aria-label="CODE"/>
          <div v-if="showActiveBadge">Active Developer</div>
          <template v-else/>
         </li>
         <li @mouseover="showHTMLBadge = true" @mouseleave="showHTMLBadge = false">
-          <img src="@/assets/badges/html.svg" aria-label="HTML5" width="25px" height="25px"/>
+          <img src="@/assets/badges/html.svg" aria-label="HTML5"/>
           <div v-if="showHTMLBadge">HTML</div>
           <template v-else/>
         </li>
         <li @mouseover="showCSSBadge = true" @mouseleave="showCSSBadge = false">
-         <img src="@/assets/badges/css.svg" aria-label="CSS3" width="25px" height="25px"/>
+         <img src="@/assets/badges/css.svg" aria-label="CSS3"/>
          <div v-if="showCSSBadge">CSS</div>
          <template v-else/>
         </li>
         <li @mouseover="showJavascriptBadge = true" @mouseleave="showJavascriptBadge = false">
-          <img src="@/assets/badges/js.svg" aria-label="JS" width="25px" height="25px"/>
+          <img src="@/assets/badges/js.svg" aria-label="JS"/>
           <div v-if="showJavascriptBadge">Javascript</div>
           <template v-else/>
         </li>
         <li @mouseover="showVue3Badge = true" @mouseleave="showVue3Badge = false">
-          <img src="@/assets/badges/vue.svg" aria-label="VUE3" width="25px" height="25px"/>
+          <img src="@/assets/badges/vue.svg" aria-label="VUE3"/>
           <div v-if="showVue3Badge">Vue 3</div>
           <template v-else/>
         </li>
@@ -127,11 +127,14 @@ header {
     background-color: #151d2f;
     color: white;
     font-family: 'Rubik', sans-serif;
+    box-sizing: content-box;
     border-radius: 5px;
   }
   
   img {
     pointer-events: none;
+    width: 100%;
+    height: 100%;
   }
   
   ul {
@@ -144,14 +147,12 @@ header {
   
   li {
     position: relative;
-    display: flex;
+    display: inherit;
-    align-items: center;
-    justify-content: center;
     text-decoration: none;
-    background-color: #151d2f;
+    background-color: var(--bg-alt-color);
     height: 30px;
     width: 30px;
-    box-sizing: border-box;
+    padding: 3px;
     border-radius: 5px;
     cursor: pointer;
   }
@@ -165,7 +166,7 @@ header {
   width: 100%;
   color: white;
   font-family: 'Rubik', sans-serif;
-  background-color: #151d2f;
+  background-color: var(--bg-alt-color);
   border-radius: 10px;
   padding: 20px;
   text-align: center;