make artist page responsive on sm devices (ongoing)

components/Common/Banner.vue

@@ -118,12 +118,16 @@ const props = defineProps({
   width: 13rem;
   height: 10rem;
   background: var(--secondary-color);
+
+  @media (max-width: 600px) {
+    width: 50%;
+  }
 }
 
 .logo-square {
   position: absolute;
   bottom: 0;
-  right: 13rem;
+  right: 10rem;
   width: 13rem;
   height: 10rem;
 
@@ -132,6 +136,11 @@ const props = defineProps({
     height: 50%;
     margin-top: 2.5rem;
   }
+
+  @media (max-width: 600px) {
+    right: 50%;
+    width: 50%;
+  }
 }
 .logo-square:not(.alt-theme) {
   background: var(--primary-color);

components/Common/Presentation.vue

@@ -66,7 +66,7 @@ Section "Présentation" d'une page Logiciel
             {{ section2title }}
           </h3>
 
-          <div class="d-flex flex-row">
+          <div class="picto-container">
             <div
               v-for="picto in pictos"
               :key="picto.text"
@@ -201,6 +201,23 @@ const props = defineProps({
     font-size: 1.5rem;
     font-weight: 400;
   }
+
+  @media (max-width: 600px) {
+    width: 280px;
+
+    .details {
+      margin-left: 0;
+    }
+  }
+}
+
+.picto-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  @media (max-width: 600px) {
+  }
 }
 
 .picto {
@@ -226,6 +243,20 @@ const props = defineProps({
     background-repeat: no-repeat;
     background-position: center;
   }
+
+  @media (max-width: 600px) {
+    width: 50%;
+    margin: 0 auto;
+
+    .text {
+      width: 90%;
+    }
+
+    .img {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 
 h3 {
@@ -233,6 +264,7 @@ h3 {
   font-size: 34px;
   font-weight: 400;
   line-height: 38px;
+  max-width: 90%;
 }
 
 h3:first-child {

components/Logiciels/Title.vue

@@ -2,17 +2,17 @@
 <template>
   <LayoutContainer>
     <div class="container-title">
-      <v-col cols="3" class="lateral-text">
+      <v-col v-if="mdAndUp" cols="3" class="lateral-text">
         <span>
           <slot name="left-text"/>
         </span>
       </v-col>
-      <v-col cols="6">
+      <v-col cols="12" md="6">
         <h1>
           <slot />
         </h1>
       </v-col>
-      <v-col cols="3" class="lateral-text">
+      <v-col v-if="mdAndUp" cols="3" class="lateral-text">
         <span>
           <slot name="right-text" />
         </span>
@@ -21,6 +21,12 @@
   </LayoutContainer>
 </template>
 
+<script setup lang="ts">
+import { useDisplay } from "vuetify";
+
+const { mdAndUp } = useDisplay()
+</script>
+
 <style scoped lang="scss">
 .container-title {
   display: flex;
@@ -37,6 +43,11 @@ h1 {
   line-height: 77px;
   color: var(--on-neutral-color);
   text-align: center;
+
+  @media (max-width: 600px) {
+    font-size: 42px;
+    line-height: 46px;
+  }
 }
 
 .lateral-text {