From a07e1aeffe790f808d26910cd98256d8d3825548 Mon Sep 17 00:00:00 2001
From: Keyemail <rosenlofpatrick2022@gmail.com>
Date: Sun, 5 May 2024 20:24:26 -0700
Subject: [PATCH] Commment Section & Designs

---
 src/views/HomePage.vue | 68 +++++++++++++++++++++++++++++++++++++++---
 1 file changed, 64 insertions(+), 4 deletions(-)

diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 69d1f83..9d484a8 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -11,7 +11,32 @@
       <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>
     <article>
-      <h1>Comments!</h1> 
+      <h1>Comments! Please leave one!</h1>
+      <div>
+	<span>Me: Hello!</span>
+	<span>Me: Hello!</span>
+	<span>Me: Hello! this is a very long text thats suppose to take the entire screen so we can see how it handles mutiple if not triple the amount of lines it suppose to use.</span>
+	<span>Me: Hello!</span>
+	<span>Me: Hello!</span>
+	<span>Me: Hello!</span>
+	<span>Me: Hello!</span>
+	<span>Me: Hello!</span>
+	<span>Me: Hello!</span>
+	<span>Me: Hello!</span>
+	<span>Me: Hello!</span>
+	<span>Me: Hello!</span>
+	<span>Me: Hello!</span>
+	<span>Me: Hello!</span>
+	<span>Me: Hello!</span>
+	<span>Me: Hello!</span>
+	<span>Me: Hello!</span>
+	<span>Me: Hello!</span>
+	<span>Me: Hello!</span>
+	<span>Me: Hello!</span>
+	<span>Me: Hello!</span>
+	<span>Me: Hello!</span>	
+      </div>
+      <input type="text" placeholder="Start Typing.." required minlength="1"/>
     </article>
   </div>
 </template>
@@ -70,6 +95,9 @@ header h1 {
   width: 750px;
   color: white;
   font-family: 'Rubik', sans-serif;
+  background-color: #151d2f;
+  border-radius: 10px;
+  padding: 20px;
 }
 
 .intro h1 {
@@ -87,9 +115,9 @@ header h1 {
 }
 
 article {
- background-color: #101a30;
- height: 250px;
- width: 430px;
+ background-color: #151d2f;
+ height: 350px;
+ width: 630px;
  margin: 90px 0;
  border-radius: 10px;
  padding: 20px;
@@ -99,6 +127,38 @@ article h1 {
   font-size: 1.5rem;
   color: white;
   font-family: 'Rubik', sans-serif;
+  width: 100%;
+  text-align: center;
+}
+
+article div {
+  color: white;
+  font-family: 'Rubik', sans-serif;
+  font-weight: 300;
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column-reverse;
+  overflow: auto;
+  max-height: 240px;
+  background-color: #111826;
+  padding: 10px;
+  border-radius: 10px;
+}
+
+article span {
+  margin: 8px 0;
+}
+
+article input {
+  all: unset;
+  margin-top: 10px;
+  background-color: #111826;
+  height: 40px;
+  color: white;
+  padding: 5px;
+  border-radius: 10px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 @media screen and (max-width: 450px){