From ce8181d3dbae3ead635c8961a2761a6412824862 Mon Sep 17 00:00:00 2001
From: vgaNAR6ta <vga.nar6.ta@gmail.com>
Date: Sun, 1 Mar 2026 06:18:43 +0100
Subject: [PATCH] edit: modif mineure CSS started: task#4 (responsive hauteur
 sur welcome + regen)

---
 src/MainContent.vue           | 15 ++++++++++----
 src/TopBar.vue                | 39 ++++++++++++++++++++++++++---------
 src/assets/main_pageStyle.css |  9 +++++++-
 3 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/src/MainContent.vue b/src/MainContent.vue
index bc6c386..5ff5482 100644
--- a/src/MainContent.vue
+++ b/src/MainContent.vue
@@ -84,10 +84,17 @@ import { toRaw } from 'vue'
       .imgStyle{
         width:250px;
       }
-
-      #regenBtn{
-        left:3.33%;
-        bottom:3.33%;
+      @media (min-height:720px){
+        #regenBtn{
+          left:3.33%;
+          bottom:3.33%;
+        }
+      }
+      @media (max-height:720px){
+        #regenBtn{
+          left:3.33%;
+          bottom:6%;
+        }
       }
 
       /*Highlights size*/
diff --git a/src/TopBar.vue b/src/TopBar.vue
index 2190333..c95be12 100644
--- a/src/TopBar.vue
+++ b/src/TopBar.vue
@@ -21,7 +21,9 @@
           <br>
           alors voici quelques infos sur mes pratiques :
           <br><br>
-          je pense qu'il ya déjà assez de vêtements sur cette Terre (merci la fast-fashion...) et qu'en recyclant ceux déjà existant on pourrat s'habiller PENDANT DES SIÈCLES!
+          je pense qu'il ya déjà assez de vêtements sur cette Terre (merci la fast-fashion...) et qu'en recyclant ceux déjà existant on pourrat s'habiller
+          <br>
+          PENDANT DES SIÈCLES!
           <br><br>
           je travaille une esthétique punk, brutaliste
           <br>
@@ -76,7 +78,7 @@
       <p>Your Contact Info (so i can reply ^^) :</p>
       <input type="text" ref="yourContact" class="formContact" id="your_contact" placeholder="Phone or E-mail or Instagram or Signal">
       <p>Your Message :</p>
-      <input type="text" ref="yourMessage" class="formContact" id="your_message" placeholder="Type whatever you want here ...">
+      <textarea ref="yourMessage" class="formContact" id="your_message" placeholder="Type whatever you want here ..." wrap="hard" cols="33"></textarea>
       <button type="button" id="sendMsg">SEND !</button>
     </div>
 
@@ -178,14 +180,27 @@
 }
 /*===============format large*/
 @media (min-width:500px){
-  #welcomeBtn{
-    left:3.33%;
-    bottom:8.5%;
-  }
+  @media (min-height:720px){
+    #welcomeBtn{
+      left:3.33%;
+      bottom:8.5%;
+    }
 
-  #welcome_pannel{
-    bottom:13.12%;
-    left:3.33%;
+    #welcome_pannel{
+      bottom:13.12%;
+      left:3.33%;
+    }
+  }
+  @media (max-height:720px){
+    #welcomeBtn{
+      left:3.33%;
+      bottom:13%;
+    }
+
+    #welcome_pannel{
+      bottom:20%;
+      left:3.33%;
+    }
   }
 }
 
@@ -218,7 +233,7 @@
   border-width: thin;
   border-style: solid;
   color:var(--light-color);
-  width:94%;
+  width:300px;
   font-weight:lighter;
   border-radius: 30px;
   background-color: var(--dark-color);
@@ -235,6 +250,10 @@
 
 #your_message{
   height: 150px;
+  width:290px;
+  padding-top:5px;
+  padding-right: 15px;
+  border-radius: 20px;
 }
 
 #sendMsg{
diff --git a/src/assets/main_pageStyle.css b/src/assets/main_pageStyle.css
index 33e251a..563989a 100644
--- a/src/assets/main_pageStyle.css
+++ b/src/assets/main_pageStyle.css
@@ -87,6 +87,10 @@ a{
   animation: float 1s ease-in-out infinite;
 }
 
+.floating:hover{
+  animation: none;
+}
+
 @keyframes float {
   0%   { transform: translateY(0px); }
   35%  { transform: translateY(1px); }
@@ -313,7 +317,7 @@ header {
 #about{
   position:fixed;
   background-color: var(--dark-color);
-  height: auto;
+  height: 500px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -345,6 +349,9 @@ header {
   font-size:16px;
   color: var(--light-color);
   font-weight: lighter;
+  padding-right: 10px;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
 }
 
 /*===============format haut*/