Fixed styling for home

src/App.vue

@@ -22,6 +22,7 @@ export default {
   --bg-alt-hover-color: #111726;
   --fg-color: #fff;
   --padding: 20px;
+  --font: 'Rubik', sans-serif;
 }
 
 body {

src/views/HomePage.vue

@@ -1,6 +1,6 @@
 <template>
   <header>
-    <a class="pfp" href="https://www.pixiv.net/en/artworks/118037520">
+    <a id="pfp" href="https://www.pixiv.net/en/artworks/118037520">
       <img src="@/assets/profile.jpg"/> 
     </a>
     <div id="name">
@@ -34,11 +34,11 @@
       </ul> 
     </div>
   </header>
-    <div class="intro">
-      <h1>Hi, I'm Keyemail or Patrick.</h1>
-      <p>I specialize in IT and web development-related stuff, but I also love doing a variety of different hobbies such as Flight Simulator, or learning Japanese. I daily run an Arch Linux machine as my main system and support Linux in every way. I'm glad to meet you! </p>
-    </div>
-  <i class="fa-solid fa-arrow-down morearrow" @click="downArrow()" title="Nothing.."></i>
+  <main>
+    <h1>Hi, I'm Keyemail or Patrick.</h1>
+    <p>I specialize in IT and web development-related stuff, but I also love doing a variety of different hobbies such as Flight Simulator, or learning Japanese. I daily run an Arch Linux machine as my main system and support Linux in every way. I'm glad to meet you! </p>
+  </main>
+  <i class="fa-solid fa-arrow-down" id="morecontent"></i>
 </template>
 
 <script>
@@ -51,23 +51,8 @@ export default {
       showJavascriptBadge: false,
       showVue3Badge: false
     }
-  },
-  methods: {
-    downArrow(){
-      if(counter >= 4){
-        var quack = new Audio(require('@/assets/sounds/duck-quack.mp3'));
-        quack.play();
-	alert('You just got quacked!');
-        counter = 0;
-      } else {
-        alert('Nothing to scroll down to, may come useful later though..');
-        counter++;
-      }
-    }
   }
 }
-
-var counter = 0;
 </script>
 
 <style scoped>
@@ -85,15 +70,15 @@ header {
   height: 180px;
   width: 100%;
   border-radius: 10px;
-  font-family: 'Rubik', sans-serif;
+  font-family: var(--font);
   
   h1 {
-    color: white;
+    color: var(--fg-color);
     font-size: 3rem; 
   }
 }
 
-.pfp {
+#pfp {
   height: 130px !important;
   width: 130px !important;
   border: solid;
@@ -103,7 +88,7 @@ header {
   overflow: hidden;
   margin-left: 20px;
   user-select: none;
-  
+
   img {
     width:100%;
     height:100%;
@@ -114,6 +99,7 @@ header {
 
 #name {
   margin-left: 20px;
+  
   div {
     top: calc(100% + 5px);
     left: 50%;
@@ -130,13 +116,11 @@ header {
     box-sizing: content-box;
     border-radius: 5px;
   }
-  
   img {
     pointer-events: none;
     width: 100%;
     height: 100%;
   }
-  
   ul {
     display: flex;
     flex-direction: row;
@@ -144,7 +128,6 @@ header {
     gap: 5px;
     user-select: none;
   }
-  
   li {
     position: relative;
     display: inherit;
@@ -158,25 +141,24 @@ header {
   }
 }
 
-.intro {
+main {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 40px;
   width: 100%;
-  color: white;
+  color: var(--fg-color);
   font-family: 'Rubik', sans-serif;
   background-color: var(--bg-alt-color);
   border-radius: 10px;
   padding: 20px;
   text-align: center;
   box-sizing: border-box;
-  
+
   h1 {
     font-size: 3.5rem;
     font-weight: 500;
   }
-
   p {
     margin-top: 15px;
     font-size: 1.8rem;
@@ -185,10 +167,10 @@ header {
   }
 }
 
-.morearrow {
+#morecontent {
   cursor: pointer;
-  font-size: 40px;
-  color: white;
+  font-size: 3rem;
+  color: var(--fg-color);
   margin: 40px auto;
   margin-top: 80px;
 }
@@ -199,6 +181,7 @@ header {
     height: 240px;
     justify-content: center;
   }
+
   #name {
     display: flex;
     flex-direction: column;
@@ -210,13 +193,16 @@ header {
   header h1 {
     margin-left: 0px;
   }
-  .intro h1 {
-    font-size: 3rem;
+  main { 
+    h1 {
+      font-size: 3rem;
+    }
+    p {
+      font-size: 1.8rem;
+    }
   }
-  .intro p {
-    font-size: 1.8rem;
-  }
-  .pfp{
+
+  #pfp{
     margin-left: 0px;
   }
 }