edit: modif mineure CSS

started: task#4 (responsive hauteur sur welcome + regen)

src/MainContent.vue

@@ -84,11 +84,18 @@ import { toRaw } from 'vue'
       .imgStyle{
         width:250px;
       }
-
+      @media (min-height:720px){
         #regenBtn{
           left:3.33%;
           bottom:3.33%;
         }
+      }
+      @media (max-height:720px){
+        #regenBtn{
+          left:3.33%;
+          bottom:6%;
+        }
+      }
 
       /*Highlights size*/
           .imgStyle.highlightItem{

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,6 +180,7 @@
 }
 /*===============format large*/
 @media (min-width:500px){
+  @media (min-height:720px){
     #welcomeBtn{
       left:3.33%;
       bottom:8.5%;
@@ -188,6 +191,18 @@
       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{

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*/