all kind of modifications

src/components/Footer.vue

@@ -1,28 +1,29 @@
 <script setup>
 import { ref } from 'vue';
 
-const show = ref(true)
+const show = ref(false)
 
 </script>
 <template>
+<button class="arrow" @click="show = !show">
   <svg
-  viewBox="0 0 20 20"
+  viewBox="0 0 10 7.4"
   class="arrow"
-  v-bind:class="show ? 'down' : ''"
-  @click="show = !show"
+  :class="{'down': show}"
   >
-    <circle
-    style="stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-    id="path833"
-    cx="10"
-    cy="10"
-    r="8" />
-    <path
-      style="fill:none;stroke:#000000;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-      d="M 5.5,11 10,7 14.5,11"
-      id="path841"
-      sodipodi:nodetypes="ccc" />
+  <!--
+  This circle is now make the button...
+   <circle
+  style="stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+  id="path833"
+  cx="10"
+  cy="10"
+  r="8" /> -->
+  <path
+  style="fill:none;stroke:#000000;stroke-width:1.0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+  d="M 1,5 5,1 9,5"/>
   </svg>
+</button>
     
   <div class="footer"
     v-bind:class="show ? '' : 'hide'">
@@ -133,9 +134,8 @@ const show = ref(true)
         </g>
       </g>
     </svg>
-    <div class="raffi">
-     COUCOU
-      <!-- <svg id = "raffi" viewBox="75 -50 300 150"> -->
+    
+      <svg id = "raffi" viewBox="75 -50 300 150">
         <path id="raffi_path"
         style="fill:none;
         stroke-width:6;
@@ -153,8 +153,7 @@ M 268.00837,42.908163 c -26.42894,-1.402892 -17.3056,39.667651 -1.54342,31.36458
 M 283.01637,21.941476 c 13.77166,-17.5948162 20.26231,-58.430437 14.87852,-54.688625 -16.63519,11.561933 1.50986,84.878597 -3.86255,94.259788 -2.77674,4.848515 -20.37598,-8.366388 -16.48804,-18.315105 2.64201,-6.760505 6.86016,-5.127064 11.95096,-8.174896
 M 312.83425,36 313,29
 M 311.63779,10 312.2454,10"/>
-<!-- </svg> -->
-</div>
+</svg>
 <svg
     viewBox="465 -39 150 175"
     style="height : 1.8em"
@@ -220,7 +219,7 @@ M 311.63779,10 312.2454,10"/>
     justify-content: center;
     flex-wrap: wrap;
     background-color: hsla(0, 0%, 0%, 0.904);
-    min-height:3.5em;
+    min-height:2.5em;
     width: 100%;
     max-width: $maxWidth;
     z-index: 9;
@@ -229,61 +228,56 @@ M 311.63779,10 312.2454,10"/>
       transform:translateY(100%)
     }
   }
-  svg{
-    height: 2.5em;
-    & > circle{
-      fill:$action-normal;
-      transition : 0.25s;
-    }
+svg{
+  height: 2em;
   }
-  h1{
-    font-size: 2em;
-    margin-right: 0.5em;
-    color:white;
-  }
-  
-    .raffi{
-      background: linear-gradient(90deg, #0f0, #f0f, #00f, #FF0, #0ff);
 
-      color:transparent;
-
-    }
-    .stop1{
-      stop-color:#f0f;
-    }
-    .stop2{
-      offset-gradient: 20%;
-      stop-color:#f00;
-    }
-    .stop3{
-      stop-color:#0f0;
-    }
-    .stop4{
-      stop-color:#00f;
-    }
-    .stop5{
-      stop-color:#f0f;
-    }
-  
-  .arrow{
-    margin-left: 0.4em;
-    position : fixed;
+  button.arrow{
+    position:fixed;
     bottom:0.5em;
-    transition: 0.35s;
     z-index: 99;
-    &.up{
-      transform: rotate(0deg);
-    }
-    &.down{
-      transform: rotate(180deg);
+    aspect-ratio: 1;
+    width:2.1em;
+    text-align: center;
+    border: none;
+    background-color: $action-normal;
+    border-radius: 50%;
+    
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    
+    margin-left:0.5em;
+    padding:0;
+    //box-sizing: border-box;
+    & > svg{
+      transition: 0.35s;
+      width:75%;
+      margin: 0;
+      //position: absolute;
+      transform: scale(1, 1);
+      &.down {
+        transform: scale(1, -1);
+      }
+    
     }
     &:hover{
       cursor: pointer;
       & > circle{
       fill:$action-light;
     }
-    }
   }
+}
+  
+
+h1{
+  font-size: 2em;
+  margin-right: 0.5em;
+  color:white;
+}
+
+  
   @supports (backdrop-filter: blur(0.5rem)){
     div.footer{
       background-color: hsla(0, 100%, 0%, 0.25);